diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..619011b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 StayThree + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/core/package.json b/packages/core/package.json index f3feeb3..375c446 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -7,14 +7,58 @@ "./signals": "./src/signals.ts", "./router": "./src/router.ts", "./theme": "./src/theme.css", - "./dialog": "./src/components/dialog/index.ts", - "./select": "./src/components/select/index.ts", - "./tabs": "./src/components/tabs/index.ts", + "./animations": "./src/animations.css", + "./counter": "./src/components/counter/index.ts", "./accordion": "./src/components/accordion/index.ts", - "./form": "./src/components/form/index.ts", - "./toast": "./src/components/toast/index.ts", + "./alert": "./src/components/alert/index.ts", + "./alert-dialog": "./src/components/alert-dialog/index.ts", + "./avatar": "./src/components/avatar/index.ts", + "./badge": "./src/components/badge/index.ts", + "./breadcrumbs": "./src/components/breadcrumbs/index.ts", + "./button": "./src/components/button/index.ts", + "./calendar": "./src/components/calendar/index.ts", + "./card": "./src/components/card/index.ts", + "./checkbox": "./src/components/checkbox/index.ts", + "./collapsible": "./src/components/collapsible/index.ts", + "./combobox": "./src/components/combobox/index.ts", + "./command-palette": "./src/components/command-palette/index.ts", + "./context-menu": "./src/components/context-menu/index.ts", + "./data-table": "./src/components/data-table/index.ts", + "./date-picker": "./src/components/date-picker/index.ts", + "./dialog": "./src/components/dialog/index.ts", + "./drawer": "./src/components/drawer/index.ts", "./dropdown-menu": "./src/components/dropdown-menu/index.ts", - "./popover": "./src/components/popover/index.ts" + "./form": "./src/components/form/index.ts", + "./hover-card": "./src/components/hover-card/index.ts", + "./image": "./src/components/image/index.ts", + "./link": "./src/components/link/index.ts", + "./loading-indicator": "./src/components/loading-indicator/index.ts", + "./listbox": "./src/components/listbox/index.ts", + "./meter": "./src/components/meter/index.ts", + "./navigation-menu": "./src/components/navigation-menu/index.ts", + "./number-field": "./src/components/number-field/index.ts", + "./pagination": "./src/components/pagination/index.ts", + "./popover": "./src/components/popover/index.ts", + "./progress": "./src/components/progress/index.ts", + "./radio-group": "./src/components/radio-group/index.ts", + "./select": "./src/components/select/index.ts", + "./separator": "./src/components/separator/index.ts", + "./skeleton": "./src/components/skeleton/index.ts", + "./slider": "./src/components/slider/index.ts", + "./switch": "./src/components/switch/index.ts", + "./tabs": "./src/components/tabs/index.ts", + "./text-field": "./src/components/text-field/index.ts", + "./toast": "./src/components/toast/index.ts", + "./toggle": "./src/components/toggle/index.ts", + "./toggle-group": "./src/components/toggle-group/index.ts", + "./tooltip": "./src/components/tooltip/index.ts", + "./virtual-list": "./src/components/virtual-list/index.ts", + "./tags-input": "./src/components/tags-input/index.ts", + "./typewriter": "./src/components/typewriter/index.ts", + "./stagger": "./src/components/stagger/index.ts", + "./reveal": "./src/components/reveal/index.ts", + "./parallax": "./src/components/parallax/index.ts", + "./wizard": "./src/components/wizard/index.ts" }, "scripts": { "build": "tsdown", diff --git a/packages/core/src/animations.css b/packages/core/src/animations.css new file mode 100644 index 0000000..0c2a2b8 --- /dev/null +++ b/packages/core/src/animations.css @@ -0,0 +1,137 @@ +/* PettyUI Animations — stagger, reveal, and transition CSS */ + +.petty-stagger-hidden { opacity: 0; } + +.petty-stagger-fade-up { + animation: pettyFadeUp 0.5s ease both; +} +.petty-stagger-fade-down { + animation: pettyFadeDown 0.5s ease both; +} +.petty-stagger-fade-left { + animation: pettyFadeLeft 0.5s ease both; +} +.petty-stagger-fade-right { + animation: pettyFadeRight 0.5s ease both; +} +.petty-stagger-scale { + animation: pettyScale 0.5s ease both; +} +.petty-stagger-blur { + animation: pettyBlur 0.6s ease both; +} + +.petty-reveal-hidden { opacity: 0; } + +.petty-reveal-fade-up { + animation: pettyFadeUp 0.6s ease both; +} +.petty-reveal-fade-down { + animation: pettyFadeDown 0.6s ease both; +} +.petty-reveal-fade-left { + animation: pettyFadeLeft 0.6s ease both; +} +.petty-reveal-fade-right { + animation: pettyFadeRight 0.6s ease both; +} +.petty-reveal-scale { + animation: pettyScale 0.6s ease both; +} +.petty-reveal-blur { + animation: pettyBlur 0.7s ease both; +} + +petty-typewriter.petty-typewriter-cursor::after { + content: "|"; + animation: pettyCursorBlink 0.8s step-end infinite; +} +petty-typewriter[data-state="done"].petty-typewriter-cursor::after { + animation: pettyCursorBlink 0.8s step-end 3; +} + +petty-counter { font-variant-numeric: tabular-nums; } + +@keyframes pettyFadeUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes pettyFadeDown { + from { opacity: 0; transform: translateY(-20px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes pettyFadeLeft { + from { opacity: 0; transform: translateX(20px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes pettyFadeRight { + from { opacity: 0; transform: translateX(-20px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes pettyScale { + from { opacity: 0; transform: scale(0.9); } + to { opacity: 1; transform: scale(1); } +} +@keyframes pettyBlur { + from { opacity: 0; filter: blur(8px); transform: translateY(10px); } + to { opacity: 1; filter: blur(0); transform: translateY(0); } +} +@keyframes pettyCursorBlink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +dialog[open] { + animation: pettyDialogIn 0.2s ease; +} +@keyframes pettyDialogIn { + from { opacity: 0; transform: translateY(8px) scale(0.98); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +[popover]:popover-open { + animation: pettyPopoverIn 0.15s ease; +} +@keyframes pettyPopoverIn { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } +} + +[data-part="toast"] { + animation: pettySlideIn 0.3s ease; +} +@keyframes pettySlideIn { + from { opacity: 0; transform: translateX(100%); } + to { opacity: 1; transform: translateX(0); } +} + +petty-loading-indicator { display: inline-flex; align-items: center; justify-content: center; position: relative; } +petty-loading-indicator [data-part="container"] { display: flex; align-items: center; justify-content: center; position: relative; } + +petty-loading-indicator [data-part="indicator"] { + border-radius: 50%; + border: 3px solid rgba(54, 192, 241, 0.12); + border-top-color: #36c0f1; + border-right-color: rgba(54, 192, 241, 0.4); + animation: pettyLoadSpin 1.1s linear infinite, pettyLoadPulse 2.2s ease-in-out infinite; +} + +petty-loading-indicator [data-part="container"]::before { + content: ""; + position: absolute; + inset: -2px; + border-radius: 50%; + border: 2px solid transparent; + border-bottom-color: rgba(54, 192, 241, 0.2); + border-left-color: rgba(54, 192, 241, 0.1); + animation: pettyLoadSpin 2.4s linear infinite reverse; +} + +@keyframes pettyLoadSpin { + to { rotate: 360deg; } +} + +@keyframes pettyLoadPulse { + 0%, 100% { box-shadow: 0 0 8px rgba(54, 192, 241, 0.15); } + 50% { box-shadow: 0 0 20px rgba(54, 192, 241, 0.35); } +} diff --git a/packages/core/src/components/accordion/accordion.schema.ts b/packages/core/src/components/accordion/accordion.schema.ts new file mode 100644 index 0000000..e8e9526 --- /dev/null +++ b/packages/core/src/components/accordion/accordion.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-accordion", description: "Headless accordion built on native
elements with single/multiple mode", tier: 1, attributes: [{ name: "type", type: "string", default: "single", description: "Accordion mode: single closes others on open, multiple allows many open" }], parts: [{ name: "content", element: "div", description: "Content area inside each details element" }], events: [{ name: "petty-change", detail: "{ value: string[] }", description: "Fires when open items change, detail contains array of open values" }], example: `
Section 1
Content 1
` }; diff --git a/packages/core/src/components/accordion/accordion.ts b/packages/core/src/components/accordion/accordion.ts index 107cb21..c8d8b0c 100644 --- a/packages/core/src/components/accordion/accordion.ts +++ b/packages/core/src/components/accordion/accordion.ts @@ -1,3 +1,5 @@ +import { emit, listen } from "../../shared/helpers"; + /** * PettyAccordion — headless accordion built on native `
` elements. * @@ -63,10 +65,7 @@ export class PettyAccordion extends HTMLElement { #dispatchChange(): void { const openValues = this.#collectOpenValues(); - this.dispatchEvent(new CustomEvent("petty-change", { - bubbles: true, - detail: { value: openValues }, - })); + emit(this, "change", { value: openValues }); } #collectOpenValues(): string[] { diff --git a/packages/core/src/components/accordion/index.ts b/packages/core/src/components/accordion/index.ts index 3489b5f..53b2216 100644 --- a/packages/core/src/components/accordion/index.ts +++ b/packages/core/src/components/accordion/index.ts @@ -1,5 +1,6 @@ -export { PettyAccordion } from "./accordion"; -export { PettyAccordionItem } from "./accordion-item"; +import { PettyAccordion } from "./accordion"; +import { PettyAccordionItem } from "./accordion-item"; +export { PettyAccordion, PettyAccordionItem }; if (!customElements.get("petty-accordion")) { customElements.define("petty-accordion", PettyAccordion); diff --git a/packages/core/src/components/alert-dialog/alert-dialog.schema.ts b/packages/core/src/components/alert-dialog/alert-dialog.schema.ts new file mode 100644 index 0000000..03516f5 --- /dev/null +++ b/packages/core/src/components/alert-dialog/alert-dialog.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-alert-dialog", description: "Confirmation dialog with role=alertdialog on native dialog element", tier: 3, attributes: [], parts: [], events: [{ name: "petty-close", detail: "{ value: string }", description: "Fires when dialog closes, detail contains the return value" }], example: `

Confirm

Are you sure?

` }; diff --git a/packages/core/src/components/alert-dialog/alert-dialog.ts b/packages/core/src/components/alert-dialog/alert-dialog.ts new file mode 100644 index 0000000..1749a4c --- /dev/null +++ b/packages/core/src/components/alert-dialog/alert-dialog.ts @@ -0,0 +1,59 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettyAlertDialog — confirmation dialog with role="alertdialog" on native dialog. */ +export class PettyAlertDialog extends HTMLElement { + #cleanup: (() => void) | null = null; + + get dialogElement(): HTMLDialogElement | null { + return this.querySelector("dialog"); + } + + get isOpen(): boolean { + return this.dialogElement?.open ?? false; + } + + /** Opens the alert dialog as a modal. */ + open(): void { + const dlg = this.dialogElement; + if (dlg && !dlg.open) dlg.showModal(); + } + + /** Closes the alert dialog with an optional return value. */ + close(returnValue?: string): void { + const dlg = this.dialogElement; + if (dlg?.open) dlg.close(returnValue); + } + + connectedCallback(): void { + const dlg = this.dialogElement; + if (!dlg) return; + dlg.setAttribute("role", "alertdialog"); + dlg.setAttribute("aria-modal", "true"); + this.#linkAria(dlg); + this.#cleanup = listen(dlg, [["close", this.#handleClose]]); + } + + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + } + + #handleClose = (): void => { + const dlg = this.dialogElement; + emit(this, "close", { value: dlg?.returnValue ?? "" }); + }; + + #linkAria(dlg: HTMLDialogElement): void { + const heading = dlg.querySelector("h1, h2, h3, h4, h5, h6"); + if (heading) { + if (!heading.id) heading.id = uniqueId("petty-adlg-title"); + dlg.setAttribute("aria-labelledby", heading.id); + } + const desc = dlg.querySelector("p"); + if (desc) { + if (!desc.id) desc.id = uniqueId("petty-adlg-desc"); + dlg.setAttribute("aria-describedby", desc.id); + } + } +} diff --git a/packages/core/src/components/alert-dialog/index.ts b/packages/core/src/components/alert-dialog/index.ts new file mode 100644 index 0000000..991ab69 --- /dev/null +++ b/packages/core/src/components/alert-dialog/index.ts @@ -0,0 +1,6 @@ +import { PettyAlertDialog } from "./alert-dialog"; +export { PettyAlertDialog }; + +if (!customElements.get("petty-alert-dialog")) { + customElements.define("petty-alert-dialog", PettyAlertDialog); +} diff --git a/packages/core/src/components/alert/alert.schema.ts b/packages/core/src/components/alert/alert.schema.ts new file mode 100644 index 0000000..24b2b91 --- /dev/null +++ b/packages/core/src/components/alert/alert.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-alert", description: "Inline status message with variant-driven ARIA role", tier: 1, attributes: [{ name: "variant", type: "string", default: "default", description: "Alert variant: default, error, warning, success, info. Error/warning sets role=alert" }], parts: [], events: [], example: `

Something went wrong.

` }; diff --git a/packages/core/src/components/alert/alert.ts b/packages/core/src/components/alert/alert.ts new file mode 100644 index 0000000..7e215dd --- /dev/null +++ b/packages/core/src/components/alert/alert.ts @@ -0,0 +1,23 @@ +/** PettyAlert — inline status message with variant-driven ARIA role. */ +export class PettyAlert extends HTMLElement { + static observedAttributes = ["variant"]; + + get variant(): string { + return this.getAttribute("variant") ?? "default"; + } + + connectedCallback(): void { + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const v = this.variant; + this.dataset.variant = v; + const isUrgent = v === "error" || v === "warning"; + this.setAttribute("role", isUrgent ? "alert" : "status"); + } +} diff --git a/packages/core/src/components/alert/index.ts b/packages/core/src/components/alert/index.ts new file mode 100644 index 0000000..53aeb2c --- /dev/null +++ b/packages/core/src/components/alert/index.ts @@ -0,0 +1,6 @@ +import { PettyAlert } from "./alert"; +export { PettyAlert }; + +if (!customElements.get("petty-alert")) { + customElements.define("petty-alert", PettyAlert); +} diff --git a/packages/core/src/components/avatar/avatar.schema.ts b/packages/core/src/components/avatar/avatar.schema.ts new file mode 100644 index 0000000..4ac0c2d --- /dev/null +++ b/packages/core/src/components/avatar/avatar.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-avatar", description: "Image with automatic fallback display on load error", tier: 3, attributes: [], parts: [{ name: "fallback", element: "span", description: "Fallback content shown when image fails to load" }], events: [], example: `UserAB` }; diff --git a/packages/core/src/components/avatar/avatar.ts b/packages/core/src/components/avatar/avatar.ts new file mode 100644 index 0000000..83811f9 --- /dev/null +++ b/packages/core/src/components/avatar/avatar.ts @@ -0,0 +1,38 @@ +/** PettyAvatar — image with automatic fallback on load error. */ +export class PettyAvatar extends HTMLElement { + connectedCallback(): void { + this.dataset.state = "loading"; + const img = this.querySelector("img"); + if (!img) { this.#showFallback(); return; } + img.addEventListener("load", this.#onLoad); + img.addEventListener("error", this.#onError); + if (img.complete && img.naturalWidth > 0) this.#onLoad(); + else if (img.complete) this.#onError(); + } + + disconnectedCallback(): void { + const img = this.querySelector("img"); + img?.removeEventListener("load", this.#onLoad); + img?.removeEventListener("error", this.#onError); + } + + #onLoad = (): void => { + this.dataset.state = "loaded"; + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = ""; + if (fallback) fallback.style.display = "none"; + }; + + #onError = (): void => { + this.dataset.state = "error"; + this.#showFallback(); + }; + + #showFallback(): void { + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = "none"; + if (fallback) fallback.style.display = ""; + } +} diff --git a/packages/core/src/components/avatar/index.ts b/packages/core/src/components/avatar/index.ts new file mode 100644 index 0000000..67c504c --- /dev/null +++ b/packages/core/src/components/avatar/index.ts @@ -0,0 +1,6 @@ +import { PettyAvatar } from "./avatar"; +export { PettyAvatar }; + +if (!customElements.get("petty-avatar")) { + customElements.define("petty-avatar", PettyAvatar); +} diff --git a/packages/core/src/components/badge/badge.schema.ts b/packages/core/src/components/badge/badge.schema.ts new file mode 100644 index 0000000..cfb769b --- /dev/null +++ b/packages/core/src/components/badge/badge.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-badge", description: "Display-only status indicator with variant support", tier: 3, attributes: [{ name: "variant", type: "string", default: "default", description: "Visual variant for styling" }], parts: [{ name: "badge", element: "span", description: "The badge element itself (set automatically)" }], events: [], example: `Active` }; diff --git a/packages/core/src/components/badge/badge.ts b/packages/core/src/components/badge/badge.ts new file mode 100644 index 0000000..63eeda2 --- /dev/null +++ b/packages/core/src/components/badge/badge.ts @@ -0,0 +1,17 @@ +/** PettyBadge — display-only status indicator with variant support. */ +export class PettyBadge extends HTMLElement { + static observedAttributes = ["variant"]; + + get variant(): string { + return this.getAttribute("variant") ?? "default"; + } + + connectedCallback(): void { + this.dataset.variant = this.variant; + this.dataset.part = "badge"; + } + + attributeChangedCallback(): void { + this.dataset.variant = this.variant; + } +} diff --git a/packages/core/src/components/badge/index.ts b/packages/core/src/components/badge/index.ts new file mode 100644 index 0000000..8cff55e --- /dev/null +++ b/packages/core/src/components/badge/index.ts @@ -0,0 +1,6 @@ +import { PettyBadge } from "./badge"; +export { PettyBadge }; + +if (!customElements.get("petty-badge")) { + customElements.define("petty-badge", PettyBadge); +} diff --git a/packages/core/src/components/breadcrumbs/breadcrumb-item.ts b/packages/core/src/components/breadcrumbs/breadcrumb-item.ts new file mode 100644 index 0000000..814cf79 --- /dev/null +++ b/packages/core/src/components/breadcrumbs/breadcrumb-item.ts @@ -0,0 +1,24 @@ +/** PettyBreadcrumbItem — single breadcrumb with current-page detection. */ +export class PettyBreadcrumbItem extends HTMLElement { + static observedAttributes = ["current"]; + + connectedCallback(): void { + this.dataset.part = "item"; + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const isCurrent = this.hasAttribute("current"); + const target = this.querySelector("a") ?? this; + if (isCurrent) { + target.setAttribute("aria-current", "page"); + } else { + target.removeAttribute("aria-current"); + } + this.dataset.state = isCurrent ? "current" : "default"; + } +} diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts b/packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts new file mode 100644 index 0000000..eae828b --- /dev/null +++ b/packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-breadcrumbs", description: "Navigation breadcrumb trail with ARIA landmarks", tier: 3, attributes: [], parts: [{ name: "item", element: "li", description: "Individual breadcrumb item (on petty-breadcrumb-item)" }], events: [], example: `
    HomeDocs
` }; diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.ts b/packages/core/src/components/breadcrumbs/breadcrumbs.ts new file mode 100644 index 0000000..385ecf3 --- /dev/null +++ b/packages/core/src/components/breadcrumbs/breadcrumbs.ts @@ -0,0 +1,11 @@ +/** PettyBreadcrumbs — navigation breadcrumb trail with ARIA landmarks. */ +export class PettyBreadcrumbs extends HTMLElement { + connectedCallback(): void { + if (!this.querySelector("nav")) { + this.setAttribute("role", "navigation"); + } + this.setAttribute("aria-label", this.getAttribute("aria-label") ?? "Breadcrumb"); + const list = this.querySelector("ol, ul"); + if (list) list.setAttribute("role", "list"); + } +} diff --git a/packages/core/src/components/breadcrumbs/index.ts b/packages/core/src/components/breadcrumbs/index.ts new file mode 100644 index 0000000..bc28246 --- /dev/null +++ b/packages/core/src/components/breadcrumbs/index.ts @@ -0,0 +1,8 @@ +import { PettyBreadcrumbs } from "./breadcrumbs"; +import { PettyBreadcrumbItem } from "./breadcrumb-item"; +export { PettyBreadcrumbs, PettyBreadcrumbItem }; + +if (!customElements.get("petty-breadcrumbs")) { + customElements.define("petty-breadcrumbs", PettyBreadcrumbs); + customElements.define("petty-breadcrumb-item", PettyBreadcrumbItem); +} diff --git a/packages/core/src/components/button/button.schema.ts b/packages/core/src/components/button/button.schema.ts new file mode 100644 index 0000000..acaa7a7 --- /dev/null +++ b/packages/core/src/components/button/button.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-button", description: "Headless button wrapper with loading and disabled states", tier: 3, attributes: [{ name: "disabled", type: "boolean", description: "Disables the button" }, { name: "loading", type: "boolean", description: "Shows loading state, disables interaction" }], parts: [], events: [], example: `` }; diff --git a/packages/core/src/components/button/button.ts b/packages/core/src/components/button/button.ts new file mode 100644 index 0000000..0a4d986 --- /dev/null +++ b/packages/core/src/components/button/button.ts @@ -0,0 +1,53 @@ +/** + * PettyButton — headless button wrapper with loading and disabled states. + * + * Usage: + * ```html + * + * + * + * ``` + */ +export class PettyButton extends HTMLElement { + static observedAttributes = ["disabled", "loading"]; + + /** The child `
` }; diff --git a/packages/core/src/components/calendar/calendar.ts b/packages/core/src/components/calendar/calendar.ts new file mode 100644 index 0000000..4e75788 --- /dev/null +++ b/packages/core/src/components/calendar/calendar.ts @@ -0,0 +1,93 @@ +import { signal, effect } from "../../signals"; +import { emit } from "../../shared/helpers"; + +/** PettyCalendar — month grid with day selection and month navigation. */ +export class PettyCalendar extends HTMLElement { + static observedAttributes = ["value", "min", "max"]; + + readonly #month = signal(new Date().getMonth()); + readonly #year = signal(new Date().getFullYear()); + readonly #selected = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#selected.get(); } + set value(v: string) { this.#selected.set(v); } + + connectedCallback(): void { + const init = this.getAttribute("value") ?? ""; + if (init) { this.#selected.set(init); this.#parseMonth(init); } + this.#stopEffect = effect(() => this.#render()); + this.querySelector("[data-part=prev-month]")?.addEventListener("click", this.#onPrev); + this.querySelector("[data-part=next-month]")?.addEventListener("click", this.#onNext); + this.addEventListener("click", this.#onDayClick); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + this.querySelector("[data-part=prev-month]")?.removeEventListener("click", this.#onPrev); + this.querySelector("[data-part=next-month]")?.removeEventListener("click", this.#onNext); + this.removeEventListener("click", this.#onDayClick); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next) { this.#selected.set(next); this.#parseMonth(next); } + } + + #parseMonth(dateStr: string): void { + const d = new Date(dateStr); + if (!Number.isNaN(d.getTime())) { this.#month.set(d.getMonth()); this.#year.set(d.getFullYear()); } + } + + #onPrev = (): void => { + if (this.#month.get() === 0) { this.#month.set(11); this.#year.set(this.#year.get() - 1); } + else this.#month.set(this.#month.get() - 1); + }; + + #onNext = (): void => { + if (this.#month.get() === 11) { this.#month.set(0); this.#year.set(this.#year.get() + 1); } + else this.#month.set(this.#month.get() + 1); + }; + + #onDayClick = (e: Event): void => { + const btn = (e.target as HTMLElement).closest("[data-date]"); + if (!btn || btn.hasAttribute("data-disabled")) return; + const date = (btn as HTMLElement).dataset.date ?? ""; + this.#selected.set(date); + emit(this, "change", { value: date }); + }; + + #createDayCell(day: number, iso: string, sel: string, today: string): HTMLTableCellElement { + const td = document.createElement("td"); + const btn = document.createElement("button"); + btn.dataset.date = iso; + btn.dataset.part = "day"; + btn.setAttribute("role", "gridcell"); + btn.textContent = String(day); + if (iso === sel) btn.dataset.state = "selected"; + if (iso === today) btn.dataset.state = btn.dataset.state ? `${btn.dataset.state} today` : "today"; + td.appendChild(btn); + return td; + } + + #render(): void { + const m = this.#month.get(); + const y = this.#year.get(); + const sel = this.#selected.get(); + const title = this.querySelector("[data-part=title]"); + if (title) title.textContent = `${new Date(y, m).toLocaleString("default", { month: "long" })} ${y}`; + const body = this.querySelector("[data-part=body]"); + if (!body) return; + const today = new Date().toISOString().slice(0, 10); + const firstDay = new Date(y, m, 1).getDay(); + const daysInMonth = new Date(y, m + 1, 0).getDate(); + body.replaceChildren(); + let row = document.createElement("tr"); + for (let i = 0; i < firstDay; i++) row.appendChild(document.createElement("td")); + for (let d = 1; d <= daysInMonth; d++) { + const iso = `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`; + row.appendChild(this.#createDayCell(d, iso, sel, today)); + if ((firstDay + d) % 7 === 0) { body.appendChild(row); row = document.createElement("tr"); } + } + if (row.children.length > 0) body.appendChild(row); + } +} diff --git a/packages/core/src/components/calendar/index.ts b/packages/core/src/components/calendar/index.ts new file mode 100644 index 0000000..ce1fb0a --- /dev/null +++ b/packages/core/src/components/calendar/index.ts @@ -0,0 +1,6 @@ +import { PettyCalendar } from "./calendar"; +export { PettyCalendar }; + +if (!customElements.get("petty-calendar")) { + customElements.define("petty-calendar", PettyCalendar); +} diff --git a/packages/core/src/components/card/card-content.ts b/packages/core/src/components/card/card-content.ts new file mode 100644 index 0000000..58a61a2 --- /dev/null +++ b/packages/core/src/components/card/card-content.ts @@ -0,0 +1,6 @@ +/** PettyCardContent — structural body section within a card. */ +export class PettyCardContent extends HTMLElement { + connectedCallback(): void { + this.dataset.part = "content"; + } +} diff --git a/packages/core/src/components/card/card-footer.ts b/packages/core/src/components/card/card-footer.ts new file mode 100644 index 0000000..8db08f8 --- /dev/null +++ b/packages/core/src/components/card/card-footer.ts @@ -0,0 +1,6 @@ +/** PettyCardFooter — structural footer section within a card. */ +export class PettyCardFooter extends HTMLElement { + connectedCallback(): void { + this.dataset.part = "footer"; + } +} diff --git a/packages/core/src/components/card/card-header.ts b/packages/core/src/components/card/card-header.ts new file mode 100644 index 0000000..4b17d2c --- /dev/null +++ b/packages/core/src/components/card/card-header.ts @@ -0,0 +1,6 @@ +/** PettyCardHeader — structural header section within a card. */ +export class PettyCardHeader extends HTMLElement { + connectedCallback(): void { + this.dataset.part = "header"; + } +} diff --git a/packages/core/src/components/card/card.schema.ts b/packages/core/src/components/card/card.schema.ts new file mode 100644 index 0000000..98cb318 --- /dev/null +++ b/packages/core/src/components/card/card.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-card", description: "Structural container with optional heading-based ARIA labelling", tier: 3, attributes: [], parts: [{ name: "header", element: "div", description: "Card header section (petty-card-header)" }, { name: "content", element: "div", description: "Card body section (petty-card-content)" }, { name: "footer", element: "div", description: "Card footer section (petty-card-footer)" }], events: [], example: `

Title

Body text

` }; diff --git a/packages/core/src/components/card/card.ts b/packages/core/src/components/card/card.ts new file mode 100644 index 0000000..a3d2b7d --- /dev/null +++ b/packages/core/src/components/card/card.ts @@ -0,0 +1,13 @@ +import { uniqueId } from "../../shared/aria"; + +/** PettyCard — structural container with optional heading-based labelling. */ +export class PettyCard extends HTMLElement { + connectedCallback(): void { + const heading = this.querySelector("h1, h2, h3, h4, h5, h6"); + if (heading) { + this.setAttribute("role", "article"); + if (!heading.id) heading.id = uniqueId("petty-card-title"); + this.setAttribute("aria-labelledby", heading.id); + } + } +} diff --git a/packages/core/src/components/card/index.ts b/packages/core/src/components/card/index.ts new file mode 100644 index 0000000..9bd4973 --- /dev/null +++ b/packages/core/src/components/card/index.ts @@ -0,0 +1,12 @@ +import { PettyCard } from "./card"; +import { PettyCardHeader } from "./card-header"; +import { PettyCardContent } from "./card-content"; +import { PettyCardFooter } from "./card-footer"; +export { PettyCard, PettyCardHeader, PettyCardContent, PettyCardFooter }; + +if (!customElements.get("petty-card")) { + customElements.define("petty-card", PettyCard); + customElements.define("petty-card-header", PettyCardHeader); + customElements.define("petty-card-content", PettyCardContent); + customElements.define("petty-card-footer", PettyCardFooter); +} diff --git a/packages/core/src/components/checkbox/checkbox.schema.ts b/packages/core/src/components/checkbox/checkbox.schema.ts new file mode 100644 index 0000000..2a69e8a --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-checkbox", description: "Tri-state checkbox with label wiring and change events", tier: 3, attributes: [{ name: "checked", type: "boolean", description: "Whether the checkbox is checked" }, { name: "indeterminate", type: "boolean", description: "Whether the checkbox is in indeterminate state" }, { name: "disabled", type: "boolean", description: "Disables the checkbox" }, { name: "name", type: "string", description: "Form field name" }, { name: "value", type: "string", default: "on", description: "Value submitted when checked" }], parts: [{ name: "control", element: "input", description: "The native checkbox input element" }, { name: "label", element: "label", description: "Label element auto-linked to the control" }], events: [{ name: "petty-change", detail: "{ checked: boolean, indeterminate: boolean }", description: "Fires when checked state changes" }], example: `` }; diff --git a/packages/core/src/components/checkbox/checkbox.ts b/packages/core/src/components/checkbox/checkbox.ts new file mode 100644 index 0000000..fac8d83 --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.ts @@ -0,0 +1,62 @@ +import { signal } from "../../signals"; +import { emit, listen, part, wireLabel } from "../../shared/helpers"; + +/** PettyCheckbox — tri-state checkbox with label wiring and change events. */ +export class PettyCheckbox extends HTMLElement { + static observedAttributes = ["checked", "indeterminate", "disabled", "name", "value"]; + + readonly #checked = signal(false); + readonly #indeterminate = signal(false); + #cleanup = (): void => {}; + + get checked(): boolean { return this.#checked.get(); } + set checked(v: boolean) { this.#checked.set(v); this.#sync(); } + + get indeterminate(): boolean { return this.#indeterminate.get(); } + set indeterminate(v: boolean) { this.#indeterminate.set(v); this.#sync(); } + + connectedCallback(): void { + const input = this.#input(); + if (!input) return; + if (this.hasAttribute("checked")) this.#checked.set(true); + if (this.hasAttribute("indeterminate")) this.#indeterminate.set(true); + wireLabel(input, part(this, "label"), "petty-cb"); + this.#sync(); + this.#cleanup = listen(input, [["change", this.#handleChange]]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "checked") this.#checked.set(next !== null); + if (name === "indeterminate") this.#indeterminate.set(next !== null); + this.#sync(); + } + + #input(): HTMLInputElement | null { + return part(this, "control"); + } + + #sync(): void { + const input = this.#input(); + if (!input) return; + input.checked = this.#checked.get(); + input.indeterminate = this.#indeterminate.get(); + input.disabled = this.hasAttribute("disabled"); + if (this.hasAttribute("name")) input.name = this.getAttribute("name") ?? ""; + if (this.hasAttribute("value")) input.value = this.getAttribute("value") ?? "on"; + const state = this.#indeterminate.get() ? "indeterminate" : this.#checked.get() ? "checked" : "unchecked"; + this.dataset.state = state; + } + + #handleChange = (): void => { + const input = this.#input(); + if (!input) return; + this.#checked.set(input.checked); + this.#indeterminate.set(false); + this.#sync(); + emit(this, "change", { checked: input.checked, indeterminate: false }); + }; +} diff --git a/packages/core/src/components/checkbox/index.ts b/packages/core/src/components/checkbox/index.ts new file mode 100644 index 0000000..9557cba --- /dev/null +++ b/packages/core/src/components/checkbox/index.ts @@ -0,0 +1,6 @@ +import { PettyCheckbox } from "./checkbox"; +export { PettyCheckbox }; + +if (!customElements.get("petty-checkbox")) { + customElements.define("petty-checkbox", PettyCheckbox); +} diff --git a/packages/core/src/components/collapsible/collapsible.schema.ts b/packages/core/src/components/collapsible/collapsible.schema.ts new file mode 100644 index 0000000..db611d3 --- /dev/null +++ b/packages/core/src/components/collapsible/collapsible.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-collapsible", description: "Single disclosure wrapper on native details element", tier: 1, attributes: [{ name: "disabled", type: "boolean", description: "Prevents opening the collapsible" }], parts: [], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the collapsible opens or closes" }], example: `
Toggle
Hidden content
` }; diff --git a/packages/core/src/components/collapsible/collapsible.ts b/packages/core/src/components/collapsible/collapsible.ts new file mode 100644 index 0000000..79d6145 --- /dev/null +++ b/packages/core/src/components/collapsible/collapsible.ts @@ -0,0 +1,77 @@ +import { emit, listen } from "../../shared/helpers"; + +/** PettyCollapsible — single disclosure wrapper on native details element. */ +export class PettyCollapsible extends HTMLElement { + static observedAttributes = ["disabled"]; + + #cleanup = (): void => {}; + + get detailsElement(): HTMLDetailsElement | null { + return this.querySelector("details"); + } + + get isOpen(): boolean { + return this.detailsElement?.open ?? false; + } + + /** Opens the collapsible. */ + open(): void { + const d = this.detailsElement; + if (d && !this.hasAttribute("disabled")) d.open = true; + } + + /** Closes the collapsible. */ + close(): void { + const d = this.detailsElement; + if (d) d.open = false; + } + + /** Toggles the collapsible open/closed state. */ + toggle(): void { + if (this.isOpen) this.close(); + else this.open(); + } + + connectedCallback(): void { + const d = this.detailsElement; + if (!d) return; + this.#syncState(); + this.#applyDisabled(); + this.#cleanup = listen(d, [["toggle", this.#handleToggle]]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.#applyDisabled(); + } + + #handleToggle = (): void => { + this.#syncState(); + emit(this, "toggle", { open: this.isOpen }); + }; + + #syncState(): void { + const d = this.detailsElement; + this.dataset.state = d?.open ? "open" : "closed"; + const summary = d?.querySelector("summary"); + if (summary) summary.setAttribute("aria-expanded", String(d?.open ?? false)); + } + + #applyDisabled(): void { + const disabled = this.hasAttribute("disabled"); + const summary = this.detailsElement?.querySelector("summary"); + if (!summary) return; + if (disabled) { + summary.setAttribute("aria-disabled", "true"); + summary.addEventListener("click", this.#preventToggle); + } else { + summary.removeAttribute("aria-disabled"); + summary.removeEventListener("click", this.#preventToggle); + } + } + + #preventToggle = (e: Event): void => { e.preventDefault(); }; +} diff --git a/packages/core/src/components/collapsible/index.ts b/packages/core/src/components/collapsible/index.ts new file mode 100644 index 0000000..fd0dfd4 --- /dev/null +++ b/packages/core/src/components/collapsible/index.ts @@ -0,0 +1,6 @@ +import { PettyCollapsible } from "./collapsible"; +export { PettyCollapsible }; + +if (!customElements.get("petty-collapsible")) { + customElements.define("petty-collapsible", PettyCollapsible); +} diff --git a/packages/core/src/components/combobox/combobox-option.ts b/packages/core/src/components/combobox/combobox-option.ts new file mode 100644 index 0000000..e19998d --- /dev/null +++ b/packages/core/src/components/combobox/combobox-option.ts @@ -0,0 +1,18 @@ +/** PettyComboboxOption — single option within a combobox listbox. */ +export class PettyComboboxOption extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? this.textContent?.trim() ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "option"); + this.setAttribute("tabindex", "-1"); + this.setAttribute("aria-selected", "false"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.setAttribute("aria-disabled", String(this.disabled)); + } +} diff --git a/packages/core/src/components/combobox/combobox.schema.ts b/packages/core/src/components/combobox/combobox.schema.ts new file mode 100644 index 0000000..16609e1 --- /dev/null +++ b/packages/core/src/components/combobox/combobox.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-combobox", description: "Searchable select with popover listbox and keyboard navigation", tier: 2, attributes: [{ name: "value", type: "string", description: "Currently selected value" }, { name: "placeholder", type: "string", description: "Placeholder text for the input" }, { name: "disabled", type: "boolean", description: "Disables the combobox" }], parts: [{ name: "input", element: "input", description: "Text input for search filtering" }, { name: "listbox", element: "div", description: "Popover container for options" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when an option is selected" }], example: `
One
` }; diff --git a/packages/core/src/components/combobox/combobox.ts b/packages/core/src/components/combobox/combobox.ts new file mode 100644 index 0000000..a532453 --- /dev/null +++ b/packages/core/src/components/combobox/combobox.ts @@ -0,0 +1,83 @@ +import { uniqueId } from "../../shared/aria"; +import { emit } from "../../shared/helpers"; + +/** PettyCombobox — searchable select with popover listbox and keyboard nav. */ +export class PettyCombobox extends HTMLElement { + static observedAttributes = ["value", "placeholder", "disabled"]; + + #highlightIndex = -1; + + connectedCallback(): void { + const input = this.#input(); + const lb = this.#listbox(); + if (!input || !lb) return; + if (!lb.id) lb.id = uniqueId("petty-combo-lb"); + input.setAttribute("aria-controls", lb.id); + input.setAttribute("aria-expanded", "false"); + input.setAttribute("aria-autocomplete", "list"); + input.addEventListener("input", this.#onInput); + input.addEventListener("keydown", this.#onKeydown); + lb.addEventListener("click", this.#onClick); + } + + disconnectedCallback(): void { + this.#input()?.removeEventListener("input", this.#onInput); + this.#input()?.removeEventListener("keydown", this.#onKeydown); + this.#listbox()?.removeEventListener("click", this.#onClick); + } + + #input(): HTMLInputElement | null { return this.querySelector("input[data-part=input]"); } + #listbox(): HTMLElement | null { return this.querySelector("[data-part=listbox]"); } + + #options(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-combobox-option:not([disabled]):not([hidden])")); + } + + #onInput = (): void => { + const input = this.#input(); + const lb = this.#listbox(); + if (!input || !lb) return; + const query = input.value.toLowerCase(); + const all = this.querySelectorAll("petty-combobox-option"); + for (const opt of all) { + const match = (opt.textContent ?? "").toLowerCase().includes(query); + opt.toggleAttribute("hidden", !match); + } + if (!lb.matches(":popover-open")) lb.showPopover(); + input.setAttribute("aria-expanded", "true"); + this.#highlightIndex = -1; + }; + + #onKeydown = (e: KeyboardEvent): void => { + const items = this.#options(); + if (e.key === "ArrowDown") { e.preventDefault(); this.#highlight(Math.min(this.#highlightIndex + 1, items.length - 1), items); } + else if (e.key === "ArrowUp") { e.preventDefault(); this.#highlight(Math.max(this.#highlightIndex - 1, 0), items); } + else if (e.key === "Enter") { e.preventDefault(); this.#selectHighlighted(items); } + else if (e.key === "Escape") { this.#listbox()?.hidePopover(); this.#input()?.setAttribute("aria-expanded", "false"); } + }; + + #highlight(idx: number, items: HTMLElement[]): void { + for (const opt of items) opt.removeAttribute("data-highlighted"); + if (items[idx]) { items[idx].setAttribute("data-highlighted", ""); this.#input()?.setAttribute("aria-activedescendant", items[idx].id || ""); } + this.#highlightIndex = idx; + } + + #selectHighlighted(items: HTMLElement[]): void { + const opt = items[this.#highlightIndex]; + if (opt) this.#select(opt); + } + + #onClick = (e: MouseEvent): void => { + const opt = (e.target as HTMLElement).closest("petty-combobox-option"); + if (opt && !opt.hasAttribute("disabled")) this.#select(opt as HTMLElement); + }; + + #select(opt: HTMLElement): void { + const val = opt.getAttribute("value") ?? opt.textContent?.trim() ?? ""; + const input = this.#input(); + if (input) input.value = opt.textContent?.trim() ?? val; + this.#listbox()?.hidePopover(); + input?.setAttribute("aria-expanded", "false"); + emit(this, "change", { value: val }); + } +} diff --git a/packages/core/src/components/combobox/index.ts b/packages/core/src/components/combobox/index.ts new file mode 100644 index 0000000..42fda92 --- /dev/null +++ b/packages/core/src/components/combobox/index.ts @@ -0,0 +1,8 @@ +import { PettyCombobox } from "./combobox"; +import { PettyComboboxOption } from "./combobox-option"; +export { PettyCombobox, PettyComboboxOption }; + +if (!customElements.get("petty-combobox")) { + customElements.define("petty-combobox", PettyCombobox); + customElements.define("petty-combobox-option", PettyComboboxOption); +} diff --git a/packages/core/src/components/command-palette/command-palette-item.ts b/packages/core/src/components/command-palette/command-palette-item.ts new file mode 100644 index 0000000..0610c4f --- /dev/null +++ b/packages/core/src/components/command-palette/command-palette-item.ts @@ -0,0 +1,17 @@ +/** PettyCommandPaletteItem — single command option within the palette. */ +export class PettyCommandPaletteItem extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? this.textContent?.trim() ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "option"); + this.setAttribute("tabindex", "-1"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.setAttribute("aria-disabled", String(this.disabled)); + } +} diff --git a/packages/core/src/components/command-palette/command-palette.schema.ts b/packages/core/src/components/command-palette/command-palette.schema.ts new file mode 100644 index 0000000..cf0fe10 --- /dev/null +++ b/packages/core/src/components/command-palette/command-palette.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-command-palette", description: "Search-driven command menu using native dialog, opened with Cmd+K", tier: 2, attributes: [], parts: [{ name: "search", element: "input", description: "Search input for filtering commands" }, { name: "list", element: "div", description: "Container for command items" }], events: [{ name: "petty-select", detail: "{ value: string }", description: "Fires when a command item is selected" }], example: `
Save
` }; diff --git a/packages/core/src/components/command-palette/command-palette.ts b/packages/core/src/components/command-palette/command-palette.ts new file mode 100644 index 0000000..acdb430 --- /dev/null +++ b/packages/core/src/components/command-palette/command-palette.ts @@ -0,0 +1,79 @@ +import { emit } from "../../shared/helpers"; + +/** PettyCommandPalette — search-driven command menu using native dialog. */ +export class PettyCommandPalette extends HTMLElement { + #highlightIndex = -1; + + /** Opens the command palette dialog. */ + open(): void { + const dlg = this.querySelector("dialog"); + if (dlg && !dlg.open) { dlg.showModal(); this.#search()?.focus(); } + } + + /** Closes the command palette dialog. */ + close(): void { + const dlg = this.querySelector("dialog"); + if (dlg?.open) dlg.close(); + } + + connectedCallback(): void { + document.addEventListener("keydown", this.#onGlobalKey); + this.#search()?.addEventListener("input", this.#onSearch); + this.#list()?.addEventListener("click", this.#onClick); + this.#list()?.addEventListener("keydown", this.#onListKey); + } + + disconnectedCallback(): void { + document.removeEventListener("keydown", this.#onGlobalKey); + this.#search()?.removeEventListener("input", this.#onSearch); + this.#list()?.removeEventListener("click", this.#onClick); + this.#list()?.removeEventListener("keydown", this.#onListKey); + } + + #search(): HTMLInputElement | null { return this.querySelector("input[data-part=search]"); } + #list(): HTMLElement | null { return this.querySelector("[data-part=list]"); } + + #visibleItems(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-command-palette-item:not([hidden]):not([disabled])")); + } + + #onGlobalKey = (e: KeyboardEvent): void => { + if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); this.open(); } + }; + + #onSearch = (): void => { + const query = (this.#search()?.value ?? "").toLowerCase(); + const all = this.querySelectorAll("petty-command-palette-item"); + for (const item of all) { + const match = (item.textContent ?? "").toLowerCase().includes(query); + item.toggleAttribute("hidden", !match); + } + this.#highlightIndex = -1; + }; + + #onListKey = (e: Event): void => { + const ke = e as KeyboardEvent; + const items = this.#visibleItems(); + if (ke.key === "ArrowDown") { ke.preventDefault(); this.#highlight(Math.min(this.#highlightIndex + 1, items.length - 1), items); } + else if (ke.key === "ArrowUp") { ke.preventDefault(); this.#highlight(Math.max(this.#highlightIndex - 1, 0), items); } + else if (ke.key === "Enter") { ke.preventDefault(); this.#selectItem(items[this.#highlightIndex]); } + }; + + #highlight(idx: number, items: HTMLElement[]): void { + for (const item of items) item.removeAttribute("data-highlighted"); + if (items[idx]) { items[idx].setAttribute("data-highlighted", ""); items[idx].focus(); } + this.#highlightIndex = idx; + } + + #onClick = (e: Event): void => { + const target = (e.target as HTMLElement).closest("petty-command-palette-item"); + if (target && !target.hasAttribute("disabled")) this.#selectItem(target as HTMLElement); + }; + + #selectItem(item: HTMLElement | undefined): void { + if (!item) return; + const val = item.getAttribute("value") ?? item.textContent?.trim() ?? ""; + emit(this, "select", { value: val }); + this.close(); + } +} diff --git a/packages/core/src/components/command-palette/index.ts b/packages/core/src/components/command-palette/index.ts new file mode 100644 index 0000000..2e5a28c --- /dev/null +++ b/packages/core/src/components/command-palette/index.ts @@ -0,0 +1,8 @@ +import { PettyCommandPalette } from "./command-palette"; +import { PettyCommandPaletteItem } from "./command-palette-item"; +export { PettyCommandPalette, PettyCommandPaletteItem }; + +if (!customElements.get("petty-command-palette")) { + customElements.define("petty-command-palette", PettyCommandPalette); + customElements.define("petty-command-palette-item", PettyCommandPaletteItem); +} diff --git a/packages/core/src/components/context-menu/context-menu-item.ts b/packages/core/src/components/context-menu/context-menu-item.ts new file mode 100644 index 0000000..2637d7e --- /dev/null +++ b/packages/core/src/components/context-menu/context-menu-item.ts @@ -0,0 +1,16 @@ +/** PettyContextMenuItem — single item within a context menu. */ +export class PettyContextMenuItem extends HTMLElement { + static observedAttributes = ["disabled"]; + + connectedCallback(): void { + this.setAttribute("role", "menuitem"); + this.setAttribute("tabindex", "-1"); + if (this.hasAttribute("disabled")) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.hasAttribute("disabled"))); + } + } +} diff --git a/packages/core/src/components/context-menu/context-menu.schema.ts b/packages/core/src/components/context-menu/context-menu.schema.ts new file mode 100644 index 0000000..4414925 --- /dev/null +++ b/packages/core/src/components/context-menu/context-menu.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-context-menu", description: "Right-click menu using Popover API with keyboard navigation", tier: 2, attributes: [], parts: [{ name: "trigger", element: "div", description: "Element that triggers the context menu on right-click" }, { name: "content", element: "div", description: "Popover container for menu items" }], events: [{ name: "petty-select", detail: "{ value: string }", description: "Fires when a menu item is selected" }], example: `
Right-click here
Copy
` }; diff --git a/packages/core/src/components/context-menu/context-menu.ts b/packages/core/src/components/context-menu/context-menu.ts new file mode 100644 index 0000000..e868a8b --- /dev/null +++ b/packages/core/src/components/context-menu/context-menu.ts @@ -0,0 +1,63 @@ +import { emit } from "../../shared/helpers"; + +/** PettyContextMenu — right-click menu using Popover API with keyboard nav. */ +export class PettyContextMenu extends HTMLElement { + connectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.#content(); + if (!trigger || !content) return; + trigger.addEventListener("contextmenu", this.#onContext); + content.addEventListener("keydown", this.#onKeydown); + content.addEventListener("click", this.#onClick); + } + + disconnectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.#content(); + trigger?.removeEventListener("contextmenu", this.#onContext); + content?.removeEventListener("keydown", this.#onKeydown); + content?.removeEventListener("click", this.#onClick); + } + + #content(): HTMLElement | null { return this.querySelector("[data-part=content]"); } + + #items(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-context-menu-item:not([disabled])")); + } + + #onContext = (e: Event): void => { + e.preventDefault(); + const me = e as MouseEvent; + const content = this.#content(); + if (!content) return; + content.style.setProperty("--petty-ctx-x", `${me.clientX}px`); + content.style.setProperty("--petty-ctx-y", `${me.clientY}px`); + content.showPopover(); + this.#items()[0]?.focus(); + }; + + #onKeydown = (e: KeyboardEvent): void => { + const items = this.#items(); + const active = document.activeElement as HTMLElement; + const idx = items.indexOf(active); + if (e.key === "ArrowDown") { + e.preventDefault(); + items[(idx + 1) % items.length]?.focus(); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + items[(idx - 1 + items.length) % items.length]?.focus(); + } else if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + active?.click(); + } else if (e.key === "Escape") { + this.#content()?.hidePopover(); + } + }; + + #onClick = (e: MouseEvent): void => { + const item = (e.target as HTMLElement).closest("petty-context-menu-item"); + if (!item || item.hasAttribute("disabled")) return; + emit(this, "select", { value: item.getAttribute("value") ?? item.textContent?.trim() ?? "" }); + this.#content()?.hidePopover(); + }; +} diff --git a/packages/core/src/components/context-menu/index.ts b/packages/core/src/components/context-menu/index.ts new file mode 100644 index 0000000..1725125 --- /dev/null +++ b/packages/core/src/components/context-menu/index.ts @@ -0,0 +1,8 @@ +import { PettyContextMenu } from "./context-menu"; +import { PettyContextMenuItem } from "./context-menu-item"; +export { PettyContextMenu, PettyContextMenuItem }; + +if (!customElements.get("petty-context-menu")) { + customElements.define("petty-context-menu", PettyContextMenu); + customElements.define("petty-context-menu-item", PettyContextMenuItem); +} diff --git a/packages/core/src/components/counter/counter.ts b/packages/core/src/components/counter/counter.ts new file mode 100644 index 0000000..0c15bdd --- /dev/null +++ b/packages/core/src/components/counter/counter.ts @@ -0,0 +1,74 @@ +import { emit } from "../../shared/helpers"; + +/** PettyCounter — animates a number from start to end with easing. */ +export class PettyCounter extends HTMLElement { + static observedAttributes = ["from", "to", "duration", "delay", "decimals", "prefix", "suffix"]; + + #frame: ReturnType | null = null; + #startTime = 0; + #timer: ReturnType | null = null; + + get from(): number { return Number(this.getAttribute("from") ?? 0); } + get to(): number { return Number(this.getAttribute("to") ?? 100); } + get duration(): number { return Number(this.getAttribute("duration") ?? 2000); } + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + get decimals(): number { return Number(this.getAttribute("decimals") ?? 0); } + get prefix(): string { return this.getAttribute("prefix") ?? ""; } + get suffix(): string { return this.getAttribute("suffix") ?? ""; } + + /** Starts the counter animation. */ + start(): void { + this.#startTime = performance.now(); + this.dataset.state = "counting"; + this.#animate(this.#startTime); + } + + /** Resets the counter to its initial value. */ + reset(): void { + this.#stop(); + this.#render(this.from); + this.dataset.state = "idle"; + } + + connectedCallback(): void { + this.#render(this.from); + this.dataset.state = "idle"; + if (this.delay > 0) { + this.#timer = setTimeout(() => this.start(), this.delay); + } else { + this.start(); + } + } + + disconnectedCallback(): void { + this.#stop(); + } + + #stop(): void { + if (this.#frame) { cancelAnimationFrame(this.#frame); this.#frame = null; } + if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; } + } + + #easeOut(t: number): number { + return 1 - (1 - t) ** 3; + } + + #animate = (now: number): void => { + const elapsed = now - this.#startTime; + const progress = Math.min(elapsed / this.duration, 1); + const eased = this.#easeOut(progress); + const current = this.from + (this.to - this.from) * eased; + this.#render(current); + if (progress < 1) { + this.#frame = requestAnimationFrame(this.#animate); + } else { + this.dataset.state = "done"; + emit(this, "complete", {}); + } + }; + + #render(value: number): void { + const formatted = value.toFixed(this.decimals); + this.textContent = `${this.prefix}${formatted}${this.suffix}`; + } +} diff --git a/packages/core/src/components/counter/index.ts b/packages/core/src/components/counter/index.ts new file mode 100644 index 0000000..77f7a0d --- /dev/null +++ b/packages/core/src/components/counter/index.ts @@ -0,0 +1,6 @@ +import { PettyCounter } from "./counter"; +export { PettyCounter }; + +if (!customElements.get("petty-counter")) { + customElements.define("petty-counter", PettyCounter); +} diff --git a/packages/core/src/components/data-table/data-table.schema.ts b/packages/core/src/components/data-table/data-table.schema.ts new file mode 100644 index 0000000..bae4bed --- /dev/null +++ b/packages/core/src/components/data-table/data-table.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-data-table", description: "Sortable table with click-to-sort column headers", tier: 3, attributes: [], parts: [{ name: "body", element: "tbody", description: "Table body containing sortable rows" }], events: [{ name: "petty-sort", detail: "{ column: string, direction: string }", description: "Fires when a column header is clicked, with column name and sort direction" }], example: `
NameAge
Alice30
` }; diff --git a/packages/core/src/components/data-table/data-table.ts b/packages/core/src/components/data-table/data-table.ts new file mode 100644 index 0000000..5dc44c0 --- /dev/null +++ b/packages/core/src/components/data-table/data-table.ts @@ -0,0 +1,54 @@ +import { emit } from "../../shared/helpers"; + +/** PettyDataTable — sortable table with click-to-sort column headers. */ +export class PettyDataTable extends HTMLElement { + connectedCallback(): void { + const headers = this.querySelectorAll("th[data-sort]"); + for (const th of headers) { + th.setAttribute("role", "columnheader"); + th.setAttribute("aria-sort", "none"); + th.style.cursor = "pointer"; + th.addEventListener("click", this.#onHeaderClick); + } + } + + disconnectedCallback(): void { + const headers = this.querySelectorAll("th[data-sort]"); + for (const th of headers) th.removeEventListener("click", this.#onHeaderClick); + } + + #onHeaderClick = (e: Event): void => { + const th = e.currentTarget as HTMLElement; + const column = th.dataset.sort ?? ""; + const current = th.getAttribute("aria-sort") ?? "none"; + const next = current === "ascending" ? "descending" : "ascending"; + this.#clearSorts(); + th.setAttribute("aria-sort", next); + th.dataset.state = next; + this.#sortBy(th, next === "ascending" ? 1 : -1); + emit(this, "sort", { column, direction: next }); + }; + + #clearSorts(): void { + const headers = this.querySelectorAll("th[data-sort]"); + for (const th of headers) { th.setAttribute("aria-sort", "none"); th.dataset.state = "none"; } + } + + #sortBy(th: HTMLElement, dir: number): void { + const tbody = this.querySelector("tbody[data-part=body]") ?? this.querySelector("tbody"); + if (!tbody) return; + const headerRow = th.parentElement; + if (!headerRow) return; + const colIdx = Array.from(headerRow.children).indexOf(th); + const rows = Array.from(tbody.querySelectorAll("tr")); + rows.sort((a, b) => { + const aText = a.children[colIdx]?.textContent?.trim() ?? ""; + const bText = b.children[colIdx]?.textContent?.trim() ?? ""; + const aNum = Number(aText); + const bNum = Number(bText); + if (!Number.isNaN(aNum) && !Number.isNaN(bNum)) return (aNum - bNum) * dir; + return aText.localeCompare(bText) * dir; + }); + for (const row of rows) tbody.appendChild(row); + } +} diff --git a/packages/core/src/components/data-table/index.ts b/packages/core/src/components/data-table/index.ts new file mode 100644 index 0000000..ad00ac0 --- /dev/null +++ b/packages/core/src/components/data-table/index.ts @@ -0,0 +1,6 @@ +import { PettyDataTable } from "./data-table"; +export { PettyDataTable }; + +if (!customElements.get("petty-data-table")) { + customElements.define("petty-data-table", PettyDataTable); +} diff --git a/packages/core/src/components/date-picker/date-picker.schema.ts b/packages/core/src/components/date-picker/date-picker.schema.ts new file mode 100644 index 0000000..729cc99 --- /dev/null +++ b/packages/core/src/components/date-picker/date-picker.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-date-picker", description: "Date input with calendar popover integration", tier: 2, attributes: [{ name: "value", type: "string", description: "Selected date in ISO format" }, { name: "min", type: "string", description: "Minimum selectable date" }, { name: "max", type: "string", description: "Maximum selectable date" }, { name: "disabled", type: "boolean", description: "Disables the date picker" }], parts: [{ name: "input", element: "input", description: "Text input for date entry" }, { name: "trigger", element: "button", description: "Button that opens the calendar popover" }, { name: "calendar", element: "div", description: "Popover container for the calendar" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when a date is selected from input or calendar" }], example: `
` }; diff --git a/packages/core/src/components/date-picker/date-picker.ts b/packages/core/src/components/date-picker/date-picker.ts new file mode 100644 index 0000000..c7315f4 --- /dev/null +++ b/packages/core/src/components/date-picker/date-picker.ts @@ -0,0 +1,55 @@ +import { emit } from "../../shared/helpers"; + +/** PettyDatePicker — date input with calendar popover integration. */ +export class PettyDatePicker extends HTMLElement { + static observedAttributes = ["value", "min", "max", "disabled"]; + + get value(): string { return this.#input()?.value ?? ""; } + set value(v: string) { const input = this.#input(); if (input) input.value = v; } + + connectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const input = this.#input(); + if (trigger) { + trigger.setAttribute("aria-haspopup", "dialog"); + trigger.setAttribute("aria-expanded", "false"); + } + input?.addEventListener("change", this.#onInputChange); + this.addEventListener("petty-change", this.#onCalendarSelect); + + const pop = this.querySelector("[data-part=calendar]"); + if (pop) pop.addEventListener("toggle", this.#onToggle as EventListener); + } + + disconnectedCallback(): void { + this.#input()?.removeEventListener("change", this.#onInputChange); + this.removeEventListener("petty-change", this.#onCalendarSelect); + const pop = this.querySelector("[data-part=calendar]"); + pop?.removeEventListener("toggle", this.#onToggle as EventListener); + } + + #input(): HTMLInputElement | null { return this.querySelector("input[data-part=input]"); } + + #onToggle = (e: ToggleEvent): void => { + const trigger = this.querySelector("[data-part=trigger]"); + if (trigger) trigger.setAttribute("aria-expanded", String(e.newState === "open")); + }; + + #onInputChange = (): void => { + const val = this.#input()?.value ?? ""; + emit(this, "change", { value: val, source: "input" }); + }; + + #onCalendarSelect = (e: Event): void => { + const ce = e as CustomEvent; + if (ce.detail?.source === "input") return; + const val = ce.detail?.value; + if (!val) return; + e.stopPropagation(); + const input = this.#input(); + if (input) input.value = val; + const cal = this.querySelector("[data-part=calendar]"); + if (cal instanceof HTMLElement && "hidePopover" in cal) cal.hidePopover(); + emit(this, "change", { value: val }); + }; +} diff --git a/packages/core/src/components/date-picker/index.ts b/packages/core/src/components/date-picker/index.ts new file mode 100644 index 0000000..bc37d74 --- /dev/null +++ b/packages/core/src/components/date-picker/index.ts @@ -0,0 +1,6 @@ +import { PettyDatePicker } from "./date-picker"; +export { PettyDatePicker }; + +if (!customElements.get("petty-date-picker")) { + customElements.define("petty-date-picker", PettyDatePicker); +} diff --git a/packages/core/src/components/dialog/dialog.schema.ts b/packages/core/src/components/dialog/dialog.schema.ts new file mode 100644 index 0000000..ea516ec --- /dev/null +++ b/packages/core/src/components/dialog/dialog.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-dialog", description: "Headless dialog built on native with ARIA linking and close events", tier: 1, attributes: [], parts: [], events: [{ name: "petty-close", detail: "{ value: string }", description: "Fires when the dialog closes, detail contains return value" }], example: `

Title

Content

` }; diff --git a/packages/core/src/components/dialog/dialog.ts b/packages/core/src/components/dialog/dialog.ts index 8c1f816..cce0d16 100644 --- a/packages/core/src/components/dialog/dialog.ts +++ b/packages/core/src/components/dialog/dialog.ts @@ -1,3 +1,6 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + /** * PettyDialog — headless dialog custom element built on native ``. * @@ -17,6 +20,8 @@ * This element adds: ARIA linking, close event with return value, programmatic API. */ export class PettyDialog extends HTMLElement { + #cleanup: (() => void) | null = null; + /** Finds the first `` child element. */ get dialogElement(): HTMLDialogElement | null { return this.querySelector("dialog"); @@ -45,29 +50,24 @@ export class PettyDialog extends HTMLElement { if (!dlg) return; this.#linkAria(dlg); - dlg.addEventListener("close", this.#handleClose); + this.#cleanup = listen(dlg, [["close", this.#handleClose]]); } /** @internal */ disconnectedCallback(): void { - const dlg = this.dialogElement; - dlg?.removeEventListener("close", this.#handleClose); + this.#cleanup?.(); + this.#cleanup = null; } #handleClose = (): void => { const dlg = this.dialogElement; - this.dispatchEvent(new CustomEvent("petty-close", { - bubbles: true, - detail: { value: dlg?.returnValue ?? "" }, - })); + emit(this, "close", { value: dlg?.returnValue ?? "" }); }; #linkAria(dlg: HTMLDialogElement): void { const heading = dlg.querySelector("h1, h2, h3, h4, h5, h6"); if (!heading) return; - if (!heading.id) heading.id = `petty-dlg-title-${PettyDialog.#counter++}`; + if (!heading.id) heading.id = uniqueId("petty-dlg-title"); dlg.setAttribute("aria-labelledby", heading.id); } - - static #counter = 0; } diff --git a/packages/core/src/components/dialog/index.ts b/packages/core/src/components/dialog/index.ts index 1e0e545..8907c7c 100644 --- a/packages/core/src/components/dialog/index.ts +++ b/packages/core/src/components/dialog/index.ts @@ -1,4 +1,5 @@ -export { PettyDialog } from "./dialog"; +import { PettyDialog } from "./dialog"; +export { PettyDialog }; if (!customElements.get("petty-dialog")) { customElements.define("petty-dialog", PettyDialog); diff --git a/packages/core/src/components/drawer/drawer.schema.ts b/packages/core/src/components/drawer/drawer.schema.ts new file mode 100644 index 0000000..6444416 --- /dev/null +++ b/packages/core/src/components/drawer/drawer.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-drawer", description: "Slide-in panel built on native dialog with side positioning", tier: 3, attributes: [{ name: "side", type: "string", default: "right", description: "Side the drawer slides from: left, right, top, bottom" }], parts: [], events: [{ name: "petty-close", detail: "{ value: string }", description: "Fires when the drawer closes, detail contains return value" }], example: `

Menu

` }; diff --git a/packages/core/src/components/drawer/drawer.ts b/packages/core/src/components/drawer/drawer.ts new file mode 100644 index 0000000..0b551c8 --- /dev/null +++ b/packages/core/src/components/drawer/drawer.ts @@ -0,0 +1,64 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettyDrawer — slide-in panel built on native dialog with side positioning. */ +export class PettyDrawer extends HTMLElement { + static observedAttributes = ["side"]; + #cleanup: (() => void) | null = null; + + get dialogElement(): HTMLDialogElement | null { + return this.querySelector("dialog"); + } + + get isOpen(): boolean { + return this.dialogElement?.open ?? false; + } + + /** Opens the drawer as a modal. */ + open(): void { + const dlg = this.dialogElement; + if (dlg && !dlg.open) dlg.showModal(); + } + + /** Closes the drawer with an optional return value. */ + close(returnValue?: string): void { + const dlg = this.dialogElement; + if (dlg?.open) dlg.close(returnValue); + } + + connectedCallback(): void { + const dlg = this.dialogElement; + if (!dlg) return; + this.#syncSide(); + this.#linkAria(dlg); + this.#cleanup = listen(dlg, [["close", this.#handleClose]]); + } + + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + } + + attributeChangedCallback(): void { + this.#syncSide(); + } + + #syncSide(): void { + const side = this.getAttribute("side") ?? "right"; + this.dataset.side = side; + const dlg = this.dialogElement; + if (dlg) dlg.dataset.side = side; + } + + #handleClose = (): void => { + const dlg = this.dialogElement; + emit(this, "close", { value: dlg?.returnValue ?? "" }); + }; + + #linkAria(dlg: HTMLDialogElement): void { + const heading = dlg.querySelector("h1, h2, h3, h4, h5, h6"); + if (!heading) return; + if (!heading.id) heading.id = uniqueId("petty-drawer-title"); + dlg.setAttribute("aria-labelledby", heading.id); + } +} diff --git a/packages/core/src/components/drawer/index.ts b/packages/core/src/components/drawer/index.ts new file mode 100644 index 0000000..efb4624 --- /dev/null +++ b/packages/core/src/components/drawer/index.ts @@ -0,0 +1,6 @@ +import { PettyDrawer } from "./drawer"; +export { PettyDrawer }; + +if (!customElements.get("petty-drawer")) { + customElements.define("petty-drawer", PettyDrawer); +} diff --git a/packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts b/packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts new file mode 100644 index 0000000..3f48dd7 --- /dev/null +++ b/packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-dropdown-menu", description: "Action menu built on the Popover API with keyboard navigation", tier: 2, attributes: [], parts: [{ name: "trigger", element: "button", description: "Button that opens the dropdown menu" }, { name: "content", element: "div", description: "Popover container for menu items" }], events: [{ name: "petty-select", detail: "{ value: string }", description: "Fires when a menu item is selected" }], example: `` }; diff --git a/packages/core/src/components/dropdown-menu/dropdown-menu.ts b/packages/core/src/components/dropdown-menu/dropdown-menu.ts index e516618..325fec9 100644 --- a/packages/core/src/components/dropdown-menu/dropdown-menu.ts +++ b/packages/core/src/components/dropdown-menu/dropdown-menu.ts @@ -1,3 +1,5 @@ +import { emit } from "../../shared/helpers"; + /** PettyDropdownMenu — action menu built on the Popover API. */ export class PettyDropdownMenu extends HTMLElement { /** The trigger button element. */ @@ -62,7 +64,7 @@ export class PettyDropdownMenu extends HTMLElement { #handleClick = (e: MouseEvent): void => { const item = (e.target as HTMLElement).closest("petty-menu-item"); if (!item || item.hasAttribute("disabled")) return; - this.dispatchEvent(new CustomEvent("petty-select", { bubbles: true, detail: { value: item.textContent?.trim() ?? "" } })); + emit(this, "select", { value: item.textContent?.trim() ?? "" }); this.contentElement?.hidePopover(); }; diff --git a/packages/core/src/components/dropdown-menu/index.ts b/packages/core/src/components/dropdown-menu/index.ts index c3ed47f..135bf5b 100644 --- a/packages/core/src/components/dropdown-menu/index.ts +++ b/packages/core/src/components/dropdown-menu/index.ts @@ -1,5 +1,6 @@ -export { PettyDropdownMenu } from "./dropdown-menu"; -export { PettyMenuItem } from "./menu-item"; +import { PettyDropdownMenu } from "./dropdown-menu"; +import { PettyMenuItem } from "./menu-item"; +export { PettyDropdownMenu, PettyMenuItem }; if (!customElements.get("petty-dropdown-menu")) { customElements.define("petty-dropdown-menu", PettyDropdownMenu); diff --git a/packages/core/src/components/form/form-field.ts b/packages/core/src/components/form/form-field.ts index 544c978..05dbe13 100644 --- a/packages/core/src/components/form/form-field.ts +++ b/packages/core/src/components/form/form-field.ts @@ -1,3 +1,5 @@ +import { uniqueId } from "../../shared/aria"; + /** * PettyFormField — form field wrapper with label, control, and error linking. * @@ -20,7 +22,7 @@ export class PettyFormField extends HTMLElement { /** @internal */ connectedCallback(): void { const name = this.getAttribute("name") ?? ""; - const controlId = `petty-field-${name}-${PettyFormField.#counter++}`; + const controlId = uniqueId(`petty-field-${name}`); const errorId = `${controlId}-error`; const label = this.querySelector("[data-part=label]"); @@ -51,6 +53,4 @@ export class PettyFormField extends HTMLElement { if (error) error.textContent = ""; if (control) control.removeAttribute("aria-invalid"); } - - static #counter = 0; } diff --git a/packages/core/src/components/form/form.schema.ts b/packages/core/src/components/form/form.schema.ts new file mode 100644 index 0000000..90aa5f0 --- /dev/null +++ b/packages/core/src/components/form/form.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-form", description: "Form wrapper with Zod validation and accessible error display", tier: 3, attributes: [], parts: [], events: [{ name: "petty-submit", detail: "{ data: Record }", description: "Fires on valid form submission with form data" }, { name: "petty-invalid", detail: "{ errors: Array<{ path: Array, message: string }> }", description: "Fires when validation fails with error details" }], example: `
` }; diff --git a/packages/core/src/components/form/form.ts b/packages/core/src/components/form/form.ts index 8038c99..d3ddbc6 100644 --- a/packages/core/src/components/form/form.ts +++ b/packages/core/src/components/form/form.ts @@ -1,3 +1,12 @@ +import { emit } from "../../shared/helpers"; + +interface SchemaLike { + safeParse: (data: unknown) => { + success: boolean; + error?: { issues: Array<{ path: Array; message: string }> }; + }; +} + /** * PettyForm — form wrapper with Zod validation and accessible error display. * @@ -21,15 +30,10 @@ * "petty-submit" on success or "petty-invalid" on failure. */ export class PettyForm extends HTMLElement { - #schema: { - safeParse: (data: unknown) => { - success: boolean; - error?: { issues: Array<{ path: Array; message: string }> }; - }; - } | null = null; + #schema: SchemaLike | null = null; /** Set a Zod schema for validation. */ - setSchema(schema: typeof this.#schema): void { + setSchema(schema: SchemaLike | null): void { this.#schema = schema; } @@ -58,18 +62,12 @@ export class PettyForm extends HTMLElement { if (!result.success) { const issues = result.error?.issues ?? []; this.#showErrors(issues); - this.dispatchEvent(new CustomEvent("petty-invalid", { - bubbles: true, - detail: { errors: issues }, - })); + emit(this, "invalid", { errors: issues }); return; } } - this.dispatchEvent(new CustomEvent("petty-submit", { - bubbles: true, - detail: { data }, - })); + emit(this, "submit", { data }); }; #clearErrors(): void { diff --git a/packages/core/src/components/form/index.ts b/packages/core/src/components/form/index.ts index ef7a83d..1bdbbfd 100644 --- a/packages/core/src/components/form/index.ts +++ b/packages/core/src/components/form/index.ts @@ -1,5 +1,6 @@ -export { PettyForm } from "./form"; -export { PettyFormField } from "./form-field"; +import { PettyForm } from "./form"; +import { PettyFormField } from "./form-field"; +export { PettyForm, PettyFormField }; if (!customElements.get("petty-form")) { customElements.define("petty-form", PettyForm); diff --git a/packages/core/src/components/hover-card/hover-card.schema.ts b/packages/core/src/components/hover-card/hover-card.schema.ts new file mode 100644 index 0000000..9200c23 --- /dev/null +++ b/packages/core/src/components/hover-card/hover-card.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-hover-card", description: "Rich hover preview using Popover API with configurable open/close delays", tier: 2, attributes: [{ name: "open-delay", type: "number", default: "300", description: "Delay in ms before showing the card" }, { name: "close-delay", type: "number", default: "200", description: "Delay in ms before hiding the card" }], parts: [{ name: "trigger", element: "a", description: "Element that triggers the hover card on mouse enter/focus" }, { name: "content", element: "div", description: "Popover container for the card content" }], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the hover card opens or closes" }], example: `@user
User details here
` }; diff --git a/packages/core/src/components/hover-card/hover-card.ts b/packages/core/src/components/hover-card/hover-card.ts new file mode 100644 index 0000000..2f051bd --- /dev/null +++ b/packages/core/src/components/hover-card/hover-card.ts @@ -0,0 +1,62 @@ +import { uniqueId } from "../../shared/aria"; +import { emit, listen, part } from "../../shared/helpers"; + +/** PettyHoverCard — rich hover preview using Popover API with open/close delays. */ +export class PettyHoverCard extends HTMLElement { + static observedAttributes = ["open-delay", "close-delay"]; + + #showTimer: ReturnType | null = null; + #hideTimer: ReturnType | null = null; + #cleanupTrigger: (() => void) | null = null; + #cleanupContent: (() => void) | null = null; + + connectedCallback(): void { + const trigger = part(this, "trigger"); + const content = part(this, "content"); + if (!trigger || !content) return; + if (!content.id) content.id = uniqueId("petty-hc"); + trigger.setAttribute("aria-describedby", content.id); + this.#cleanupTrigger = listen(trigger, [ + ["mouseenter", this.#onEnter], + ["mouseleave", this.#onLeave], + ["focus", this.#onEnter], + ["blur", this.#onLeave], + ]); + this.#cleanupContent = listen(content, [ + ["mouseenter", this.#onContentEnter], + ["mouseleave", this.#onLeave], + ]); + } + + disconnectedCallback(): void { + this.#clearTimers(); + this.#cleanupTrigger?.(); + this.#cleanupTrigger = null; + this.#cleanupContent?.(); + this.#cleanupContent = null; + } + + #openDelay(): number { return Number(this.getAttribute("open-delay") ?? 300); } + #closeDelay(): number { return Number(this.getAttribute("close-delay") ?? 200); } + + #clearTimers(): void { + if (this.#showTimer) { clearTimeout(this.#showTimer); this.#showTimer = null; } + if (this.#hideTimer) { clearTimeout(this.#hideTimer); this.#hideTimer = null; } + } + + #show(): void { + const content = part(this, "content"); + if (content && !content.matches(":popover-open")) content.showPopover(); + emit(this, "toggle", { open: true }); + } + + #hide(): void { + const content = part(this, "content"); + if (content && content.matches(":popover-open")) content.hidePopover(); + emit(this, "toggle", { open: false }); + } + + #onEnter = (): void => { this.#clearTimers(); this.#showTimer = setTimeout(() => this.#show(), this.#openDelay()); }; + #onLeave = (): void => { this.#clearTimers(); this.#hideTimer = setTimeout(() => this.#hide(), this.#closeDelay()); }; + #onContentEnter = (): void => { this.#clearTimers(); }; +} diff --git a/packages/core/src/components/hover-card/index.ts b/packages/core/src/components/hover-card/index.ts new file mode 100644 index 0000000..4d17fce --- /dev/null +++ b/packages/core/src/components/hover-card/index.ts @@ -0,0 +1,6 @@ +import { PettyHoverCard } from "./hover-card"; +export { PettyHoverCard }; + +if (!customElements.get("petty-hover-card")) { + customElements.define("petty-hover-card", PettyHoverCard); +} diff --git a/packages/core/src/components/image/image.schema.ts b/packages/core/src/components/image/image.schema.ts new file mode 100644 index 0000000..0bace39 --- /dev/null +++ b/packages/core/src/components/image/image.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-image", description: "Image element with fallback display on load failure", tier: 3, attributes: [], parts: [{ name: "fallback", element: "div", description: "Fallback content shown when image fails to load" }], events: [], example: `Photo
Image unavailable
` }; diff --git a/packages/core/src/components/image/image.ts b/packages/core/src/components/image/image.ts new file mode 100644 index 0000000..060622d --- /dev/null +++ b/packages/core/src/components/image/image.ts @@ -0,0 +1,38 @@ +/** PettyImage — image element with fallback display on load failure. */ +export class PettyImage extends HTMLElement { + connectedCallback(): void { + this.dataset.state = "loading"; + const img = this.querySelector("img"); + if (!img) { this.#showFallback(); return; } + img.addEventListener("load", this.#onLoad); + img.addEventListener("error", this.#onError); + if (img.complete && img.naturalWidth > 0) this.#onLoad(); + else if (img.complete) this.#onError(); + } + + disconnectedCallback(): void { + const img = this.querySelector("img"); + img?.removeEventListener("load", this.#onLoad); + img?.removeEventListener("error", this.#onError); + } + + #onLoad = (): void => { + this.dataset.state = "loaded"; + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = ""; + if (fallback) fallback.style.display = "none"; + }; + + #onError = (): void => { + this.dataset.state = "error"; + this.#showFallback(); + }; + + #showFallback(): void { + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = "none"; + if (fallback) fallback.style.display = ""; + } +} diff --git a/packages/core/src/components/image/index.ts b/packages/core/src/components/image/index.ts new file mode 100644 index 0000000..68305b2 --- /dev/null +++ b/packages/core/src/components/image/index.ts @@ -0,0 +1,6 @@ +import { PettyImage } from "./image"; +export { PettyImage }; + +if (!customElements.get("petty-image")) { + customElements.define("petty-image", PettyImage); +} diff --git a/packages/core/src/components/link/index.ts b/packages/core/src/components/link/index.ts new file mode 100644 index 0000000..139f4af --- /dev/null +++ b/packages/core/src/components/link/index.ts @@ -0,0 +1,6 @@ +import { PettyLink } from "./link"; +export { PettyLink }; + +if (!customElements.get("petty-link")) { + customElements.define("petty-link", PettyLink); +} diff --git a/packages/core/src/components/link/link.schema.ts b/packages/core/src/components/link/link.schema.ts new file mode 100644 index 0000000..df7a5c6 --- /dev/null +++ b/packages/core/src/components/link/link.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-link", description: "Headless anchor wrapper with disabled and external link support", tier: 1, attributes: [{ name: "disabled", type: "boolean", description: "Disables the link and prevents navigation" }, { name: "external", type: "boolean", description: "Opens link in new tab with noopener noreferrer" }], parts: [], events: [], example: `Visit site` }; diff --git a/packages/core/src/components/link/link.ts b/packages/core/src/components/link/link.ts new file mode 100644 index 0000000..682d3cb --- /dev/null +++ b/packages/core/src/components/link/link.ts @@ -0,0 +1,41 @@ +/** PettyLink — headless anchor wrapper with disabled and external support. */ +export class PettyLink extends HTMLElement { + static observedAttributes = ["disabled", "external"]; + + get anchorElement(): HTMLAnchorElement | null { + return this.querySelector("a"); + } + + connectedCallback(): void { + this.#sync(); + this.addEventListener("click", this.#handleClick); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const a = this.anchorElement; + if (!a) return; + if (this.hasAttribute("external")) { + a.setAttribute("target", "_blank"); + a.setAttribute("rel", "noopener noreferrer"); + } + if (this.hasAttribute("disabled")) { + a.setAttribute("aria-disabled", "true"); + a.tabIndex = -1; + } else { + a.removeAttribute("aria-disabled"); + a.removeAttribute("tabindex"); + } + } + + #handleClick = (e: Event): void => { + if (this.hasAttribute("disabled")) e.preventDefault(); + }; +} diff --git a/packages/core/src/components/listbox/index.ts b/packages/core/src/components/listbox/index.ts new file mode 100644 index 0000000..891195d --- /dev/null +++ b/packages/core/src/components/listbox/index.ts @@ -0,0 +1,8 @@ +import { PettyListbox } from "./listbox"; +import { PettyListboxOption } from "./listbox-option"; +export { PettyListbox, PettyListboxOption }; + +if (!customElements.get("petty-listbox")) { + customElements.define("petty-listbox", PettyListbox); + customElements.define("petty-listbox-option", PettyListboxOption); +} diff --git a/packages/core/src/components/listbox/listbox-option.ts b/packages/core/src/components/listbox/listbox-option.ts new file mode 100644 index 0000000..af8feb1 --- /dev/null +++ b/packages/core/src/components/listbox/listbox-option.ts @@ -0,0 +1,20 @@ +/** PettyListboxOption — single option within a listbox. */ +export class PettyListboxOption extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? this.textContent?.trim() ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "option"); + this.setAttribute("tabindex", "-1"); + this.setAttribute("aria-selected", "false"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.disabled)); + } + } +} diff --git a/packages/core/src/components/listbox/listbox.schema.ts b/packages/core/src/components/listbox/listbox.schema.ts new file mode 100644 index 0000000..a8c4984 --- /dev/null +++ b/packages/core/src/components/listbox/listbox.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-listbox", description: "Inline selectable list with single or multiple selection and keyboard navigation", tier: 3, attributes: [{ name: "value", type: "string", description: "Currently selected value (comma-separated for multiple)" }, { name: "default-value", type: "string", description: "Initial selected value" }, { name: "multiple", type: "boolean", description: "Allows selecting multiple options" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when selection changes" }], example: `AlphaBeta` }; diff --git a/packages/core/src/components/listbox/listbox.ts b/packages/core/src/components/listbox/listbox.ts new file mode 100644 index 0000000..a53c63b --- /dev/null +++ b/packages/core/src/components/listbox/listbox.ts @@ -0,0 +1,76 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyListbox — inline selectable list with single or multiple selection. */ +export class PettyListbox extends HTMLElement { + static observedAttributes = ["value", "default-value", "multiple"]; + + readonly #value = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#value.get(); } + set value(v: string) { this.#value.set(v); } + + get multiple(): boolean { return this.hasAttribute("multiple"); } + + /** Selects a value, toggling in multiple mode. */ + selectValue(v: string): void { + if (this.multiple) { + const current = this.#value.get().split(",").filter(Boolean); + const idx = current.indexOf(v); + if (idx >= 0) current.splice(idx, 1); + else current.push(v); + this.#value.set(current.join(",")); + } else { + this.#value.set(v); + } + emit(this, "change", { value: this.#value.get() }); + } + + connectedCallback(): void { + const init = initialValue(this); + if (init) this.#value.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + this.addEventListener("keydown", this.#onKeydown); + this.addEventListener("click", this.#onClick); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + this.removeEventListener("keydown", this.#onKeydown); + this.removeEventListener("click", this.#onClick); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(next); + } + + #options(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-listbox-option:not([disabled])")); + } + + #syncChildren(): void { + const selected = new Set(this.#value.get().split(",").filter(Boolean)); + const options = this.querySelectorAll("petty-listbox-option"); + for (const opt of options) { + const isSelected = selected.has(opt.getAttribute("value") ?? ""); + opt.dataset.state = isSelected ? "selected" : "unselected"; + opt.setAttribute("aria-selected", String(isSelected)); + } + } + + #onClick = (e: MouseEvent): void => { + const opt = (e.target as HTMLElement).closest("petty-listbox-option"); + if (!opt || opt.hasAttribute("disabled")) return; + this.selectValue(opt.getAttribute("value") ?? ""); + }; + + #onKeydown = (e: KeyboardEvent): void => { + const items = this.#options(); + const active = document.activeElement as HTMLElement; + const idx = items.indexOf(active); + if (e.key === "ArrowDown") { e.preventDefault(); items[(idx + 1) % items.length]?.focus(); } + else if (e.key === "ArrowUp") { e.preventDefault(); items[(idx - 1 + items.length) % items.length]?.focus(); } + else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (active) this.selectValue(active.getAttribute("value") ?? ""); } + }; +} diff --git a/packages/core/src/components/loading-indicator/index.ts b/packages/core/src/components/loading-indicator/index.ts new file mode 100644 index 0000000..1348cdb --- /dev/null +++ b/packages/core/src/components/loading-indicator/index.ts @@ -0,0 +1,6 @@ +import { PettyLoadingIndicator } from "./loading-indicator"; +export { PettyLoadingIndicator }; + +if (!customElements.get("petty-loading-indicator")) { + customElements.define("petty-loading-indicator", PettyLoadingIndicator); +} diff --git a/packages/core/src/components/loading-indicator/loading-indicator.ts b/packages/core/src/components/loading-indicator/loading-indicator.ts new file mode 100644 index 0000000..d615818 --- /dev/null +++ b/packages/core/src/components/loading-indicator/loading-indicator.ts @@ -0,0 +1,35 @@ +/** PettyLoadingIndicator — M3 Expressive shape-morphing loading animation. */ +export class PettyLoadingIndicator extends HTMLElement { + static observedAttributes = ["size", "contained"]; + + get size(): number { return Number(this.getAttribute("size") ?? 48); } + get contained(): boolean { return this.hasAttribute("contained"); } + + connectedCallback(): void { + this.setAttribute("role", "progressbar"); + this.setAttribute("aria-label", this.getAttribute("aria-label") ?? "Loading"); + this.#render(); + } + + attributeChangedCallback(): void { + this.#render(); + } + + #render(): void { + const px = `${this.size}px`; + const el = this.querySelector("[data-part=indicator]"); + if (el instanceof HTMLElement) { + el.style.width = px; + el.style.height = px; + return; + } + const container = document.createElement("div"); + container.dataset.part = "container"; + const indicator = document.createElement("div"); + indicator.dataset.part = "indicator"; + indicator.style.width = px; + indicator.style.height = px; + container.appendChild(indicator); + this.appendChild(container); + } +} diff --git a/packages/core/src/components/meter/index.ts b/packages/core/src/components/meter/index.ts new file mode 100644 index 0000000..1e32677 --- /dev/null +++ b/packages/core/src/components/meter/index.ts @@ -0,0 +1,6 @@ +import { PettyMeter } from "./meter"; +export { PettyMeter }; + +if (!customElements.get("petty-meter")) { + customElements.define("petty-meter", PettyMeter); +} diff --git a/packages/core/src/components/meter/meter.schema.ts b/packages/core/src/components/meter/meter.schema.ts new file mode 100644 index 0000000..c34fb86 --- /dev/null +++ b/packages/core/src/components/meter/meter.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-meter", description: "Value gauge with low/high/optimum state computation", tier: 3, attributes: [{ name: "value", type: "number", default: "0", description: "Current meter value" }, { name: "min", type: "number", default: "0", description: "Minimum value" }, { name: "max", type: "number", default: "100", description: "Maximum value" }, { name: "low", type: "number", description: "Low threshold value" }, { name: "high", type: "number", description: "High threshold value" }, { name: "optimum", type: "number", description: "Optimum value" }], parts: [{ name: "fill", element: "div", description: "Fill element sized via --petty-meter-value CSS custom property" }], events: [], example: `
` }; diff --git a/packages/core/src/components/meter/meter.ts b/packages/core/src/components/meter/meter.ts new file mode 100644 index 0000000..2badf5b --- /dev/null +++ b/packages/core/src/components/meter/meter.ts @@ -0,0 +1,47 @@ +/** PettyMeter — value gauge with low/high/optimum state computation. */ +export class PettyMeter extends HTMLElement { + static observedAttributes = ["value", "min", "max", "low", "high", "optimum"]; + + connectedCallback(): void { + this.setAttribute("role", "meter"); + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #num(attr: string, fallback: number): number { + const v = this.getAttribute(attr); + return v !== null ? Number(v) : fallback; + } + + #computeState(val: number, low: number, high: number, optimum: number): string { + if (val <= low) return "low"; + if (val >= high) return "high"; + if (Math.abs(val - optimum) <= (high - low) * 0.1) return "optimum"; + return "medium"; + } + + #updateFill(fraction: number): void { + const fill = this.querySelector("[data-part=fill]"); + if (fill instanceof HTMLElement) fill.style.setProperty("--petty-meter-value", String(fraction)); + } + + #sync(): void { + const val = this.#num("value", 0); + const min = this.#num("min", 0); + const max = this.#num("max", 100); + const low = this.#num("low", min); + const high = this.#num("high", max); + const optimum = this.#num("optimum", (low + high) / 2); + + this.setAttribute("aria-valuenow", String(val)); + this.setAttribute("aria-valuemin", String(min)); + this.setAttribute("aria-valuemax", String(max)); + this.dataset.state = this.#computeState(val, low, high, optimum); + + const range = max - min; + this.#updateFill(range > 0 ? (val - min) / range : 0); + } +} diff --git a/packages/core/src/components/navigation-menu/index.ts b/packages/core/src/components/navigation-menu/index.ts new file mode 100644 index 0000000..8802a9c --- /dev/null +++ b/packages/core/src/components/navigation-menu/index.ts @@ -0,0 +1,8 @@ +import { PettyNavigationMenu } from "./navigation-menu"; +import { PettyNavigationMenuItem } from "./navigation-menu-item"; +export { PettyNavigationMenu, PettyNavigationMenuItem }; + +if (!customElements.get("petty-navigation-menu")) { + customElements.define("petty-navigation-menu", PettyNavigationMenu); + customElements.define("petty-navigation-menu-item", PettyNavigationMenuItem); +} diff --git a/packages/core/src/components/navigation-menu/navigation-menu-item.ts b/packages/core/src/components/navigation-menu/navigation-menu-item.ts new file mode 100644 index 0000000..b34fa06 --- /dev/null +++ b/packages/core/src/components/navigation-menu/navigation-menu-item.ts @@ -0,0 +1,50 @@ +/** PettyNavigationMenuItem — nav item with optional popover content on hover. */ +export class PettyNavigationMenuItem extends HTMLElement { + #showTimer: ReturnType | null = null; + #hideTimer: ReturnType | null = null; + + connectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.querySelector("[data-part=content]"); + if (!trigger || !content) return; + trigger.addEventListener("mouseenter", this.#onEnter); + trigger.addEventListener("mouseleave", this.#onLeave); + content.addEventListener("mouseenter", this.#onContentEnter); + content.addEventListener("mouseleave", this.#onLeave); + } + + disconnectedCallback(): void { + this.#clearTimers(); + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.querySelector("[data-part=content]"); + trigger?.removeEventListener("mouseenter", this.#onEnter); + trigger?.removeEventListener("mouseleave", this.#onLeave); + content?.removeEventListener("mouseenter", this.#onContentEnter); + content?.removeEventListener("mouseleave", this.#onLeave); + } + + #content(): HTMLElement | null { return this.querySelector("[data-part=content]"); } + + #clearTimers(): void { + if (this.#showTimer) { clearTimeout(this.#showTimer); this.#showTimer = null; } + if (this.#hideTimer) { clearTimeout(this.#hideTimer); this.#hideTimer = null; } + } + + #onEnter = (): void => { + this.#clearTimers(); + this.#showTimer = setTimeout(() => { + const c = this.#content(); + if (c && !c.matches(":popover-open")) c.showPopover(); + }, 100); + }; + + #onLeave = (): void => { + this.#clearTimers(); + this.#hideTimer = setTimeout(() => { + const c = this.#content(); + if (c && c.matches(":popover-open")) c.hidePopover(); + }, 200); + }; + + #onContentEnter = (): void => { this.#clearTimers(); }; +} diff --git a/packages/core/src/components/navigation-menu/navigation-menu.schema.ts b/packages/core/src/components/navigation-menu/navigation-menu.schema.ts new file mode 100644 index 0000000..210cc5b --- /dev/null +++ b/packages/core/src/components/navigation-menu/navigation-menu.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-navigation-menu", description: "Horizontal nav with optional popover dropdowns on hover", tier: 3, attributes: [{ name: "orientation", type: "string", default: "horizontal", description: "Layout orientation: horizontal or vertical" }], parts: [{ name: "trigger", element: "button", description: "Nav item trigger that shows content on hover (on petty-navigation-menu-item)" }, { name: "content", element: "div", description: "Popover dropdown content (on petty-navigation-menu-item)" }], events: [], example: `` }; diff --git a/packages/core/src/components/navigation-menu/navigation-menu.ts b/packages/core/src/components/navigation-menu/navigation-menu.ts new file mode 100644 index 0000000..72a246c --- /dev/null +++ b/packages/core/src/components/navigation-menu/navigation-menu.ts @@ -0,0 +1,13 @@ +/** PettyNavigationMenu — horizontal nav with optional popover dropdowns. */ +export class PettyNavigationMenu extends HTMLElement { + static observedAttributes = ["orientation"]; + + connectedCallback(): void { + if (!this.querySelector("nav")) this.setAttribute("role", "navigation"); + this.dataset.orientation = this.getAttribute("orientation") ?? "horizontal"; + } + + attributeChangedCallback(): void { + this.dataset.orientation = this.getAttribute("orientation") ?? "horizontal"; + } +} diff --git a/packages/core/src/components/number-field/index.ts b/packages/core/src/components/number-field/index.ts new file mode 100644 index 0000000..eb0acd0 --- /dev/null +++ b/packages/core/src/components/number-field/index.ts @@ -0,0 +1,6 @@ +import { PettyNumberField } from "./number-field"; +export { PettyNumberField }; + +if (!customElements.get("petty-number-field")) { + customElements.define("petty-number-field", PettyNumberField); +} diff --git a/packages/core/src/components/number-field/number-field.schema.ts b/packages/core/src/components/number-field/number-field.schema.ts new file mode 100644 index 0000000..bb768bb --- /dev/null +++ b/packages/core/src/components/number-field/number-field.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-number-field", description: "Numeric input with increment/decrement buttons and value clamping", tier: 3, attributes: [{ name: "min", type: "number", description: "Minimum allowed value" }, { name: "max", type: "number", description: "Maximum allowed value" }, { name: "step", type: "number", default: "1", description: "Step increment/decrement amount" }, { name: "value", type: "number", description: "Current numeric value" }, { name: "disabled", type: "boolean", description: "Disables the field" }, { name: "name", type: "string", description: "Form field name" }], parts: [{ name: "control", element: "input", description: "The numeric input element" }, { name: "label", element: "label", description: "Label auto-linked to the input" }, { name: "increment", element: "button", description: "Button to increase the value" }, { name: "decrement", element: "button", description: "Button to decrease the value" }], events: [{ name: "petty-change", detail: "{ value: number }", description: "Fires when the value changes" }], example: `` }; diff --git a/packages/core/src/components/number-field/number-field.ts b/packages/core/src/components/number-field/number-field.ts new file mode 100644 index 0000000..7318cab --- /dev/null +++ b/packages/core/src/components/number-field/number-field.ts @@ -0,0 +1,91 @@ +import { signal } from "../../signals"; +import { emit } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettyNumberField — numeric input with increment/decrement buttons and clamping. */ +export class PettyNumberField extends HTMLElement { + static observedAttributes = ["min", "max", "step", "value", "disabled", "name"]; + + readonly #value = signal(0); + + get value(): number { return this.#value.get(); } + set value(v: number) { this.#applyValue(v); } + + connectedCallback(): void { + const input = this.#input(); + const init = this.getAttribute("value"); + if (init !== null) this.#value.set(Number(init)); + this.#syncInput(); + this.#wireLabel(); + + input?.addEventListener("input", this.#onInput); + input?.addEventListener("keydown", this.#onKeydown); + this.querySelector("[data-part=increment]")?.addEventListener("click", this.#onIncrement); + this.querySelector("[data-part=decrement]")?.addEventListener("click", this.#onDecrement); + } + + disconnectedCallback(): void { + const input = this.#input(); + input?.removeEventListener("input", this.#onInput); + input?.removeEventListener("keydown", this.#onKeydown); + this.querySelector("[data-part=increment]")?.removeEventListener("click", this.#onIncrement); + this.querySelector("[data-part=decrement]")?.removeEventListener("click", this.#onDecrement); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(Number(next)); + this.#syncInput(); + } + + #input(): HTMLInputElement | null { + return this.querySelector("input[data-part=control]"); + } + + #wireLabel(): void { + const input = this.#input(); + const label = this.querySelector("[data-part=label]"); + if (input && label) { + if (!input.id) input.id = uniqueId("petty-nf"); + (label as HTMLLabelElement).htmlFor = input.id; + } + } + + #clamp(v: number): number { + const min = Number(this.getAttribute("min") ?? -Infinity); + const max = Number(this.getAttribute("max") ?? Infinity); + return Math.min(Math.max(v, min), max); + } + + #step(): number { + return Number(this.getAttribute("step") ?? 1); + } + + #applyValue(v: number): void { + const clamped = this.#clamp(v); + this.#value.set(clamped); + this.#syncInput(); + emit(this, "change", { value: clamped }); + } + + #syncInput(): void { + const input = this.#input(); + if (!input) return; + input.value = String(this.#value.get()); + input.disabled = this.hasAttribute("disabled"); + if (this.hasAttribute("name")) input.name = this.getAttribute("name") ?? ""; + } + + #onInput = (): void => { + const raw = Number(this.#input()?.value ?? 0); + if (!Number.isNaN(raw)) this.#applyValue(raw); + }; + + #onKeydown = (e: KeyboardEvent): void => { + if (e.key === "ArrowUp") { e.preventDefault(); this.#applyValue(this.#value.get() + this.#step()); } + if (e.key === "ArrowDown") { e.preventDefault(); this.#applyValue(this.#value.get() - this.#step()); } + }; + + #onIncrement = (): void => { if (!this.hasAttribute("disabled")) this.#applyValue(this.#value.get() + this.#step()); }; + #onDecrement = (): void => { if (!this.hasAttribute("disabled")) this.#applyValue(this.#value.get() - this.#step()); }; + +} diff --git a/packages/core/src/components/pagination/index.ts b/packages/core/src/components/pagination/index.ts new file mode 100644 index 0000000..f1c5c4b --- /dev/null +++ b/packages/core/src/components/pagination/index.ts @@ -0,0 +1,8 @@ +import { PettyPagination } from "./pagination"; +import { PettyPaginationItem } from "./pagination-item"; +export { PettyPagination, PettyPaginationItem }; + +if (!customElements.get("petty-pagination")) { + customElements.define("petty-pagination", PettyPagination); + customElements.define("petty-pagination-item", PettyPaginationItem); +} diff --git a/packages/core/src/components/pagination/pagination-item.ts b/packages/core/src/components/pagination/pagination-item.ts new file mode 100644 index 0000000..eaafe37 --- /dev/null +++ b/packages/core/src/components/pagination/pagination-item.ts @@ -0,0 +1,41 @@ +/** PettyPaginationItem — single page button within a pagination component. */ +export class PettyPaginationItem extends HTMLElement { + static observedAttributes = ["value", "type", "disabled"]; + + connectedCallback(): void { + this.setAttribute("role", "button"); + this.setAttribute("tabindex", "0"); + this.addEventListener("click", this.#handleClick); + this.addEventListener("keydown", this.#handleKeydown); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + this.removeEventListener("keydown", this.#handleKeydown); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.hasAttribute("disabled"))); + } + } + + #pagination(): { goToPage(n: number): void; currentPage: number } | null { + return this.closest("petty-pagination") as { goToPage(n: number): void; currentPage: number } | null; + } + + #activate(): void { + if (this.hasAttribute("disabled")) return; + const pag = this.#pagination(); + if (!pag) return; + const type = this.getAttribute("type"); + if (type === "prev") pag.goToPage(pag.currentPage - 1); + else if (type === "next") pag.goToPage(pag.currentPage + 1); + else pag.goToPage(Number(this.getAttribute("value") ?? 1)); + } + + #handleClick = (): void => { this.#activate(); }; + #handleKeydown = (e: KeyboardEvent): void => { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); this.#activate(); } + }; +} diff --git a/packages/core/src/components/pagination/pagination.schema.ts b/packages/core/src/components/pagination/pagination.schema.ts new file mode 100644 index 0000000..34d6f73 --- /dev/null +++ b/packages/core/src/components/pagination/pagination.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-pagination", description: "Page navigation with prev/next and numbered page items", tier: 3, attributes: [{ name: "total", type: "number", description: "Total number of items" }, { name: "page-size", type: "number", default: "10", description: "Items per page" }, { name: "current-page", type: "number", default: "1", description: "Current active page number" }], parts: [], events: [{ name: "petty-change", detail: "{ page: number }", description: "Fires when the current page changes" }], example: `Prev12Next` }; diff --git a/packages/core/src/components/pagination/pagination.ts b/packages/core/src/components/pagination/pagination.ts new file mode 100644 index 0000000..1e73021 --- /dev/null +++ b/packages/core/src/components/pagination/pagination.ts @@ -0,0 +1,61 @@ +import { signal, effect } from "../../signals"; +import { emit } from "../../shared/helpers"; + +/** PettyPagination — page navigation with prev/next and numbered items. */ +export class PettyPagination extends HTMLElement { + static observedAttributes = ["total", "page-size", "current-page"]; + + readonly #page = signal(1); + #stopEffect: (() => void) | null = null; + + get totalPages(): number { + const total = Number(this.getAttribute("total") ?? 0); + const size = Number(this.getAttribute("page-size") ?? 10); + return Math.max(1, Math.ceil(total / size)); + } + + get currentPage(): number { return this.#page.get(); } + set currentPage(v: number) { this.goToPage(v); } + + /** Navigates to a specific page, clamped to valid range. */ + goToPage(n: number): void { + const clamped = Math.min(Math.max(1, n), this.totalPages); + if (this.#page.get() === clamped) return; + this.#page.set(clamped); + emit(this, "change", { page: clamped }); + } + + connectedCallback(): void { + const init = Number(this.getAttribute("current-page") ?? 1); + this.#page.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "current-page" && next !== null) this.#page.set(Number(next)); + } + + #syncChildren(): void { + const page = this.#page.get(); + const total = this.totalPages; + const items = this.querySelectorAll("petty-pagination-item"); + for (const item of items) { + const type = item.getAttribute("type"); + const val = Number(item.getAttribute("value") ?? 0); + if (type === "prev") { + item.toggleAttribute("disabled", page <= 1); + } else if (type === "next") { + item.toggleAttribute("disabled", page >= total); + } else { + const isActive = val === page; + item.dataset.state = isActive ? "active" : "inactive"; + if (isActive) item.setAttribute("aria-current", "page"); + else item.removeAttribute("aria-current"); + } + } + } +} diff --git a/packages/core/src/components/parallax/index.ts b/packages/core/src/components/parallax/index.ts new file mode 100644 index 0000000..68f80a6 --- /dev/null +++ b/packages/core/src/components/parallax/index.ts @@ -0,0 +1,6 @@ +import { PettyParallax } from "./parallax"; +export { PettyParallax }; + +if (!customElements.get("petty-parallax")) { + customElements.define("petty-parallax", PettyParallax); +} diff --git a/packages/core/src/components/parallax/parallax.ts b/packages/core/src/components/parallax/parallax.ts new file mode 100644 index 0000000..bfc28f0 --- /dev/null +++ b/packages/core/src/components/parallax/parallax.ts @@ -0,0 +1,39 @@ +/** PettyParallax — creates depth effect by translating element based on scroll position. */ +export class PettyParallax extends HTMLElement { + static observedAttributes = ["speed", "direction"]; + + #frame: ReturnType | null = null; + + get speed(): number { return Number(this.getAttribute("speed") ?? 0.5); } + get direction(): string { return this.getAttribute("direction") ?? "up"; } + + connectedCallback(): void { + this.style.willChange = "transform"; + window.addEventListener("scroll", this.#onScroll, { passive: true }); + this.#update(); + } + + disconnectedCallback(): void { + window.removeEventListener("scroll", this.#onScroll); + if (this.#frame) cancelAnimationFrame(this.#frame); + } + + #onScroll = (): void => { + if (this.#frame) return; + this.#frame = requestAnimationFrame(() => { + this.#update(); + this.#frame = null; + }); + }; + + #update(): void { + const rect = this.getBoundingClientRect(); + const viewH = window.innerHeight; + const center = rect.top + rect.height / 2; + const offset = (center - viewH / 2) * this.speed; + const dir = this.direction; + const x = dir === "left" ? -offset : dir === "right" ? offset : 0; + const y = dir === "up" ? -offset : dir === "down" ? offset : dir === "left" || dir === "right" ? 0 : -offset; + this.style.transform = `translate3d(${x}px, ${y}px, 0)`; + } +} diff --git a/packages/core/src/components/popover/index.ts b/packages/core/src/components/popover/index.ts index 9bfd8e3..163a200 100644 --- a/packages/core/src/components/popover/index.ts +++ b/packages/core/src/components/popover/index.ts @@ -1,4 +1,5 @@ -export { PettyPopover } from "./popover"; +import { PettyPopover } from "./popover"; +export { PettyPopover }; if (!customElements.get("petty-popover")) { customElements.define("petty-popover", PettyPopover); diff --git a/packages/core/src/components/popover/popover.schema.ts b/packages/core/src/components/popover/popover.schema.ts new file mode 100644 index 0000000..a83b545 --- /dev/null +++ b/packages/core/src/components/popover/popover.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-popover", description: "Headless popover built on the native Popover API with ARIA linking", tier: 2, attributes: [], parts: [{ name: "content", element: "div", description: "The popover content element (must have popover attribute)" }], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the popover opens or closes" }], example: `

Popover content

` }; diff --git a/packages/core/src/components/popover/popover.ts b/packages/core/src/components/popover/popover.ts index 0f21a86..636f13d 100644 --- a/packages/core/src/components/popover/popover.ts +++ b/packages/core/src/components/popover/popover.ts @@ -1,3 +1,6 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + /** * PettyPopover — headless popover custom element built on the native Popover API. * @@ -65,19 +68,14 @@ export class PettyPopover extends HTMLElement { const open = toggleEvent.newState === "open"; const trigger = this.triggerElement; if (trigger) trigger.setAttribute("aria-expanded", String(open)); - this.dispatchEvent(new CustomEvent("petty-toggle", { - bubbles: true, - detail: { open }, - })); + emit(this, "toggle", { open }); }; #linkAria(pop: HTMLElement): void { - if (!pop.id) pop.id = `petty-pop-${PettyPopover.#counter++}`; + if (!pop.id) pop.id = uniqueId("petty-pop"); const trigger = this.triggerElement; if (!trigger) return; trigger.setAttribute("aria-controls", pop.id); trigger.setAttribute("aria-expanded", String(this.isOpen)); } - - static #counter = 0; } diff --git a/packages/core/src/components/progress/index.ts b/packages/core/src/components/progress/index.ts new file mode 100644 index 0000000..04d4438 --- /dev/null +++ b/packages/core/src/components/progress/index.ts @@ -0,0 +1,6 @@ +import { PettyProgress } from "./progress"; +export { PettyProgress }; + +if (!customElements.get("petty-progress")) { + customElements.define("petty-progress", PettyProgress); +} diff --git a/packages/core/src/components/progress/progress.schema.ts b/packages/core/src/components/progress/progress.schema.ts new file mode 100644 index 0000000..4b29e13 --- /dev/null +++ b/packages/core/src/components/progress/progress.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-progress", description: "Accessible progress bar with indeterminate state support", tier: 3, attributes: [{ name: "value", type: "number", description: "Current progress value, omit for indeterminate state" }, { name: "max", type: "number", default: "100", description: "Maximum progress value" }], parts: [{ name: "fill", element: "div", description: "Fill element sized via --petty-progress CSS custom property" }, { name: "label", element: "span", description: "Label displaying percentage text" }], events: [], example: `
` }; diff --git a/packages/core/src/components/progress/progress.ts b/packages/core/src/components/progress/progress.ts new file mode 100644 index 0000000..4290532 --- /dev/null +++ b/packages/core/src/components/progress/progress.ts @@ -0,0 +1,42 @@ +/** PettyProgress — accessible progress bar with indeterminate state support. */ +export class PettyProgress extends HTMLElement { + static observedAttributes = ["value", "max"]; + + get value(): number | null { + const v = this.getAttribute("value"); + return v !== null ? Number(v) : null; + } + + get max(): number { + return Number(this.getAttribute("max") ?? 100); + } + + connectedCallback(): void { + this.setAttribute("role", "progressbar"); + this.setAttribute("aria-valuemin", "0"); + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const v = this.value; + const max = this.max; + this.setAttribute("aria-valuemax", String(max)); + + if (v === null) { + this.removeAttribute("aria-valuenow"); + this.dataset.state = "indeterminate"; + return; + } + this.setAttribute("aria-valuenow", String(v)); + this.dataset.state = v >= max ? "complete" : "loading"; + const fraction = max > 0 ? v / max : 0; + const fill = this.querySelector("[data-part=fill]"); + if (fill instanceof HTMLElement) fill.style.setProperty("--petty-progress", String(fraction)); + const label = this.querySelector("[data-part=label]"); + if (label) label.textContent = `${Math.round(fraction * 100)}%`; + } +} diff --git a/packages/core/src/components/radio-group/index.ts b/packages/core/src/components/radio-group/index.ts new file mode 100644 index 0000000..fa418f9 --- /dev/null +++ b/packages/core/src/components/radio-group/index.ts @@ -0,0 +1,8 @@ +import { PettyRadioGroup } from "./radio-group"; +import { PettyRadioItem } from "./radio-item"; +export { PettyRadioGroup, PettyRadioItem }; + +if (!customElements.get("petty-radio-group")) { + customElements.define("petty-radio-group", PettyRadioGroup); + customElements.define("petty-radio-item", PettyRadioItem); +} diff --git a/packages/core/src/components/radio-group/radio-group.schema.ts b/packages/core/src/components/radio-group/radio-group.schema.ts new file mode 100644 index 0000000..72855a7 --- /dev/null +++ b/packages/core/src/components/radio-group/radio-group.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-radio-group", description: "Mutually exclusive selection group with keyboard navigation", tier: 3, attributes: [{ name: "name", type: "string", description: "Form field name" }, { name: "value", type: "string", description: "Currently selected value" }, { name: "default-value", type: "string", description: "Initial selected value" }, { name: "orientation", type: "string", default: "vertical", description: "Layout orientation: vertical or horizontal" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the selected radio item changes" }], example: `SmallMediumLarge` }; diff --git a/packages/core/src/components/radio-group/radio-group.ts b/packages/core/src/components/radio-group/radio-group.ts new file mode 100644 index 0000000..391c141 --- /dev/null +++ b/packages/core/src/components/radio-group/radio-group.ts @@ -0,0 +1,56 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyRadioGroup — mutually exclusive selection group with keyboard navigation. */ +export class PettyRadioGroup extends HTMLElement { + static observedAttributes = ["name", "value", "default-value", "orientation"]; + + readonly #value = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#value.get(); } + set value(v: string) { this.#value.set(v); } + + /** Selects a value and dispatches petty-change. */ + selectValue(v: string): void { + if (this.#value.get() === v) return; + this.#value.set(v); + emit(this, "change", { value: v }); + } + + connectedCallback(): void { + this.setAttribute("role", "radiogroup"); + const orientation = this.getAttribute("orientation") ?? "vertical"; + this.setAttribute("aria-orientation", orientation); + const init = initialValue(this); + if (init) this.#value.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(next); + } + + #syncChildren(): void { + const active = this.#value.get(); + const items = this.querySelectorAll("petty-radio-item"); + let activeIdx = -1; + let idx = 0; + for (const item of items) { + const isChecked = item.getAttribute("value") === active; + item.dataset.state = isChecked ? "checked" : "unchecked"; + item.setAttribute("aria-checked", String(isChecked)); + item.setAttribute("tabindex", isChecked ? "0" : "-1"); + if (isChecked) activeIdx = idx; + idx++; + } + const first = items[0]; + if (activeIdx === -1 && first) { + first.setAttribute("tabindex", "0"); + } + } +} diff --git a/packages/core/src/components/radio-group/radio-item.ts b/packages/core/src/components/radio-group/radio-item.ts new file mode 100644 index 0000000..a95de5c --- /dev/null +++ b/packages/core/src/components/radio-group/radio-item.ts @@ -0,0 +1,62 @@ +import { wrapIndex } from "../../shared/keyboard"; + +/** PettyRadioItem — single radio option within a petty-radio-group. */ +export class PettyRadioItem extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "radio"); + this.setAttribute("tabindex", "-1"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + this.addEventListener("click", this.#handleClick); + this.addEventListener("keydown", this.#handleKeydown); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + this.removeEventListener("keydown", this.#handleKeydown); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.disabled)); + } + } + + #group(): { selectValue(v: string): void } | null { + return this.closest("petty-radio-group") as { selectValue(v: string): void } | null; + } + + #siblings(): PettyRadioItem[] { + const group = this.closest("petty-radio-group"); + if (!group) return []; + return Array.from(group.querySelectorAll("petty-radio-item:not([disabled])")); + } + + #handleClick = (): void => { + if (this.disabled) return; + this.#group()?.selectValue(this.value); + this.focus(); + }; + + #handleKeydown = (e: KeyboardEvent): void => { + const isVertical = this.closest("petty-radio-group")?.getAttribute("orientation") !== "horizontal"; + const prev = isVertical ? "ArrowUp" : "ArrowLeft"; + const next = isVertical ? "ArrowDown" : "ArrowRight"; + if (e.key !== prev && e.key !== next && e.key !== " ") return; + e.preventDefault(); + if (e.key === " ") { this.#handleClick(); return; } + const items = this.#siblings(); + const idx = items.indexOf(this); + if (idx === -1) return; + const delta = e.key === next ? 1 : -1; + const target = items[wrapIndex(idx, delta, items.length)]; + if (target) { + this.#group()?.selectValue(target.value); + target.focus(); + } + }; +} diff --git a/packages/core/src/components/reveal/index.ts b/packages/core/src/components/reveal/index.ts new file mode 100644 index 0000000..b01e219 --- /dev/null +++ b/packages/core/src/components/reveal/index.ts @@ -0,0 +1,6 @@ +import { PettyReveal } from "./reveal"; +export { PettyReveal }; + +if (!customElements.get("petty-reveal")) { + customElements.define("petty-reveal", PettyReveal); +} diff --git a/packages/core/src/components/reveal/reveal.ts b/packages/core/src/components/reveal/reveal.ts new file mode 100644 index 0000000..bc3e57e --- /dev/null +++ b/packages/core/src/components/reveal/reveal.ts @@ -0,0 +1,57 @@ +import { emit } from "../../shared/helpers"; + +/** PettyReveal — triggers animation when element enters the viewport via IntersectionObserver. */ +export class PettyReveal extends HTMLElement { + static observedAttributes = ["animation", "threshold", "delay", "once"]; + + #observer: IntersectionObserver | null = null; + + get animation(): string { return this.getAttribute("animation") ?? "fade-up"; } + get threshold(): number { return Number(this.getAttribute("threshold") ?? 0.2); } + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + get once(): boolean { return this.hasAttribute("once") || !this.hasAttribute("repeat"); } + + connectedCallback(): void { + this.classList.add("petty-reveal-hidden"); + this.dataset.state = "hidden"; + this.#observer = new IntersectionObserver(this.#onIntersect, { threshold: this.threshold }); + this.#observer.observe(this); + } + + disconnectedCallback(): void { + this.#observer?.disconnect(); + this.#observer = null; + } + + #onIntersect = (entries: IntersectionObserverEntry[]): void => { + for (const entry of entries) { + if (entry.isIntersecting) { + this.#show(); + if (this.once) this.#observer?.unobserve(this); + } else if (!this.once) { + this.#hide(); + } + } + }; + + #show(): void { + if (this.delay > 0) { + setTimeout(() => this.#reveal(), this.delay); + } else { + this.#reveal(); + } + } + + #reveal(): void { + this.classList.remove("petty-reveal-hidden"); + this.classList.add(`petty-reveal-${this.animation}`); + this.dataset.state = "visible"; + emit(this, "reveal", {}); + } + + #hide(): void { + this.classList.add("petty-reveal-hidden"); + this.classList.remove(`petty-reveal-${this.animation}`); + this.dataset.state = "hidden"; + } +} diff --git a/packages/core/src/components/select/index.ts b/packages/core/src/components/select/index.ts index 55ef420..557ed24 100644 --- a/packages/core/src/components/select/index.ts +++ b/packages/core/src/components/select/index.ts @@ -1,5 +1,6 @@ -export { PettySelect } from "./select"; -export { PettySelectOption } from "./select-option"; +import { PettySelect } from "./select"; +import { PettySelectOption } from "./select-option"; +export { PettySelect, PettySelectOption }; if (!customElements.get("petty-select")) { customElements.define("petty-select", PettySelect); diff --git a/packages/core/src/components/select/select.schema.ts b/packages/core/src/components/select/select.schema.ts new file mode 100644 index 0000000..cf3a1ad --- /dev/null +++ b/packages/core/src/components/select/select.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-select", description: "Headless select built on native Popover API with keyboard navigation", tier: 2, attributes: [{ name: "value", type: "string", description: "Currently selected value" }, { name: "default-value", type: "string", description: "Initial selected value" }, { name: "placeholder", type: "string", description: "Placeholder text shown when no value is selected" }], parts: [{ name: "trigger", element: "button", description: "Button that opens the select listbox" }, { name: "listbox", element: "div", description: "Popover container with role=listbox for options" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the selected option changes" }], example: `
AppleBanana
` }; diff --git a/packages/core/src/components/select/select.ts b/packages/core/src/components/select/select.ts index bd64237..4377c67 100644 --- a/packages/core/src/components/select/select.ts +++ b/packages/core/src/components/select/select.ts @@ -1,4 +1,6 @@ import { signal } from "../../signals"; +import { part, emit, initialValue, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; /** * PettySelect — headless select custom element built on the native Popover API. @@ -53,14 +55,14 @@ export class PettySelect extends HTMLElement { const lb = this.#listbox(); if (!lb) return; - if (!lb.id) lb.id = `petty-select-lb-${PettySelect.#counter++}`; + if (!lb.id) lb.id = uniqueId("petty-select-lb"); if (trigger) { trigger.setAttribute("aria-haspopup", "listbox"); trigger.setAttribute("aria-expanded", "false"); trigger.setAttribute("aria-controls", lb.id); } - const init = this.getAttribute("default-value") ?? this.getAttribute("value") ?? ""; + const init = initialValue(this); if (init) this.#applyValue(init, false); lb.addEventListener("toggle", this.#onToggle); @@ -114,10 +116,7 @@ export class PettySelect extends HTMLElement { if (input) input.value = val; if (dispatch) { - this.dispatchEvent(new CustomEvent("petty-change", { - bubbles: true, - detail: { value: val }, - })); + emit(this, "change", { value: val }); } } @@ -183,6 +182,4 @@ export class PettySelect extends HTMLElement { this.#applyValue(val, true); this.close(); } - - static #counter = 0; } diff --git a/packages/core/src/components/separator/index.ts b/packages/core/src/components/separator/index.ts new file mode 100644 index 0000000..f4f632b --- /dev/null +++ b/packages/core/src/components/separator/index.ts @@ -0,0 +1,6 @@ +import { PettySeparator } from "./separator"; +export { PettySeparator }; + +if (!customElements.get("petty-separator")) { + customElements.define("petty-separator", PettySeparator); +} diff --git a/packages/core/src/components/separator/separator.schema.ts b/packages/core/src/components/separator/separator.schema.ts new file mode 100644 index 0000000..d10a11b --- /dev/null +++ b/packages/core/src/components/separator/separator.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-separator", description: "Accessible divider with configurable orientation", tier: 1, attributes: [{ name: "orientation", type: "string", default: "horizontal", description: "Divider orientation: horizontal or vertical" }], parts: [], events: [], example: `` }; diff --git a/packages/core/src/components/separator/separator.ts b/packages/core/src/components/separator/separator.ts new file mode 100644 index 0000000..3a094ac --- /dev/null +++ b/packages/core/src/components/separator/separator.ts @@ -0,0 +1,19 @@ +/** PettySeparator — accessible divider with configurable orientation. */ +export class PettySeparator extends HTMLElement { + static observedAttributes = ["orientation"]; + + connectedCallback(): void { + this.setAttribute("role", "separator"); + this.#syncOrientation(); + } + + attributeChangedCallback(): void { + this.#syncOrientation(); + } + + #syncOrientation(): void { + const orientation = this.getAttribute("orientation") ?? "horizontal"; + this.setAttribute("aria-orientation", orientation); + this.dataset.orientation = orientation; + } +} diff --git a/packages/core/src/components/skeleton/index.ts b/packages/core/src/components/skeleton/index.ts new file mode 100644 index 0000000..368e766 --- /dev/null +++ b/packages/core/src/components/skeleton/index.ts @@ -0,0 +1,6 @@ +import { PettySkeleton } from "./skeleton"; +export { PettySkeleton }; + +if (!customElements.get("petty-skeleton")) { + customElements.define("petty-skeleton", PettySkeleton); +} diff --git a/packages/core/src/components/skeleton/skeleton.schema.ts b/packages/core/src/components/skeleton/skeleton.schema.ts new file mode 100644 index 0000000..e1055d7 --- /dev/null +++ b/packages/core/src/components/skeleton/skeleton.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-skeleton", description: "Loading placeholder with aria-busy and loaded state transitions", tier: 3, attributes: [{ name: "loaded", type: "boolean", description: "When set, transitions from loading to loaded state" }], parts: [], events: [], example: `Loading content...` }; diff --git a/packages/core/src/components/skeleton/skeleton.ts b/packages/core/src/components/skeleton/skeleton.ts new file mode 100644 index 0000000..e9c8fb6 --- /dev/null +++ b/packages/core/src/components/skeleton/skeleton.ts @@ -0,0 +1,19 @@ +/** PettySkeleton — loading placeholder with aria-busy and loaded state transitions. */ +export class PettySkeleton extends HTMLElement { + static observedAttributes = ["loaded"]; + + get loaded(): boolean { return this.hasAttribute("loaded"); } + + connectedCallback(): void { + this.setAttribute("role", "status"); + this.setAttribute("aria-label", "Loading"); + this.setAttribute("aria-busy", "true"); + this.dataset.state = "loading"; + } + + attributeChangedCallback(): void { + const done = this.loaded; + this.setAttribute("aria-busy", String(!done)); + this.dataset.state = done ? "loaded" : "loading"; + } +} diff --git a/packages/core/src/components/slider/index.ts b/packages/core/src/components/slider/index.ts new file mode 100644 index 0000000..eacd644 --- /dev/null +++ b/packages/core/src/components/slider/index.ts @@ -0,0 +1,6 @@ +import { PettySlider } from "./slider"; +export { PettySlider }; + +if (!customElements.get("petty-slider")) { + customElements.define("petty-slider", PettySlider); +} diff --git a/packages/core/src/components/slider/slider.schema.ts b/packages/core/src/components/slider/slider.schema.ts new file mode 100644 index 0000000..070a6f1 --- /dev/null +++ b/packages/core/src/components/slider/slider.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-slider", description: "Range input wrapper with label, output display, and change events", tier: 3, attributes: [{ name: "min", type: "number", description: "Minimum slider value" }, { name: "max", type: "number", description: "Maximum slider value" }, { name: "step", type: "number", description: "Step increment" }, { name: "value", type: "number", description: "Current slider value" }, { name: "disabled", type: "boolean", description: "Disables the slider" }, { name: "name", type: "string", description: "Form field name" }, { name: "orientation", type: "string", default: "horizontal", description: "Slider orientation: horizontal or vertical" }], parts: [{ name: "control", element: "input", description: "The range input element" }, { name: "label", element: "label", description: "Label auto-linked to the input" }, { name: "output", element: "output", description: "Displays the current numeric value" }], events: [{ name: "petty-change", detail: "{ value: number }", description: "Fires when the slider value changes" }], example: `` }; diff --git a/packages/core/src/components/slider/slider.ts b/packages/core/src/components/slider/slider.ts new file mode 100644 index 0000000..31f08d9 --- /dev/null +++ b/packages/core/src/components/slider/slider.ts @@ -0,0 +1,71 @@ +import { emit } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettySlider — range input wrapper with label, output, and change events. */ +export class PettySlider extends HTMLElement { + static observedAttributes = ["min", "max", "step", "value", "disabled", "name", "orientation"]; + + get value(): number { + return Number(this.#input()?.value ?? 0); + } + + set value(v: number) { + const input = this.#input(); + if (input) { input.value = String(v); this.#syncOutput(); } + } + + connectedCallback(): void { + const input = this.#input(); + if (!input) return; + this.#syncAttrs(); + this.#wireLabel(); + this.#syncOutput(); + input.addEventListener("input", this.#handleInput); + } + + disconnectedCallback(): void { + this.#input()?.removeEventListener("input", this.#handleInput); + } + + attributeChangedCallback(): void { + this.#syncAttrs(); + this.#syncOutput(); + } + + #input(): HTMLInputElement | null { + return this.querySelector("input[data-part=control]"); + } + + #wireLabel(): void { + const input = this.#input(); + const label = this.querySelector("[data-part=label]"); + if (input && label) { + if (!input.id) input.id = uniqueId("petty-slider"); + (label as HTMLLabelElement).htmlFor = input.id; + } + } + + #syncAttrs(): void { + const input = this.#input(); + if (!input) return; + for (const attr of ["min", "max", "step", "name"]) { + const val = this.getAttribute(attr); + if (val !== null) input.setAttribute(attr, val); + } + const v = this.getAttribute("value"); + if (v !== null) input.value = v; + input.disabled = this.hasAttribute("disabled"); + this.dataset.orientation = this.getAttribute("orientation") ?? "horizontal"; + } + + #syncOutput(): void { + const output = this.querySelector("[data-part=output]"); + if (output) output.textContent = String(this.value); + } + + #handleInput = (): void => { + this.#syncOutput(); + emit(this, "change", { value: this.value }); + }; + +} diff --git a/packages/core/src/components/stagger/index.ts b/packages/core/src/components/stagger/index.ts new file mode 100644 index 0000000..feba48b --- /dev/null +++ b/packages/core/src/components/stagger/index.ts @@ -0,0 +1,6 @@ +import { PettyStagger } from "./stagger"; +export { PettyStagger }; + +if (!customElements.get("petty-stagger")) { + customElements.define("petty-stagger", PettyStagger); +} diff --git a/packages/core/src/components/stagger/stagger.ts b/packages/core/src/components/stagger/stagger.ts new file mode 100644 index 0000000..e982dca --- /dev/null +++ b/packages/core/src/components/stagger/stagger.ts @@ -0,0 +1,35 @@ +import { emit } from "../../shared/helpers"; + +/** PettyStagger — animates children in sequence with configurable delay between each. */ +export class PettyStagger extends HTMLElement { + static observedAttributes = ["delay", "stagger", "animation"]; + + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + get stagger(): number { return Number(this.getAttribute("stagger") ?? 100); } + get animation(): string { return this.getAttribute("animation") ?? "fade-up"; } + + /** Triggers the stagger animation on all children. */ + start(): void { + const children = Array.from(this.children) as HTMLElement[]; + children.forEach((child, i) => { + child.style.animationDelay = `${this.delay + i * this.stagger}ms`; + child.classList.remove("petty-stagger-hidden"); + child.classList.add(`petty-stagger-${this.animation}`); + }); + this.dataset.state = "animating"; + const totalDuration = this.delay + children.length * this.stagger + 600; + setTimeout(() => { + this.dataset.state = "done"; + emit(this, "complete", {}); + }, totalDuration); + } + + connectedCallback(): void { + const children = Array.from(this.children) as HTMLElement[]; + for (const child of children) { + child.classList.add("petty-stagger-hidden"); + } + this.dataset.state = "idle"; + requestAnimationFrame(() => this.start()); + } +} diff --git a/packages/core/src/components/switch/index.ts b/packages/core/src/components/switch/index.ts new file mode 100644 index 0000000..38ba762 --- /dev/null +++ b/packages/core/src/components/switch/index.ts @@ -0,0 +1,6 @@ +import { PettySwitch } from "./switch"; +export { PettySwitch }; + +if (!customElements.get("petty-switch")) { + customElements.define("petty-switch", PettySwitch); +} diff --git a/packages/core/src/components/switch/switch.schema.ts b/packages/core/src/components/switch/switch.schema.ts new file mode 100644 index 0000000..2809d2c --- /dev/null +++ b/packages/core/src/components/switch/switch.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-switch", description: "On/off toggle built on a button with role=switch", tier: 3, attributes: [{ name: "checked", type: "boolean", description: "Whether the switch is on" }, { name: "disabled", type: "boolean", description: "Disables the switch" }, { name: "name", type: "string", description: "Form field name" }], parts: [{ name: "control", element: "button", description: "The toggle button with role=switch" }, { name: "label", element: "span", description: "Label linked via aria-labelledby" }], events: [{ name: "petty-change", detail: "{ checked: boolean }", description: "Fires when the switch is toggled" }], example: `Dark mode` }; diff --git a/packages/core/src/components/switch/switch.ts b/packages/core/src/components/switch/switch.ts new file mode 100644 index 0000000..882a782 --- /dev/null +++ b/packages/core/src/components/switch/switch.ts @@ -0,0 +1,61 @@ +import { signal } from "../../signals"; +import { emit, listen, part, wireLabel } from "../../shared/helpers"; + +/** PettySwitch — on/off toggle built on a button with role="switch". */ +export class PettySwitch extends HTMLElement { + static observedAttributes = ["checked", "disabled", "name"]; + + readonly #checked = signal(false); + #cleanup = (): void => {}; + + get checked(): boolean { return this.#checked.get(); } + set checked(v: boolean) { this.#checked.set(v); this.#sync(); } + + connectedCallback(): void { + const btn = this.#button(); + if (!btn) return; + if (this.hasAttribute("checked")) this.#checked.set(true); + btn.setAttribute("role", "switch"); + wireLabel(btn, part(this, "label"), "petty-sw"); + this.#sync(); + this.#cleanup = listen(btn, [ + ["click", this.#handleClick], + ["keydown", this.#handleKeydown], + ]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "checked") this.#checked.set(next !== null); + this.#sync(); + } + + #button(): HTMLButtonElement | null { + return part(this, "control"); + } + + #sync(): void { + const btn = this.#button(); + if (!btn) return; + const on = this.#checked.get(); + btn.setAttribute("aria-checked", String(on)); + btn.disabled = this.hasAttribute("disabled"); + this.dataset.state = on ? "on" : "off"; + } + + #toggle(): void { + if (this.hasAttribute("disabled")) return; + this.#checked.set(!this.#checked.get()); + this.#sync(); + emit(this, "change", { checked: this.#checked.get() }); + } + + #handleClick = (): void => { this.#toggle(); }; + #handleKeydown = (e: Event): void => { + const ke = e as KeyboardEvent; + if (ke.key === " " || ke.key === "Enter") { ke.preventDefault(); this.#toggle(); } + }; +} diff --git a/packages/core/src/components/tabs/index.ts b/packages/core/src/components/tabs/index.ts index 51086b5..9a59739 100644 --- a/packages/core/src/components/tabs/index.ts +++ b/packages/core/src/components/tabs/index.ts @@ -1,6 +1,7 @@ -export { PettyTabs } from "./tabs"; -export { PettyTab } from "./tab"; -export { PettyTabPanel } from "./tab-panel"; +import { PettyTabs } from "./tabs"; +import { PettyTab } from "./tab"; +import { PettyTabPanel } from "./tab-panel"; +export { PettyTabs, PettyTab, PettyTabPanel }; if (!customElements.get("petty-tabs")) { customElements.define("petty-tabs", PettyTabs); diff --git a/packages/core/src/components/tabs/tab-panel.ts b/packages/core/src/components/tabs/tab-panel.ts index 5c15beb..fcf3d83 100644 --- a/packages/core/src/components/tabs/tab-panel.ts +++ b/packages/core/src/components/tabs/tab-panel.ts @@ -10,6 +10,6 @@ export class PettyTabPanel extends HTMLElement { /** @internal */ connectedCallback(): void { this.setAttribute("role", "tabpanel"); - this.setAttribute("hidden", ""); + if (!this.dataset.state) this.setAttribute("hidden", ""); } } diff --git a/packages/core/src/components/tabs/tab.ts b/packages/core/src/components/tabs/tab.ts index af25e04..25b3ad0 100644 --- a/packages/core/src/components/tabs/tab.ts +++ b/packages/core/src/components/tabs/tab.ts @@ -53,9 +53,11 @@ export class PettyTab extends HTMLElement { const tabs = this.#siblingTabs().filter(t => !t.disabled); const idx = tabs.indexOf(this); if (idx === -1) return; - const next = e.key === "ArrowRight" - ? tabs[(idx + 1) % tabs.length] - : tabs[(idx - 1 + tabs.length) % tabs.length]; + const nextIdx = e.key === "ArrowRight" + ? (idx + 1) % tabs.length + : (idx - 1 + tabs.length) % tabs.length; + const next = tabs[nextIdx]; + if (!next) return; const host = this.#host(); if (host) host.selectTab(next.value); next.focus(); diff --git a/packages/core/src/components/tabs/tabs.schema.ts b/packages/core/src/components/tabs/tabs.schema.ts new file mode 100644 index 0000000..d14ce4d --- /dev/null +++ b/packages/core/src/components/tabs/tabs.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-tabs", description: "Headless tabbed interface with reactive tab/panel management", tier: 3, attributes: [{ name: "value", type: "string", description: "Currently active tab value" }, { name: "default-value", type: "string", description: "Initial active tab value" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the active tab changes" }], example: `
Tab 1Tab 2
Content 1Content 2` }; diff --git a/packages/core/src/components/tabs/tabs.ts b/packages/core/src/components/tabs/tabs.ts index 0cb5f6f..d72a9f6 100644 --- a/packages/core/src/components/tabs/tabs.ts +++ b/packages/core/src/components/tabs/tabs.ts @@ -1,4 +1,5 @@ import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; /** * PettyTabs — headless tabbed interface custom element. @@ -39,10 +40,7 @@ export class PettyTabs extends HTMLElement { selectTab(v: string): void { if (this.#active.get() === v) return; this.#active.set(v); - this.dispatchEvent(new CustomEvent("petty-change", { - bubbles: true, - detail: { value: v }, - })); + emit(this, "change", { value: v }); } /** @internal */ diff --git a/packages/core/src/components/tags-input/index.ts b/packages/core/src/components/tags-input/index.ts new file mode 100644 index 0000000..6888938 --- /dev/null +++ b/packages/core/src/components/tags-input/index.ts @@ -0,0 +1,6 @@ +import { PettyTagsInput } from "./tags-input"; +export { PettyTagsInput }; + +if (!customElements.get("petty-tags-input")) { + customElements.define("petty-tags-input", PettyTagsInput); +} diff --git a/packages/core/src/components/tags-input/tags-input.schema.ts b/packages/core/src/components/tags-input/tags-input.schema.ts new file mode 100644 index 0000000..64d84dd --- /dev/null +++ b/packages/core/src/components/tags-input/tags-input.schema.ts @@ -0,0 +1,22 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { + tag: "petty-tags-input", + description: "Multi-value text input for tags, emails, or labels with add/remove and keyboard support", + tier: 3, + attributes: [ + { name: "value", type: "string", description: "Comma-separated initial tags" }, + { name: "max", type: "number", description: "Maximum number of tags allowed" }, + { name: "disabled", type: "boolean", description: "Disables adding and removing tags" }, + { name: "name", type: "string", description: "Form field name for the hidden input" }, + ], + parts: [ + { name: "tags", element: "div", description: "Container for rendered tag elements" }, + { name: "tag", element: "span", description: "Individual tag with data-value attribute" }, + { name: "tag-remove", element: "button", description: "Remove button within each tag" }, + { name: "input", element: "input", description: "Text input for typing new tags" }, + { name: "hidden", element: "input", description: "Hidden input synced with comma-separated values" }, + ], + events: [{ name: "petty-change", detail: "{ value: string[] }", description: "Fires when tags are added or removed" }], + example: `\n
\n \n \n`, +}; diff --git a/packages/core/src/components/tags-input/tags-input.ts b/packages/core/src/components/tags-input/tags-input.ts new file mode 100644 index 0000000..fa136ec --- /dev/null +++ b/packages/core/src/components/tags-input/tags-input.ts @@ -0,0 +1,116 @@ +import { signal, effect } from "../../signals"; +import { emit } from "../../shared/helpers"; + +/** PettyTagsInput — multi-value text input for tags, emails, or tokens. */ +export class PettyTagsInput extends HTMLElement { + static observedAttributes = ["value", "max", "disabled", "name"]; + + readonly #tags = signal([]); + #stopEffect: (() => void) | null = null; + + get value(): string[] { return [...this.#tags.get()]; } + set value(v: string[]) { this.#tags.set([...v]); } + + /** Adds a tag if not duplicate and under max limit. */ + addTag(tag: string): boolean { + const trimmed = tag.trim(); + if (!trimmed) return false; + const current = this.#tags.get(); + if (current.includes(trimmed)) return false; + const max = this.getAttribute("max"); + if (max && current.length >= Number(max)) return false; + this.#tags.set([...current, trimmed]); + this.#dispatch(); + return true; + } + + /** Removes a tag by value. */ + removeTag(tag: string): void { + const current = this.#tags.get(); + const idx = current.indexOf(tag); + if (idx === -1) return; + const next = [...current]; + next.splice(idx, 1); + this.#tags.set(next); + this.#dispatch(); + } + + /** Clears all tags. */ + clear(): void { + this.#tags.set([]); + this.#dispatch(); + } + + connectedCallback(): void { + const init = this.getAttribute("value"); + if (init) this.#tags.set(init.split(",").map(s => s.trim()).filter(Boolean)); + this.#stopEffect = effect(() => this.#render()); + this.#input()?.addEventListener("keydown", this.#onKeydown); + this.addEventListener("click", this.#onTagRemove); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + this.#input()?.removeEventListener("keydown", this.#onKeydown); + this.removeEventListener("click", this.#onTagRemove); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) { + this.#tags.set(next.split(",").map(s => s.trim()).filter(Boolean)); + } + } + + #input(): HTMLInputElement | null { return this.querySelector("input[data-part=input]"); } + + #dispatch(): void { + this.#syncHidden(); + emit(this, "change", { value: this.#tags.get() }); + } + + #syncHidden(): void { + const hidden = this.querySelector("input[data-part=hidden]"); + if (hidden instanceof HTMLInputElement) hidden.value = this.#tags.get().join(","); + } + + #onKeydown = (e: KeyboardEvent): void => { + if (this.hasAttribute("disabled")) return; + const input = this.#input(); + if (!input) return; + if (e.key === "Enter" || e.key === ",") { + e.preventDefault(); + if (this.addTag(input.value)) input.value = ""; + } else if (e.key === "Backspace" && input.value === "") { + const tags = this.#tags.get(); + const last = tags[tags.length - 1]; + if (last) this.removeTag(last); + } + }; + + #onTagRemove = (e: Event): void => { + const btn = (e.target as HTMLElement).closest("[data-part=tag-remove]"); + if (!btn) return; + const tag = btn.closest("[data-part=tag]"); + if (tag instanceof HTMLElement) this.removeTag(tag.dataset.value ?? ""); + }; + + #render(): void { + const tags = this.#tags.get(); + const container = this.querySelector("[data-part=tags]"); + if (!container) return; + container.replaceChildren(); + for (const tag of tags) { + const el = document.createElement("span"); + el.dataset.part = "tag"; + el.dataset.value = tag; + el.textContent = tag; + const btn = document.createElement("button"); + btn.dataset.part = "tag-remove"; + btn.setAttribute("aria-label", `Remove ${tag}`); + btn.textContent = "×"; + btn.type = "button"; + el.appendChild(btn); + container.appendChild(el); + } + } +} diff --git a/packages/core/src/components/text-field/index.ts b/packages/core/src/components/text-field/index.ts new file mode 100644 index 0000000..9c666ee --- /dev/null +++ b/packages/core/src/components/text-field/index.ts @@ -0,0 +1,6 @@ +import { PettyTextField } from "./text-field"; +export { PettyTextField }; + +if (!customElements.get("petty-text-field")) { + customElements.define("petty-text-field", PettyTextField); +} diff --git a/packages/core/src/components/text-field/text-field.schema.ts b/packages/core/src/components/text-field/text-field.schema.ts new file mode 100644 index 0000000..5d5bfdc --- /dev/null +++ b/packages/core/src/components/text-field/text-field.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-text-field", description: "Labeled text input with description, error wiring, and change events", tier: 3, attributes: [{ name: "name", type: "string", description: "Form field name" }, { name: "disabled", type: "boolean", description: "Disables the input" }, { name: "required", type: "boolean", description: "Marks the field as required" }], parts: [{ name: "control", element: "input", description: "The text input element" }, { name: "label", element: "label", description: "Label auto-linked to the input" }, { name: "description", element: "span", description: "Help text linked via aria-describedby" }, { name: "error", element: "span", description: "Error message linked via aria-describedby" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires on input change" }], example: `Your email address` }; diff --git a/packages/core/src/components/text-field/text-field.ts b/packages/core/src/components/text-field/text-field.ts new file mode 100644 index 0000000..173c141 --- /dev/null +++ b/packages/core/src/components/text-field/text-field.ts @@ -0,0 +1,71 @@ +import { uniqueId } from "../../shared/aria"; +import { emit } from "../../shared/helpers"; + +/** PettyTextField — labeled text input with description and error wiring. */ +export class PettyTextField extends HTMLElement { + static observedAttributes = ["name", "disabled", "required"]; + + connectedCallback(): void { + const name = this.getAttribute("name") ?? ""; + const controlId = uniqueId(`petty-tf-${name}`); + const errorId = `${controlId}-error`; + const descId = `${controlId}-desc`; + + const label = this.querySelector("[data-part=label]"); + const control = this.#control(); + const desc = this.querySelector("[data-part=description]"); + const error = this.querySelector("[data-part=error]"); + + if (control) { + control.id = controlId; + if (!control.getAttribute("name")) control.setAttribute("name", name); + const describedBy = [desc ? descId : "", error ? errorId : ""].filter(Boolean).join(" "); + if (describedBy) control.setAttribute("aria-describedby", describedBy); + } + if (label && control) (label as HTMLLabelElement).htmlFor = controlId; + if (desc) desc.id = descId; + if (error) error.id = errorId; + + this.#syncAttrs(); + control?.addEventListener("input", this.#handleInput); + } + + disconnectedCallback(): void { + this.#control()?.removeEventListener("input", this.#handleInput); + } + + attributeChangedCallback(): void { + this.#syncAttrs(); + } + + /** Display an error message on this field. */ + setError(message: string): void { + const error = this.querySelector("[data-part=error]"); + const control = this.#control(); + if (error) error.textContent = message; + if (control) control.setAttribute("aria-invalid", "true"); + } + + /** Clear the error message on this field. */ + clearError(): void { + const error = this.querySelector("[data-part=error]"); + const control = this.#control(); + if (error) error.textContent = ""; + if (control) control.removeAttribute("aria-invalid"); + } + + #control(): HTMLInputElement | null { + return this.querySelector("input[data-part=control]"); + } + + #syncAttrs(): void { + const control = this.#control(); + if (!control) return; + control.disabled = this.hasAttribute("disabled"); + control.required = this.hasAttribute("required"); + } + + #handleInput = (): void => { + emit(this, "change", { value: this.#control()?.value ?? "" }); + }; +} diff --git a/packages/core/src/components/toast/index.ts b/packages/core/src/components/toast/index.ts index 5cf24b9..2972056 100644 --- a/packages/core/src/components/toast/index.ts +++ b/packages/core/src/components/toast/index.ts @@ -1,4 +1,5 @@ -export { toast, PettyToastRegion } from "./toast"; +import { toast, PettyToastRegion } from "./toast"; +export { toast, PettyToastRegion }; if (!customElements.get("petty-toast-region")) { customElements.define("petty-toast-region", PettyToastRegion); diff --git a/packages/core/src/components/toast/toast.schema.ts b/packages/core/src/components/toast/toast.schema.ts new file mode 100644 index 0000000..72cec21 --- /dev/null +++ b/packages/core/src/components/toast/toast.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-toast-region", description: "Container that renders active toast notifications with auto-dismiss", tier: 3, attributes: [{ name: "position", type: "string", description: "Position of the toast region on screen" }], parts: [{ name: "toast", element: "div", description: "Individual toast container" }, { name: "toast-title", element: "div", description: "Toast title text" }, { name: "toast-description", element: "div", description: "Toast description text" }, { name: "toast-close", element: "button", description: "Dismiss button for the toast" }], events: [], example: `` }; diff --git a/packages/core/src/components/toggle-group/index.ts b/packages/core/src/components/toggle-group/index.ts new file mode 100644 index 0000000..4b8a461 --- /dev/null +++ b/packages/core/src/components/toggle-group/index.ts @@ -0,0 +1,8 @@ +import { PettyToggleGroup } from "./toggle-group"; +import { PettyToggleGroupItem } from "./toggle-group-item"; +export { PettyToggleGroup, PettyToggleGroupItem }; + +if (!customElements.get("petty-toggle-group")) { + customElements.define("petty-toggle-group", PettyToggleGroup); + customElements.define("petty-toggle-group-item", PettyToggleGroupItem); +} diff --git a/packages/core/src/components/toggle-group/toggle-group-item.ts b/packages/core/src/components/toggle-group/toggle-group-item.ts new file mode 100644 index 0000000..594d9cc --- /dev/null +++ b/packages/core/src/components/toggle-group/toggle-group-item.ts @@ -0,0 +1,59 @@ +import { wrapIndex } from "../../shared/keyboard"; + +/** PettyToggleGroupItem — single item within a toggle group. */ +export class PettyToggleGroupItem extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "button"); + this.setAttribute("tabindex", "0"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + this.addEventListener("click", this.#handleClick); + this.addEventListener("keydown", this.#handleKeydown); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + this.removeEventListener("keydown", this.#handleKeydown); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.setAttribute("aria-disabled", String(this.disabled)); + } + + #group(): { toggleValue(v: string): void } | null { + return this.closest("petty-toggle-group") as { toggleValue(v: string): void } | null; + } + + #siblings(): PettyToggleGroupItem[] { + const group = this.closest("petty-toggle-group"); + if (!group) return []; + return Array.from(group.querySelectorAll("petty-toggle-group-item:not([disabled])")); + } + + #handleClick = (): void => { + if (this.disabled) return; + this.#group()?.toggleValue(this.value); + }; + + #handleKeydown = (e: KeyboardEvent): void => { + if (e.key === " " || e.key === "Enter") { + e.preventDefault(); + this.#handleClick(); + return; + } + const isHorizontal = this.closest("petty-toggle-group")?.getAttribute("orientation") !== "vertical"; + const prev = isHorizontal ? "ArrowLeft" : "ArrowUp"; + const next = isHorizontal ? "ArrowRight" : "ArrowDown"; + if (e.key !== prev && e.key !== next) return; + e.preventDefault(); + const items = this.#siblings(); + const idx = items.indexOf(this); + if (idx === -1) return; + const delta = e.key === next ? 1 : -1; + items[wrapIndex(idx, delta, items.length)]?.focus(); + }; +} diff --git a/packages/core/src/components/toggle-group/toggle-group.schema.ts b/packages/core/src/components/toggle-group/toggle-group.schema.ts new file mode 100644 index 0000000..e315881 --- /dev/null +++ b/packages/core/src/components/toggle-group/toggle-group.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-toggle-group", description: "Single or multi-selection toggle group with keyboard navigation", tier: 3, attributes: [{ name: "type", type: "string", default: "single", description: "Selection mode: single or multiple" }, { name: "value", type: "string", description: "Active value (comma-separated for multiple)" }, { name: "default-value", type: "string", description: "Initial active value" }, { name: "orientation", type: "string", default: "horizontal", description: "Layout orientation: horizontal or vertical" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the active toggle value changes" }], example: `LeftCenterRight` }; diff --git a/packages/core/src/components/toggle-group/toggle-group.ts b/packages/core/src/components/toggle-group/toggle-group.ts new file mode 100644 index 0000000..02c2be6 --- /dev/null +++ b/packages/core/src/components/toggle-group/toggle-group.ts @@ -0,0 +1,57 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyToggleGroup — single or multi-selection toggle group with keyboard nav. */ +export class PettyToggleGroup extends HTMLElement { + static observedAttributes = ["type", "value", "default-value", "orientation"]; + + readonly #value = signal(""); + #stopEffect: (() => void) | null = null; + + get type(): "single" | "multiple" { + return this.getAttribute("type") === "multiple" ? "multiple" : "single"; + } + + get value(): string { return this.#value.get(); } + set value(v: string) { this.#value.set(v); } + + /** Toggles a value: for single mode replaces, for multiple mode adds/removes. */ + toggleValue(v: string): void { + if (this.type === "single") { + this.#value.set(v); + } else { + const current = this.#value.get().split(",").filter(Boolean); + const idx = current.indexOf(v); + if (idx >= 0) current.splice(idx, 1); + else current.push(v); + this.#value.set(current.join(",")); + } + emit(this, "change", { value: this.#value.get() }); + } + + connectedCallback(): void { + this.setAttribute("role", "group"); + const init = initialValue(this); + if (init) this.#value.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(next); + } + + #syncChildren(): void { + const active = this.#value.get(); + const activeSet = new Set(active.split(",").filter(Boolean)); + const items = this.querySelectorAll("petty-toggle-group-item"); + for (const item of items) { + const isOn = activeSet.has(item.getAttribute("value") ?? ""); + item.dataset.state = isOn ? "on" : "off"; + item.setAttribute("aria-pressed", String(isOn)); + } + } +} diff --git a/packages/core/src/components/toggle/index.ts b/packages/core/src/components/toggle/index.ts new file mode 100644 index 0000000..ed2413f --- /dev/null +++ b/packages/core/src/components/toggle/index.ts @@ -0,0 +1,6 @@ +import { PettyToggle } from "./toggle"; +export { PettyToggle }; + +if (!customElements.get("petty-toggle")) { + customElements.define("petty-toggle", PettyToggle); +} diff --git a/packages/core/src/components/toggle/toggle.schema.ts b/packages/core/src/components/toggle/toggle.schema.ts new file mode 100644 index 0000000..784bead --- /dev/null +++ b/packages/core/src/components/toggle/toggle.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-toggle", description: "Pressed/unpressed toggle button with aria-pressed", tier: 3, attributes: [{ name: "pressed", type: "boolean", description: "Whether the toggle is in pressed state" }, { name: "disabled", type: "boolean", description: "Disables the toggle" }], parts: [{ name: "control", element: "button", description: "The toggle button element" }], events: [{ name: "petty-change", detail: "{ pressed: boolean }", description: "Fires when the toggle state changes" }], example: `` }; diff --git a/packages/core/src/components/toggle/toggle.ts b/packages/core/src/components/toggle/toggle.ts new file mode 100644 index 0000000..a655be1 --- /dev/null +++ b/packages/core/src/components/toggle/toggle.ts @@ -0,0 +1,47 @@ +import { emit, listen, part } from "../../shared/helpers"; + +/** PettyToggle — pressed/unpressed toggle button with aria-pressed. */ +export class PettyToggle extends HTMLElement { + static observedAttributes = ["pressed", "disabled"]; + + #cleanup = (): void => {}; + + get pressed(): boolean { return this.hasAttribute("pressed"); } + set pressed(v: boolean) { + if (v) this.setAttribute("pressed", ""); + else this.removeAttribute("pressed"); + } + + connectedCallback(): void { + const btn = this.#button(); + if (!btn) return; + this.#sync(); + this.#cleanup = listen(btn, [["click", this.#handleClick]]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #button(): HTMLButtonElement | null { + return part(this, "control"); + } + + #sync(): void { + const btn = this.#button(); + if (!btn) return; + btn.setAttribute("aria-pressed", String(this.pressed)); + btn.disabled = this.hasAttribute("disabled"); + this.dataset.state = this.pressed ? "on" : "off"; + } + + #handleClick = (): void => { + if (this.hasAttribute("disabled")) return; + this.pressed = !this.pressed; + emit(this, "change", { pressed: this.pressed }); + }; +} diff --git a/packages/core/src/components/tooltip/index.ts b/packages/core/src/components/tooltip/index.ts new file mode 100644 index 0000000..f8c3467 --- /dev/null +++ b/packages/core/src/components/tooltip/index.ts @@ -0,0 +1,6 @@ +import { PettyTooltip } from "./tooltip"; +export { PettyTooltip }; + +if (!customElements.get("petty-tooltip")) { + customElements.define("petty-tooltip", PettyTooltip); +} diff --git a/packages/core/src/components/tooltip/tooltip.schema.ts b/packages/core/src/components/tooltip/tooltip.schema.ts new file mode 100644 index 0000000..fe96251 --- /dev/null +++ b/packages/core/src/components/tooltip/tooltip.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-tooltip", description: "Hover/focus label using Popover API with configurable delay and ARIA linking", tier: 2, attributes: [{ name: "delay", type: "number", default: "200", description: "Delay in ms before showing the tooltip" }], parts: [{ name: "trigger", element: "button", description: "Element that triggers the tooltip on hover/focus" }, { name: "content", element: "div", description: "Popover tooltip content linked via aria-describedby" }], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the tooltip opens or closes" }], example: `
Tooltip text
` }; diff --git a/packages/core/src/components/tooltip/tooltip.ts b/packages/core/src/components/tooltip/tooltip.ts new file mode 100644 index 0000000..97bb815 --- /dev/null +++ b/packages/core/src/components/tooltip/tooltip.ts @@ -0,0 +1,58 @@ +import { uniqueId } from "../../shared/aria"; +import { emit, listen, part } from "../../shared/helpers"; + +/** PettyTooltip — hover/focus label using Popover API with delay and ARIA linking. */ +export class PettyTooltip extends HTMLElement { + static observedAttributes = ["delay"]; + + #showTimer: ReturnType | null = null; + #hideTimer: ReturnType | null = null; + #cleanup: (() => void) | null = null; + + connectedCallback(): void { + const trigger = part(this, "trigger"); + const content = part(this, "content"); + if (!trigger || !content) return; + if (!content.id) content.id = uniqueId("petty-tooltip"); + trigger.setAttribute("aria-describedby", content.id); + this.#cleanup = listen(trigger, [ + ["mouseenter", this.#onEnter], + ["mouseleave", this.#onLeave], + ["focus", this.#onEnter], + ["blur", this.#onLeave], + ]); + } + + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + this.#clearTimers(); + } + + #delay(): number { + return Number(this.getAttribute("delay") ?? 200); + } + + #clearTimers(): void { + if (this.#showTimer) { clearTimeout(this.#showTimer); this.#showTimer = null; } + if (this.#hideTimer) { clearTimeout(this.#hideTimer); this.#hideTimer = null; } + } + + #onEnter = (): void => { + this.#clearTimers(); + this.#showTimer = setTimeout(() => { + const content = part(this, "content"); + if (content && !content.matches(":popover-open")) content.showPopover(); + emit(this, "toggle", { open: true }); + }, this.#delay()); + }; + + #onLeave = (): void => { + this.#clearTimers(); + this.#hideTimer = setTimeout(() => { + const content = part(this, "content"); + if (content && content.matches(":popover-open")) content.hidePopover(); + emit(this, "toggle", { open: false }); + }, 100); + }; +} diff --git a/packages/core/src/components/typewriter/index.ts b/packages/core/src/components/typewriter/index.ts new file mode 100644 index 0000000..2460cb2 --- /dev/null +++ b/packages/core/src/components/typewriter/index.ts @@ -0,0 +1,6 @@ +import { PettyTypewriter } from "./typewriter"; +export { PettyTypewriter }; + +if (!customElements.get("petty-typewriter")) { + customElements.define("petty-typewriter", PettyTypewriter); +} diff --git a/packages/core/src/components/typewriter/typewriter.ts b/packages/core/src/components/typewriter/typewriter.ts new file mode 100644 index 0000000..414bade --- /dev/null +++ b/packages/core/src/components/typewriter/typewriter.ts @@ -0,0 +1,63 @@ +import { emit } from "../../shared/helpers"; + +/** PettyTypewriter — reveals text character by character with configurable speed. */ +export class PettyTypewriter extends HTMLElement { + static observedAttributes = ["speed", "delay", "cursor"]; + + #text = ""; + #index = 0; + #timer: ReturnType | null = null; + + get speed(): number { return Number(this.getAttribute("speed") ?? 50); } + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + + /** Starts the typewriter animation from the beginning. */ + start(): void { + this.#index = 0; + this.#tick(); + } + + /** Resets to empty and stops animation. */ + reset(): void { + this.#stop(); + this.#index = 0; + this.#updateDisplay(); + } + + connectedCallback(): void { + this.#text = this.textContent?.trim() ?? ""; + this.textContent = ""; + this.dataset.state = "idle"; + if (this.hasAttribute("cursor")) this.classList.add("petty-typewriter-cursor"); + const startDelay = this.delay; + if (startDelay > 0) { + this.#timer = setTimeout(() => this.start(), startDelay); + } else { + this.start(); + } + } + + disconnectedCallback(): void { + this.#stop(); + } + + #stop(): void { + if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; } + } + + #tick(): void { + this.dataset.state = "typing"; + if (this.#index <= this.#text.length) { + this.#updateDisplay(); + this.#index++; + this.#timer = setTimeout(() => this.#tick(), this.speed); + } else { + this.dataset.state = "done"; + emit(this, "complete", {}); + } + } + + #updateDisplay(): void { + this.textContent = this.#text.slice(0, this.#index); + } +} diff --git a/packages/core/src/components/virtual-list/index.ts b/packages/core/src/components/virtual-list/index.ts new file mode 100644 index 0000000..a49b086 --- /dev/null +++ b/packages/core/src/components/virtual-list/index.ts @@ -0,0 +1,6 @@ +import { PettyVirtualList } from "./virtual-list"; +export { PettyVirtualList }; + +if (!customElements.get("petty-virtual-list")) { + customElements.define("petty-virtual-list", PettyVirtualList); +} diff --git a/packages/core/src/components/virtual-list/virtual-list.schema.ts b/packages/core/src/components/virtual-list/virtual-list.schema.ts new file mode 100644 index 0000000..f209da1 --- /dev/null +++ b/packages/core/src/components/virtual-list/virtual-list.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-virtual-list", description: "Windowed scroll rendering only visible items plus overscan for performance", tier: 3, attributes: [{ name: "item-height", type: "number", default: "40", description: "Fixed height in pixels for each item row" }, { name: "overscan", type: "number", default: "5", description: "Number of extra items to render above and below the visible area" }], parts: [], events: [{ name: "petty-scroll", detail: "{ startIndex: number, endIndex: number }", description: "Fires on scroll with the range of currently rendered item indices" }], example: `` }; diff --git a/packages/core/src/components/virtual-list/virtual-list.ts b/packages/core/src/components/virtual-list/virtual-list.ts new file mode 100644 index 0000000..7725abf --- /dev/null +++ b/packages/core/src/components/virtual-list/virtual-list.ts @@ -0,0 +1,66 @@ +import { emit } from "../../shared/helpers"; + +/** PettyVirtualList — windowed scroll rendering only visible items plus overscan. */ +export class PettyVirtualList extends HTMLElement { + static observedAttributes = ["item-height", "overscan"]; + + #items: unknown[] = []; + #renderFn: ((item: unknown, index: number) => HTMLElement) | null = null; + #spacer: HTMLDivElement | null = null; + #viewport: HTMLDivElement | null = null; + + /** Sets the data items and render function, then triggers a render. */ + setItems(items: unknown[], renderItem: (item: unknown, index: number) => HTMLElement): void { + this.#items = items; + this.#renderFn = renderItem; + this.#update(); + } + + connectedCallback(): void { + this.setAttribute("role", "list"); + this.style.overflow = "auto"; + this.style.position = "relative"; + this.#spacer = document.createElement("div"); + this.#spacer.style.position = "relative"; + this.appendChild(this.#spacer); + this.#viewport = document.createElement("div"); + const vpStyle = this.#viewport.style; + vpStyle.position = "absolute"; + vpStyle.top = "0"; + vpStyle.left = "0"; + vpStyle.right = "0"; + this.appendChild(this.#viewport); + this.addEventListener("scroll", this.#onScroll); + } + + disconnectedCallback(): void { + this.removeEventListener("scroll", this.#onScroll); + } + + #itemHeight(): number { return Number(this.getAttribute("item-height") ?? 40); } + #overscan(): number { return Number(this.getAttribute("overscan") ?? 5); } + + #onScroll = (): void => { this.#update(); }; + + #update(): void { + const spacer = this.#spacer; + const viewport = this.#viewport; + if (!spacer || !viewport || !this.#renderFn) return; + const ih = this.#itemHeight(); + const total = this.#items.length; + spacer.style.height = `${total * ih}px`; + const overscan = this.#overscan(); + const startIdx = Math.max(0, Math.floor(this.scrollTop / ih) - overscan); + const endIdx = Math.min(total, Math.ceil((this.scrollTop + this.clientHeight) / ih) + overscan); + viewport.style.top = `${startIdx * ih}px`; + const fragment = document.createDocumentFragment(); + for (let i = startIdx; i < endIdx; i++) { + const el = this.#renderFn(this.#items[i], i); + el.setAttribute("role", "listitem"); + el.style.height = `${ih}px`; + fragment.appendChild(el); + } + viewport.replaceChildren(fragment); + emit(this, "scroll", { startIndex: startIdx, endIndex: endIdx }); + } +} diff --git a/packages/core/src/components/wizard/index.ts b/packages/core/src/components/wizard/index.ts new file mode 100644 index 0000000..11d031a --- /dev/null +++ b/packages/core/src/components/wizard/index.ts @@ -0,0 +1,8 @@ +import { PettyWizard } from "./wizard"; +import { PettyWizardStep } from "./wizard-step"; +export { PettyWizard, PettyWizardStep }; + +if (!customElements.get("petty-wizard")) { + customElements.define("petty-wizard", PettyWizard); + customElements.define("petty-wizard-step", PettyWizardStep); +} diff --git a/packages/core/src/components/wizard/wizard-step.ts b/packages/core/src/components/wizard/wizard-step.ts new file mode 100644 index 0000000..421d13f --- /dev/null +++ b/packages/core/src/components/wizard/wizard-step.ts @@ -0,0 +1,17 @@ +/** PettyWizardStep — single step within a wizard flow. */ +export class PettyWizardStep extends HTMLElement { + static observedAttributes = ["value", "label", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? ""; } + get label(): string { return this.getAttribute("label") ?? ""; } + + connectedCallback(): void { + this.setAttribute("role", "tabpanel"); + if (this.label) this.setAttribute("aria-label", this.label); + this.setAttribute("hidden", ""); + } + + attributeChangedCallback(name: string): void { + if (name === "label" && this.label) this.setAttribute("aria-label", this.label); + } +} diff --git a/packages/core/src/components/wizard/wizard.schema.ts b/packages/core/src/components/wizard/wizard.schema.ts new file mode 100644 index 0000000..7d1e1c2 --- /dev/null +++ b/packages/core/src/components/wizard/wizard.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-wizard", description: "Multi-step flow with navigation between sequential steps", tier: 3, attributes: [{ name: "value", type: "string", description: "Currently active step value" }, { name: "default-value", type: "string", description: "Initial active step value" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the active step changes" }], example: `Step 1 contentStep 2 content` }; diff --git a/packages/core/src/components/wizard/wizard.ts b/packages/core/src/components/wizard/wizard.ts new file mode 100644 index 0000000..2055578 --- /dev/null +++ b/packages/core/src/components/wizard/wizard.ts @@ -0,0 +1,73 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyWizard — multi-step flow with navigation between steps. */ +export class PettyWizard extends HTMLElement { + static observedAttributes = ["value", "default-value"]; + + readonly #current = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#current.get(); } + set value(v: string) { this.#current.set(v); } + + /** Navigates to the next step. */ + next(): void { + const steps = this.#steps(); + const idx = steps.findIndex(s => s.getAttribute("value") === this.#current.get()); + const nextStep = steps[idx + 1]; + if (idx < steps.length - 1 && nextStep) this.#goTo(nextStep.getAttribute("value") ?? ""); + } + + /** Navigates to the previous step. */ + prev(): void { + const steps = this.#steps(); + const idx = steps.findIndex(s => s.getAttribute("value") === this.#current.get()); + const prevStep = steps[idx - 1]; + if (idx > 0 && prevStep) this.#goTo(prevStep.getAttribute("value") ?? ""); + } + + /** Navigates to a specific step by value. */ + goTo(v: string): void { this.#goTo(v); } + + connectedCallback(): void { + const init = initialValue(this); + if (init) this.#current.set(init); + else { + const first = this.#steps()[0]; + if (first) this.#current.set(first.getAttribute("value") ?? ""); + } + this.#stopEffect = effect(() => this.#syncSteps()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#current.set(next); + } + + #steps(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-wizard-step")); + } + + #goTo(v: string): void { + this.#current.set(v); + emit(this, "change", { value: v }); + } + + #syncSteps(): void { + const active = this.#current.get(); + const steps = this.#steps(); + let foundActive = false; + for (const step of steps) { + const val = step.getAttribute("value") ?? ""; + const isActive = val === active; + if (isActive) foundActive = true; + step.dataset.state = isActive ? "active" : foundActive ? "upcoming" : "complete"; + if (isActive) step.removeAttribute("hidden"); + else step.setAttribute("hidden", ""); + } + } +} diff --git a/packages/core/src/schema.ts b/packages/core/src/schema.ts new file mode 100644 index 0000000..3aa94fe --- /dev/null +++ b/packages/core/src/schema.ts @@ -0,0 +1,10 @@ +import { z } from "zod/v4"; + +const strLit = (...vals: string[]) => vals.length === 1 ? z.literal(vals[0]!) : z.union(vals.map(v => z.literal(v)) as [z.ZodLiteral, z.ZodLiteral, ...z.ZodLiteral[]]); + +export const attributeSchema = z.object({ name: z.string(), type: strLit("string", "boolean", "number"), default: z.string().optional(), description: z.string() }); +export const partSchema = z.object({ name: z.string(), element: z.string(), description: z.string() }); +export const eventSchema = z.object({ name: z.string(), detail: z.string(), description: z.string() }); +export const componentSchema = z.object({ tag: z.string(), description: z.string(), tier: z.union([z.literal(1), z.literal(2), z.literal(3)]), attributes: z.array(attributeSchema), parts: z.array(partSchema), events: z.array(eventSchema), example: z.string() }); + +export type ComponentMeta = z.infer; diff --git a/packages/core/src/shared/aria.ts b/packages/core/src/shared/aria.ts new file mode 100644 index 0000000..a9f76a1 --- /dev/null +++ b/packages/core/src/shared/aria.ts @@ -0,0 +1,18 @@ +let counter = 0; + +/** Generates a unique ID with the given prefix. */ +export function uniqueId(prefix: string): string { + return `${prefix}-${counter++}`; +} + +/** Links an element to a label element via aria-labelledby. */ +export function linkLabel(element: HTMLElement, labelElement: HTMLElement): void { + if (!labelElement.id) labelElement.id = uniqueId("petty-label"); + element.setAttribute("aria-labelledby", labelElement.id); +} + +/** Links an element to a description element via aria-describedby. */ +export function linkDescription(element: HTMLElement, descElement: HTMLElement): void { + if (!descElement.id) descElement.id = uniqueId("petty-desc"); + element.setAttribute("aria-describedby", descElement.id); +} diff --git a/packages/core/src/shared/helpers.ts b/packages/core/src/shared/helpers.ts new file mode 100644 index 0000000..e5940d1 --- /dev/null +++ b/packages/core/src/shared/helpers.ts @@ -0,0 +1,33 @@ +/** Queries a child element by data-part attribute. */ +export function part(host: HTMLElement, name: string): T | null { + return host.querySelector(`[data-part="${name}"]`); +} + +/** Dispatches a bubbling petty-prefixed CustomEvent. */ +export function emit(host: HTMLElement, name: string, detail: Record): void { + host.dispatchEvent(new CustomEvent(`petty-${name}`, { bubbles: true, detail })); +} + +/** Reads default-value or value attribute, returning empty string if neither set. */ +export function initialValue(host: HTMLElement): string { + return host.getAttribute("default-value") ?? host.getAttribute("value") ?? ""; +} + +/** Attaches event listeners and returns a cleanup function that removes them all. */ +export function listen( + el: EventTarget | null, + pairs: Array<[string, EventListenerOrEventListenerObject]>, +): () => void { + if (!el) return () => {}; + for (const [evt, fn] of pairs) el.addEventListener(evt, fn); + return () => { for (const [evt, fn] of pairs) el.removeEventListener(evt, fn); }; +} + +/** Wires a label element's htmlFor to a control's id, generating an id if needed. */ +export function wireLabel(control: HTMLElement, label: HTMLElement | null, prefix: string): void { + if (!label) return; + if (!control.id) control.id = `${prefix}-${wireLabel.n++}`; + if ("htmlFor" in label) (label as HTMLLabelElement).htmlFor = control.id; + else label.setAttribute("aria-labelledby", control.id); +} +wireLabel.n = 0; diff --git a/packages/core/src/shared/keyboard.ts b/packages/core/src/shared/keyboard.ts new file mode 100644 index 0000000..f1d3140 --- /dev/null +++ b/packages/core/src/shared/keyboard.ts @@ -0,0 +1,38 @@ +/** Wraps an index circularly within a range. */ +export function wrapIndex(current: number, delta: number, length: number): number { + return ((current + delta) % length + length) % length; +} + +/** Moves focus between items on Arrow/Home/End keys. */ +export function handleArrowNav( + e: KeyboardEvent, + items: HTMLElement[], + opts?: { orientation?: "horizontal" | "vertical"; loop?: boolean }, +): void { + const len = items.length; + if (len === 0) return; + + const orientation = opts?.orientation ?? "horizontal"; + const loop = opts?.loop ?? true; + const prev = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp"; + const next = orientation === "horizontal" ? "ArrowRight" : "ArrowDown"; + + let idx = items.indexOf(document.activeElement as HTMLElement); + if (idx === -1) idx = 0; + + if (e.key === next) { + e.preventDefault(); + const target = loop ? wrapIndex(idx, 1, len) : Math.min(idx + 1, len - 1); + items[target]?.focus(); + } else if (e.key === prev) { + e.preventDefault(); + const target = loop ? wrapIndex(idx, -1, len) : Math.max(idx - 1, 0); + items[target]?.focus(); + } else if (e.key === "Home") { + e.preventDefault(); + items[0]?.focus(); + } else if (e.key === "End") { + e.preventDefault(); + items[len - 1]?.focus(); + } +} diff --git a/packages/core/tests/accordion.test.ts b/packages/core/tests/accordion.test.ts new file mode 100644 index 0000000..fd4e711 --- /dev/null +++ b/packages/core/tests/accordion.test.ts @@ -0,0 +1,51 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import "../src/components/accordion/index"; +import { h } from "./helpers"; + +describe("petty-accordion", () => { + let el: HTMLElement; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-accordion"); + const itemA = h("petty-accordion-item", { value: "a" }, + h("details", {}, + h("summary", {}, "Section A"), + h("div", { "data-part": "content" }, "Content A"), + ), + ); + const itemB = h("petty-accordion-item", { value: "b" }, + h("details", {}, + h("summary", {}, "Section B"), + h("div", { "data-part": "content" }, "Content B"), + ), + ); + el.appendChild(itemA); + el.appendChild(itemB); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-accordion")).toBeDefined(); + expect(customElements.get("petty-accordion-item")).toBeDefined(); + }); + + it("defaults to single type", () => { + expect((el as HTMLElement & { type: string }).type).toBe("single"); + }); + + it("accordion-item sets data-state closed on connect", () => { + const item = el.querySelector("petty-accordion-item")!; + expect(item.getAttribute("data-state")).toBe("closed"); + }); + + it("accordion-item sets aria-expanded false on summary", () => { + const summary = el.querySelector("summary")!; + expect(summary.getAttribute("aria-expanded")).toBe("false"); + }); + + it("supports multiple type attribute", () => { + el.setAttribute("type", "multiple"); + expect((el as HTMLElement & { type: string }).type).toBe("multiple"); + }); +}); diff --git a/packages/core/tests/button.test.ts b/packages/core/tests/button.test.ts new file mode 100644 index 0000000..2f103d8 --- /dev/null +++ b/packages/core/tests/button.test.ts @@ -0,0 +1,43 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import "../src/components/button/index"; +import { h } from "./helpers"; + +describe("petty-button", () => { + let el: HTMLElement; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-button"); + el.appendChild(h("button", {}, "Click")); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-button")).toBeDefined(); + }); + + it("syncs disabled state to child button", () => { + el.setAttribute("disabled", ""); + const btn = el.querySelector("button")!; + expect(btn.disabled).toBe(true); + expect(btn.getAttribute("aria-disabled")).toBe("true"); + expect(el.dataset.state).toBe("disabled"); + }); + + it("syncs loading state to child button", () => { + el.setAttribute("loading", ""); + const btn = el.querySelector("button")!; + expect(btn.disabled).toBe(true); + expect(btn.getAttribute("aria-busy")).toBe("true"); + expect(el.dataset.state).toBe("loading"); + }); + + it("clears loading and disabled state", () => { + el.setAttribute("loading", ""); + el.removeAttribute("loading"); + const btn = el.querySelector("button")!; + expect(btn.disabled).toBe(false); + expect(btn.getAttribute("aria-busy")).toBeNull(); + expect(el.dataset.state).toBe("idle"); + }); +}); diff --git a/packages/core/tests/checkbox.test.ts b/packages/core/tests/checkbox.test.ts new file mode 100644 index 0000000..6c03679 --- /dev/null +++ b/packages/core/tests/checkbox.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyCheckbox } from "../src/components/checkbox/index"; +import { h } from "./helpers"; + +describe("petty-checkbox", () => { + let el: PettyCheckbox; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-checkbox") as PettyCheckbox; + const input = h("input", { type: "checkbox", "data-part": "control" }); + const label = h("label", { "data-part": "label" }, "Accept"); + el.appendChild(input); + el.appendChild(label); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-checkbox")).toBe(PettyCheckbox); + }); + + it("defaults to unchecked state", () => { + expect(el.checked).toBe(false); + expect(el.dataset.state).toBe("unchecked"); + }); + + it("sets checked state via property", () => { + el.checked = true; + const input = el.querySelector("input") as HTMLInputElement; + expect(input.checked).toBe(true); + expect(el.dataset.state).toBe("checked"); + }); + + it("sets indeterminate state", () => { + el.indeterminate = true; + const input = el.querySelector("input") as HTMLInputElement; + expect(input.indeterminate).toBe(true); + expect(el.dataset.state).toBe("indeterminate"); + }); + + it("wires label htmlFor to input id", () => { + const input = el.querySelector("input") as HTMLInputElement; + const label = el.querySelector("label") as HTMLLabelElement; + expect(input.id).not.toBe(""); + expect(label.htmlFor).toBe(input.id); + }); +}); diff --git a/packages/core/tests/collapsible.test.ts b/packages/core/tests/collapsible.test.ts new file mode 100644 index 0000000..f7e31e5 --- /dev/null +++ b/packages/core/tests/collapsible.test.ts @@ -0,0 +1,98 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyCollapsible } from "../src/components/collapsible/index"; +import { PettyProgress } from "../src/components/progress/index"; +import "../src/components/alert/index"; +describe("petty-collapsible", () => { + let el: PettyCollapsible; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-collapsible") as PettyCollapsible; + const d = document.createElement("details"); + const s = document.createElement("summary"); + s.textContent = "Toggle"; + const c = document.createElement("div"); + c.setAttribute("data-part", "content"); + c.textContent = "Content"; + d.appendChild(s); + d.appendChild(c); + el.appendChild(d); + document.body.appendChild(el); + }); + it("registers and defaults to closed", () => { + expect(customElements.get("petty-collapsible")).toBe(PettyCollapsible); + expect(el.isOpen).toBe(false); + }); + it("open/close/toggle lifecycle", () => { + el.open(); + expect(el.detailsElement!.open).toBe(true); + el.close(); + expect(el.detailsElement!.open).toBe(false); + el.toggle(); + expect(el.detailsElement!.open).toBe(true); + }); + it("blocks open when disabled", () => { + el.setAttribute("disabled", ""); + el.open(); + expect(el.detailsElement!.open).toBe(false); + el.removeAttribute("disabled"); + el.open(); + expect(el.detailsElement!.open).toBe(true); + }); +}); +describe("petty-alert", () => { + let el: HTMLElement; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-alert"); + el.appendChild(document.createTextNode("msg")); + document.body.appendChild(el); + }); + it("defaults to status role", () => { + expect(el.getAttribute("role")).toBe("status"); + }); + it("error and warning get alert role", () => { + el.setAttribute("variant", "error"); + expect(el.getAttribute("role")).toBe("alert"); + el.setAttribute("variant", "warning"); + expect(el.getAttribute("role")).toBe("alert"); + }); + it("info gets status role then reverts on removal", () => { + el.setAttribute("variant", "info"); + expect(el.getAttribute("role")).toBe("status"); + el.removeAttribute("variant"); + expect(el.getAttribute("role")).toBe("status"); + }); +}); +describe("petty-progress", () => { + let el: PettyProgress; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-progress") as PettyProgress; + const fill = document.createElement("div"); + fill.setAttribute("data-part", "fill"); + const label = document.createElement("span"); + label.setAttribute("data-part", "label"); + el.appendChild(fill); + el.appendChild(label); + document.body.appendChild(el); + }); + it("sets progressbar ARIA", () => { + expect(el.getAttribute("role")).toBe("progressbar"); + expect(el.getAttribute("aria-valuemin")).toBe("0"); + }); + it("tracks value and max", () => { + el.setAttribute("value", "50"); + el.setAttribute("max", "200"); + expect(el.value).toBe(50); + expect(el.dataset.state).toBe("loading"); + }); + it("complete state at max", () => { + el.setAttribute("value", "100"); + expect(el.dataset.state).toBe("complete"); + }); + it("returns to indeterminate when value removed", () => { + el.setAttribute("value", "50"); + el.removeAttribute("value"); + expect(el.dataset.state).toBe("indeterminate"); + }); +}); diff --git a/packages/core/tests/dialog.test.ts b/packages/core/tests/dialog.test.ts new file mode 100644 index 0000000..d9fa0bc --- /dev/null +++ b/packages/core/tests/dialog.test.ts @@ -0,0 +1,36 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyDialog } from "../src/components/dialog/index"; +import { h } from "./helpers"; + +describe("petty-dialog", () => { + let el: PettyDialog; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-dialog") as PettyDialog; + const heading = h("h2", {}, "Title"); + const dlg = document.createElement("dialog"); + dlg.appendChild(heading); + el.appendChild(dlg); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-dialog")).toBe(PettyDialog); + }); + + it("links aria-labelledby to heading", () => { + const dlg = el.querySelector("dialog")!; + const heading = el.querySelector("h2")!; + expect(heading.id).not.toBe(""); + expect(dlg.getAttribute("aria-labelledby")).toBe(heading.id); + }); + + it("exposes isOpen as false by default", () => { + expect(el.isOpen).toBe(false); + }); + + it("returns dialogElement", () => { + expect(el.dialogElement).toBeInstanceOf(HTMLDialogElement); + }); +}); diff --git a/packages/core/tests/form.test.ts b/packages/core/tests/form.test.ts new file mode 100644 index 0000000..a330020 --- /dev/null +++ b/packages/core/tests/form.test.ts @@ -0,0 +1,61 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyForm } from "../src/components/form/index"; +import { h } from "./helpers"; + +describe("petty-form", () => { + let el: PettyForm; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-form") as PettyForm; + const label = h("label", { "data-part": "label" }, "Email"); + const input = h("input", { "data-part": "control", type: "email", name: "email" }); + const error = h("span", { "data-part": "error" }); + const field = h("petty-form-field", { name: "email" }, label, input, error); + const submit = h("button", { type: "submit" }, "Submit"); + const form = h("form", {}, field, submit); + el.appendChild(form); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-form")).toBe(PettyForm); + expect(customElements.get("petty-form-field")).toBeDefined(); + }); + + it("sets novalidate on the form", () => { + const form = el.querySelector("form")!; + expect(form.hasAttribute("novalidate")).toBe(true); + }); + + it("dispatches petty-submit with form data when no schema set", () => { + let detail: { data: Record } | null = null; + el.addEventListener("petty-submit", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + const input = el.querySelector("input") as HTMLInputElement; + input.value = "test@example.com"; + const form = el.querySelector("form")!; + form.dispatchEvent(new Event("submit", { cancelable: true })); + expect(detail!.data.email).toBe("test@example.com"); + }); + + it("dispatches petty-invalid on schema failure and shows error", () => { + const mockSchema = { + safeParse: () => ({ + success: false, + error: { issues: [{ path: ["email"], message: "Invalid email" }] }, + }), + }; + el.setSchema(mockSchema); + let detail: { errors: Array<{ path: Array; message: string }> } | null = null; + el.addEventListener("petty-invalid", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + const form = el.querySelector("form")!; + form.dispatchEvent(new Event("submit", { cancelable: true })); + expect(detail!.errors[0].message).toBe("Invalid email"); + expect(el.querySelector("[data-part=error]")!.textContent).toBe("Invalid email"); + expect(el.querySelector("[data-part=control]")!.getAttribute("aria-invalid")).toBe("true"); + }); +}); diff --git a/packages/core/tests/helpers.test.ts b/packages/core/tests/helpers.test.ts new file mode 100644 index 0000000..4118327 --- /dev/null +++ b/packages/core/tests/helpers.test.ts @@ -0,0 +1,65 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { part, emit, initialValue, listen, wireLabel } from "../src/shared/helpers"; + +describe("shared helpers", () => { + beforeEach(() => { document.body.replaceChildren(); }); + + it("part() finds child by data-part attribute", () => { + const host = document.createElement("div"); + const child = document.createElement("input"); + child.dataset.part = "control"; + host.appendChild(child); + expect(part(host, "control")).toBe(child); + expect(part(host, "missing")).toBeNull(); + }); + + it("emit() dispatches a bubbling petty-prefixed event", () => { + const el = document.createElement("div"); + document.body.appendChild(el); + let received: { value: unknown } | null = null; + document.body.addEventListener("petty-change", (e) => { received = (e as CustomEvent).detail; }); + emit(el, "change", { value: "test" }); + expect(received).toEqual({ value: "test" }); + }); + + it("initialValue() reads default-value then value then empty", () => { + const el = document.createElement("div"); + expect(initialValue(el)).toBe(""); + el.setAttribute("value", "v"); + expect(initialValue(el)).toBe("v"); + el.setAttribute("default-value", "dv"); + expect(initialValue(el)).toBe("dv"); + }); + + it("listen() attaches and cleanup removes listeners", () => { + const el = document.createElement("button"); + let count = 0; + const handler = () => { count++; }; + const cleanup = listen(el, [["click", handler]]); + el.click(); + expect(count).toBe(1); + cleanup(); + el.click(); + expect(count).toBe(1); + }); + + it("listen() returns noop for null element", () => { + const cleanup = listen(null, [["click", () => {}]]); + expect(typeof cleanup).toBe("function"); + cleanup(); + }); + + it("wireLabel() connects label htmlFor to control id", () => { + const control = document.createElement("input"); + const label = document.createElement("label"); + wireLabel(control, label, "test"); + expect(control.id).toMatch(/^test-/); + expect(label.htmlFor).toBe(control.id); + }); + + it("wireLabel() does nothing with null label", () => { + const control = document.createElement("input"); + wireLabel(control, null, "test"); + expect(control.id).toBe(""); + }); +}); diff --git a/packages/core/tests/helpers.ts b/packages/core/tests/helpers.ts new file mode 100644 index 0000000..fa5ee1c --- /dev/null +++ b/packages/core/tests/helpers.ts @@ -0,0 +1,69 @@ +/** + * Creates an element with optional attributes and children. + * Avoids innerHTML to satisfy SEC-12. + */ +export function h( + tag: string, + attrs?: Record, + ...children: Array +): HTMLElement { + const el = document.createElement(tag); + if (attrs) { + for (const [key, val] of Object.entries(attrs)) { + el.setAttribute(key, val); + } + } + for (const child of children) { + if (typeof child === "string") { + el.appendChild(document.createTextNode(child)); + } else { + el.appendChild(child); + } + } + return el; +} + +/** Clears the body and appends an element, returning it typed as T. */ +export function mount(el: T): T { + document.body.textContent = ""; + document.body.appendChild(el); + return el; +} + +/** Creates and mounts a petty-collapsible with a details/summary structure. */ +export function createCollapsible(): HTMLElement { + const el = document.createElement("petty-collapsible"); + const d = document.createElement("details"); + d.appendChild(h("summary", {}, "Toggle")); + d.appendChild(h("div", { "data-part": "content" }, "Content")); + el.appendChild(d); + return mount(el); +} + +/** Creates and mounts a petty-alert with text content. */ +export function createAlert(text = "msg"): HTMLElement { + const el = document.createElement("petty-alert"); + el.appendChild(document.createTextNode(text)); + return mount(el); +} + +/** Creates and mounts a petty-progress with fill and label parts. */ +export function createProgress(): HTMLElement { + const el = document.createElement("petty-progress"); + el.appendChild(h("div", { "data-part": "fill" })); + el.appendChild(h("span", { "data-part": "label" })); + return mount(el); +} + +/** Creates and mounts a petty-pagination with prev/next and numbered items. */ +export function createPagination(total = "50", pageSize = "10"): HTMLElement { + const el = document.createElement("petty-pagination"); + el.setAttribute("total", total); + el.setAttribute("page-size", pageSize); + el.appendChild(h("petty-pagination-item", { type: "prev" }, "Prev")); + el.appendChild(h("petty-pagination-item", { value: "1" }, "1")); + el.appendChild(h("petty-pagination-item", { value: "2" }, "2")); + el.appendChild(h("petty-pagination-item", { value: "3" }, "3")); + el.appendChild(h("petty-pagination-item", { type: "next" }, "Next")); + return mount(el); +} diff --git a/packages/core/tests/pagination.test.ts b/packages/core/tests/pagination.test.ts new file mode 100644 index 0000000..575f8fd --- /dev/null +++ b/packages/core/tests/pagination.test.ts @@ -0,0 +1,56 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyPagination } from "../src/components/pagination/index"; +import { h } from "./helpers"; + +describe("petty-pagination", () => { + let el: PettyPagination; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-pagination") as PettyPagination; + el.setAttribute("total", "50"); + el.setAttribute("page-size", "10"); + el.appendChild(h("petty-pagination-item", { type: "prev" }, "Prev")); + el.appendChild(h("petty-pagination-item", { value: "1" }, "1")); + el.appendChild(h("petty-pagination-item", { value: "2" }, "2")); + el.appendChild(h("petty-pagination-item", { value: "3" }, "3")); + el.appendChild(h("petty-pagination-item", { type: "next" }, "Next")); + document.body.appendChild(el); + }); + + it("registers and calculates totalPages", () => { + expect(customElements.get("petty-pagination")).toBe(PettyPagination); + expect(el.totalPages).toBe(5); + expect(el.currentPage).toBe(1); + }); + + it("marks page 1 as active with aria-current", () => { + const item1 = el.querySelector("[value='1']")!; + expect(item1.getAttribute("data-state")).toBe("active"); + expect(item1.getAttribute("aria-current")).toBe("page"); + }); + + it("disables prev on first page", () => { + expect(el.querySelector("[type=prev]")!.hasAttribute("disabled")).toBe(true); + }); + + it("clamps goToPage to valid range", () => { + el.goToPage(0); + expect(el.currentPage).toBe(1); + el.goToPage(999); + expect(el.currentPage).toBe(5); + }); + + it("fires petty-change on goToPage", () => { + let detail: { page: number } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { detail = e.detail; }) as EventListener); + el.goToPage(3); + expect(detail).toEqual({ page: 3 }); + expect(el.currentPage).toBe(3); + }); + + it("disables next on last page", () => { + el.goToPage(5); + expect(el.querySelector("[type=next]")!.hasAttribute("disabled")).toBe(true); + }); +}); diff --git a/packages/core/tests/progress.test.ts b/packages/core/tests/progress.test.ts new file mode 100644 index 0000000..3e476cc --- /dev/null +++ b/packages/core/tests/progress.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyProgress } from "../src/components/progress/index"; +describe("petty-progress", () => { + let el: PettyProgress; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-progress") as PettyProgress; + const fill = document.createElement("div"); + fill.setAttribute("data-part", "fill"); + const label = document.createElement("span"); + label.setAttribute("data-part", "label"); + el.appendChild(fill); + el.appendChild(label); + document.body.appendChild(el); + }); + it("registers as petty-progress", () => { + expect(customElements.get("petty-progress")).toBe(PettyProgress); + }); + it("sets progressbar ARIA on connect", () => { + expect(el.getAttribute("role")).toBe("progressbar"); + expect(el.getAttribute("aria-valuemin")).toBe("0"); + expect(el.getAttribute("aria-valuemax")).toBe("100"); + }); + it("is indeterminate without value", () => { + expect(el.value).toBeNull(); + expect(el.dataset.state).toBe("indeterminate"); + expect(el.hasAttribute("aria-valuenow")).toBe(false); + }); + it("tracks value and max attributes", () => { + el.setAttribute("value", "50"); + el.setAttribute("max", "200"); + expect(el.value).toBe(50); + expect(el.max).toBe(200); + expect(el.getAttribute("aria-valuenow")).toBe("50"); + expect(el.dataset.state).toBe("loading"); + }); + it("sets complete state at max", () => { + el.setAttribute("value", "100"); + expect(el.dataset.state).toBe("complete"); + }); + it("returns to indeterminate when value removed", () => { + el.setAttribute("value", "50"); + el.removeAttribute("value"); + expect(el.dataset.state).toBe("indeterminate"); + expect(el.hasAttribute("aria-valuenow")).toBe(false); + }); +}); diff --git a/packages/core/tests/radio-group.test.ts b/packages/core/tests/radio-group.test.ts new file mode 100644 index 0000000..3061f68 --- /dev/null +++ b/packages/core/tests/radio-group.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyRadioGroup } from "../src/components/radio-group/index"; +import { h } from "./helpers"; + +describe("petty-radio-group", () => { + let el: PettyRadioGroup; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-radio-group") as PettyRadioGroup; + el.setAttribute("default-value", "a"); + el.appendChild(h("petty-radio-item", { value: "a" }, "Option A")); + el.appendChild(h("petty-radio-item", { value: "b" }, "Option B")); + el.appendChild(h("petty-radio-item", { value: "c" }, "Option C")); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-radio-group")).toBe(PettyRadioGroup); + expect(customElements.get("petty-radio-item")).toBeDefined(); + }); + + it("sets role radiogroup on connect", () => { + expect(el.getAttribute("role")).toBe("radiogroup"); + }); + + it("initializes with default-value", () => { + expect(el.value).toBe("a"); + }); + + it("syncs aria-checked on radio items", () => { + const itemA = el.querySelector("[value=a]")!; + const itemB = el.querySelector("[value=b]")!; + expect(itemA.getAttribute("aria-checked")).toBe("true"); + expect(itemB.getAttribute("aria-checked")).toBe("false"); + }); + + it("fires petty-change on selectValue", () => { + let detail: { value: string } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.selectValue("b"); + expect(detail).toEqual({ value: "b" }); + expect(el.value).toBe("b"); + }); +}); diff --git a/packages/core/tests/select.test.ts b/packages/core/tests/select.test.ts new file mode 100644 index 0000000..85cc98d --- /dev/null +++ b/packages/core/tests/select.test.ts @@ -0,0 +1,49 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettySelect } from "../src/components/select/index"; +import { h } from "./helpers"; + +describe("petty-select", () => { + let el: PettySelect; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-select") as PettySelect; + el.setAttribute("default-value", "apple"); + const trigger = h("button", { "data-part": "trigger" }, "Pick a fruit"); + const opt1 = h("petty-select-option", { value: "apple" }, "Apple"); + const opt2 = h("petty-select-option", { value: "banana" }, "Banana"); + const listbox = h("div", { id: "fruit-list", popover: "", "data-part": "listbox", role: "listbox" }, opt1, opt2); + const hidden = h("input", { type: "hidden", name: "fruit" }); + el.appendChild(trigger); + el.appendChild(listbox); + el.appendChild(hidden); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-select")).toBe(PettySelect); + expect(customElements.get("petty-select-option")).toBeDefined(); + }); + + it("initializes with default-value", () => { + expect(el.value).toBe("apple"); + }); + + it("sets aria-haspopup on trigger", () => { + const trigger = el.querySelector("[data-part=trigger]")!; + expect(trigger.getAttribute("aria-haspopup")).toBe("listbox"); + expect(trigger.getAttribute("aria-expanded")).toBe("false"); + }); + + it("syncs hidden input value", () => { + const input = el.querySelector("input[type=hidden]") as HTMLInputElement; + expect(input.value).toBe("apple"); + }); + + it("marks selected option with aria-selected true", () => { + const apple = el.querySelector("[value=apple]")!; + const banana = el.querySelector("[value=banana]")!; + expect(apple.getAttribute("aria-selected")).toBe("true"); + expect(banana.getAttribute("aria-selected")).toBe("false"); + }); +}); diff --git a/packages/core/tests/switch.test.ts b/packages/core/tests/switch.test.ts new file mode 100644 index 0000000..b32a7cf --- /dev/null +++ b/packages/core/tests/switch.test.ts @@ -0,0 +1,49 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettySwitch } from "../src/components/switch/index"; +import { h } from "./helpers"; + +describe("petty-switch", () => { + let el: PettySwitch; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-switch") as PettySwitch; + const btn = h("button", { "data-part": "control", type: "button" }, "Toggle"); + const label = h("span", { "data-part": "label" }, "Dark mode"); + el.appendChild(btn); + el.appendChild(label); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-switch")).toBe(PettySwitch); + }); + + it("sets role switch on button", () => { + const btn = el.querySelector("button")!; + expect(btn.getAttribute("role")).toBe("switch"); + }); + + it("defaults to off state with aria-checked false", () => { + expect(el.checked).toBe(false); + expect(el.dataset.state).toBe("off"); + expect(el.querySelector("button")!.getAttribute("aria-checked")).toBe("false"); + }); + + it("toggles on click and fires petty-change", () => { + let detail: { checked: boolean } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.querySelector("button")!.click(); + expect(el.checked).toBe(true); + expect(el.dataset.state).toBe("on"); + expect(detail).toEqual({ checked: true }); + }); + + it("does not toggle when disabled", () => { + el.setAttribute("disabled", ""); + el.querySelector("button")!.click(); + expect(el.checked).toBe(false); + }); +}); diff --git a/packages/core/tests/tabs.test.ts b/packages/core/tests/tabs.test.ts new file mode 100644 index 0000000..a8f6bce --- /dev/null +++ b/packages/core/tests/tabs.test.ts @@ -0,0 +1,53 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyTabs } from "../src/components/tabs/index"; +import { h } from "./helpers"; + +describe("petty-tabs", () => { + let el: PettyTabs; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-tabs") as PettyTabs; + el.setAttribute("default-value", "one"); + const tab1 = h("petty-tab", { value: "one" }, "Tab 1"); + const tab2 = h("petty-tab", { value: "two" }, "Tab 2"); + const tablist = h("div", { role: "tablist" }, tab1, tab2); + const panel1 = h("petty-tab-panel", { value: "one" }, "Content 1"); + const panel2 = h("petty-tab-panel", { value: "two" }, "Content 2"); + el.appendChild(tablist); + el.appendChild(panel1); + el.appendChild(panel2); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-tabs")).toBe(PettyTabs); + }); + + it("initializes with default-value", () => { + expect(el.value).toBe("one"); + }); + + it("sets data-state and aria-selected on active tab", () => { + const tab1 = el.querySelector("petty-tab[value='one']")!; + const tab2 = el.querySelector("petty-tab[value='two']")!; + expect(tab1.getAttribute("data-state")).toBe("active"); + expect(tab1.getAttribute("aria-selected")).toBe("true"); + expect(tab2.getAttribute("data-state")).toBe("inactive"); + }); + + it("hides inactive panels", () => { + const panel2 = el.querySelector("petty-tab-panel[value='two']")!; + expect(panel2.hasAttribute("hidden")).toBe(true); + }); + + it("fires petty-change on selectTab", () => { + let detail: { value: string } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.selectTab("two"); + expect(detail).toEqual({ value: "two" }); + expect(el.value).toBe("two"); + }); +}); diff --git a/packages/core/tests/text-field.test.ts b/packages/core/tests/text-field.test.ts new file mode 100644 index 0000000..fa7bb9f --- /dev/null +++ b/packages/core/tests/text-field.test.ts @@ -0,0 +1,52 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyTextField } from "../src/components/text-field/index"; +import { h } from "./helpers"; + +describe("petty-text-field", () => { + let el: PettyTextField; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-text-field") as PettyTextField; + el.setAttribute("name", "email"); + el.appendChild(h("label", { "data-part": "label" }, "Email")); + el.appendChild(h("input", { "data-part": "control", type: "email" })); + el.appendChild(h("span", { "data-part": "description" }, "Enter your email")); + el.appendChild(h("span", { "data-part": "error" })); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-text-field")).toBe(PettyTextField); + }); + + it("wires label htmlFor to control id", () => { + const label = el.querySelector("label") as HTMLLabelElement; + const input = el.querySelector("input") as HTMLInputElement; + expect(input.id).not.toBe(""); + expect(label.htmlFor).toBe(input.id); + }); + + it("sets aria-describedby on control", () => { + const input = el.querySelector("input") as HTMLInputElement; + const describedBy = input.getAttribute("aria-describedby")!; + expect(describedBy.length).toBeGreaterThan(0); + }); + + it("setError marks control as aria-invalid", () => { + el.setError("Required field"); + const input = el.querySelector("input") as HTMLInputElement; + const error = el.querySelector("[data-part=error]")!; + expect(input.getAttribute("aria-invalid")).toBe("true"); + expect(error.textContent).toBe("Required field"); + }); + + it("clearError removes invalid state", () => { + el.setError("Required"); + el.clearError(); + const input = el.querySelector("input") as HTMLInputElement; + const error = el.querySelector("[data-part=error]")!; + expect(input.hasAttribute("aria-invalid")).toBe(false); + expect(error.textContent).toBe(""); + }); +}); diff --git a/packages/core/tests/toggle.test.ts b/packages/core/tests/toggle.test.ts new file mode 100644 index 0000000..5ef65ab --- /dev/null +++ b/packages/core/tests/toggle.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyToggle } from "../src/components/toggle/index"; +import { h } from "./helpers"; + +describe("petty-toggle", () => { + let el: PettyToggle; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-toggle") as PettyToggle; + el.appendChild(h("button", { "data-part": "control", type: "button" }, "Bold")); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-toggle")).toBe(PettyToggle); + }); + + it("defaults to unpressed with aria-pressed false", () => { + expect(el.pressed).toBe(false); + expect(el.dataset.state).toBe("off"); + expect(el.querySelector("button")!.getAttribute("aria-pressed")).toBe("false"); + }); + + it("sets pressed via property", () => { + el.pressed = true; + expect(el.hasAttribute("pressed")).toBe(true); + expect(el.querySelector("button")!.getAttribute("aria-pressed")).toBe("true"); + expect(el.dataset.state).toBe("on"); + }); + + it("toggles on click and fires petty-change", () => { + let detail: { pressed: boolean } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.querySelector("button")!.click(); + expect(el.pressed).toBe(true); + expect(detail).toEqual({ pressed: true }); + }); + + it("does not toggle when disabled", () => { + el.setAttribute("disabled", ""); + el.querySelector("button")!.click(); + expect(el.pressed).toBe(false); + }); +}); diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts index 1e4710f..285964f 100644 --- a/packages/core/tsdown.config.ts +++ b/packages/core/tsdown.config.ts @@ -1,25 +1,16 @@ import { defineConfig } from "tsdown"; const components = [ - "dialog", "toggle", "switch", "checkbox", "progress", "text-field", - "radio-group", "toggle-group", "collapsible", "accordion", "alert-dialog", "tabs", - "slider", "drawer", "listbox", "select", "combobox", "dropdown-menu", - "toast", "tooltip", "popover", "hover-card", "alert", "badge", - "skeleton", "breadcrumbs", "link", "button", "number-field", - "card", "avatar", "navigation-menu", - "virtual-list", "calendar", "date-picker", "command-palette", "form", "wizard", "data-table", + "accordion", "alert", "alert-dialog", "avatar", "badge", "breadcrumbs", "button", + "calendar", "card", "checkbox", "collapsible", "combobox", "command-palette", + "context-menu", "data-table", "date-picker", "dialog", "drawer", "dropdown-menu", + "form", "hover-card", "image", "link", "listbox", "meter", "navigation-menu", + "number-field", "pagination", "popover", "progress", "radio-group", "select", + "separator", "skeleton", "slider", "switch", "tabs", "text-field", "toast", + "tags-input", "toggle", "toggle-group", "tooltip", "virtual-list", "wizard", ]; -const utilities = ["presence", "focus-trap", "scroll-lock", "dismiss", "portal", "visually-hidden"]; -const entry: Record = {}; +const entry: Record = { signals: "src/signals.ts", router: "src/router.ts" }; for (const c of components) entry[`${c}/index`] = `src/components/${c}/index.ts`; -for (const u of utilities) entry[`${u}/index`] = `src/utilities/${u}/index.ts`; -export default defineConfig({ - entry, - format: ["esm", "cjs"], - dts: true, - clean: true, - sourcemap: true, - external: ["solid-js", "solid-js/web", "solid-js/store", "zod", "zod/v4"], -}); +export default defineConfig({ entry, format: ["esm", "cjs"], dts: true, clean: true, sourcemap: true, external: ["zod", "zod/v4"] }); diff --git a/packages/core/vitest.config.ts b/packages/core/vitest.config.ts new file mode 100644 index 0000000..d806e23 --- /dev/null +++ b/packages/core/vitest.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from "vitest/config"; + +export default defineConfig({ + test: { + environment: "jsdom", + include: ["tests/**/*.test.ts"], + }, +}); diff --git a/packages/mcp/package.json b/packages/mcp/package.json new file mode 100644 index 0000000..0db7b0f --- /dev/null +++ b/packages/mcp/package.json @@ -0,0 +1,19 @@ +{ + "name": "@pettyui/mcp", + "version": "2.0.0-alpha.0", + "type": "module", + "main": "dist/index.js", + "scripts": { + "build": "tsdown", + "start": "node dist/index.js" + }, + "dependencies": { + "@modelcontextprotocol/sdk": "^1.0.0", + "pettyui": "workspace:*", + "zod": "^4.3.6" + }, + "devDependencies": { + "tsdown": "^0.21.7", + "typescript": "^6.0.2" + } +} diff --git a/packages/mcp/src/component-info.ts b/packages/mcp/src/component-info.ts new file mode 100644 index 0000000..4ab8f37 --- /dev/null +++ b/packages/mcp/src/component-info.ts @@ -0,0 +1,16 @@ +/** Full metadata for a PettyUI web component, used by MCP tools to describe, compose, and validate. */ +export interface ComponentInfo { + tag: string; + description: string; + tier: 1 | 2 | 3; + category: "inputs" | "layout" | "navigation" | "overlays" | "feedback" | "data"; + attributes: Array<{ name: string; type: string; description: string; default?: string }>; + parts: Array<{ name: string; element: string; description: string }>; + events: Array<{ name: string; detail: string; description: string }>; + example: string; +} + +/** Creates a ComponentInfo with defaults for empty arrays. */ +export function defineComponent(info: ComponentInfo): ComponentInfo { + return info; +} diff --git a/packages/mcp/src/data/data.ts b/packages/mcp/src/data/data.ts new file mode 100644 index 0000000..34a0983 --- /dev/null +++ b/packages/mcp/src/data/data.ts @@ -0,0 +1,43 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function data(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "data", attributes, parts, events, example }; +} + +/** All data-category component definitions for the MCP registry. */ +export const dataComponents: ComponentInfo[] = [ + data("petty-data-table", "Sortable table with click-to-sort column headers", 2, + [], + [part("body", "tbody", "Table body containing sortable rows")], + [evt("petty-sort", "{ column: string, direction: string }", "Fires when a column sort changes")], + "\n \n \n \n \n \n \n \n \n
NameAge
Alice30
\n"), + data("petty-calendar", "Month grid with day selection and month navigation", 2, + [attr("value", "string", "Selected date in ISO format"), attr("min", "string", "Earliest selectable date"), attr("max", "string", "Latest selectable date")], + [part("title", "span", "Month/year heading"), part("body", "tbody", "Day grid body"), part("prev-month", "button", "Previous month nav"), part("next-month", "button", "Next month nav"), part("day", "button", "Individual day cell")], + [evt("petty-change", "{ value: string }", "Fires when a day is selected")], + "\n \n \n \n
\n"), + data("petty-virtual-list", "Windowed scroll rendering only visible items plus overscan", 3, + [attr("item-height", "string", "Height of each item in px", "40"), attr("overscan", "string", "Extra items rendered above/below viewport", "5")], + [], + [evt("petty-scroll", "{ startIndex: number, endIndex: number }", "Fires on scroll with visible range")], + ""), +]; diff --git a/packages/mcp/src/data/feedback.ts b/packages/mcp/src/data/feedback.ts new file mode 100644 index 0000000..9c5fdee --- /dev/null +++ b/packages/mcp/src/data/feedback.ts @@ -0,0 +1,47 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function feedback(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "feedback", attributes, parts, events, example }; +} + +/** All feedback-category component definitions for the MCP registry. */ +export const feedbackComponents: ComponentInfo[] = [ + feedback("petty-alert", "Inline status message with variant-driven ARIA role", 1, + [attr("variant", "string", "Visual variant: default, error, warning, success, info", "default")], + [], [], + "\n

Something went wrong.

\n"), + feedback("petty-progress", "Accessible progress bar with indeterminate state support", 1, + [attr("value", "string", "Current progress value (omit for indeterminate)"), attr("max", "string", "Maximum value", "100")], + [part("fill", "div", "Fill bar, receives --petty-progress CSS var"), part("label", "span", "Percentage text label")], + [], + "\n
\n 60%\n"), + feedback("petty-meter", "Value gauge with low/high/optimum state computation", 2, + [attr("value", "string", "Current value"), attr("min", "string", "Minimum", "0"), attr("max", "string", "Maximum", "100"), attr("low", "string", "Low threshold"), attr("high", "string", "High threshold"), attr("optimum", "string", "Optimal value")], + [part("fill", "div", "Fill bar, receives --petty-meter-value CSS var")], + [], + "\n
\n"), + feedback("petty-toast-region", "Container that renders active toast notifications", 2, + [attr("position", "string", "Screen position for toasts")], + [part("toast", "div", "Individual toast element"), part("toast-title", "div", "Toast title"), part("toast-description", "div", "Toast description"), part("toast-close", "button", "Dismiss button")], + [], + ""), +]; diff --git a/packages/mcp/src/data/inputs.ts b/packages/mcp/src/data/inputs.ts new file mode 100644 index 0000000..41a767b --- /dev/null +++ b/packages/mcp/src/data/inputs.ts @@ -0,0 +1,95 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function input(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "inputs", attributes, parts, events, example }; +} + +const change = (detail: string, desc: string) => evt("petty-change", detail, desc); + +/** All input-category component definitions for the MCP registry. */ +export const inputComponents: ComponentInfo[] = [ + input("petty-button", "Headless button wrapper with loading and disabled states", 1, + [attr("disabled", "boolean", "Disables the button"), attr("loading", "boolean", "Shows loading state, disables interaction")], + [part("button", "button", "The native button element")], [], + "\n \n"), + input("petty-checkbox", "Tri-state checkbox with label wiring and change events", 1, + [attr("checked", "boolean", "Whether checked"), attr("indeterminate", "boolean", "Indeterminate state"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name"), attr("value", "string", "Form value", "on")], + [part("control", "input[type=checkbox]", "The native checkbox"), part("label", "label", "Label wired to checkbox")], + [change("{ checked: boolean, indeterminate: boolean }", "Fires on check change")], + "\n \n \n"), + input("petty-switch", "On/off toggle built on a button with role=switch", 1, + [attr("checked", "boolean", "Whether on"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name")], + [part("control", "button", "Button with role=switch"), part("label", "span", "Label via aria-labelledby")], + [change("{ checked: boolean }", "Fires on toggle")], + "\n Dark mode\n \n"), + input("petty-radio-group", "Mutually exclusive selection group with keyboard navigation", 1, + [attr("name", "string", "Form name"), attr("value", "string", "Selected value"), attr("default-value", "string", "Initial value"), attr("orientation", "string", "Layout orientation", "vertical")], + [], [change("{ value: string }", "Fires on selection change")], + "\n Option A\n Option B\n"), + input("petty-text-field", "Labeled text input with description and error wiring", 1, + [attr("name", "string", "Form name"), attr("disabled", "boolean", "Disables input"), attr("required", "boolean", "Marks required")], + [part("label", "label", "Label wired via htmlFor"), part("control", "input", "The text input"), part("description", "span", "Help text"), part("error", "span", "Error message")], + [change("{ value: string }", "Fires on input")], + "\n \n \n Your email\n \n"), + input("petty-select", "Headless select built on Popover API with keyboard nav", 1, + [attr("value", "string", "Selected value"), attr("default-value", "string", "Initial value"), attr("placeholder", "string", "Trigger placeholder")], + [part("trigger", "button", "Opens the listbox popover"), part("listbox", "div[popover]", "Popover with role=listbox")], + [change("{ value: string }", "Fires on selection change")], + "\n \n
\n A\n
\n"), + input("petty-toggle", "Pressed/unpressed toggle button with aria-pressed", 1, + [attr("pressed", "boolean", "Whether pressed"), attr("disabled", "boolean", "Disables toggle")], + [part("control", "button", "The toggle button")], + [change("{ pressed: boolean }", "Fires on press change")], + "\n \n"), + input("petty-slider", "Range input wrapper with label, output, and change events", 2, + [attr("min", "string", "Minimum"), attr("max", "string", "Maximum"), attr("step", "string", "Step"), attr("value", "string", "Current value"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name"), attr("orientation", "string", "Orientation", "horizontal")], + [part("control", "input[type=range]", "Range input"), part("label", "label", "Label"), part("output", "span", "Value display")], + [change("{ value: number }", "Fires on change")], + "\n \n \n 50\n"), + input("petty-number-field", "Numeric input with increment/decrement and clamping", 2, + [attr("min", "string", "Minimum"), attr("max", "string", "Maximum"), attr("step", "string", "Step", "1"), attr("value", "string", "Current value"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name")], + [part("control", "input", "Numeric input"), part("label", "label", "Label"), part("increment", "button", "Increment"), part("decrement", "button", "Decrement")], + [change("{ value: number }", "Fires on change")], + "\n \n \n \n \n"), + input("petty-combobox", "Searchable select with popover listbox and keyboard nav", 2, + [attr("value", "string", "Selected value"), attr("placeholder", "string", "Placeholder"), attr("disabled", "boolean", "Disables")], + [part("input", "input", "Search input"), part("listbox", "div[popover]", "Popover listbox")], + [change("{ value: string }", "Fires on select")], + "\n \n
\n A\n
\n"), + input("petty-listbox", "Inline selectable list with single or multiple selection", 2, + [attr("value", "string", "Selected value(s)"), attr("default-value", "string", "Initial value"), attr("multiple", "boolean", "Multi-select mode")], + [], [change("{ value: string }", "Fires on selection change")], + "\n Alpha\n Beta\n"), + input("petty-toggle-group", "Single or multi-selection toggle group", 2, + [attr("type", "string", "Mode: single|multiple", "single"), attr("value", "string", "Selected value(s)"), attr("default-value", "string", "Initial value"), attr("orientation", "string", "Orientation")], + [], [change("{ value: string }", "Fires on change")], + "\n Left\n Right\n"), + input("petty-date-picker", "Date input with calendar popover integration", 2, + [attr("value", "string", "ISO date"), attr("min", "string", "Earliest date"), attr("max", "string", "Latest date"), attr("disabled", "boolean", "Disables")], + [part("input", "input", "Date text input"), part("trigger", "button", "Calendar toggle"), part("calendar", "div[popover]", "Calendar popover")], + [change("{ value: string }", "Fires on date select")], + "\n \n \n
\n"), + input("petty-form", "Form wrapper with Zod validation and accessible error display", 1, + [], [], + [evt("petty-submit", "{ data: Record }", "Fires on valid submit"), evt("petty-invalid", "{ errors: Array<{ path, message }> }", "Fires on validation failure")], + "\n
\n \n \n \n \n \n \n
\n"), +]; diff --git a/packages/mcp/src/data/layout.ts b/packages/mcp/src/data/layout.ts new file mode 100644 index 0000000..cc2a71c --- /dev/null +++ b/packages/mcp/src/data/layout.ts @@ -0,0 +1,66 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function layout(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "layout", attributes, parts, events, example }; +} + +/** All layout-category component definitions for the MCP registry. */ +export const layoutComponents: ComponentInfo[] = [ + layout("petty-tabs", "Headless tabbed interface with reactive tab/panel sync", 1, + [attr("value", "string", "Active tab value"), attr("default-value", "string", "Initial active tab")], + [], [evt("petty-change", "{ value: string }", "Fires when active tab changes")], + "\n
\n Tab 1\n Tab 2\n
\n Content 1\n Content 2\n"), + layout("petty-accordion", "Headless accordion built on native details elements", 1, + [attr("type", "string", "Mode: single closes others, multiple allows many", "single")], + [part("content", "div", "Accordion item content area")], + [evt("petty-change", "{ value: string[] }", "Fires with array of open item values")], + "\n \n
\n Section 1\n
Content 1
\n
\n \n"), + layout("petty-collapsible", "Single disclosure wrapper on native details element", 1, + [attr("disabled", "boolean", "Prevents open/close interaction")], + [], [evt("petty-toggle", "{ open: boolean }", "Fires on open/close toggle")], + "\n
\n Toggle\n
Hidden content
\n
\n"), + layout("petty-card", "Structural container with optional heading-based labelling", 2, + [], [], [], + "\n

Card Title

\n

Card content goes here.

\n"), + layout("petty-separator", "Accessible divider with configurable orientation", 2, + [attr("orientation", "string", "Visual orientation", "horizontal")], + [], [], + ""), + layout("petty-skeleton", "Loading placeholder with aria-busy and loaded state transitions", 2, + [attr("loaded", "boolean", "Switches from loading to loaded state")], + [], [], + "\n
\n"), + layout("petty-badge", "Display-only status indicator with variant support", 2, + [attr("variant", "string", "Visual variant", "default")], + [], [], + "Active"), + layout("petty-avatar", "Image with automatic fallback on load error", 2, + [], [part("fallback", "span", "Fallback content shown on image error")], [], + "\n \"User\"\n JD\n"), + layout("petty-image", "Image element with fallback display on load failure", 3, + [], [part("fallback", "span", "Fallback shown on error")], [], + "\n \"Photo\"\n No image\n"), + layout("petty-wizard", "Multi-step flow with navigation between steps", 2, + [attr("value", "string", "Active step value"), attr("default-value", "string", "Initial step")], + [], [evt("petty-change", "{ value: string }", "Fires when step changes")], + "\n Step 1 content\n Step 2 content\n"), +]; diff --git a/packages/mcp/src/data/navigation.ts b/packages/mcp/src/data/navigation.ts new file mode 100644 index 0000000..f0ec4ff --- /dev/null +++ b/packages/mcp/src/data/navigation.ts @@ -0,0 +1,44 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function nav(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "navigation", attributes, parts, events, example }; +} + +/** All navigation-category component definitions for the MCP registry. */ +export const navigationComponents: ComponentInfo[] = [ + nav("petty-breadcrumbs", "Navigation breadcrumb trail with ARIA landmarks", 2, + [], [], [], + "\n
    \n
  1. Home
    2. \n
  2. Docs
    3. \n
  3. Current
    4. \n
\n"), + nav("petty-pagination", "Page navigation with prev/next and numbered items", 1, + [attr("total", "string", "Total number of items"), attr("page-size", "string", "Items per page", "10"), attr("current-page", "string", "Active page number", "1")], + [], + [evt("petty-change", "{ page: number }", "Fires when page changes")], + "\n Prev\n 1\n 2\n Next\n"), + nav("petty-navigation-menu", "Horizontal nav with optional popover dropdowns", 2, + [attr("orientation", "string", "Layout orientation", "horizontal")], + [], [], + "\n \n"), + nav("petty-link", "Headless anchor wrapper with disabled and external support", 2, + [attr("disabled", "boolean", "Prevents navigation"), attr("external", "boolean", "Opens in new tab with noopener")], + [], [], + "\n External Link\n"), +]; diff --git a/packages/mcp/src/data/overlays.ts b/packages/mcp/src/data/overlays.ts new file mode 100644 index 0000000..f2ad0e9 --- /dev/null +++ b/packages/mcp/src/data/overlays.ts @@ -0,0 +1,70 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function overlay(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "overlays", attributes, parts, events, example }; +} + +/** All overlay-category component definitions for the MCP registry. */ +export const overlayComponents: ComponentInfo[] = [ + overlay("petty-dialog", "Headless dialog on native dialog element with ARIA linking", 1, + [], [], + [evt("petty-close", "{ value: string }", "Fires when dialog closes with return value")], + "\n \n \n

Title

\n

Content

\n \n \n"), + overlay("petty-alert-dialog", "Confirmation dialog with role=alertdialog on native dialog", 1, + [], [], + [evt("petty-close", "{ value: string }", "Fires when closed with return value")], + "\n \n \n

Confirm

\n

Are you sure?

\n \n \n \n"), + overlay("petty-popover", "Headless popover on native Popover API with ARIA linking", 1, + [], [], + [evt("petty-toggle", "{ open: boolean }", "Fires on open/close")], + "\n \n
\n

Popover content

\n
\n"), + overlay("petty-drawer", "Slide-in panel built on native dialog with side positioning", 2, + [attr("side", "string", "Slide-in direction", "right")], + [], + [evt("petty-close", "{ value: string }", "Fires when drawer closes")], + "\n \n \n

Drawer Title

\n

Drawer content

\n \n"), + overlay("petty-tooltip", "Hover/focus label using Popover API with delay and ARIA linking", 2, + [attr("delay", "string", "Show delay in ms", "200")], + [part("trigger", "span", "Element that triggers tooltip"), part("content", "div[popover]", "Tooltip content popover")], + [evt("petty-toggle", "{ open: boolean }", "Fires on show/hide")], + "\n Hover me\n
Tooltip text
\n"), + overlay("petty-hover-card", "Rich hover preview using Popover API with open/close delays", 3, + [attr("open-delay", "string", "Delay before showing in ms", "300"), attr("close-delay", "string", "Delay before hiding in ms", "200")], + [part("trigger", "span", "Hover trigger element"), part("content", "div[popover]", "Card content popover")], + [evt("petty-toggle", "{ open: boolean }", "Fires on show/hide")], + "\n Hover for preview\n
\n

Rich preview content

\n
\n"), + overlay("petty-dropdown-menu", "Action menu built on the Popover API", 1, + [], + [part("trigger", "button", "Menu trigger button"), part("content", "div[popover]", "Menu content popover")], + [evt("petty-select", "{ value: string }", "Fires when a menu item is selected")], + "\n \n
\n Edit\n Delete\n
\n"), + overlay("petty-context-menu", "Right-click menu using Popover API with keyboard nav", 2, + [], + [part("trigger", "div", "Right-click target area"), part("content", "div[popover]", "Context menu popover")], + [evt("petty-select", "{ value: string }", "Fires when an item is selected")], + "\n
Right-click here
\n
\n Copy\n Paste\n
\n"), + overlay("petty-command-palette", "Search-driven command menu using native dialog", 2, + [], + [part("search", "input", "Search input field"), part("list", "div", "Command items container")], + [evt("petty-select", "{ value: string }", "Fires when a command is selected")], + "\n \n \n
\n Save\n
\n \n"), +]; diff --git a/packages/mcp/src/index.ts b/packages/mcp/src/index.ts new file mode 100644 index 0000000..a3d63bb --- /dev/null +++ b/packages/mcp/src/index.ts @@ -0,0 +1,49 @@ +import { Server } from "@modelcontextprotocol/sdk/server/index.js"; +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js"; +import { discoverInput, handleDiscover } from "./tools/discover.js"; +import { inspectInput, handleInspect } from "./tools/inspect.js"; +import { composeInput, handleCompose } from "./tools/compose.js"; +import { validateInput, handleValidate } from "./tools/validate.js"; + +const TOOLS = [ + { name: "pettyui_discover", description: "List available PettyUI components, optionally filtered by category", inputSchema: JSON.parse(JSON.stringify(discoverInput.shape)) }, + { name: "pettyui_inspect", description: "Get full details for a PettyUI component by tag name", inputSchema: JSON.parse(JSON.stringify(inspectInput.shape)) }, + { name: "pettyui_compose", description: "Generate valid HTML for a PettyUI component with attributes and content", inputSchema: JSON.parse(JSON.stringify(composeInput.shape)) }, + { name: "pettyui_validate", description: "Validate HTML against a PettyUI component schema", inputSchema: JSON.parse(JSON.stringify(validateInput.shape)) }, +]; + +type Handler = (args: Record) => unknown; +const handlers: Record = { + pettyui_discover: (args) => handleDiscover(discoverInput.parse(args)), + pettyui_inspect: (args) => handleInspect(inspectInput.parse(args)), + pettyui_compose: (args) => handleCompose(composeInput.parse(args)), + pettyui_validate: (args) => handleValidate(validateInput.parse(args)), +}; + +/** Dispatches a tool call by name to its handler function. */ +function dispatchTool(name: string, args: Record): unknown { + const handler = handlers[name]; + if (!handler) throw new Error(`Unknown tool: ${name}`); + return handler(args); +} + +/** Creates and configures the PettyUI MCP server instance. */ +export function createServer(): Server { + const server = new Server({ name: "pettyui", version: "2.0.0-alpha.0" }, { capabilities: { tools: {} } }); + server.setRequestHandler(ListToolsRequestSchema, () => ({ tools: TOOLS })); + server.setRequestHandler(CallToolRequestSchema, (request) => { + const result = dispatchTool(request.params.name, (request.params.arguments ?? {}) as Record); + return { content: [{ type: "text" as const, text: JSON.stringify(result, null, 2) }] }; + }); + return server; +} + +/** Starts the MCP server on stdio transport. */ +export async function main(): Promise { + const server = createServer(); + const transport = new StdioServerTransport(); + await server.connect(transport); +} + +main(); diff --git a/packages/mcp/src/registry.ts b/packages/mcp/src/registry.ts new file mode 100644 index 0000000..ea7912b --- /dev/null +++ b/packages/mcp/src/registry.ts @@ -0,0 +1,33 @@ +import type { ComponentInfo } from "./component-info.js"; +import { inputComponents } from "./data/inputs.js"; +import { layoutComponents } from "./data/layout.js"; +import { overlayComponents } from "./data/overlays.js"; +import { feedbackComponents } from "./data/feedback.js"; +import { navigationComponents } from "./data/navigation.js"; +import { dataComponents } from "./data/data.js"; + +const registry = new Map(); +const allSources = [inputComponents, layoutComponents, overlayComponents, feedbackComponents, navigationComponents, dataComponents]; +for (const source of allSources) { + for (const component of source) { registry.set(component.tag, component); } +} + +/** Returns all registered components. */ +export function getAllComponents(): ComponentInfo[] { + return Array.from(registry.values()); +} + +/** Finds a component by its tag name, or returns undefined. */ +export function getComponent(tag: string): ComponentInfo | undefined { + return registry.get(tag); +} + +/** Returns all components matching the given category. */ +export function getComponentsByCategory(category: string): ComponentInfo[] { + return getAllComponents().filter((c) => c.category === category); +} + +/** Returns the set of all known tag names. */ +export function getTagNames(): Set { + return new Set(registry.keys()); +} diff --git a/packages/mcp/src/tools/compose.ts b/packages/mcp/src/tools/compose.ts new file mode 100644 index 0000000..1144478 --- /dev/null +++ b/packages/mcp/src/tools/compose.ts @@ -0,0 +1,35 @@ +import { z } from "zod"; +import { getComponent } from "../registry.js"; + +/** Zod schema for the compose tool input. */ +export const composeInput = z.object({ + tag: z.string().describe("The component tag name, e.g. petty-button"), + attributes: z.record(z.string(), z.string()).optional().describe("Attribute key-value pairs to set"), + content: z.string().optional().describe("Inner HTML content to place inside the component"), +}); + +function buildAttrString(attrs: Record): string { + const pairs: string[] = []; + for (const [key, val] of Object.entries(attrs)) { + if (val === "" || val === "true") pairs.push(key); + else pairs.push(`${key}="${val}"`); + } + return pairs.length > 0 ? " " + pairs.join(" ") : ""; +} + +function indentLines(text: string, spaces: number): string { + const pad = " ".repeat(spaces); + return text.split("\n").map((line) => (line.trim() ? pad + line : line)).join("\n"); +} + +/** Generates valid HTML for a PettyUI component with attributes and content. */ +export function handleCompose(input: z.infer): { html: string } | { error: string } { + const info = getComponent(input.tag); + if (!info) return { error: `Unknown component: ${input.tag}` }; + const attrStr = input.attributes ? buildAttrString(input.attributes) : ""; + const inner = input.content ?? indentLines(info.example.split("\n").slice(1, -1).join("\n"), 0).trim(); + const openTag = `<${info.tag}${attrStr}>`; + const closeTag = ``; + if (!inner) return { html: `${openTag}${closeTag}` }; + return { html: `${openTag}\n${indentLines(inner, 2)}\n${closeTag}` }; +} diff --git a/packages/mcp/src/tools/discover.ts b/packages/mcp/src/tools/discover.ts new file mode 100644 index 0000000..91a14eb --- /dev/null +++ b/packages/mcp/src/tools/discover.ts @@ -0,0 +1,13 @@ +import { z } from "zod"; +import { getAllComponents, getComponentsByCategory } from "../registry.js"; + +/** Zod schema for the discover tool input. */ +export const discoverInput = z.object({ + category: z.string().optional().describe("Filter: inputs, layout, navigation, overlays, feedback, data"), +}); + +/** Lists available PettyUI components, optionally filtered by category. */ +export function handleDiscover(input: z.infer): { tag: string; description: string; tier: number; category: string }[] { + const source = input.category ? getComponentsByCategory(input.category) : getAllComponents(); + return source.map((c) => ({ tag: c.tag, description: c.description, tier: c.tier, category: c.category })); +} diff --git a/packages/mcp/src/tools/inspect.ts b/packages/mcp/src/tools/inspect.ts new file mode 100644 index 0000000..849a52b --- /dev/null +++ b/packages/mcp/src/tools/inspect.ts @@ -0,0 +1,19 @@ +import { z } from "zod"; +import { getComponent, getTagNames } from "../registry.js"; +import type { ComponentInfo } from "../component-info.js"; + +/** Zod schema for the inspect tool input. */ +export const inspectInput = z.object({ + tag: z.string().describe("The component tag name, e.g. petty-button"), +}); + +/** Returns full component details or an error for unknown tags, with suggestions for near-misses. */ +export function handleInspect(input: z.infer): ComponentInfo | { error: string; suggestions?: string[] } { + const info = getComponent(input.tag); + if (info) return info; + const allTags = Array.from(getTagNames()); + const needle = input.tag.toLowerCase(); + const suggestions = allTags.filter((t) => t.includes(needle) || needle.includes(t.replace("petty-", ""))); + if (suggestions.length > 0) return { error: `Unknown component: ${input.tag}`, suggestions }; + return { error: `Unknown component: ${input.tag}. Use pettyui_discover to list all available components.` }; +} diff --git a/packages/mcp/src/tools/validate.ts b/packages/mcp/src/tools/validate.ts new file mode 100644 index 0000000..89d28fe --- /dev/null +++ b/packages/mcp/src/tools/validate.ts @@ -0,0 +1,60 @@ +import { z } from "zod"; +import { getComponent } from "../registry.js"; +import type { ComponentInfo } from "../component-info.js"; + +/** Zod schema for the validate tool input. */ +export const validateInput = z.object({ + tag: z.string().describe("The component tag name, e.g. petty-button"), + html: z.string().describe("The HTML string to validate against the component schema"), +}); + +function checkAttributes(html: string, info: ComponentInfo): string[] { + const errors: string[] = []; + const attrPattern = /\s([a-z][a-z0-9-]*)(?:=|[\s>])/g; + const foundAttrs = new Set(); + let match = attrPattern.exec(html); + while (match !== null) { + const name = match[1]; + if (name) foundAttrs.add(name); + match = attrPattern.exec(html); + } + const knownAttrs = new Set(info.attributes.map((a) => a.name)); + const reserved = new Set(["id", "class", "style", "slot", "data-part", "data-state", "role", "aria-label", "aria-labelledby", "aria-describedby", "hidden", "tabindex", "popover", "popovertarget", "commandfor", "command", "type", "name", "value", "placeholder", "href", "src", "alt", "for", "disabled", "checked", "required"]); + for (const found of foundAttrs) { + if (!knownAttrs.has(found) && !reserved.has(found) && !found.startsWith("aria-") && !found.startsWith("data-")) { + errors.push(`Unknown attribute "${found}" on <${info.tag}>`); + } + } + return errors; +} + +function checkParts(html: string, info: ComponentInfo): string[] { + const errors: string[] = []; + for (const part of info.parts) { + const partPattern = `data-part="${part.name}"`; + if (!html.includes(partPattern) && !html.includes(`data-part='${part.name}'`)) { + errors.push(`Missing required part "${part.name}" (${part.element}) — add data-part="${part.name}"`); + } + } + return errors; +} + +function checkNesting(html: string, info: ComponentInfo): string[] { + const errors: string[] = []; + if (!html.includes(`<${info.tag}`) || !html.includes(``)) { + errors.push(`HTML must contain a <${info.tag}> element with a closing tag`); + } + return errors; +} + +/** Validates HTML against a PettyUI component schema, checking parts, attributes, and nesting. */ +export function handleValidate(input: z.infer): { valid: boolean; errors: string[] } { + const info = getComponent(input.tag); + if (!info) return { valid: false, errors: [`Unknown component: ${input.tag}`] }; + const errors = [ + ...checkNesting(input.html, info), + ...checkParts(input.html, info), + ...checkAttributes(input.html, info), + ]; + return { valid: errors.length === 0, errors }; +} diff --git a/packages/mcp/tsconfig.json b/packages/mcp/tsconfig.json new file mode 100644 index 0000000..5285d28 --- /dev/null +++ b/packages/mcp/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist" + }, + "include": ["src"] +} diff --git a/packages/showcase/index.html b/packages/showcase/index.html new file mode 100644 index 0000000..7e7972b --- /dev/null +++ b/packages/showcase/index.html @@ -0,0 +1,422 @@ + + + + + + + PettyUI — Component Showcase + + + + + + + + +
+ +
+

PettyUI

+

45 headless Web Components. Zero dependencies. Browser-native APIs. The smallest UI library that does everything.

+
+ components + + dependencies + + ~ runtime +
+
+ +
+

Why PettyUI

+
+
+
Browser-Native
+
Popover API, native Dialog, Navigation API, Invoker Commands. No polyfills.
+
+
+
Zero Runtime
+
500-byte signals. No virtual DOM, no framework. Just Custom Elements.
+
+
+
AI-Native
+
Zod schemas for every prop. MCP tools for agent integration.
+
+
+
+ +
+ +
+

Inputs & Forms

 +

Form primitives with built-in ARIA, keyboard navigation, and event handling.

 +
+ +
+

Button

+
+ + + + +
+

<petty-button>

+
+ +
+

Text Field

+ + + + We will never share your email. + + +

<petty-text-field>

+
+ +
+

Checkbox & Switch

+
+ + + + + + + + + + + + Dark mode + +
+

<petty-checkbox> <petty-switch>

+
+ +
+

Radio Group

+ + Small + Medium + Large + +

<petty-radio-group>

+
+ +
+

Toggle & Toggle Group

+
+
+ + +
+ + Left + Center + Right + +
+

<petty-toggle> <petty-toggle-group>

+
+ +
+

Number Field & Slider

+ + + + + + + + + + 65 + +

<petty-number-field> <petty-slider>

+
+ +
+

Select

+ + +
+ TypeScript + Rust + Go + Python +
+ +

<petty-select>

+
+ +
+

Tags Input

+ + + + + +

<petty-tags-input>

+
+ +
+
+ +
+

Navigation

 +

Tab bars, accordions, breadcrumbs, and pagination — all keyboard-accessible.

 +
+ +
+

Tabs

+ +
+ Overview + Features + API +
+ PettyUI is a headless component library built on vanilla Web Components. No framework required. + Zero dependencies, Popover API, native dialog, Invoker Commands, Navigation API, View Transitions. + Every component is a Custom Element. Import and use anywhere: React, Vue, Svelte, or plain HTML. + +

<petty-tabs>

+
+ +
+

Accordion

+ + +
Installation

npm install pettyui — zero peer dependencies.

+ + +
Usage

Import the component, write HTML. That is it.

+ + +
Styling

No Shadow DOM. Style with plain CSS, Tailwind, or anything.

+ + +

<petty-accordion>

+
+ +
+

Breadcrumbs & Pagination

+ +
    + Home + Components + Button +
+ + + + + +

<petty-breadcrumbs> <petty-pagination>

+
+ +
+
+ +
+

Overlays

 +

Dialogs, popovers, tooltips, and drawers — powered by native browser APIs.

 +
+ +
+

Dialog & Alert Dialog

+
+ + +
+

<petty-dialog> <petty-alert-dialog>

+
+ +
+

Popover & Tooltip

+
+ + +
This uses the native Popover API. Click outside to dismiss.
+ + + Hover me +
Native tooltip via Popover API
+ +
+

<petty-popover> <petty-tooltip>

+
+ +
+

Dropdown Menu

+ + + + +

<petty-dropdown-menu>

+
+ +
+
+ +
+

Feedback & Display

 +

Status indicators, progress bars, alerts, badges, and notifications.

 +
+ +
+

Alert

+
+
Deployed successfully
Your changes are live and visible to all users.
 +
Build failed
Check the CI logs for error details.
 +
Rate limit approaching
You have used 90% of your API quota this month.
 +
+

<petty-alert>

+
+ +
+

Progress & Meter

+
+
+
Upload progress72%
+
+
+
+
CPU usage35%
+
+
+
+
Memory85%
+
+
+
+
+
Loading indicator
+
+ + + + +
+
+

<petty-progress> <petty-meter> <petty-loading-indicator>

+
+ +
+

Badge & Avatar

+
+
+ Default + Active + Offline + Pending +
+
+ MB + JD + AK +
+
+

<petty-badge> <petty-avatar>

+
+ +
+

Toast

+
+ + +
+

<petty-toast-region>

+
+ +
+

Skeleton & Card

+ +

Loading content

 + + + + + + + + + +

<petty-card> <petty-skeleton>

+
+ + + +
+
+ +
+ +

PettyUI v2 — 45 Web Components, 0 dependencies, built on browser standards.

+
+ +
//ST3
+ +
+ + + +

Welcome to PettyUI

+

This dialog uses the native dialog element. Focus trap, backdrop, and Escape key work out of the box.

+ + + + + +

Delete project?

+

This action cannot be undone. All data will be permanently removed.

+
+ + +
+ + + + + diff --git a/packages/showcase/package.json b/packages/showcase/package.json new file mode 100644 index 0000000..c16d13e --- /dev/null +++ b/packages/showcase/package.json @@ -0,0 +1,16 @@ +{ + "name": "@pettyui/showcase", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "dependencies": { + "pettyui": "workspace:*" + }, + "devDependencies": { + "vite": "^6.3.5" + } +} diff --git a/packages/showcase/style.css b/packages/showcase/style.css new file mode 100644 index 0000000..5789ef7 --- /dev/null +++ b/packages/showcase/style.css @@ -0,0 +1,1807 @@ +/* ============================================================ + PettyUI Showcase — Premium Dark SaaS Theme + ============================================================ */ + +/* --- Design Tokens --- */ +:root { + /* ── Gray palette (Slate) ── */ + --gray-1: #f4f6f9; + --gray-2: #f1f5f9; + --gray-3: #e2e8f0; + --gray-4: #cbd5e1; + --gray-5: #94a3b8; + --gray-6: #64748b; + --gray-7: #475569; + --gray-8: #334155; + --gray-9: #1e293b; + --gray-10: #0f172a; + + /* ── Accent palette (Aperture Blue) ── */ + --accent-1: #edf9fe; + --accent-2: #d4f1fd; + --accent-3: #a8e3fb; + --accent-4: #6dcef5; + --accent-5: #36c0f1; + --accent-6: #1fa8d8; + --accent-7: #1890ba; + --accent-8: #14769a; + --accent-contrast: #ffffff; + + /* ── Semantic colors ── */ + --color-bg: var(--gray-1); + --color-surface: #ffffff; + --color-surface-raised: var(--gray-2); + --color-surface-sunken: var(--gray-3); + --color-border: var(--gray-3); + --color-border-strong: var(--gray-4); + --color-text: var(--gray-10); + --color-text-secondary: var(--gray-6); + --color-text-tertiary: var(--gray-5); + --color-accent: var(--accent-5); + --color-accent-hover: var(--accent-6); + --color-accent-subtle: var(--accent-1); + --color-accent-muted: rgba(54, 192, 241, 0.08); + --color-danger: #dc2626; + --color-danger-subtle: #fef2f2; + --color-warning: #d97706; + --color-warning-subtle: #fffbeb; + --color-success: #16a34a; + --color-success-subtle: #f0fdf4; + + /* ── Typography ── */ + --font-sans: "Geist", -apple-system, system-ui, sans-serif; + --font-mono: "Geist Mono", ui-monospace, monospace; + --text-xs: 0.75rem; + --text-sm: 0.8125rem; + --text-base: 0.875rem; + --text-lg: 1rem; + --text-xl: 1.125rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-hero: clamp(3rem, 8vw, 5rem); + --weight-normal: 400; + --weight-medium: 500; + --weight-semibold: 600; + --weight-bold: 700; + --leading-tight: 1.15; + --leading-normal: 1.5; + --leading-relaxed: 1.7; + + /* ── Spacing (4px base) ── */ + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-8: 2rem; + --space-10: 2.5rem; + --space-12: 3rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + + /* ── Radius ── */ + --radius-xs: 4px; + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-pill: 999px; + + /* ── Elevation ── */ + --elevation-0: none; + --elevation-1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04); + --elevation-2: 0 2px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04); + --elevation-3: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); + --elevation-4: 0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); + + /* ── State layers ── */ + --state-hover: rgba(0, 0, 0, 0.04); + --state-focus: rgba(0, 0, 0, 0.06); + --state-pressed: rgba(0, 0, 0, 0.08); + + /* ── Motion (M3 Expressive) ── */ + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-effects: cubic-bezier(0.4, 0, 0.2, 1); + --duration-fast: 150ms; + --duration-normal: 250ms; + --duration-emphasis: 400ms; + + /* ── Legacy aliases (used in component styles) ── */ + --c-bg: var(--color-bg); + --c-surface: var(--color-surface); + --c-surface-solid: var(--color-surface); + --c-surface-2: var(--color-surface-raised); + --c-surface-3: var(--color-surface-sunken); + --c-border: var(--color-border); + --c-border-2: var(--color-border-strong); + --c-green: var(--color-accent); + --c-green-dim: var(--color-accent-hover); + --c-green-glow: var(--color-accent-muted); + --c-green-glow-md: rgba(37, 99, 235, 0.12); + --c-pink: var(--color-danger); + --c-yellow: var(--color-warning); + --c-blue: var(--color-accent); + --c-text: var(--color-text); + --c-text-2: var(--color-text-secondary); + --c-text-3: var(--color-text-tertiary); + --c-font: var(--font-sans); + --c-mono: var(--font-mono); +} + +/* --- Reset --- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + background: var(--color-bg); + background-image: linear-gradient(135deg, rgba(54, 192, 241, 0.03) 0%, transparent 40%, rgba(54, 192, 241, 0.02) 100%); + background-attachment: fixed; + color: var(--color-text); + font-family: var(--font-sans); + font-weight: var(--weight-normal); + font-size: 15px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +/* --- Accessibility: Skip Nav --- */ +.skip-link { + position: absolute; + top: -100px; + left: 1rem; + background: var(--c-green); + color: #fff; + padding: 8px 16px; + border-radius: var(--radius-sm); + font-size: 0.8125rem; + font-weight: 600; + z-index: 10000; + text-decoration: none; +} + +.skip-link:focus { + top: 1rem; +} + +/* --- Screen Reader Only --- */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* --- Page Container --- */ +.page { + max-width: 1200px; + margin: 0 auto; + padding: 0 clamp(1.5rem, 5vw, 3rem) 8rem; +} + +/* ============================================================ + HERO + ============================================================ */ +.hero { + min-height: 85vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + position: relative; + padding: 8rem 0 6rem; +} + +.hero::before { + content: ""; + position: absolute; + top: 10%; + left: 50%; + width: 800px; + height: 500px; + transform: translateX(-50%); + background: radial-gradient(ellipse at center, rgba(54, 192, 241, 0.07) 0%, transparent 65%); + pointer-events: none; + filter: blur(80px); +} + +.hero-pill { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: var(--color-accent-subtle); + border: 1px solid var(--accent-3); + border-radius: var(--radius-pill); + padding: 6px 16px; + font-family: var(--font-sans); + font-size: var(--text-sm); + font-weight: var(--weight-medium); + color: var(--color-accent); + letter-spacing: 0.01em; + margin-bottom: var(--space-8); + position: relative; +} + +.hero-pill .pill-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-accent); +} + +.hero h1 { + font-family: var(--font-sans); + font-size: clamp(3.5rem, 10vw, 6rem); + font-weight: var(--weight-bold); + letter-spacing: -0.045em; + line-height: 1; + position: relative; + color: var(--color-text); +} + +.hero-sub { + color: var(--color-text-secondary); + font-family: var(--font-sans); + font-size: clamp(1rem, 1.8vw, 1.125rem); + font-weight: var(--weight-normal); + line-height: var(--leading-relaxed); + margin-top: var(--space-5); + max-width: 48ch; + position: relative; +} + + +/* Stats row */ +.hero-stats { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + margin-top: var(--space-8); +} + +.hero-stat { + font-size: var(--text-base); + color: var(--color-text-secondary); +} + +.hero-stat petty-counter { + font-weight: var(--weight-bold); + font-variant-numeric: tabular-nums; + color: var(--color-text); +} + +.hero-stat-dot { + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--color-border-strong); +} + +/* Custom element display */ +petty-typewriter { + display: inline; +} + +petty-reveal { + display: block; +} + +petty-counter { + font-variant-numeric: tabular-nums; +} + +/* ============================================================ + VALUE PROPS + ============================================================ */ +.value-props { + margin-top: 0; + padding: var(--space-16) 0; + border-top: 1px solid var(--color-border); +} + +.value-list { + display: flex; + gap: var(--space-12); + margin: 0; +} + +.value-item { + flex: 1; +} + +.value-item dt { + font-size: var(--text-lg); + font-weight: var(--weight-semibold); + color: var(--color-text); + margin-bottom: var(--space-2); +} + +.value-item dd { + margin: 0; + font-size: var(--text-base); + color: var(--color-text-secondary); + line-height: var(--leading-relaxed); +} + +/* ============================================================ + SECTIONS + ============================================================ */ + +/* Separator between major areas */ +.section-separator { + position: relative; + height: 1px; + margin: 0; +} + +.section-separator::before { + content: ""; + position: absolute; + left: 50%; + top: 0; + transform: translateX(-50%); + width: 100%; + max-width: 600px; + height: 1px; + background: linear-gradient( + 90deg, + transparent 0%, + var(--c-border-2) 30%, + var(--c-border-2) 70%, + transparent 100% + ); +} + +/* Ambient gradient between sections */ +.section-glow { + position: relative; +} + +.section-glow::before { + content: ""; + position: absolute; + top: -200px; + left: 50%; + width: 700px; + height: 400px; + transform: translateX(-50%); + background: radial-gradient( + ellipse at center, + rgba(34, 197, 94, 0.03) 0%, + transparent 70% + ); + pointer-events: none; + filter: blur(80px); +} + +.section { + margin-top: 96px; + position: relative; +} + +.section-title { + font-family: var(--font-sans); + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: var(--weight-bold); + letter-spacing: -0.035em; + line-height: var(--leading-tight); + color: var(--color-text); +} + +.section-desc { + font-family: var(--font-sans); + font-size: var(--text-lg); + font-weight: var(--weight-normal); + color: var(--color-text-secondary); + margin-top: var(--space-3); + max-width: 50ch; + margin-bottom: 40px; + max-width: 48ch; + line-height: 1.6; +} + +/* ============================================================ + CARD GRID + ============================================================ */ +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: var(--space-6); +} + +.demo-card { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: var(--radius-lg); + padding: var(--space-8); + box-shadow: var(--elevation-2), 0 0 0 1px rgba(0, 0, 0, 0.03); +} + +.demo-card h3 { + font-family: var(--font-sans); + font-size: var(--text-lg); + font-weight: var(--weight-semibold); + color: var(--color-text); + margin-bottom: var(--space-5); + padding-bottom: var(--space-4); + border-bottom: 1px solid var(--color-border); +} + +.demo-card .tag-name { + font-family: var(--font-mono); + font-size: var(--text-xs); + font-weight: var(--weight-normal); + color: var(--color-text-tertiary); + margin-top: var(--space-6); +} + +.demo-area { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.demo-row { + display: flex; + align-items: center; + gap: var(--space-3); + flex-wrap: wrap; +} + +.demo-row-loose { + display: flex; + align-items: center; + gap: var(--space-4); + flex-wrap: wrap; +} + +.demo-row-spacious { + display: flex; + align-items: flex-end; + gap: var(--space-6); + flex-wrap: wrap; +} + +.wide { + grid-column: 1 / -1; +} + +.muted-sm { + color: var(--c-text-3); + font-size: 0.75rem; +} + +/* ============================================================ + FOOTER + ============================================================ */ +.footer-section { + text-align: center; + padding-top: 48px; + margin-top: 128px; +} + +.footer-text { + margin-top: 24px; + font-size: 0.8125rem; + color: var(--c-text-3); +} + +.st3-sig { + text-align: right; + padding: 48px 0 16px; + font-family: var(--c-mono); + font-size: 0.5625rem; + color: var(--c-text-3); + letter-spacing: 0.2em; + opacity: 0.3; +} + +/* ============================================================ + COMPONENT STYLES: Buttons + ============================================================ */ +petty-button button { + background: var(--color-surface); + border: 1px solid var(--color-border-strong); + border-radius: var(--radius-pill); + color: var(--color-text); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 24px; + line-height: 1.25; + height: 40px; + transition: background var(--duration-normal) var(--ease-effects), border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-effects); +} + +petty-button button:hover { + background: var(--color-surface-raised); + box-shadow: var(--elevation-1); +} + +petty-button button:disabled, petty-button[disabled] button { + opacity: 0.38; + cursor: not-allowed; +} + +petty-button[data-state="loading"] button { + opacity: 0.38; + cursor: wait; +} + +petty-button button.primary { + background: var(--color-accent); + border-color: var(--color-accent); + color: var(--accent-contrast); + font-weight: var(--weight-medium); + box-shadow: var(--elevation-1); +} + +petty-button button.primary:hover { + background: var(--color-accent-hover); + border-color: var(--color-accent-hover); + box-shadow: var(--elevation-2); +} + +.btn-outline { + background: var(--color-surface); + border: 1px solid var(--color-border-strong); + color: var(--color-text); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 24px; + height: 40px; + border-radius: var(--radius-pill); + transition: background var(--duration-normal) var(--ease-effects), box-shadow var(--duration-normal); +} + +.btn-outline:hover { + background: var(--color-surface-raised); + box-shadow: var(--elevation-1); +} + +.hint-text { + cursor: help; + border-bottom: 1px dashed var(--c-text-3); + color: var(--c-text-2); + font-size: 0.875rem; + padding-bottom: 2px; +} + +/* ============================================================ + COMPONENT STYLES: Badge & Avatar + ============================================================ */ +petty-badge { + display: inline-flex; + align-items: center; + font-family: var(--c-mono); + font-size: 0.6875rem; + height: 32px; + font-weight: 500; + padding: 3px 12px; + border-radius: var(--radius-md); + border: 1px solid var(--c-border-2); + background: var(--c-surface-2); + color: var(--c-text-2); +} + +petty-badge[data-variant="success"] { + border-color: rgba(34, 197, 94, 0.3); + color: var(--c-green); + background: var(--c-green-glow); +} + +petty-badge[data-variant="error"] { + border-color: rgba(244, 63, 94, 0.3); + color: var(--c-pink); + background: rgba(244, 63, 94, 0.08); +} + +petty-badge[data-variant="warning"] { + border-color: rgba(234, 179, 8, 0.3); + color: var(--c-yellow); + background: rgba(234, 179, 8, 0.08); +} + +petty-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--c-surface-3); + color: var(--c-text-2); + font-family: var(--c-font); + font-size: 0.75rem; + font-weight: 600; +} + +petty-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +/* ============================================================ + COMPONENT STYLES: Separator + ============================================================ */ +petty-separator { + display: block; + height: 1px; + background: var(--c-border); + margin: 12px 0; +} + +/* ============================================================ + COMPONENT STYLES: Skeleton & Card + ============================================================ */ +petty-skeleton { + display: block; + height: 0.75rem; + border-radius: var(--radius-sm); + background: linear-gradient( + 90deg, + var(--gray-3) 0%, + var(--gray-2) 40%, + var(--gray-3) 80% + ); + background-size: 300% 100%; + animation: shimmer 1.8s ease-in-out infinite; +} + +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +.skeleton-stack { + display: flex; + flex-direction: column; + gap: 8px; +} + +.skel-80 { + width: 80%; + height: 10px; + border-radius: 4px; +} + +.skel-60 { + width: 60%; + height: 10px; + border-radius: 4px; +} + +.skel-70 { + width: 70%; + height: 10px; + border-radius: 4px; +} + +.skel-btn { + width: 5rem; + height: 1.75rem; + border-radius: var(--radius-sm); +} + +petty-card { + display: block; + border: 1px solid var(--c-border); + border-radius: var(--radius-lg); + background: var(--c-surface); + overflow: hidden; +} + +petty-card-header { + display: block; + padding: 20px 20px 0; +} + +petty-card-header h4 { + font-family: var(--c-font); + font-size: 0.875rem; + font-weight: 600; +} + +petty-card-content { + display: flex; + flex-direction: column; + gap: 8px; + padding: 12px 20px; + color: var(--c-text-2); + font-size: 0.8125rem; +} + +petty-card-footer { + display: flex; + gap: 8px; + padding: 0 20px 20px; +} + +/* ============================================================ + COMPONENT STYLES: Text Field + ============================================================ */ +petty-text-field { + display: flex; + flex-direction: column; + gap: 6px; +} + +petty-text-field [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + color: var(--c-text-2); +} + +petty-text-field input[data-part="control"] { + background: var(--c-bg); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-sm); + color: var(--c-text); + font-family: var(--c-font); + font-size: 0.8125rem; + padding: 16px; + height: 56px; + outline: none; + transition: border-color var(--duration-fast) var(--ease-effects), box-shadow var(--duration-fast) var(--ease-effects); +} + +petty-text-field input:focus { + border-color: var(--c-green); + border-width: 2px; + padding: 15px; + box-shadow: 0 0 0 2px var(--c-green-glow); +} + +petty-text-field [data-part="error"] { + color: var(--c-pink); + font-size: 0.75rem; + min-height: 0.875rem; +} + +petty-text-field [data-part="description"] { + color: var(--c-text-3); + font-size: 0.75rem; +} + +/* ============================================================ + COMPONENT STYLES: Checkbox & Switch + ============================================================ */ +petty-checkbox { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + min-height: 48px; +} + +petty-checkbox input[data-part="control"] { + appearance: none; + width: 18px; + height: 18px; + border: 1.5px solid var(--c-border-2); + border-radius: 2px; + background: var(--c-bg); + cursor: pointer; + transition: background var(--duration-fast) var(--ease-effects), border-color var(--duration-fast) var(--ease-effects), transform var(--duration-normal) var(--ease-expressive); +} + +petty-checkbox input:checked { + background: var(--color-accent); + border-color: var(--color-accent); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); + background-size: 12px; + background-position: center; + background-repeat: no-repeat; + transform: scale(1.1); +} + +petty-checkbox input:not(:checked) { + transform: scale(1); +} + +petty-checkbox [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + color: var(--c-text-2); + cursor: pointer; +} + +petty-switch { + display: inline-flex; + align-items: center; + gap: 12px; + min-height: 48px; +} + +petty-switch button[data-part="control"] { + position: relative; + width: 52px; + height: 32px; + border-radius: 16px; + border: none; + background: var(--c-surface-3); + cursor: pointer; + transition: background var(--duration-normal) var(--ease-effects); + padding: 0; +} + +petty-switch[data-state="on"] button[data-part="control"] { + background: var(--c-green); +} + +petty-switch [data-part="thumb"] { + display: block; + width: 16px; + height: 16px; + border-radius: 50%; + background: white; + position: absolute; + top: 8px; + left: 6px; + transition: transform var(--duration-normal) var(--ease-expressive), width var(--duration-normal) var(--ease-expressive), height var(--duration-normal) var(--ease-expressive), top var(--duration-normal) var(--ease-expressive); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); +} + +petty-switch[data-state="on"] [data-part="thumb"] { + width: 24px; + height: 24px; + top: 4px; + transform: translateX(22px); +} + +petty-switch [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + color: var(--c-text-2); +} + +/* ============================================================ + COMPONENT STYLES: Radio Group + ============================================================ */ +petty-radio-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +petty-radio-item { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + color: var(--c-text-2); + padding: 4px 0; + min-height: 48px; + transition: color var(--duration-fast) var(--ease-effects); +} + +petty-radio-item[data-state="checked"] { + color: var(--c-text); +} + +petty-radio-item::before { + content: ""; + width: 20px; + height: 20px; + border-radius: 50%; + border: 1.5px solid var(--c-border-2); + background: var(--c-bg); + transition: border-color var(--duration-fast) var(--ease-effects), border-width var(--duration-normal) var(--ease-expressive); + flex-shrink: 0; +} + +petty-radio-item[data-state="checked"]::before { + border-color: var(--c-green); + border-width: 5px; +} + +/* ============================================================ + COMPONENT STYLES: Toggle & Toggle Group + ============================================================ */ +petty-toggle button[data-part="control"] { + background: var(--color-surface); + border: 1px solid var(--color-border-strong); + border-radius: var(--radius-pill); + color: var(--color-text-secondary); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 20px; + height: 40px; + transition: all var(--duration-normal) var(--ease-effects); +} + +petty-toggle[data-state="on"] button[data-part="control"] { + background: var(--color-accent-subtle); + border-color: var(--color-accent); + color: var(--color-accent); +} + +petty-toggle-group { + display: inline-flex; + border-radius: var(--radius-pill); + overflow: hidden; + border: 1px solid var(--color-border-strong); +} + +petty-toggle-group-item { + background: var(--color-surface); + border: none; + border-right: 1px solid var(--color-border); + color: var(--color-text-secondary); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 20px; + height: 40px; + flex: 1; + text-align: center; + transition: all var(--duration-fast) var(--ease-effects); +} + +petty-toggle-group-item:last-child { + border-right: none; +} + +petty-toggle-group-item[data-state="on"] { + background: var(--color-accent); + color: var(--accent-contrast); +} + +/* ============================================================ + COMPONENT STYLES: Slider & Number Field + ============================================================ */ +petty-slider { + display: flex; + flex-direction: column; + gap: 8px; +} + +petty-slider [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + color: var(--c-text-2); +} + +petty-slider input[type="range"] { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 6px; + background: var(--color-surface-sunken); + border-radius: var(--radius-pill); + outline: none; +} + +petty-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--color-accent); + cursor: pointer; + box-shadow: var(--elevation-2); + transition: transform var(--duration-normal) var(--ease-expressive); +} + +petty-slider input[type="range"]::-webkit-slider-thumb:hover { + transform: scale(1.15); +} + +petty-slider input[type="range"]:active::-webkit-slider-thumb { + transform: scale(1.25); +} + +petty-slider [data-part="output"] { + font-family: var(--c-mono); + font-size: 0.8125rem; + color: var(--c-text-2); + align-self: flex-end; +} + +petty-number-field { + display: inline-flex; + align-items: center; +} + +petty-number-field [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + color: var(--c-text-2); + margin-right: 12px; +} + +petty-number-field button { + background: var(--c-surface-2); + border: 1px solid var(--c-border-2); + color: var(--c-text-2); + cursor: pointer; + font-size: 0.875rem; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-number-field button:hover { + background: var(--c-surface-3); + color: var(--c-text); +} + +petty-number-field [data-part="decrement"] { + border-radius: var(--radius-sm) 0 0 var(--radius-sm); +} + +petty-number-field [data-part="increment"] { + border-radius: 0 var(--radius-sm) var(--radius-sm) 0; +} + +petty-number-field input[data-part="control"] { + -moz-appearance: textfield; + appearance: textfield; + background: var(--c-bg); + border: 1px solid var(--c-border-2); + border-left: none; + border-right: none; + color: var(--c-text); + font-family: var(--c-mono); + font-size: 0.8125rem; + text-align: center; + width: 48px; + height: 32px; + outline: none; +} + +petty-number-field input::-webkit-inner-spin-button, +petty-number-field input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* ============================================================ + COMPONENT STYLES: Tags Input + ============================================================ */ +petty-tags-input { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + background: var(--c-bg); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-sm); + padding: 6px 10px; + transition: border-color var(--duration-fast) var(--ease-effects), box-shadow var(--duration-fast) var(--ease-effects); +} + +petty-tags-input:focus-within { + border-color: var(--c-green); + box-shadow: 0 0 0 3px var(--c-green-glow); +} + +petty-tags-input [data-part="tags"] { + display: contents; +} + +petty-tags-input [data-part="tag"] { + display: inline-flex; + align-items: center; + gap: 4px; + background: var(--c-green-glow); + border: 1px solid rgba(34, 197, 94, 0.2); + border-radius: 4px; + color: var(--c-green); + font-family: var(--c-mono); + font-size: 0.75rem; + font-weight: 500; + padding: 2px 8px; +} + +petty-tags-input [data-part="tag-remove"] { + background: none; + border: none; + color: var(--c-green-dim); + cursor: pointer; + font-size: 0.75rem; + padding: 0; + line-height: 1; +} + +petty-tags-input [data-part="tag-remove"]:hover { + color: var(--c-pink); +} + +petty-tags-input input[data-part="input"] { + background: transparent; + border: none; + color: var(--c-text); + font-family: var(--c-font); + font-size: 0.8125rem; + flex: 1; + min-width: 80px; + outline: none; + padding: 4px 0; +} + +petty-tags-input input[data-part="input"]::placeholder { + color: var(--c-text-3); +} + +/* ============================================================ + COMPONENT STYLES: Select + ============================================================ */ +petty-select { + display: inline-block; +} + +petty-select [data-part="trigger"] { + background: var(--c-surface-2); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-sm); + color: var(--c-text-2); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + padding: 8px 12px; + min-width: 150px; + text-align: left; + anchor-name: --petty-select-anchor; + transition: border-color var(--duration-fast) var(--ease-effects); +} + +petty-select [data-part="trigger"]:hover { + border-color: var(--c-text-3); +} + +petty-select [data-part="listbox"] { + background: var(--c-surface-2); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-md); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1); + min-width: 150px; + padding: 4px; + margin: 0; + position-anchor: --petty-select-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(left); + margin-top: 4px; +} + +petty-select-option { + display: block; + border-radius: var(--radius-xs); + color: var(--c-text-2); + cursor: pointer; + font-size: 0.8125rem; + padding: 8px 10px; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-select-option:hover, +petty-select-option[data-highlighted] { + background: var(--c-surface-3); + color: var(--c-text); +} + +petty-select-option[aria-selected="true"] { + color: var(--c-green); +} + +/* ============================================================ + COMPONENT STYLES: Tabs + ============================================================ */ +[role="tablist"] { + display: flex; + border-bottom: 1px solid var(--c-border); + gap: 0; +} + +petty-tab { + background: none; + border: none; + border-bottom: 3px solid transparent; + color: var(--c-text-3); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + margin-bottom: -1px; + padding: 12px 16px; + height: 48px; + display: inline-flex; + align-items: center; + transition: color var(--duration-fast) var(--ease-effects), border-color var(--duration-fast) var(--ease-effects); +} + +petty-tab:hover { + color: var(--c-text-2); +} + +petty-tab[data-state="active"] { + color: var(--c-text); + border-bottom-color: var(--c-green); +} + +petty-tab-panel { + display: block; + padding: 20px 0; + color: var(--c-text-2); + font-size: 0.875rem; + line-height: 1.7; +} + +petty-tab-panel[hidden] { + display: none; +} + +/* ============================================================ + COMPONENT STYLES: Accordion + ============================================================ */ +petty-accordion { + display: flex; + flex-direction: column; +} + +petty-accordion-item { + display: block; + border-bottom: 1px solid var(--c-border); +} + +petty-accordion-item summary { + color: var(--c-text-2); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.875rem; + font-weight: 500; + list-style: none; + padding: 16px 0; + transition: color var(--duration-fast) var(--ease-effects); +} + +petty-accordion-item summary::-webkit-details-marker { + display: none; +} + +petty-accordion-item details[open] summary { + color: var(--c-text); +} + +petty-accordion-item [data-part="content"] { + color: var(--c-text-3); + font-size: 0.875rem; + padding-bottom: 16px; + line-height: 1.7; +} + +/* ============================================================ + COMPONENT STYLES: Breadcrumbs & Pagination + ============================================================ */ +petty-breadcrumbs { + display: flex; + align-items: center; +} + +petty-breadcrumbs ol { + display: flex; + align-items: center; + list-style: none; + padding: 0; + margin: 0; +} + +petty-breadcrumb-item { + display: inline-flex; + align-items: center; + font-size: 0.8125rem; +} + +petty-breadcrumb-item::after { + content: "/"; + color: var(--c-text-3); + margin: 0 8px; +} + +petty-breadcrumb-item:last-child::after { + display: none; +} + +petty-breadcrumb-item a { + color: var(--c-text-3); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-effects); +} + +petty-breadcrumb-item a:hover { + color: var(--c-text); +} + +petty-breadcrumb-item[data-state="current"] { + color: var(--c-text); + font-weight: 500; +} + +petty-pagination nav { + display: flex; + align-items: center; + gap: 4px; +} + +petty-pagination-item { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 32px; + height: 32px; + border-radius: var(--radius-sm); + background: var(--c-surface-2); + border: 1px solid var(--c-border); + color: var(--c-text-3); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + padding: 0 8px; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-pagination-item:hover { + background: var(--c-surface-3); + color: var(--c-text); +} + +petty-pagination-item[data-state="active"] { + background: var(--c-text); + color: var(--c-bg); + border-color: var(--c-text); +} + +petty-pagination-item[disabled] { + opacity: 0.38; + cursor: not-allowed; +} + +/* ============================================================ + COMPONENT STYLES: Dialog + ============================================================ */ +dialog { + background: rgba(255, 255, 255, 0.88); + backdrop-filter: blur(20px) saturate(1.2); + -webkit-backdrop-filter: blur(20px) saturate(1.2); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 28px; + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); + color: var(--color-text); + max-width: min(90vw, 28rem); + padding: var(--space-8); + margin: auto; + inset: 0; + position: fixed; +} + +dialog::backdrop { + background: rgba(15, 23, 42, 0.4); + backdrop-filter: blur(6px); +} + +dialog h2 { + font-family: var(--c-font); + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 8px; +} + +dialog p { + color: var(--c-text-2); + font-size: 0.875rem; + margin-bottom: 24px; + line-height: 1.7; +} + +/* ============================================================ + COMPONENT STYLES: Popover & Tooltip + ============================================================ */ +[popover] { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(16px) saturate(1.2); + -webkit-backdrop-filter: blur(16px) saturate(1.2); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: var(--radius-lg); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04); + color: var(--color-text); + font-size: var(--text-base); + padding: var(--space-4) var(--space-5); + margin: 0; +} + +petty-popover { + display: inline-block; +} + +petty-popover button[popovertarget] { + anchor-name: --popover-anchor; +} + +petty-popover [popover] { + position-anchor: --popover-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(left); + margin-top: 6px; +} + +petty-tooltip { + display: inline-block; +} + +petty-tooltip [data-part="trigger"] { + anchor-name: --tooltip-anchor; +} + +petty-tooltip [data-part="content"] { + background: var(--c-text); + color: var(--c-bg); + font-size: 0.75rem; + font-weight: 500; + padding: 6px 12px; + border: none; + border-radius: var(--radius-xs); + position-anchor: --tooltip-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(center); + translate: -50% 0; + margin-top: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +/* ============================================================ + COMPONENT STYLES: Dropdown Menu + ============================================================ */ +petty-dropdown-menu { + display: inline-block; +} + +petty-dropdown-menu [data-part="trigger"] { + anchor-name: --menu-anchor; +} + +petty-dropdown-menu [data-part="content"] { + min-width: 10rem; + padding: 4px; + border-radius: 4px; + position-anchor: --menu-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(left); + margin-top: 4px; +} + +petty-menu-item { + display: block; + border-radius: var(--radius-xs); + color: var(--c-text-2); + cursor: pointer; + font-size: 0.8125rem; + padding: 8px 10px; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-menu-item:hover, +petty-menu-item:focus { + background: var(--c-surface-3); + color: var(--c-text); + outline: none; +} + +petty-menu-item[disabled] { + color: var(--c-text-3); + opacity: 0.38; + cursor: not-allowed; +} + +petty-menu-item[disabled]:hover { + background: transparent; + color: var(--c-text-3); +} + +/* ============================================================ + COMPONENT STYLES: Alert + ============================================================ */ +petty-alert { + display: flex; + align-items: flex-start; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + border-radius: var(--radius-lg); + border: 1px solid var(--color-border); + background: var(--color-surface); + font-size: var(--text-base); +} + +petty-alert[data-variant="success"] { + border-color: #bbf7d0; + background: var(--color-success-subtle); +} + +petty-alert[data-variant="error"] { + border-color: #fecaca; + background: var(--color-danger-subtle); +} + +petty-alert[data-variant="warning"] { + border-color: #fde68a; + background: var(--color-warning-subtle); +} + +.alert-icon { + flex-shrink: 0; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875rem; + margin-top: 1px; +} + +petty-alert[data-variant="success"] .alert-icon { color: var(--color-success); } +petty-alert[data-variant="error"] .alert-icon { color: var(--color-danger); } +petty-alert[data-variant="warning"] .alert-icon { color: var(--color-warning); } + +petty-alert [data-part="title"] { + font-weight: var(--weight-semibold); + font-size: var(--text-base); + margin-bottom: var(--space-1); + color: var(--color-text); +} + +petty-alert [data-part="description"] { + color: var(--color-text-secondary); + font-size: var(--text-sm); + line-height: var(--leading-relaxed); +} + +/* ============================================================ + COMPONENT STYLES: Progress & Meter + ============================================================ */ +petty-progress { display: block; } +petty-meter { display: block; } + +.progress-field { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.progress-header { + display: flex; + justify-content: space-between; + font-size: var(--text-sm); + color: var(--color-text); + font-weight: var(--weight-medium); +} + +.progress-header .meter-low { color: var(--color-success); } +.progress-header .meter-high { color: var(--color-danger); } + +petty-progress [data-part="track"], +petty-meter [data-part="track"] { + height: 10px; + background: var(--color-surface-sunken); + border-radius: var(--radius-pill); + overflow: hidden; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); +} + +petty-progress [data-part="fill"] { + height: 100%; + background: var(--color-accent); + border-radius: var(--radius-pill); + width: calc(var(--petty-progress, 0) * 100%); + transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); + box-shadow: 0 0 8px rgba(54, 192, 241, 0.3); +} + +petty-progress [data-part="label"] { display: none; } + +petty-meter [data-part="fill"] { + height: 100%; + border-radius: var(--radius-pill); + width: calc(var(--petty-meter-value, 0) * 100%); + transition: width 0.6s var(--ease-standard); +} + +petty-meter [data-part="fill"] { + transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); +} + +petty-meter[data-state="low"] [data-part="fill"] { background: var(--color-danger); box-shadow: 0 0 8px rgba(220, 38, 38, 0.3); } +petty-meter[data-state="medium"] [data-part="fill"] { background: var(--color-warning); box-shadow: 0 0 8px rgba(217, 119, 6, 0.3); } +petty-meter[data-state="high"] [data-part="fill"] { background: var(--color-success); box-shadow: 0 0 8px rgba(22, 163, 74, 0.3); } +petty-meter[data-state="optimum"] [data-part="fill"] { background: var(--color-accent); box-shadow: 0 0 8px rgba(54, 192, 241, 0.3); } + +/* ============================================================ + COMPONENT STYLES: Toast + ============================================================ */ +petty-toast-region { + position: fixed; + bottom: 24px; + right: 24px; + display: flex; + flex-direction: column; + gap: 8px; + max-width: 22rem; + width: 100%; + z-index: 9997; + pointer-events: none; +} + +[data-part="toast"] { + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06); + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-1); + padding: 16px; + pointer-events: auto; + animation: toastIn 0.4s var(--ease-expressive); +} + +[data-part="toast"][data-type="success"] { + background: var(--color-success-subtle); + border-color: #bbf7d0; +} + +[data-part="toast"][data-type="error"] { + background: var(--color-danger-subtle); + border-color: #fecaca; +} + +[data-part="toast-title"] { + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-semibold); + line-height: 1.4; +} + +[data-part="toast"][data-type="success"] [data-part="toast-title"] { color: var(--color-success); } +[data-part="toast"][data-type="error"] [data-part="toast-title"] { color: var(--color-danger); } + +[data-part="toast-description"] { + color: var(--color-text-secondary); + font-size: var(--text-sm); + line-height: 1.5; + grid-column: 1; +} + +[data-part="toast-close"] { + background: none; + border: none; + color: var(--color-text-tertiary); + cursor: pointer; + font-size: 1rem; + padding: 4px; + line-height: 1; + grid-row: 1; + grid-column: 2; + align-self: start; + transition: color var(--duration-fast); +} + +[data-part="toast-close"]:hover { + color: var(--color-text); +} + +@keyframes toastIn { + from { + transform: translateY(100%) scale(0.9); + opacity: 0; + } + to { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +/* ============================================================ + COMPONENT STYLES: Link & Collapsible + ============================================================ */ +petty-link a { + color: var(--c-green); + text-decoration: none; + font-size: 0.875rem; + transition: opacity var(--duration-fast) var(--ease-effects); +} + +petty-link a:hover { + opacity: 0.8; +} + +petty-collapsible summary { + color: var(--c-text-2); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.875rem; + font-weight: 500; + list-style: none; + padding: 8px 0; +} + +petty-collapsible summary::-webkit-details-marker { + display: none; +} + +petty-collapsible [data-part="content"] { + color: var(--c-text-3); + font-size: 0.875rem; + padding: 8px 0; + line-height: 1.7; +} + +/* ============================================================ + RESPONSIVE + ============================================================ */ +@media (max-width: 768px) { + .hero-stats { + flex-wrap: wrap; + } + + .grid { + grid-template-columns: 1fr; + } + + .value-list { + flex-direction: column; + gap: var(--space-8); + } + + .section { + margin-top: 64px; + } + + .footer-section { + margin-top: 80px; + } + + .hero { + min-height: 70vh; + padding: 6rem 0 4rem; + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dfa7338..f45fc29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,37 +29,16 @@ importers: packages/core: dependencies: - '@floating-ui/dom': - specifier: ^1.7.6 - version: 1.7.6 zod: specifier: ^4.3.6 version: 4.3.6 devDependencies: - '@solidjs/testing-library': - specifier: ^0.8.10 - version: 0.8.10(solid-js@1.9.12) - '@testing-library/jest-dom': - specifier: ^6.0.0 - version: 6.9.1 - '@testing-library/user-event': - specifier: ^14.0.0 - version: 14.6.1(@testing-library/dom@10.4.1) - jsdom: - specifier: ^26.0.0 - version: 26.1.0 - solid-js: - specifier: ^1.9.12 - version: 1.9.12 tsdown: specifier: ^0.21.7 version: 0.21.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(typescript@6.0.2) - vite: - specifier: ^8.0.3 - version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) - vite-plugin-solid: - specifier: ^2.11.11 - version: 2.11.11(@testing-library/jest-dom@6.9.1)(solid-js@1.9.12)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) + typescript: + specifier: ^6.0.2 + version: 6.0.2 vitest: specifier: ^4.1.2 version: 4.1.2(@types/node@25.5.0)(jsdom@26.1.0)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) @@ -67,7 +46,7 @@ importers: packages/mcp: dependencies: '@modelcontextprotocol/sdk': - specifier: ^1.12.0 + specifier: ^1.0.0 version: 1.28.0(zod@4.3.6) pettyui: specifier: workspace:* @@ -76,160 +55,45 @@ importers: specifier: ^4.3.6 version: 4.3.6 devDependencies: - '@types/node': - specifier: ^25.5.0 - version: 25.5.0 + tsdown: + specifier: ^0.21.7 + version: 0.21.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(typescript@6.0.2) typescript: specifier: ^6.0.2 version: 6.0.2 - vitest: - specifier: ^4.1.2 - version: 4.1.2(@types/node@25.5.0)(jsdom@26.1.0)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) - - packages/registry: - devDependencies: - pettyui: - specifier: workspace:* - version: link:../core - solid-js: - specifier: ^1.9.12 - version: 1.9.12 - vitest: - specifier: ^4.1.2 - version: 4.1.2(@types/node@25.5.0)(jsdom@26.1.0)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) packages/showcase: dependencies: pettyui: specifier: workspace:* version: link:../core - solid-js: - specifier: ^1.9.12 - version: 1.9.12 devDependencies: - '@tailwindcss/vite': - specifier: ^4.1.3 - version: 4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) - tailwindcss: - specifier: ^4.1.3 - version: 4.2.2 vite: - specifier: ^8.0.3 - version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) - vite-plugin-solid: - specifier: ^2.11.11 - version: 2.11.11(@testing-library/jest-dom@6.9.1)(solid-js@1.9.12)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) + specifier: ^6.3.5 + version: 6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0) packages: - '@adobe/css-tools@4.4.4': - resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==} - '@asamuzakjp/css-color@3.2.0': resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==} - '@babel/code-frame@7.29.0': - resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==} - engines: {node: '>=6.9.0'} - - '@babel/compat-data@7.29.0': - resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==} - engines: {node: '>=6.9.0'} - - '@babel/core@7.29.0': - resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==} - engines: {node: '>=6.9.0'} - - '@babel/generator@7.29.1': - resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==} - engines: {node: '>=6.9.0'} - '@babel/generator@8.0.0-rc.3': resolution: {integrity: sha512-em37/13/nR320G4jab/nIIHZgc2Wz2y/D39lxnTyxB4/D/omPQncl/lSdlnJY1OhQcRGugTSIF2l/69o31C9dA==} engines: {node: ^20.19.0 || >=22.12.0} - '@babel/helper-compilation-targets@7.28.6': - resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==} - engines: {node: '>=6.9.0'} - - '@babel/helper-globals@7.28.0': - resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==} - engines: {node: '>=6.9.0'} - - '@babel/helper-module-imports@7.18.6': - resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} - engines: {node: '>=6.9.0'} - - '@babel/helper-module-imports@7.28.6': - resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==} - engines: {node: '>=6.9.0'} - - '@babel/helper-module-transforms@7.28.6': - resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - - '@babel/helper-plugin-utils@7.28.6': - resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==} - engines: {node: '>=6.9.0'} - - '@babel/helper-string-parser@7.27.1': - resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} - engines: {node: '>=6.9.0'} - '@babel/helper-string-parser@8.0.0-rc.3': resolution: {integrity: sha512-AmwWFx1m8G/a5cXkxLxTiWl+YEoWuoFLUCwqMlNuWO1tqAYITQAbCRPUkyBHv1VOFgfjVOqEj6L3u15J5ZCzTA==} engines: {node: ^20.19.0 || >=22.12.0} - '@babel/helper-validator-identifier@7.28.5': - resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==} - engines: {node: '>=6.9.0'} - '@babel/helper-validator-identifier@8.0.0-rc.3': resolution: {integrity: sha512-8AWCJ2VJJyDFlGBep5GpaaQ9AAaE/FjAcrqI7jyssYhtL7WGV0DOKpJsQqM037xDbpRLHXsY8TwU7zDma7coOw==} engines: {node: ^20.19.0 || >=22.12.0} - '@babel/helper-validator-option@7.27.1': - resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==} - engines: {node: '>=6.9.0'} - - '@babel/helpers@7.29.2': - resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==} - engines: {node: '>=6.9.0'} - - '@babel/parser@7.29.2': - resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==} - engines: {node: '>=6.0.0'} - hasBin: true - '@babel/parser@8.0.0-rc.3': resolution: {integrity: sha512-B20dvP3MfNc/XS5KKCHy/oyWl5IA6Cn9YjXRdDlCjNmUFrjvLXMNUfQq/QUy9fnG2gYkKKcrto2YaF9B32ToOQ==} engines: {node: ^20.19.0 || >=22.12.0} hasBin: true - '@babel/plugin-syntax-jsx@7.28.6': - resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/runtime@7.29.2': - resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==} - engines: {node: '>=6.9.0'} - - '@babel/template@7.28.6': - resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==} - engines: {node: '>=6.9.0'} - - '@babel/traverse@7.29.0': - resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==} - engines: {node: '>=6.9.0'} - - '@babel/types@7.29.0': - resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==} - engines: {node: '>=6.9.0'} - '@babel/types@8.0.0-rc.3': resolution: {integrity: sha512-mOm5ZrYmphGfqVWoH5YYMTITb3cDXsFgmvFlvkvWDMsR9X8RFnt7a0Wb6yNIdoFsiMO9WjYLq+U/FMtqIYAF8Q==} engines: {node: ^20.19.0 || >=22.12.0} @@ -328,6 +192,162 @@ packages: '@emnapi/wasi-threads@1.2.0': resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==} + '@esbuild/aix-ppc64@0.25.12': + resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + + '@esbuild/android-arm64@0.25.12': + resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm@0.25.12': + resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + + '@esbuild/android-x64@0.25.12': + resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + + '@esbuild/darwin-arm64@0.25.12': + resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-x64@0.25.12': + resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + + '@esbuild/freebsd-arm64@0.25.12': + resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.25.12': + resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + + '@esbuild/linux-arm64@0.25.12': + resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm@0.25.12': + resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-ia32@0.25.12': + resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-loong64@0.25.12': + resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-mips64el@0.25.12': + resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-ppc64@0.25.12': + resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-riscv64@0.25.12': + resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-s390x@0.25.12': + resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-x64@0.25.12': + resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + + '@esbuild/netbsd-arm64@0.25.12': + resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.25.12': + resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + + '@esbuild/openbsd-arm64@0.25.12': + resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.25.12': + resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openharmony-arm64@0.25.12': + resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openharmony] + + '@esbuild/sunos-x64@0.25.12': + resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + + '@esbuild/win32-arm64@0.25.12': + resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-ia32@0.25.12': + resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-x64@0.25.12': + resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + '@eslint-community/eslint-utils@4.9.1': resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -366,15 +386,6 @@ packages: resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@floating-ui/core@1.7.5': - resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==} - - '@floating-ui/dom@1.7.6': - resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==} - - '@floating-ui/utils@0.2.11': - resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} - '@hono/node-server@1.19.11': resolution: {integrity: sha512-dr8/3zEaB+p0D2n/IUrlPF1HZm586qgJNXK1a9fhg/PzdtkK7Ksd5l312tJX2yBuALqDYBlG20QEbayqPyxn+g==} engines: {node: '>=18.14.1'} @@ -400,9 +411,6 @@ packages: '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} - '@jridgewell/remapping@2.3.5': - resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} - '@jridgewell/resolve-uri@3.1.2': resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} @@ -533,145 +541,150 @@ packages: '@rolldown/pluginutils@1.0.0-rc.12': resolution: {integrity: sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==} - '@solidjs/testing-library@0.8.10': - resolution: {integrity: sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ==} - engines: {node: '>= 14'} - peerDependencies: - '@solidjs/router': '>=0.9.0' - solid-js: '>=1.0.0' - peerDependenciesMeta: - '@solidjs/router': - optional: true + '@rollup/rollup-android-arm-eabi@4.60.1': + resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==} + cpu: [arm] + os: [android] + + '@rollup/rollup-android-arm64@4.60.1': + resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==} + cpu: [arm64] + os: [android] + + '@rollup/rollup-darwin-arm64@4.60.1': + resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==} + cpu: [arm64] + os: [darwin] + + '@rollup/rollup-darwin-x64@4.60.1': + resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==} + cpu: [x64] + os: [darwin] + + '@rollup/rollup-freebsd-arm64@4.60.1': + resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==} + cpu: [arm64] + os: [freebsd] + + '@rollup/rollup-freebsd-x64@4.60.1': + resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==} + cpu: [x64] + os: [freebsd] + + '@rollup/rollup-linux-arm-gnueabihf@4.60.1': + resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm-musleabihf@4.60.1': + resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==} + cpu: [arm] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-arm64-gnu@4.60.1': + resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm64-musl@4.60.1': + resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-loong64-gnu@4.60.1': + resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==} + cpu: [loong64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-loong64-musl@4.60.1': + resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==} + cpu: [loong64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-ppc64-gnu@4.60.1': + resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-ppc64-musl@4.60.1': + resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==} + cpu: [ppc64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-riscv64-gnu@4.60.1': + resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==} + cpu: [riscv64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-riscv64-musl@4.60.1': + resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==} + cpu: [riscv64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-s390x-gnu@4.60.1': + resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-gnu@4.60.1': + resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-musl@4.60.1': + resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@rollup/rollup-openbsd-x64@4.60.1': + resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==} + cpu: [x64] + os: [openbsd] + + '@rollup/rollup-openharmony-arm64@4.60.1': + resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==} + cpu: [arm64] + os: [openharmony] + + '@rollup/rollup-win32-arm64-msvc@4.60.1': + resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==} + cpu: [arm64] + os: [win32] + + '@rollup/rollup-win32-ia32-msvc@4.60.1': + resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==} + cpu: [ia32] + os: [win32] + + '@rollup/rollup-win32-x64-gnu@4.60.1': + resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==} + cpu: [x64] + os: [win32] + + '@rollup/rollup-win32-x64-msvc@4.60.1': + resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==} + cpu: [x64] + os: [win32] '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} - '@tailwindcss/node@4.2.2': - resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==} - - '@tailwindcss/oxide-android-arm64@4.2.2': - resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==} - engines: {node: '>= 20'} - cpu: [arm64] - os: [android] - - '@tailwindcss/oxide-darwin-arm64@4.2.2': - resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==} - engines: {node: '>= 20'} - cpu: [arm64] - os: [darwin] - - '@tailwindcss/oxide-darwin-x64@4.2.2': - resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==} - engines: {node: '>= 20'} - cpu: [x64] - os: [darwin] - - '@tailwindcss/oxide-freebsd-x64@4.2.2': - resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==} - engines: {node: '>= 20'} - cpu: [x64] - os: [freebsd] - - '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2': - resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==} - engines: {node: '>= 20'} - cpu: [arm] - os: [linux] - - '@tailwindcss/oxide-linux-arm64-gnu@4.2.2': - resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==} - engines: {node: '>= 20'} - cpu: [arm64] - os: [linux] - libc: [glibc] - - '@tailwindcss/oxide-linux-arm64-musl@4.2.2': - resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==} - engines: {node: '>= 20'} - cpu: [arm64] - os: [linux] - libc: [musl] - - '@tailwindcss/oxide-linux-x64-gnu@4.2.2': - resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==} - engines: {node: '>= 20'} - cpu: [x64] - os: [linux] - libc: [glibc] - - '@tailwindcss/oxide-linux-x64-musl@4.2.2': - resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==} - engines: {node: '>= 20'} - cpu: [x64] - os: [linux] - libc: [musl] - - '@tailwindcss/oxide-wasm32-wasi@4.2.2': - resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==} - engines: {node: '>=14.0.0'} - cpu: [wasm32] - bundledDependencies: - - '@napi-rs/wasm-runtime' - - '@emnapi/core' - - '@emnapi/runtime' - - '@tybys/wasm-util' - - '@emnapi/wasi-threads' - - tslib - - '@tailwindcss/oxide-win32-arm64-msvc@4.2.2': - resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==} - engines: {node: '>= 20'} - cpu: [arm64] - os: [win32] - - '@tailwindcss/oxide-win32-x64-msvc@4.2.2': - resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==} - engines: {node: '>= 20'} - cpu: [x64] - os: [win32] - - '@tailwindcss/oxide@4.2.2': - resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==} - engines: {node: '>= 20'} - - '@tailwindcss/vite@4.2.2': - resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==} - peerDependencies: - vite: ^5.2.0 || ^6 || ^7 || ^8 - - '@testing-library/dom@10.4.1': - resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} - engines: {node: '>=18'} - - '@testing-library/jest-dom@6.9.1': - resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==} - engines: {node: '>=14', npm: '>=6', yarn: '>=1'} - - '@testing-library/user-event@14.6.1': - resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==} - engines: {node: '>=12', npm: '>=6'} - peerDependencies: - '@testing-library/dom': '>=7.21.4' - '@tybys/wasm-util@0.10.1': resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==} - '@types/aria-query@5.0.4': - resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} - - '@types/babel__core@7.20.5': - resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} - - '@types/babel__generator@7.27.0': - resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==} - - '@types/babel__template@7.4.4': - resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} - - '@types/babel__traverse@7.28.0': - resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==} - '@types/chai@5.2.3': resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} @@ -795,18 +808,10 @@ packages: ajv@8.18.0: resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==} - ansi-regex@5.0.1: - resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} - engines: {node: '>=8'} - ansi-styles@4.3.0: resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} engines: {node: '>=8'} - ansi-styles@5.2.0: - resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} - engines: {node: '>=10'} - ansis@4.2.0: resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==} engines: {node: '>=14'} @@ -814,13 +819,6 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - aria-query@5.3.0: - resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} - - aria-query@5.3.2: - resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} - engines: {node: '>= 0.4'} - assertion-error@2.0.1: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} @@ -829,20 +827,6 @@ packages: resolution: {integrity: sha512-trmleAnZ2PxN/loHWVhhx1qeOHSRXq4TDsBBxq3GqeJitfk3+jTQ+v/C1km/KYq9M7wKqCewMh+/NAvVH7m+bw==} engines: {node: '>=20.19.0'} - babel-plugin-jsx-dom-expressions@0.40.6: - resolution: {integrity: sha512-v3P1MW46Lm7VMpAkq0QfyzLWWkC8fh+0aE5Km4msIgDx5kjenHU0pF2s+4/NH8CQn/kla6+Hvws+2AF7bfV5qQ==} - peerDependencies: - '@babel/core': ^7.20.12 - - babel-preset-solid@1.9.12: - resolution: {integrity: sha512-LLqnuKVDlKpyBlMPcH6qEvs/wmS9a+NczppxJ3ryS/c0O5IiSFOIBQi9GzyiGDSbcJpx4Gr87jyFTos1MyEuWg==} - peerDependencies: - '@babel/core': ^7.0.0 - solid-js: ^1.9.12 - peerDependenciesMeta: - solid-js: - optional: true - balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -850,11 +834,6 @@ packages: resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} engines: {node: 18 || 20 || >=22} - baseline-browser-mapping@2.10.12: - resolution: {integrity: sha512-qyq26DxfY4awP2gIRXhhLWfwzwI+N5Nxk6iQi8EFizIaWIjqicQTE4sLnZZVdeKPRcVNoJOkkpfzoIYuvCKaIQ==} - engines: {node: '>=6.0.0'} - hasBin: true - birpc@4.0.0: resolution: {integrity: sha512-LShSxJP0KTmd101b6DRyGBj57LZxSDYWKitQNW/mi8GRMvZb078Uf9+pveax1DrVL89vm7mWe+TovdI/UDOuPw==} @@ -869,11 +848,6 @@ packages: resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==} engines: {node: 18 || 20 || >=22} - browserslist@4.28.1: - resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==} - engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} - hasBin: true - bytes@3.1.2: resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==} engines: {node: '>= 0.8'} @@ -894,9 +868,6 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} - caniuse-lite@1.0.30001781: - resolution: {integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==} - chai@6.2.2: resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==} engines: {node: '>=18'} @@ -942,16 +913,10 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} - css.escape@1.5.1: - resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} - cssstyle@4.6.0: resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==} engines: {node: '>=18'} - csstype@3.2.3: - resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} - data-urls@5.0.0: resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} engines: {node: '>=18'} @@ -978,20 +943,10 @@ packages: resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==} engines: {node: '>= 0.8'} - dequal@2.0.3: - resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} - engines: {node: '>=6'} - detect-libc@2.1.2: resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} engines: {node: '>=8'} - dom-accessibility-api@0.5.16: - resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} - - dom-accessibility-api@0.6.3: - resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} - dts-resolver@2.1.3: resolution: {integrity: sha512-bihc7jPC90VrosXNzK0LTE2cuLP6jr0Ro8jk+kMugHReJVLIpHz/xadeq3MhuwyO4TD4OA3L1Q8pBBFRc08Tsw==} engines: {node: '>=20.19.0'} @@ -1008,9 +963,6 @@ packages: ee-first@1.1.1: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} - electron-to-chromium@1.5.328: - resolution: {integrity: sha512-QNQ5l45DzYytThO21403XN3FvK0hOkWDG8viNf6jqS42msJ8I4tGDSpBCgvDRRPnkffafiwAym2X2eHeGD2V0w==} - empathic@2.0.0: resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==} engines: {node: '>=14'} @@ -1019,10 +971,6 @@ packages: resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==} engines: {node: '>= 0.8'} - enhanced-resolve@5.20.1: - resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==} - engines: {node: '>=10.13.0'} - entities@6.0.1: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} @@ -1042,9 +990,10 @@ packages: resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==} engines: {node: '>= 0.4'} - escalade@3.2.0: - resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} - engines: {node: '>=6'} + esbuild@0.25.12: + resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==} + engines: {node: '>=18'} + hasBin: true escape-html@1.0.3: resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} @@ -1191,10 +1140,6 @@ packages: function-bind@1.1.2: resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} - gensync@1.0.0-beta.2: - resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} - engines: {node: '>=6.9.0'} - get-intrinsic@1.3.0: resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==} engines: {node: '>= 0.4'} @@ -1218,9 +1163,6 @@ packages: resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} engines: {node: '>= 0.4'} - graceful-fs@4.2.11: - resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} - has-flag@4.0.0: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} @@ -1244,9 +1186,6 @@ packages: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} - html-entities@2.3.3: - resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} - html-tags@3.3.1: resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} engines: {node: '>=8'} @@ -1287,10 +1226,6 @@ packages: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} engines: {node: '>=0.8.19'} - indent-string@4.0.0: - resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} - engines: {node: '>=8'} - inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} @@ -1323,10 +1258,6 @@ packages: is-promise@4.0.0: resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==} - is-what@4.1.16: - resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==} - engines: {node: '>=12.13'} - isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -1337,9 +1268,6 @@ packages: jose@6.2.2: resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==} - js-tokens@4.0.0: - resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - js-yaml@4.1.1: resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==} hasBin: true @@ -1373,11 +1301,6 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} - json5@2.2.3: - resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} - engines: {node: '>=6'} - hasBin: true - kebab-case@1.0.2: resolution: {integrity: sha512-7n6wXq4gNgBELfDCpzKc+mRrZFs7D+wgfF5WRFLNAr4DA/qtr9Js8uOAVAfHhuLMfAcQ0pRKqbpjx+TcJVdE1Q==} @@ -1475,13 +1398,6 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} - lru-cache@5.1.1: - resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} - - lz-string@1.5.0: - resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} - hasBin: true - magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} @@ -1493,10 +1409,6 @@ packages: resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==} engines: {node: '>= 0.8'} - merge-anything@5.1.7: - resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==} - engines: {node: '>=12.13'} - merge-descriptors@2.0.0: resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==} engines: {node: '>=18'} @@ -1509,10 +1421,6 @@ packages: resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==} engines: {node: '>=18'} - min-indent@1.0.1: - resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} - engines: {node: '>=4'} - minimatch@10.2.4: resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==} engines: {node: 18 || 20 || >=22} @@ -1535,9 +1443,6 @@ packages: resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==} engines: {node: '>= 0.6'} - node-releases@2.0.36: - resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==} - nwsapi@2.2.23: resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==} @@ -1615,10 +1520,6 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} - pretty-format@27.5.1: - resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} - engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} - proxy-addr@2.0.7: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} @@ -1642,13 +1543,6 @@ packages: resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==} engines: {node: '>= 0.10'} - react-is@17.0.2: - resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - - redent@3.0.0: - resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} - engines: {node: '>=8'} - require-from-string@2.0.2: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} @@ -1684,6 +1578,11 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} hasBin: true + rollup@4.60.1: + resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + router@2.2.0: resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==} engines: {node: '>= 18'} @@ -1698,10 +1597,6 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} - semver@6.3.1: - resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} - hasBin: true - semver@7.7.4: resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==} engines: {node: '>=10'} @@ -1711,16 +1606,6 @@ packages: resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==} engines: {node: '>= 18'} - seroval-plugins@1.5.1: - resolution: {integrity: sha512-4FbuZ/TMl02sqv0RTFexu0SP6V+ywaIe5bAWCCEik0fk17BhALgwvUDVF7e3Uvf9pxmwCEJsRPmlkUE6HdzLAw==} - engines: {node: '>=10'} - peerDependencies: - seroval: ^1.0 - - seroval@1.5.1: - resolution: {integrity: sha512-OwrZRZAfhHww0WEnKHDY8OM0U/Qs8OTfIDWhUD4BLpNJUfXK4cGmjiagGze086m+mhI+V2nD0gfbHEnJjb9STA==} - engines: {node: '>=10'} - serve-static@2.2.1: resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==} engines: {node: '>= 18'} @@ -1755,14 +1640,6 @@ packages: siginfo@2.0.0: resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==} - solid-js@1.9.12: - resolution: {integrity: sha512-QzKaSJq2/iDrWR1As6MHZQ8fQkdOBf8GReYb7L5iKwMGceg7HxDcaOHk0at66tNgn9U2U7dXo8ZZpLIAmGMzgw==} - - solid-refresh@0.6.3: - resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} - peerDependencies: - solid-js: ^1.3 - source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -1777,10 +1654,6 @@ packages: std-env@4.0.0: resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==} - strip-indent@3.0.0: - resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==} - engines: {node: '>=8'} - strip-json-comments@3.1.1: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} @@ -1795,13 +1668,6 @@ packages: symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} - tailwindcss@4.2.2: - resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==} - - tapable@2.3.2: - resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==} - engines: {node: '>=6'} - tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} @@ -1910,12 +1776,6 @@ packages: synckit: optional: true - update-browserslist-db@1.2.3: - resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==} - hasBin: true - peerDependencies: - browserslist: '>= 4.21.0' - uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -1923,14 +1783,44 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} - vite-plugin-solid@2.11.11: - resolution: {integrity: sha512-YMZCXsLw9kyuvQFEdwLP27fuTQJLmjNoHy90AOJnbRuJ6DwShUxKFo38gdFrWn9v11hnGicKCZEaeI/TFs6JKw==} + vite@6.4.1: + resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true peerDependencies: - '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.* - solid-js: ^1.7.2 - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 + '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 + jiti: '>=1.21.0' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 peerDependenciesMeta: - '@testing-library/jest-dom': + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: optional: true vite@8.0.3: @@ -1976,14 +1866,6 @@ packages: yaml: optional: true - vitefu@1.1.2: - resolution: {integrity: sha512-zpKATdUbzbsycPFBN71nS2uzBUQiVnFoOrr2rvqv34S1lcAgMKKkjWleLGeiJlZ8lwCXvtWaRn7R3ZC16SYRuw==} - peerDependencies: - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-beta.0 - peerDependenciesMeta: - vite: - optional: true - vitest@4.1.2: resolution: {integrity: sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==} engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0} @@ -2076,9 +1958,6 @@ packages: xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} - yallist@3.1.1: - resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} - yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} @@ -2093,8 +1972,6 @@ packages: snapshots: - '@adobe/css-tools@4.4.4': {} - '@asamuzakjp/css-color@3.2.0': dependencies: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) @@ -2102,42 +1979,7 @@ snapshots: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 lru-cache: 10.4.3 - - '@babel/code-frame@7.29.0': - dependencies: - '@babel/helper-validator-identifier': 7.28.5 - js-tokens: 4.0.0 - picocolors: 1.1.1 - - '@babel/compat-data@7.29.0': {} - - '@babel/core@7.29.0': - dependencies: - '@babel/code-frame': 7.29.0 - '@babel/generator': 7.29.1 - '@babel/helper-compilation-targets': 7.28.6 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0) - '@babel/helpers': 7.29.2 - '@babel/parser': 7.29.2 - '@babel/template': 7.28.6 - '@babel/traverse': 7.29.0 - '@babel/types': 7.29.0 - '@jridgewell/remapping': 2.3.5 - convert-source-map: 2.0.0 - debug: 4.4.3 - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - '@babel/generator@7.29.1': - dependencies: - '@babel/parser': 7.29.2 - '@babel/types': 7.29.0 - '@jridgewell/gen-mapping': 0.3.13 - '@jridgewell/trace-mapping': 0.3.31 - jsesc: 3.1.0 + optional: true '@babel/generator@8.0.0-rc.3': dependencies: @@ -2148,91 +1990,14 @@ snapshots: '@types/jsesc': 2.5.1 jsesc: 3.1.0 - '@babel/helper-compilation-targets@7.28.6': - dependencies: - '@babel/compat-data': 7.29.0 - '@babel/helper-validator-option': 7.27.1 - browserslist: 4.28.1 - lru-cache: 5.1.1 - semver: 6.3.1 - - '@babel/helper-globals@7.28.0': {} - - '@babel/helper-module-imports@7.18.6': - dependencies: - '@babel/types': 7.29.0 - - '@babel/helper-module-imports@7.28.6': - dependencies: - '@babel/traverse': 7.29.0 - '@babel/types': 7.29.0 - transitivePeerDependencies: - - supports-color - - '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)': - dependencies: - '@babel/core': 7.29.0 - '@babel/helper-module-imports': 7.28.6 - '@babel/helper-validator-identifier': 7.28.5 - '@babel/traverse': 7.29.0 - transitivePeerDependencies: - - supports-color - - '@babel/helper-plugin-utils@7.28.6': {} - - '@babel/helper-string-parser@7.27.1': {} - '@babel/helper-string-parser@8.0.0-rc.3': {} - '@babel/helper-validator-identifier@7.28.5': {} - '@babel/helper-validator-identifier@8.0.0-rc.3': {} - '@babel/helper-validator-option@7.27.1': {} - - '@babel/helpers@7.29.2': - dependencies: - '@babel/template': 7.28.6 - '@babel/types': 7.29.0 - - '@babel/parser@7.29.2': - dependencies: - '@babel/types': 7.29.0 - '@babel/parser@8.0.0-rc.3': dependencies: '@babel/types': 8.0.0-rc.3 - '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)': - dependencies: - '@babel/core': 7.29.0 - '@babel/helper-plugin-utils': 7.28.6 - - '@babel/runtime@7.29.2': {} - - '@babel/template@7.28.6': - dependencies: - '@babel/code-frame': 7.29.0 - '@babel/parser': 7.29.2 - '@babel/types': 7.29.0 - - '@babel/traverse@7.29.0': - dependencies: - '@babel/code-frame': 7.29.0 - '@babel/generator': 7.29.1 - '@babel/helper-globals': 7.28.0 - '@babel/parser': 7.29.2 - '@babel/template': 7.28.6 - '@babel/types': 7.29.0 - debug: 4.4.3 - transitivePeerDependencies: - - supports-color - - '@babel/types@7.29.0': - dependencies: - '@babel/helper-string-parser': 7.27.1 - '@babel/helper-validator-identifier': 7.28.5 - '@babel/types@8.0.0-rc.3': dependencies: '@babel/helper-string-parser': 8.0.0-rc.3 @@ -2273,12 +2038,14 @@ snapshots: '@biomejs/cli-win32-x64@1.9.4': optional: true - '@csstools/color-helpers@5.1.0': {} + '@csstools/color-helpers@5.1.0': + optional: true '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 + optional: true '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': dependencies: @@ -2286,12 +2053,15 @@ snapshots: '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-tokenizer': 3.0.4 + optional: true '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': dependencies: '@csstools/css-tokenizer': 3.0.4 + optional: true - '@csstools/css-tokenizer@3.0.4': {} + '@csstools/css-tokenizer@3.0.4': + optional: true '@emnapi/core@1.9.1': dependencies: @@ -2309,6 +2079,84 @@ snapshots: tslib: 2.8.1 optional: true + '@esbuild/aix-ppc64@0.25.12': + optional: true + + '@esbuild/android-arm64@0.25.12': + optional: true + + '@esbuild/android-arm@0.25.12': + optional: true + + '@esbuild/android-x64@0.25.12': + optional: true + + '@esbuild/darwin-arm64@0.25.12': + optional: true + + '@esbuild/darwin-x64@0.25.12': + optional: true + + '@esbuild/freebsd-arm64@0.25.12': + optional: true + + '@esbuild/freebsd-x64@0.25.12': + optional: true + + '@esbuild/linux-arm64@0.25.12': + optional: true + + '@esbuild/linux-arm@0.25.12': + optional: true + + '@esbuild/linux-ia32@0.25.12': + optional: true + + '@esbuild/linux-loong64@0.25.12': + optional: true + + '@esbuild/linux-mips64el@0.25.12': + optional: true + + '@esbuild/linux-ppc64@0.25.12': + optional: true + + '@esbuild/linux-riscv64@0.25.12': + optional: true + + '@esbuild/linux-s390x@0.25.12': + optional: true + + '@esbuild/linux-x64@0.25.12': + optional: true + + '@esbuild/netbsd-arm64@0.25.12': + optional: true + + '@esbuild/netbsd-x64@0.25.12': + optional: true + + '@esbuild/openbsd-arm64@0.25.12': + optional: true + + '@esbuild/openbsd-x64@0.25.12': + optional: true + + '@esbuild/openharmony-arm64@0.25.12': + optional: true + + '@esbuild/sunos-x64@0.25.12': + optional: true + + '@esbuild/win32-arm64@0.25.12': + optional: true + + '@esbuild/win32-ia32@0.25.12': + optional: true + + '@esbuild/win32-x64@0.25.12': + optional: true + '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.6.1))': dependencies: eslint: 9.39.4(jiti@2.6.1) @@ -2355,17 +2203,6 @@ snapshots: '@eslint/core': 0.17.0 levn: 0.4.1 - '@floating-ui/core@1.7.5': - dependencies: - '@floating-ui/utils': 0.2.11 - - '@floating-ui/dom@1.7.6': - dependencies: - '@floating-ui/core': 1.7.5 - '@floating-ui/utils': 0.2.11 - - '@floating-ui/utils@0.2.11': {} - '@hono/node-server@1.19.11(hono@4.12.9)': dependencies: hono: 4.12.9 @@ -2386,11 +2223,6 @@ snapshots: '@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/trace-mapping': 0.3.31 - '@jridgewell/remapping@2.3.5': - dependencies: - '@jridgewell/gen-mapping': 0.3.13 - '@jridgewell/trace-mapping': 0.3.31 - '@jridgewell/resolve-uri@3.1.2': {} '@jridgewell/sourcemap-codec@1.5.5': {} @@ -2487,133 +2319,88 @@ snapshots: '@rolldown/pluginutils@1.0.0-rc.12': {} - '@solidjs/testing-library@0.8.10(solid-js@1.9.12)': - dependencies: - '@testing-library/dom': 10.4.1 - solid-js: 1.9.12 + '@rollup/rollup-android-arm-eabi@4.60.1': + optional: true + + '@rollup/rollup-android-arm64@4.60.1': + optional: true + + '@rollup/rollup-darwin-arm64@4.60.1': + optional: true + + '@rollup/rollup-darwin-x64@4.60.1': + optional: true + + '@rollup/rollup-freebsd-arm64@4.60.1': + optional: true + + '@rollup/rollup-freebsd-x64@4.60.1': + optional: true + + '@rollup/rollup-linux-arm-gnueabihf@4.60.1': + optional: true + + '@rollup/rollup-linux-arm-musleabihf@4.60.1': + optional: true + + '@rollup/rollup-linux-arm64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-arm64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-loong64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-loong64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-ppc64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-ppc64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-riscv64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-riscv64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-s390x-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-x64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-x64-musl@4.60.1': + optional: true + + '@rollup/rollup-openbsd-x64@4.60.1': + optional: true + + '@rollup/rollup-openharmony-arm64@4.60.1': + optional: true + + '@rollup/rollup-win32-arm64-msvc@4.60.1': + optional: true + + '@rollup/rollup-win32-ia32-msvc@4.60.1': + optional: true + + '@rollup/rollup-win32-x64-gnu@4.60.1': + optional: true + + '@rollup/rollup-win32-x64-msvc@4.60.1': + optional: true '@standard-schema/spec@1.1.0': {} - '@tailwindcss/node@4.2.2': - dependencies: - '@jridgewell/remapping': 2.3.5 - enhanced-resolve: 5.20.1 - jiti: 2.6.1 - lightningcss: 1.32.0 - magic-string: 0.30.21 - source-map-js: 1.2.1 - tailwindcss: 4.2.2 - - '@tailwindcss/oxide-android-arm64@4.2.2': - optional: true - - '@tailwindcss/oxide-darwin-arm64@4.2.2': - optional: true - - '@tailwindcss/oxide-darwin-x64@4.2.2': - optional: true - - '@tailwindcss/oxide-freebsd-x64@4.2.2': - optional: true - - '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2': - optional: true - - '@tailwindcss/oxide-linux-arm64-gnu@4.2.2': - optional: true - - '@tailwindcss/oxide-linux-arm64-musl@4.2.2': - optional: true - - '@tailwindcss/oxide-linux-x64-gnu@4.2.2': - optional: true - - '@tailwindcss/oxide-linux-x64-musl@4.2.2': - optional: true - - '@tailwindcss/oxide-wasm32-wasi@4.2.2': - optional: true - - '@tailwindcss/oxide-win32-arm64-msvc@4.2.2': - optional: true - - '@tailwindcss/oxide-win32-x64-msvc@4.2.2': - optional: true - - '@tailwindcss/oxide@4.2.2': - optionalDependencies: - '@tailwindcss/oxide-android-arm64': 4.2.2 - '@tailwindcss/oxide-darwin-arm64': 4.2.2 - '@tailwindcss/oxide-darwin-x64': 4.2.2 - '@tailwindcss/oxide-freebsd-x64': 4.2.2 - '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2 - '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2 - '@tailwindcss/oxide-linux-arm64-musl': 4.2.2 - '@tailwindcss/oxide-linux-x64-gnu': 4.2.2 - '@tailwindcss/oxide-linux-x64-musl': 4.2.2 - '@tailwindcss/oxide-wasm32-wasi': 4.2.2 - '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2 - '@tailwindcss/oxide-win32-x64-msvc': 4.2.2 - - '@tailwindcss/vite@4.2.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1))': - dependencies: - '@tailwindcss/node': 4.2.2 - '@tailwindcss/oxide': 4.2.2 - tailwindcss: 4.2.2 - vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) - - '@testing-library/dom@10.4.1': - dependencies: - '@babel/code-frame': 7.29.0 - '@babel/runtime': 7.29.2 - '@types/aria-query': 5.0.4 - aria-query: 5.3.0 - dom-accessibility-api: 0.5.16 - lz-string: 1.5.0 - picocolors: 1.1.1 - pretty-format: 27.5.1 - - '@testing-library/jest-dom@6.9.1': - dependencies: - '@adobe/css-tools': 4.4.4 - aria-query: 5.3.2 - css.escape: 1.5.1 - dom-accessibility-api: 0.6.3 - picocolors: 1.1.1 - redent: 3.0.0 - - '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)': - dependencies: - '@testing-library/dom': 10.4.1 - '@tybys/wasm-util@0.10.1': dependencies: tslib: 2.8.1 optional: true - '@types/aria-query@5.0.4': {} - - '@types/babel__core@7.20.5': - dependencies: - '@babel/parser': 7.29.2 - '@babel/types': 7.29.0 - '@types/babel__generator': 7.27.0 - '@types/babel__template': 7.4.4 - '@types/babel__traverse': 7.28.0 - - '@types/babel__generator@7.27.0': - dependencies: - '@babel/types': 7.29.0 - - '@types/babel__template@7.4.4': - dependencies: - '@babel/parser': 7.29.2 - '@babel/types': 7.29.0 - - '@types/babel__traverse@7.28.0': - dependencies: - '@babel/types': 7.29.0 - '@types/chai@5.2.3': dependencies: '@types/deep-eql': 4.0.2 @@ -2630,6 +2417,7 @@ snapshots: '@types/node@25.5.0': dependencies: undici-types: 7.18.2 + optional: true '@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2)': dependencies: @@ -2746,7 +2534,8 @@ snapshots: acorn@8.16.0: {} - agent-base@7.1.4: {} + agent-base@7.1.4: + optional: true ajv-formats@3.0.1(ajv@8.18.0): optionalDependencies: @@ -2766,24 +2555,14 @@ snapshots: json-schema-traverse: 1.0.0 require-from-string: 2.0.2 - ansi-regex@5.0.1: {} - ansi-styles@4.3.0: dependencies: color-convert: 2.0.1 - ansi-styles@5.2.0: {} - ansis@4.2.0: {} argparse@2.0.1: {} - aria-query@5.3.0: - dependencies: - dequal: 2.0.3 - - aria-query@5.3.2: {} - assertion-error@2.0.1: {} ast-kit@3.0.0-beta.1: @@ -2792,28 +2571,10 @@ snapshots: estree-walker: 3.0.3 pathe: 2.0.3 - babel-plugin-jsx-dom-expressions@0.40.6(@babel/core@7.29.0): - dependencies: - '@babel/core': 7.29.0 - '@babel/helper-module-imports': 7.18.6 - '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0) - '@babel/types': 7.29.0 - html-entities: 2.3.3 - parse5: 7.3.0 - - babel-preset-solid@1.9.12(@babel/core@7.29.0)(solid-js@1.9.12): - dependencies: - '@babel/core': 7.29.0 - babel-plugin-jsx-dom-expressions: 0.40.6(@babel/core@7.29.0) - optionalDependencies: - solid-js: 1.9.12 - balanced-match@1.0.2: {} balanced-match@4.0.4: {} - baseline-browser-mapping@2.10.12: {} - birpc@4.0.0: {} body-parser@2.2.2: @@ -2839,14 +2600,6 @@ snapshots: dependencies: balanced-match: 4.0.4 - browserslist@4.28.1: - dependencies: - baseline-browser-mapping: 2.10.12 - caniuse-lite: 1.0.30001781 - electron-to-chromium: 1.5.328 - node-releases: 2.0.36 - update-browserslist-db: 1.2.3(browserslist@4.28.1) - bytes@3.1.2: {} cac@7.0.0: {} @@ -2863,8 +2616,6 @@ snapshots: callsites@3.1.0: {} - caniuse-lite@1.0.30001781: {} - chai@6.2.2: {} chalk@4.1.2: @@ -2901,25 +2652,24 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css.escape@1.5.1: {} - cssstyle@4.6.0: dependencies: '@asamuzakjp/css-color': 3.2.0 rrweb-cssom: 0.8.0 - - csstype@3.2.3: {} + optional: true data-urls@5.0.0: dependencies: whatwg-mimetype: 4.0.0 whatwg-url: 14.2.0 + optional: true debug@4.4.3: dependencies: ms: 2.1.3 - decimal.js@10.6.0: {} + decimal.js@10.6.0: + optional: true deep-is@0.1.4: {} @@ -2927,14 +2677,8 @@ snapshots: depd@2.0.0: {} - dequal@2.0.3: {} - detect-libc@2.1.2: {} - dom-accessibility-api@0.5.16: {} - - dom-accessibility-api@0.6.3: {} - dts-resolver@2.1.3: {} dunder-proto@1.0.1: @@ -2945,18 +2689,12 @@ snapshots: ee-first@1.1.1: {} - electron-to-chromium@1.5.328: {} - empathic@2.0.0: {} encodeurl@2.0.0: {} - enhanced-resolve@5.20.1: - dependencies: - graceful-fs: 4.2.11 - tapable: 2.3.2 - - entities@6.0.1: {} + entities@6.0.1: + optional: true es-define-property@1.0.1: {} @@ -2968,7 +2706,34 @@ snapshots: dependencies: es-errors: 1.3.0 - escalade@3.2.0: {} + esbuild@0.25.12: + optionalDependencies: + '@esbuild/aix-ppc64': 0.25.12 + '@esbuild/android-arm': 0.25.12 + '@esbuild/android-arm64': 0.25.12 + '@esbuild/android-x64': 0.25.12 + '@esbuild/darwin-arm64': 0.25.12 + '@esbuild/darwin-x64': 0.25.12 + '@esbuild/freebsd-arm64': 0.25.12 + '@esbuild/freebsd-x64': 0.25.12 + '@esbuild/linux-arm': 0.25.12 + '@esbuild/linux-arm64': 0.25.12 + '@esbuild/linux-ia32': 0.25.12 + '@esbuild/linux-loong64': 0.25.12 + '@esbuild/linux-mips64el': 0.25.12 + '@esbuild/linux-ppc64': 0.25.12 + '@esbuild/linux-riscv64': 0.25.12 + '@esbuild/linux-s390x': 0.25.12 + '@esbuild/linux-x64': 0.25.12 + '@esbuild/netbsd-arm64': 0.25.12 + '@esbuild/netbsd-x64': 0.25.12 + '@esbuild/openbsd-arm64': 0.25.12 + '@esbuild/openbsd-x64': 0.25.12 + '@esbuild/openharmony-arm64': 0.25.12 + '@esbuild/sunos-x64': 0.25.12 + '@esbuild/win32-arm64': 0.25.12 + '@esbuild/win32-ia32': 0.25.12 + '@esbuild/win32-x64': 0.25.12 escape-html@1.0.3: {} @@ -3157,8 +2922,6 @@ snapshots: function-bind@1.1.2: {} - gensync@1.0.0-beta.2: {} - get-intrinsic@1.3.0: dependencies: call-bind-apply-helpers: 1.0.2 @@ -3189,8 +2952,6 @@ snapshots: gopd@1.2.0: {} - graceful-fs@4.2.11: {} - has-flag@4.0.0: {} has-symbols@1.1.0: {} @@ -3206,8 +2967,7 @@ snapshots: html-encoding-sniffer@4.0.0: dependencies: whatwg-encoding: 3.1.1 - - html-entities@2.3.3: {} + optional: true html-tags@3.3.1: {} @@ -3225,6 +2985,7 @@ snapshots: debug: 4.4.3 transitivePeerDependencies: - supports-color + optional: true https-proxy-agent@7.0.6: dependencies: @@ -3232,10 +2993,12 @@ snapshots: debug: 4.4.3 transitivePeerDependencies: - supports-color + optional: true iconv-lite@0.6.3: dependencies: safer-buffer: 2.1.2 + optional: true iconv-lite@0.7.2: dependencies: @@ -3252,8 +3015,6 @@ snapshots: imurmurhash@0.1.4: {} - indent-string@4.0.0: {} - inherits@2.0.4: {} inline-style-parser@0.2.7: {} @@ -3272,20 +3033,18 @@ snapshots: dependencies: html-tags: 3.3.1 - is-potential-custom-element-name@1.0.1: {} + is-potential-custom-element-name@1.0.1: + optional: true is-promise@4.0.0: {} - is-what@4.1.16: {} - isexe@2.0.0: {} - jiti@2.6.1: {} + jiti@2.6.1: + optional: true jose@6.2.2: {} - js-tokens@4.0.0: {} - js-yaml@4.1.1: dependencies: argparse: 2.0.1 @@ -3316,6 +3075,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true jsesc@3.1.0: {} @@ -3329,8 +3089,6 @@ snapshots: json-stable-stringify-without-jsonify@1.0.1: {} - json5@2.2.3: {} - kebab-case@1.0.2: {} keyv@4.5.4: @@ -3399,13 +3157,8 @@ snapshots: lodash.merge@4.6.2: {} - lru-cache@10.4.3: {} - - lru-cache@5.1.1: - dependencies: - yallist: 3.1.1 - - lz-string@1.5.0: {} + lru-cache@10.4.3: + optional: true magic-string@0.30.21: dependencies: @@ -3415,10 +3168,6 @@ snapshots: media-typer@1.1.0: {} - merge-anything@5.1.7: - dependencies: - is-what: 4.1.16 - merge-descriptors@2.0.0: {} mime-db@1.54.0: {} @@ -3427,8 +3176,6 @@ snapshots: dependencies: mime-db: 1.54.0 - min-indent@1.0.1: {} - minimatch@10.2.4: dependencies: brace-expansion: 5.0.5 @@ -3445,9 +3192,8 @@ snapshots: negotiator@1.0.0: {} - node-releases@2.0.36: {} - - nwsapi@2.2.23: {} + nwsapi@2.2.23: + optional: true object-assign@4.1.1: {} @@ -3487,6 +3233,7 @@ snapshots: parse5@7.3.0: dependencies: entities: 6.0.1 + optional: true parseurl@1.3.3: {} @@ -3512,12 +3259,6 @@ snapshots: prelude-ls@1.2.1: {} - pretty-format@27.5.1: - dependencies: - ansi-regex: 5.0.1 - ansi-styles: 5.2.0 - react-is: 17.0.2 - proxy-addr@2.0.7: dependencies: forwarded: 0.2.0 @@ -3540,13 +3281,6 @@ snapshots: iconv-lite: 0.7.2 unpipe: 1.0.0 - react-is@17.0.2: {} - - redent@3.0.0: - dependencies: - indent-string: 4.0.0 - strip-indent: 3.0.0 - require-from-string@2.0.2: {} resolve-from@4.0.0: {} @@ -3595,6 +3329,37 @@ snapshots: - '@emnapi/core' - '@emnapi/runtime' + rollup@4.60.1: + dependencies: + '@types/estree': 1.0.8 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.60.1 + '@rollup/rollup-android-arm64': 4.60.1 + '@rollup/rollup-darwin-arm64': 4.60.1 + '@rollup/rollup-darwin-x64': 4.60.1 + '@rollup/rollup-freebsd-arm64': 4.60.1 + '@rollup/rollup-freebsd-x64': 4.60.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.60.1 + '@rollup/rollup-linux-arm-musleabihf': 4.60.1 + '@rollup/rollup-linux-arm64-gnu': 4.60.1 + '@rollup/rollup-linux-arm64-musl': 4.60.1 + '@rollup/rollup-linux-loong64-gnu': 4.60.1 + '@rollup/rollup-linux-loong64-musl': 4.60.1 + '@rollup/rollup-linux-ppc64-gnu': 4.60.1 + '@rollup/rollup-linux-ppc64-musl': 4.60.1 + '@rollup/rollup-linux-riscv64-gnu': 4.60.1 + '@rollup/rollup-linux-riscv64-musl': 4.60.1 + '@rollup/rollup-linux-s390x-gnu': 4.60.1 + '@rollup/rollup-linux-x64-gnu': 4.60.1 + '@rollup/rollup-linux-x64-musl': 4.60.1 + '@rollup/rollup-openbsd-x64': 4.60.1 + '@rollup/rollup-openharmony-arm64': 4.60.1 + '@rollup/rollup-win32-arm64-msvc': 4.60.1 + '@rollup/rollup-win32-ia32-msvc': 4.60.1 + '@rollup/rollup-win32-x64-gnu': 4.60.1 + '@rollup/rollup-win32-x64-msvc': 4.60.1 + fsevents: 2.3.3 + router@2.2.0: dependencies: debug: 4.4.3 @@ -3605,15 +3370,15 @@ snapshots: transitivePeerDependencies: - supports-color - rrweb-cssom@0.8.0: {} + rrweb-cssom@0.8.0: + optional: true safer-buffer@2.1.2: {} saxes@6.0.0: dependencies: xmlchars: 2.2.0 - - semver@6.3.1: {} + optional: true semver@7.7.4: {} @@ -3633,12 +3398,6 @@ snapshots: transitivePeerDependencies: - supports-color - seroval-plugins@1.5.1(seroval@1.5.1): - dependencies: - seroval: 1.5.1 - - seroval@1.5.1: {} - serve-static@2.2.1: dependencies: encodeurl: 2.0.0 @@ -3686,21 +3445,6 @@ snapshots: siginfo@2.0.0: {} - solid-js@1.9.12: - dependencies: - csstype: 3.2.3 - seroval: 1.5.1 - seroval-plugins: 1.5.1(seroval@1.5.1) - - solid-refresh@0.6.3(solid-js@1.9.12): - dependencies: - '@babel/generator': 7.29.1 - '@babel/helper-module-imports': 7.28.6 - '@babel/types': 7.29.0 - solid-js: 1.9.12 - transitivePeerDependencies: - - supports-color - source-map-js@1.2.1: {} stackback@0.0.2: {} @@ -3709,10 +3453,6 @@ snapshots: std-env@4.0.0: {} - strip-indent@3.0.0: - dependencies: - min-indent: 1.0.1 - strip-json-comments@3.1.1: {} style-to-object@1.0.14: @@ -3723,11 +3463,8 @@ snapshots: dependencies: has-flag: 4.0.0 - symbol-tree@3.2.4: {} - - tailwindcss@4.2.2: {} - - tapable@2.3.2: {} + symbol-tree@3.2.4: + optional: true tinybench@2.9.0: {} @@ -3740,21 +3477,25 @@ snapshots: tinyrainbow@3.1.0: {} - tldts-core@6.1.86: {} + tldts-core@6.1.86: + optional: true tldts@6.1.86: dependencies: tldts-core: 6.1.86 + optional: true toidentifier@1.0.1: {} tough-cookie@5.1.2: dependencies: tldts: 6.1.86 + optional: true tr46@5.1.1: dependencies: punycode: 2.3.1 + optional: true tree-kill@1.2.2: {} @@ -3811,7 +3552,8 @@ snapshots: '@quansync/fs': 1.0.0 quansync: 1.0.0 - undici-types@7.18.2: {} + undici-types@7.18.2: + optional: true unpipe@1.0.0: {} @@ -3822,32 +3564,25 @@ snapshots: - '@emnapi/core' - '@emnapi/runtime' - update-browserslist-db@1.2.3(browserslist@4.28.1): - dependencies: - browserslist: 4.28.1 - escalade: 3.2.0 - picocolors: 1.1.1 - uri-js@4.4.1: dependencies: punycode: 2.3.1 vary@1.1.2: {} - vite-plugin-solid@2.11.11(@testing-library/jest-dom@6.9.1)(solid-js@1.9.12)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)): + vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0): dependencies: - '@babel/core': 7.29.0 - '@types/babel__core': 7.20.5 - babel-preset-solid: 1.9.12(@babel/core@7.29.0)(solid-js@1.9.12) - merge-anything: 5.1.7 - solid-js: 1.9.12 - solid-refresh: 0.6.3(solid-js@1.9.12) - vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) - vitefu: 1.1.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) + esbuild: 0.25.12 + fdir: 6.5.0(picomatch@4.0.4) + picomatch: 4.0.4 + postcss: 8.5.8 + rollup: 4.60.1 + tinyglobby: 0.2.15 optionalDependencies: - '@testing-library/jest-dom': 6.9.1 - transitivePeerDependencies: - - supports-color + '@types/node': 25.5.0 + fsevents: 2.3.3 + jiti: 2.6.1 + lightningcss: 1.32.0 vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1): dependencies: @@ -3864,10 +3599,6 @@ snapshots: - '@emnapi/core' - '@emnapi/runtime' - vitefu@1.1.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)): - optionalDependencies: - vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) - vitest@4.1.2(@types/node@25.5.0)(jsdom@26.1.0)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)): dependencies: '@vitest/expect': 4.1.2 @@ -3899,19 +3630,24 @@ snapshots: w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 + optional: true - webidl-conversions@7.0.0: {} + webidl-conversions@7.0.0: + optional: true whatwg-encoding@3.1.1: dependencies: iconv-lite: 0.6.3 + optional: true - whatwg-mimetype@4.0.0: {} + whatwg-mimetype@4.0.0: + optional: true whatwg-url@14.2.0: dependencies: tr46: 5.1.1 webidl-conversions: 7.0.0 + optional: true which@2.0.2: dependencies: @@ -3926,13 +3662,14 @@ snapshots: wrappy@1.0.2: {} - ws@8.20.0: {} + ws@8.20.0: + optional: true - xml-name-validator@5.0.0: {} + xml-name-validator@5.0.0: + optional: true - xmlchars@2.2.0: {} - - yallist@3.1.1: {} + xmlchars@2.2.0: + optional: true yocto-queue@0.1.0: {} diff --git a/tsconfig.base.json b/tsconfig.base.json index 56ad17e..9fe33b9 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -3,9 +3,7 @@ "target": "ES2020", "module": "ESNext", "moduleResolution": "bundler", - "jsx": "preserve", - "jsxImportSource": "solid-js", - "strict": true, +"strict": true, "exactOptionalPropertyTypes": true, "noUncheckedIndexedAccess": true, "verbatimModuleSyntax": true,