@vielzeug/buildit 2.0.0

package/dist/custom-elements.json

@@ -0,0 +1,2321 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/icons.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "closeIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <path d=\"M18 6 6 18M6 6l12 12\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "checkIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <path d=\"M20 6 9 17l-5-5\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "checkIconHTML",
+          "type": {
+            "text": "string"
+          },
+          "default": "'<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>'",
+          "description": "Used inline as an innerHTML string (e.g. for imperatively built option lists)."
+        },
+        {
+          "kind": "variable",
+          "name": "chevronDownIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <path d=\"m6 9 6 6 6-6\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "chevronLeftIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <polyline points=\"15 18 9 12 15 6\"></polyline> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "chevronRightIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <polyline points=\"9 18 15 12 9 6\"></polyline> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "eyeIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"> <path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" /> <circle cx=\"12\" cy=\"12\" r=\"3\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "eyeOffIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"> <path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\" /> <path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\" /> <path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\" /> <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "clearIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <path d=\"M18 6 6 18M6 6l12 12\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "uploadIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <polyline points=\"16 16 12 12 8 16\" /> <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\" /> <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "fileIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"> <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" /> <polyline points=\"14 2 14 8 20 8\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "minusIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" aria-hidden=\"true\"> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" /> </svg> `"
+        },
+        {
+          "kind": "variable",
+          "name": "plusIcon",
+          "default": "html` <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" aria-hidden=\"true\"> <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" /> <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" /> </svg> `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "closeIcon",
+          "declaration": {
+            "name": "closeIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkIcon",
+          "declaration": {
+            "name": "checkIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkIconHTML",
+          "declaration": {
+            "name": "checkIconHTML",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "chevronDownIcon",
+          "declaration": {
+            "name": "chevronDownIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "chevronLeftIcon",
+          "declaration": {
+            "name": "chevronLeftIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "chevronRightIcon",
+          "declaration": {
+            "name": "chevronRightIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "eyeIcon",
+          "declaration": {
+            "name": "eyeIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "eyeOffIcon",
+          "declaration": {
+            "name": "eyeOffIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "clearIcon",
+          "declaration": {
+            "name": "clearIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "uploadIcon",
+          "declaration": {
+            "name": "uploadIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fileIcon",
+          "declaration": {
+            "name": "fileIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "minusIcon",
+          "declaration": {
+            "name": "minusIcon",
+            "module": "src/icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "plusIcon",
+          "declaration": {
+            "name": "plusIcon",
+            "module": "src/icons.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/avatar/avatar.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "AVATAR_TAG",
+          "description": "Displays a user avatar: image → initials → generic fallback icon, in that priority order."
+        },
+        {
+          "kind": "variable",
+          "name": "AVATAR_GROUP_TAG",
+          "description": "Groups multiple `bit-avatar` elements in a stacked, overlapping row."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AVATAR_TAG",
+          "declaration": {
+            "name": "AVATAR_TAG",
+            "module": "src/content/avatar/avatar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AVATAR_GROUP_TAG",
+          "declaration": {
+            "name": "AVATAR_GROUP_TAG",
+            "module": "src/content/avatar/avatar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/breadcrumb/breadcrumb.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BREADCRUMB_ITEM_TAG",
+          "description": "`bit-breadcrumb-item` — A single crumb within a `<bit-breadcrumb>` list."
+        },
+        {
+          "kind": "variable",
+          "name": "BREADCRUMB_TAG",
+          "description": "`bit-breadcrumb` — Accessible navigation breadcrumb.\n\nWrap `<bit-breadcrumb-item>` elements as children.\nThe last/current item should have `active` attribute."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BREADCRUMB_ITEM_TAG",
+          "declaration": {
+            "name": "BREADCRUMB_ITEM_TAG",
+            "module": "src/content/breadcrumb/breadcrumb.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BREADCRUMB_TAG",
+          "declaration": {
+            "name": "BREADCRUMB_TAG",
+            "module": "src/content/breadcrumb/breadcrumb.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/card/card.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CARD_TAG",
+          "description": "A versatile card container with semantic slots for media, header, body, footer, and actions."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CARD_TAG",
+          "declaration": {
+            "name": "CARD_TAG",
+            "module": "src/content/card/card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/pagination/pagination.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PAGINATION_TAG",
+          "description": "Page-based navigation control."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PAGINATION_TAG",
+          "declaration": {
+            "name": "PAGINATION_TAG",
+            "module": "src/content/pagination/pagination.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/separator/separator.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SEPARATOR_TAG",
+          "description": "A simple visual divider between sections of content."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SEPARATOR_TAG",
+          "declaration": {
+            "name": "SEPARATOR_TAG",
+            "module": "src/content/separator/separator.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/table/table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "anonymous_0",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "bit-tr",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "anonymous_1",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "bit-th",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "anonymous_2",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "bit-td",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "TR_TAG",
+          "type": {
+            "text": "string"
+          },
+          "default": "'bit-tr'"
+        },
+        {
+          "kind": "variable",
+          "name": "TH_TAG",
+          "type": {
+            "text": "string"
+          },
+          "default": "'bit-th'"
+        },
+        {
+          "kind": "variable",
+          "name": "TD_TAG",
+          "type": {
+            "text": "string"
+          },
+          "default": "'bit-td'"
+        },
+        {
+          "kind": "variable",
+          "name": "TABLE_TAG",
+          "description": "Accessible data table. Compose with `<bit-tr>`, `<bit-th>`, and `<bit-td>`.\nAdd `head` to header rows and `foot` to footer rows."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "bit-tr",
+          "declaration": {
+            "name": "anonymous_0",
+            "module": "src/content/table/table.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bit-th",
+          "declaration": {
+            "name": "anonymous_1",
+            "module": "src/content/table/table.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bit-td",
+          "declaration": {
+            "name": "anonymous_2",
+            "module": "src/content/table/table.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TR_TAG",
+          "declaration": {
+            "name": "TR_TAG",
+            "module": "src/content/table/table.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TH_TAG",
+          "declaration": {
+            "name": "TH_TAG",
+            "module": "src/content/table/table.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TD_TAG",
+          "declaration": {
+            "name": "TD_TAG",
+            "module": "src/content/table/table.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TABLE_TAG",
+          "declaration": {
+            "name": "TABLE_TAG",
+            "module": "src/content/table/table.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/content/text/text.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TEXT_TAG",
+          "description": "A typography component with semantic variants and responsive sizing."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TEXT_TAG",
+          "declaration": {
+            "name": "TEXT_TAG",
+            "module": "src/content/text/text.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/disclosure/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ACCORDION_CTX",
+          "description": "Injection key for the accordion context."
+        },
+        {
+          "kind": "variable",
+          "name": "ACCORDION_TAG",
+          "description": "A container for accordion items with single or multiple selection modes."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ACCORDION_CTX",
+          "declaration": {
+            "name": "ACCORDION_CTX",
+            "module": "src/disclosure/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ACCORDION_TAG",
+          "declaration": {
+            "name": "ACCORDION_TAG",
+            "module": "src/disclosure/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/disclosure/accordion-item/accordion-item.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ACCORDION_ITEM_TAG",
+          "description": "An individual accordion item with expand/collapse functionality using native details/summary."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ACCORDION_ITEM_TAG",
+          "declaration": {
+            "name": "ACCORDION_ITEM_TAG",
+            "module": "src/disclosure/accordion-item/accordion-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/disclosure/tab-item/tab-item.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TAB_ITEM_TAG",
+          "description": "Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TAB_ITEM_TAG",
+          "declaration": {
+            "name": "TAB_ITEM_TAG",
+            "module": "src/disclosure/tab-item/tab-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/disclosure/tab-panel/tab-panel.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TAB_PANEL_TAG",
+          "description": "Content panel for a tab. Shown when its `value` matches the selected tab."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TAB_PANEL_TAG",
+          "declaration": {
+            "name": "TAB_PANEL_TAG",
+            "module": "src/disclosure/tab-panel/tab-panel.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/disclosure/tabs/tabs.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TABS_CTX",
+          "description": "Injection key for the tabs context."
+        },
+        {
+          "kind": "variable",
+          "name": "TABS_TAG",
+          "description": "Tabs container. Manages tab selection and syncs state to child tab items and panels."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TABS_CTX",
+          "declaration": {
+            "name": "TABS_CTX",
+            "module": "src/disclosure/tabs/tabs.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TABS_TAG",
+          "declaration": {
+            "name": "TABS_TAG",
+            "module": "src/disclosure/tabs/tabs.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/feedback/alert/alert.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ALERT_TAG",
+          "description": "A status/feedback banner with optional heading, icon slot, and dismiss button."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ALERT_TAG",
+          "declaration": {
+            "name": "ALERT_TAG",
+            "module": "src/feedback/alert/alert.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/feedback/badge/badge.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BADGE_TAG",
+          "description": "A compact badge/chip for counts, statuses, and labels.\nSupports numeric counts with overflow, dot mode, and icon slots."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BADGE_TAG",
+          "declaration": {
+            "name": "BADGE_TAG",
+            "module": "src/feedback/badge/badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/feedback/chip/chip.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CHIP_TAG",
+          "description": "A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\nCommonly used to represent tags, filters, or selected options in a multiselect field."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CHIP_TAG",
+          "declaration": {
+            "name": "CHIP_TAG",
+            "module": "src/feedback/chip/chip.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/feedback/progress/progress.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PROGRESS_TAG",
+          "description": "A linear progress bar for conveying operation progress.\nSupports determinate (known value) and indeterminate (unknown duration) modes."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PROGRESS_TAG",
+          "declaration": {
+            "name": "PROGRESS_TAG",
+            "module": "src/feedback/progress/progress.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/feedback/skeleton/skeleton.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SKELETON_TAG",
+          "description": "A shimmer placeholder that represents loading content.\nControl dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\nor via `width` / `height` inline styles."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SKELETON_TAG",
+          "declaration": {
+            "name": "SKELETON_TAG",
+            "module": "src/feedback/skeleton/skeleton.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/feedback/toast/toast.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TOAST_TAG"
+        },
+        {
+          "kind": "variable",
+          "name": "id"
+        },
+        {
+          "kind": "variable",
+          "name": "toast",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ /** Add a toast and return its id */ add(item: ToastItem): string { return getHost().add(item); }, /** Dismiss all toasts (animated) */ clear(): void { getHost().clear(); }, /** Configure the auto-created container. Call before the first `add()` if the defaults need to change. */ configure(config: BitToastProps): void { const el = getHost(); if (config.position) el.setAttribute('position', config.position); if (config.max != null) el.setAttribute('max', String(config.max)); }, /** * Shows a loading toast tied to a promise. * Updates to success/error when the promise settles. */ async promise<T>( promise: Promise<T>, messages: { error: string | ((err: unknown) => string); loading: string; success: string | ((data: T) => string); }, ): Promise<T> { const id = toast.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading }); try { const data = await promise; toast.update(id, { color: 'success', dismissible: true, duration: 5000, message: typeof messages.success === 'function' ? messages.success(data) : messages.success, }); return data; } catch (err) { toast.update(id, { color: 'error', dismissible: true, duration: 5000, message: typeof messages.error === 'function' ? messages.error(err) : messages.error, }); throw err; } }, /** Dismiss a toast by id */ remove(id: string): void { getHost().dismiss(id); }, /** Update an existing toast in-place */ update(id: string, updates: Partial<ToastItem>): void { getHost().update(id, updates); }, }",
+          "description": "Singleton service for triggering toasts without direct DOM references."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TOAST_TAG",
+          "declaration": {
+            "name": "TOAST_TAG",
+            "module": "src/feedback/toast/toast.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toast",
+          "declaration": {
+            "name": "toast",
+            "module": "src/feedback/toast/toast.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/button/button.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BUTTON_TAG",
+          "description": "A customizable button component with multiple variants, sizes, and states.\nSupports icons, loading states, and special effects like frost and rainbow."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BUTTON_TAG",
+          "declaration": {
+            "name": "BUTTON_TAG",
+            "module": "src/inputs/button/button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/button-group/button-group.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BUTTON_GROUP_CTX",
+          "description": "Injection key for the button-group context."
+        },
+        {
+          "kind": "variable",
+          "name": "BUTTON_GROUP_TAG",
+          "description": "A container for grouping buttons with coordinated styling and layout."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BUTTON_GROUP_CTX",
+          "declaration": {
+            "name": "BUTTON_GROUP_CTX",
+            "module": "src/inputs/button-group/button-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BUTTON_GROUP_TAG",
+          "declaration": {
+            "name": "BUTTON_GROUP_TAG",
+            "module": "src/inputs/button-group/button-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/checkbox/checkbox.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CHECKBOX_TAG",
+          "description": "A customizable checkbox component with theme colors, sizes, and indeterminate state support."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CHECKBOX_TAG",
+          "declaration": {
+            "name": "CHECKBOX_TAG",
+            "module": "src/inputs/checkbox/checkbox.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/checkbox-group/checkbox-group.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "CHECKBOX_GROUP_CTX"
+        },
+        {
+          "kind": "variable",
+          "name": "CHECKBOX_GROUP_TAG",
+          "description": "A fieldset wrapper that groups `bit-checkbox` elements, provides shared\n`color` and `size` via context, and manages multi-value selection state."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CHECKBOX_GROUP_CTX",
+          "declaration": {
+            "name": "CHECKBOX_GROUP_CTX",
+            "module": "src/inputs/checkbox-group/checkbox-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CHECKBOX_GROUP_TAG",
+          "declaration": {
+            "name": "CHECKBOX_GROUP_TAG",
+            "module": "src/inputs/checkbox-group/checkbox-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/combobox/combobox-options.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseSlottedOptions",
+          "return": {
+            "type": {
+              "text": "ComboboxOptionItem[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "elements",
+              "type": {
+                "text": "Element[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "backfillSelectionLabels",
+          "return": {
+            "type": {
+              "text": "ComboboxSelectionItem[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "selectedValues",
+              "type": {
+                "text": "ComboboxSelectionItem[]"
+              }
+            },
+            {
+              "name": "allOptions",
+              "type": {
+                "text": "ComboboxOptionItem[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "filterOptions",
+          "return": {
+            "type": {
+              "text": "ComboboxOptionItem[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "ComboboxOptionItem[]"
+              }
+            },
+            {
+              "name": "query",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "noFilter",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "getCreatableLabel",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "query",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "creatable",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "filteredOptions",
+              "type": {
+                "text": "ComboboxOptionItem[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "makeCreatableValue",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseSlottedOptions",
+          "declaration": {
+            "name": "parseSlottedOptions",
+            "module": "src/inputs/combobox/combobox-options.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "backfillSelectionLabels",
+          "declaration": {
+            "name": "backfillSelectionLabels",
+            "module": "src/inputs/combobox/combobox-options.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "filterOptions",
+          "declaration": {
+            "name": "filterOptions",
+            "module": "src/inputs/combobox/combobox-options.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getCreatableLabel",
+          "declaration": {
+            "name": "getCreatableLabel",
+            "module": "src/inputs/combobox/combobox-options.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "makeCreatableValue",
+          "declaration": {
+            "name": "makeCreatableValue",
+            "module": "src/inputs/combobox/combobox-options.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/combobox/combobox-virtualizer.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createComboboxVirtualizer",
+          "parameters": [
+            {
+              "name": "deps",
+              "type": {
+                "text": "ComboboxVirtualizerDeps"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createComboboxVirtualizer",
+          "declaration": {
+            "name": "createComboboxVirtualizer",
+            "module": "src/inputs/combobox/combobox-virtualizer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/combobox/combobox.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "COMBOBOX_OPTION_TAG",
+          "description": "`bit-combobox-option` — A child element of `<bit-combobox>` that represents one option."
+        },
+        {
+          "kind": "variable",
+          "name": "COMBOBOX_TAG",
+          "default": "defineComponent<BitComboboxProps, BitComboboxEvents>({ formAssociated: true, props: { clearable: { default: false }, color: { default: undefined }, creatable: { default: false }, disabled: { default: false }, error: { default: '', omit: true }, fullwidth: { default: false }, helper: { default: '' }, label: { default: '' }, 'label-placement': { default: 'inset' }, loading: { default: false }, multiple: { default: false }, name: { default: '' }, 'no-filter': { default: false }, options: typed<ComboboxOptionItem[] | undefined>(undefined, { reflect: false }), placeholder: { default: '' }, rounded: { default: undefined }, size: { default: undefined }, value: { default: '' }, variant: { default: undefined }, }, setup({ emit, host, props }) { const { fieldId: comboId, helperId, labelId } = createFormIds('combobox', props.name.value); // Label refs const labelOutsideRef = ref<HTMLLabelElement>(); const labelInsetRef = ref<HTMLLabelElement>(); const formCtx = inject(FORM_CTX, undefined); // Signal for the form value const formValue = signal(String(props.value.value ?? '')); const fd = defineField( { disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)), value: formValue }, { onReset: () => { formValue.value = ''; selectedValues.value = []; query.value = ''; }, }, ); const { triggerValidation } = createFieldValidation(formCtx, fd); // ── State ──────────────────────────────────────────────────────────────── const isOpen = signal(false); const query = signal(''); const isDisabled = computed(() => Boolean(props.disabled.value)); const isMultiple = computed(() => Boolean(props.multiple.value)); const isCreatable = computed(() => Boolean(props.creatable.value)); const isNoFilter = computed(() => Boolean(props['no-filter'].value)); watch( isOpen, (value) => { host.toggleAttribute('open', ((value) => Boolean(value))(value)); }, { immediate: true }, ); // Multi-value state: always an array; single mode uses at most one entry const selectedValues = signal<ComboboxSelectionItem[]>( props.value.value ? [{ label: '', value: props.value.value }] : [], ); const focusedIndex = signal(-1); const selectionController = createSelectionControl<ComboboxSelectionItem>({ findByKey: (value) => { const existing = selectedValues.value.find((item) => item.value === value); if (existing) return existing; // If not found in selection, try to find in all options to get label const option = allOptions.value.find((o) => o.value === value); if (option) return { label: option.label, value: option.value }; // Fallback: key is the value return { label: '', value }; }, getMode: () => (isMultiple.value ? 'multiple' : 'single'), getSelected: () => selectedValues.value, keyExtractor: (item) => item.value, setSelected: (next) => { selectedValues.value = next; }, }); // Sync external value prop changes to selectedValues (controlled mode) const syncControlledValue = (nextValue: unknown): void => { const state = computeControlledCsvState(String(nextValue ?? '')); if (state.isEmpty) { selectionController.clear(); query.value = ''; formValue.value = ''; return; } if (isMultiple.value) { selectedValues.value = state.values.map((value) => ({ label: '', value })); formValue.value = state.formValue; return; } // Single mode: one value selectedValues.value = [{ label: '', value: state.firstValue }]; formValue.value = state.firstValue; }; watch(props.value, (newValue) => syncControlledValue(newValue), { immediate: true }); watch(props.multiple, () => syncControlledValue(props.value.value)); // Convenience getter for single-select const selectedValue = computed(() => selectedValues.value[0]?.value ?? ''); const hasValue = computed(() => selectedValues.value.length > 0); const hasLabel = computed(() => !!props.label.value); let inputEl: HTMLInputElement | null = null; let fieldEl: HTMLElement | null = null; let dropdownEl: HTMLElement | null = null; let listboxEl: HTMLElement | null = null; function getLiveInput(): HTMLInputElement | null { const liveInput = host.shadowRoot?.querySelector<HTMLInputElement>('input[role=\"combobox\"]') ?? null; if (liveInput) inputEl = liveInput; return liveInput ?? inputEl; } function focusLiveInput() { getLiveInput()?.focus(); } // ── Options ────────────────────────────────────────────────────────────── const slottedOptions = signal<ComboboxOptionItem[]>([]); const createdOptions = signal<ComboboxOptionItem[]>([]); const isLoading = computed(() => Boolean(props.loading.value)); // Merged options: explicit prop value overrides slotted options. const allOptions = computed<ComboboxOptionItem[]>(() => { const base = props.options.value ?? slottedOptions.value; if (createdOptions.value.length === 0) return base; return [...base, ...createdOptions.value]; }); function readOptions(elements: Element[] = Array.from(host.children)) { slottedOptions.value = parseSlottedOptions(elements); // Backfill labels for any already-selected values that were set before options loaded if (selectedValues.value.length > 0) { selectedValues.value = backfillSelectionLabels(selectedValues.value, allOptions.value); // Also sync the query in single mode if (!isMultiple.value && selectedValues.value.length === 1) { query.value = selectedValues.value[0]?.label ?? ''; } } } const filteredOptions = computed<ComboboxOptionItem[]>(() => { return filterOptions(allOptions.value, query.value, isNoFilter.value); }); // \"Create\" option shown when creatable + query doesn't match any existing option const creatableLabel = computed(() => { return getCreatableLabel(query.value, isCreatable.value, filteredOptions.value); }); const assistiveText = computed(() => resolveMergedAssistiveText(props.error.value, props.helper.value)); const inputPlaceholder = computed(() => isMultiple.value && selectedValues.value.length > 0 ? '' : props.placeholder.value || '', ); const selectedValueItems = computed(() => selectedValues.value.map((s) => s.value)); const selectedLabelItems = computed(() => selectedValues.value.map((selection) => { if (selection.label) return selection.label; return allOptions.value.find((option) => option.value === selection.value)?.label ?? selection.value; }), ); function syncMultipleFormValue() { formValue.value = selectionController.serialize(','); } function emitChange(originalEvent?: Event) { emit('change', createChoiceChangeDetail(selectedValueItems.value, selectedLabelItems.value, originalEvent)); } function removeChip(event: Event): void { event.stopPropagation(); const value = (event as CustomEvent<{ value?: string }>).detail?.value; if (value === undefined) return; selectionController.remove(value); syncMultipleFormValue(); emitChange(event); triggerValidation('change'); } // ── Positioning (shared positioner) ────────────────────────────────────── const positioner = createDropdownPositioner( () => fieldEl, () => dropdownEl, ); const listNavigation = createListNavigation<ComboboxOptionItem>({ getIndex: () => focusedIndex.value, getItems: () => filteredOptions.value, isItemDisabled: (option) => option.disabled, setIndex: (index) => { focusedIndex.value = index; scrollFocusedIntoView(); }, }); const overlay = createOverlayControl({ getBoundaryElement: () => host, getPanelElement: () => dropdownEl, getTriggerElement: () => inputEl, isDisabled: () => isDisabled.value, isOpen: () => isOpen.value, positioner: { floating: () => dropdownEl, reference: () => fieldEl, update: () => positioner.updatePosition(), }, restoreFocus: false, setOpen: (next, _context) => { isOpen.value = next; if (!next) listNavigation.reset(); }, }); const applyNavigationResult = (result: ListNavigationResult): void => { if (result.reason === 'empty' || result.reason === 'no-enabled-item') { focusedIndex.value = -1; } }; // ── Open / Close ───────────────────────────────────────────────────────── function open(clearFilter = true, reason: OverlayOpenReason = 'programmatic') { if (clearFilter) query.value = ''; overlay.open({ reason }); } function close(reason: 'escape' | 'programmatic' | 'outside-click' | 'toggle' = 'programmatic') { overlay.close({ reason, restoreFocus: false }); // In single mode restore the query to the selected label (or clear) if (!isMultiple.value) { const match = allOptions.value.find((o) => o.value === selectedValue.value); query.value = match?.label ?? ''; } else { query.value = ''; } triggerValidation('blur'); } // ── Selection ──────────────────────────────────────────────────────────── function selectOption(opt: ComboboxOptionItem, originalEvent?: Event) { if (opt.disabled) return; if (isMultiple.value) { selectionController.toggle(opt.value); syncMultipleFormValue(); query.value = ''; emitChange(originalEvent); triggerValidation('change'); // Keep dropdown open in multiple mode focusLiveInput(); requestAnimationFrame(() => focusLiveInput()); } else { selectionController.select(opt.value); query.value = opt.label; formValue.value = opt.value; emitChange(originalEvent); triggerValidation('change'); close(); focusLiveInput(); } } function clearValue(e: Event) { e.stopPropagation(); selectionController.clear(); query.value = ''; formValue.value = ''; emitChange(e); triggerValidation('change'); focusLiveInput(); } function handleInput(e: Event) { const target = e.target as HTMLInputElement; query.value = target.value; if (!isMultiple.value) selectionController.clear(); applyNavigationResult(listNavigation.first()); if (!isOpen.value) open(false, 'trigger'); emit('search', { query: target.value } as { query: string }); } function handleFocus() { if (!isOpen.value) open(false, 'trigger'); } // ── Keyboard Navigation ────────────────────────────────────────────────── function handleKeydown(e: KeyboardEvent) { if (isDisabled.value) return; const opts = filteredOptions.value; switch (e.key) { case 'ArrowDown': e.preventDefault(); if (!isOpen.value) { open(true, 'trigger'); applyNavigationResult(listNavigation.first()); } else { applyNavigationResult(listNavigation.next()); } break; case 'ArrowUp': e.preventDefault(); if (!isOpen.value) { open(true, 'trigger'); } else { applyNavigationResult(listNavigation.prev()); } break; case 'Backspace': // In multiple mode, remove the last chip when the input is empty if (isMultiple.value && !query.value && selectedValues.value.length > 0) { selectedValues.value = selectedValues.value.slice(0, -1); syncMultipleFormValue(); emitChange(e); triggerValidation('change'); } break; case 'End': if (isOpen.value) { e.preventDefault(); applyNavigationResult(listNavigation.last()); } break; case 'Enter': e.preventDefault(); if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) { selectOption(opts[focusedIndex.value], e); } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) { // Focused on the \"create\" item createOption(creatableLabel.value, e); } else if (!isOpen.value) { open(); } break; case 'Escape': e.preventDefault(); if (isOpen.value) { close('escape'); } break; case 'Home': if (isOpen.value) { e.preventDefault(); applyNavigationResult(listNavigation.first()); } break; case 'Tab': close('programmatic'); break; default: break; } } function scrollFocusedIntoView() { if (focusedIndex.value >= 0) { domVirtualList.scrollToIndex(focusedIndex.value, { align: 'auto' }); return; } if (!listboxEl) return; const focusedEl = listboxEl.querySelector<HTMLElement>('[data-focused]'); focusedEl?.scrollIntoView({ block: 'nearest' }); } // ── Virtualizer ────────────────────────────────────────────────────────── const { domVirtualList, setupVirtualizer, updateRenderedItemState } = createComboboxVirtualizer({ checkIconHTML, comboId, getDropdownElement: () => dropdownEl, getFocusedIndex: () => focusedIndex.peek(), getIsMultiple: () => isMultiple.peek(), getListboxElement: () => listboxEl, getSelectedValue: () => selectedValue.peek(), getSelectedValues: () => selectedValues.peek(), onSelectOption: selectOption, setFocusedIndex: (index) => { focusedIndex.value = index; }, }); // ── Create option ──────────────────────────────────────────────────────── function createOption(label: string, originalEvent?: Event) { const value = makeCreatableValue(label); const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label, value }; createdOptions.value = [...createdOptions.value, newOpt]; selectOption(newOpt, originalEvent); } // ── Lifecycle ──────────────────────────────────────────────────────────── onMount(() => { fieldEl = inputEl?.closest('.field') as HTMLElement | null; dropdownEl = host.shadowRoot?.querySelector<HTMLElement>('.dropdown') ?? null; listboxEl = host.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]') ?? null; const removeOutsideClick = overlay.bindOutsideClick(document); onSlotChange('default', readOptions); // Ensure initial light-DOM options are available for immediate keyboard interaction. readOptions(); // Rebuild virtualizer when filtered options or open state changes effect(() => { const opts = filteredOptions.value; const open = isOpen.value; if (open && opts.length > 0) { requestAnimationFrame(() => setupVirtualizer(opts, open)); } else { domVirtualList.update(opts, false); } }); mountLabelSyncStandalone(labelInsetRef, labelOutsideRef, props); effect(() => { if (listboxEl) { // Remove existing state nodes for (const el of Array.from(listboxEl.querySelectorAll('.no-results,.no-results-create,.dropdown-loading'))) el.remove(); if (isLoading.value) { const loadingEl = document.createElement('div'); loadingEl.className = 'dropdown-loading'; loadingEl.textContent = 'Loading\\u2026'; listboxEl.prepend(loadingEl); } else if (filteredOptions.value.length === 0) { if (creatableLabel.value) { const createEl = document.createElement('button'); createEl.type = 'button'; createEl.className = 'no-results-create'; createEl.textContent = `Create \"${creatableLabel.value}\"`; // Apply focused state when keyboard nav lands here (focusedIndex === -1 means create row) if (focusedIndex.value === -1) createEl.setAttribute('data-focused', ''); createEl.addEventListener('pointerdown', (e: PointerEvent) => { e.preventDefault(); }); createEl.addEventListener('click', (e) => { e.stopPropagation(); createOption(creatableLabel.value, e); }); listboxEl.appendChild(createEl); } else { const noResults = document.createElement('div'); noResults.className = 'no-results'; noResults.setAttribute('role', 'presentation'); noResults.textContent = 'No results found'; listboxEl.appendChild(noResults); } } // Update focused/selected state on already-rendered items without touching // the DOM structure. The virtualizer owns full re-renders via onChange. updateRenderedItemState(); } }); // Keep rendered option selected/focused attributes in sync while the popup stays open. watch( [isOpen, props.multiple, focusedIndex, selectedValues, selectedValue], () => { if (!isOpen.value) return; updateRenderedItemState(); }, { immediate: true }, ); return () => { domVirtualList.destroy(); positioner.destroy(); removeOutsideClick(); }; }); return html` <slot></slot> <div class=\"combobox-wrapper\" part=\"wrapper\"> <label class=\"label-outside\" for=\"${comboId}\" id=\"${labelId}\" ref=${labelOutsideRef} hidden part=\"label\"></label> <div class=\"field\" part=\"field\" @click=\"${() => { if (!isOpen.value) open(false, 'trigger'); focusLiveInput(); }}\"> <label class=\"label-inset\" for=\"${comboId}\" id=\"${labelId}\" ref=${labelInsetRef} hidden part=\"label\"></label> <div class=\"field-row\"> <div class=\"chips-row\"> <!-- Keep chip list diffing isolated so input node identity stays stable. --> <span class=\"chips-list\"> ${() => (isMultiple.value ? selectedValues.value : []).map( (item) => html` <bit-chip value=${item.value} aria-label=${item.label || item.value} mode=\"removable\" variant=\"flat\" size=\"sm\" color=${() => props.color.value} @remove=${removeChip}> ${item.label || item.value} </bit-chip> `, )} </span> <input ref=${(el: HTMLInputElement | null) => { inputEl = el; if (!el) { fieldEl = null; return; } fieldEl = el.closest('.field') as HTMLElement | null; aria(el, { activedescendant: () => (focusedIndex.value >= 0 ? `${comboId}-opt-${focusedIndex.value}` : null), autocomplete: 'list', controls: () => `${comboId}-listbox`, describedby: () => (props.error.value || props.helper.value ? helperId : null), disabled: () => isDisabled.value, expanded: () => (isOpen.value ? 'true' : 'false'), invalid: () => !!props.error.value, labelledby: () => (hasLabel.value ? labelId : null), }); }} class=\"input\" part=\"input\" type=\"text\" role=\"combobox\" autocomplete=\"off\" spellcheck=\"false\" id=\"${comboId}\" name=\"${() => props.name.value}\" placeholder=${() => inputPlaceholder.value} :disabled=\"${() => isDisabled.value}\" @input=${handleInput} @keydown=${handleKeydown} @focus=${handleFocus} .value=${query} /> </div> <button class=\"clear-btn\" part=\"clear-btn\" type=\"button\" aria-label=\"Clear\" tabindex=\"-1\" ?hidden=${() => !hasValue.value} @click=\"${clearValue}\"> ${clearIcon} </button> <span class=\"chevron\" aria-hidden=\"true\"> ${chevronDownIcon} <span class=\"loader\" aria-label=\"Loading\"></span> </span> </div> </div> <div class=\"dropdown\" part=\"dropdown\" id=\"${() => `${comboId}-dropdown`}\" ?data-open=${() => isOpen.value}> <div role=\"listbox\" id=\"${() => `${comboId}-listbox`}\" aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"></div> </div> <span class=\"helper-text\" id=\"${helperId}\" part=\"helper-text\" aria-live=\"polite\" ?hidden=${() => assistiveText.value.hidden} style=${() => (assistiveText.value.isError ? 'color: var(--color-error);' : '')} >${() => assistiveText.value.text}</span > </div> `; }, shadow: { delegatesFocus: true }, styles: [ sizeVariantMixin(FIELD_SIZE_PRESET), ...formFieldMixins, disabledLoadingMixin(), forcedColorsFocusMixin('.input'), componentStyles, ], tag: 'bit-combobox', }) as unknown",
+          "description": "`bit-combobox` — Autocomplete/combobox text input with a filterable listbox.\n\nPlace `<bit-combobox-option>` elements as children to define the available options.\nEach option supports a `label` attribute (falls back to text content) and an `icon` named slot."
+        },
+        {
+          "kind": "variable",
+          "name": "value"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BitComboboxEvents",
+          "declaration": {
+            "name": "BitComboboxEvents",
+            "module": "./combobox.types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BitComboboxOptionProps",
+          "declaration": {
+            "name": "BitComboboxOptionProps",
+            "module": "./combobox.types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BitComboboxProps",
+          "declaration": {
+            "name": "BitComboboxProps",
+            "module": "./combobox.types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COMBOBOX_OPTION_TAG",
+          "declaration": {
+            "name": "COMBOBOX_OPTION_TAG",
+            "module": "src/inputs/combobox/combobox.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COMBOBOX_TAG",
+          "declaration": {
+            "name": "COMBOBOX_TAG",
+            "module": "src/inputs/combobox/combobox.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/combobox/combobox.types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/file-input/file-input.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FILE_INPUT_TAG",
+          "description": "A file upload component with drag-and-drop support, file list management,\nand full form integration."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FILE_INPUT_TAG",
+          "declaration": {
+            "name": "FILE_INPUT_TAG",
+            "module": "src/inputs/file-input/file-input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/form/form.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FORM_TAG",
+          "description": "`bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\ncontext to all child `bit-*` form fields. Intercepts submit/reset events."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FORM_TAG",
+          "declaration": {
+            "name": "FORM_TAG",
+            "module": "src/inputs/form/form.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/input/input.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "INPUT_TAG",
+          "description": "A customizable text input component with multiple variants, label placements, and form features."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "INPUT_TAG",
+          "declaration": {
+            "name": "INPUT_TAG",
+            "module": "src/inputs/input/input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/number-input/number-input.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "NUMBER_INPUT_TAG",
+          "description": "A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NUMBER_INPUT_TAG",
+          "declaration": {
+            "name": "NUMBER_INPUT_TAG",
+            "module": "src/inputs/number-input/number-input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/otp-input/otp-input.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "OTP_INPUT_TAG",
+          "description": "A segmented OTP (One-Time Password) input with N individual cells.\nAuto-advances focus on input, auto-backs on Backspace, handles paste."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "OTP_INPUT_TAG",
+          "declaration": {
+            "name": "OTP_INPUT_TAG",
+            "module": "src/inputs/otp-input/otp-input.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/radio/radio.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "RADIO_TAG",
+          "description": "A customizable radio button component for mutually exclusive selections."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RADIO_TAG",
+          "declaration": {
+            "name": "RADIO_TAG",
+            "module": "src/inputs/radio/radio.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/radio-group/radio-group.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "RADIO_GROUP_CTX"
+        },
+        {
+          "kind": "variable",
+          "name": "RADIO_GROUP_TAG",
+          "description": "A fieldset wrapper that groups `bit-radio` elements, provides shared\n`name`, `color`, and `size` via context, and manages roving tabindex\nkeyboard navigation."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RADIO_GROUP_CTX",
+          "declaration": {
+            "name": "RADIO_GROUP_CTX",
+            "module": "src/inputs/radio-group/radio-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RADIO_GROUP_TAG",
+          "declaration": {
+            "name": "RADIO_GROUP_TAG",
+            "module": "src/inputs/radio-group/radio-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/rating/rating.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "RATING_TAG",
+          "description": "A star rating input."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RATING_TAG",
+          "declaration": {
+            "name": "RATING_TAG",
+            "module": "src/inputs/rating/rating.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/select/select.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SELECT_TAG",
+          "description": "A fully custom form-associated select dropdown with keyboard navigation and ARIA support.\nReads `<option>` and `<optgroup>` children from the default slot."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SELECT_TAG",
+          "declaration": {
+            "name": "SELECT_TAG",
+            "module": "src/inputs/select/select.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/base-props.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/design-presets.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FIELD_SIZE_PRESET",
+          "type": {
+            "text": "{\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n}"
+          },
+          "default": "{ lg: { '--_field-height': 'var(--size-12)', '--_padding': 'var(--size-2-5) var(--size-3-5)', fontSize: 'var(--text-base)', gap: 'var(--size-2-5)', }, md: { '--_field-height': 'var(--size-10)', '--_padding': 'var(--size-1-5) var(--size-3)', fontSize: 'var(--text-sm)', gap: 'var(--size-2)', }, sm: { '--_field-height': 'var(--size-8)', '--_padding': 'var(--size-1) var(--size-2)', fontSize: 'var(--text-xs)', gap: 'var(--size-1-5)', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TEXTAREA_SIZE_PRESET",
+          "type": {
+            "text": "{\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n}"
+          },
+          "default": "{ lg: { '--_padding': 'var(--size-2-5) var(--size-3-5)', fontSize: 'var(--text-base)', gap: 'var(--size-2-5)', }, md: { '--_padding': 'var(--size-1-5) var(--size-3)', fontSize: 'var(--text-sm)', gap: 'var(--size-2)', }, sm: { '--_padding': 'var(--size-1) var(--size-2)', fontSize: 'var(--text-xs)', gap: 'var(--size-1-5)', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "CONTROL_SIZE_PRESET",
+          "type": {
+            "text": "{\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n}"
+          },
+          "default": "{ lg: { fontSize: 'var(--text-base)', gap: 'var(--size-2-5)', size: 'var(--size-6)', }, sm: { fontSize: 'var(--text-xs)', gap: 'var(--size-1-5)', size: 'var(--size-4)', }, }",
+          "description": "Shared size preset for checkbox and radio (icon + label layout)."
+        },
+        {
+          "kind": "variable",
+          "name": "SWITCH_SIZE_PRESET",
+          "type": {
+            "text": "{\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n}"
+          },
+          "default": "{ lg: { fontSize: 'var(--text-base)', gap: 'var(--size-3)', height: 'var(--size-7)', thumbSize: 'var(--size-6)', width: 'var(--size-14)', }, sm: { fontSize: 'var(--text-xs)', gap: 'var(--size-2)', height: 'var(--size-5)', thumbSize: 'var(--size-4)', width: 'var(--size-9)', }, }",
+          "description": "Shared size preset for the switch toggle control."
+        },
+        {
+          "kind": "variable",
+          "name": "SLIDER_SIZE_PRESET",
+          "type": {
+            "text": "{\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n}"
+          },
+          "default": "{ lg: { fontSize: 'var(--text-base)', height: 'calc(var(--size-5) - var(--size-1))', size: 'var(--size-5)', }, md: { fontSize: 'var(--text-base)', height: 'var(--size-3)', size: 'var(--size-5)', }, sm: { fontSize: 'var(--text-xs)', height: 'var(--size-2)', size: 'var(--size-4)', }, }",
+          "description": "Shared size preset for the slider track/thumb."
+        },
+        {
+          "kind": "variable",
+          "name": "FILE_INPUT_SIZE_PRESET",
+          "type": {
+            "text": "{\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n}"
+          },
+          "default": "{ lg: { '--_min-height': 'var(--size-40)', fontSize: 'var(--text-base)', }, sm: { '--_min-height': 'var(--size-28)', fontSize: 'var(--text-xs)', }, }",
+          "description": "Shared size preset for the file-input dropzone."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FIELD_SIZE_PRESET",
+          "declaration": {
+            "name": "FIELD_SIZE_PRESET",
+            "module": "src/inputs/shared/design-presets.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TEXTAREA_SIZE_PRESET",
+          "declaration": {
+            "name": "TEXTAREA_SIZE_PRESET",
+            "module": "src/inputs/shared/design-presets.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CONTROL_SIZE_PRESET",
+          "declaration": {
+            "name": "CONTROL_SIZE_PRESET",
+            "module": "src/inputs/shared/design-presets.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SWITCH_SIZE_PRESET",
+          "declaration": {
+            "name": "SWITCH_SIZE_PRESET",
+            "module": "src/inputs/shared/design-presets.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SLIDER_SIZE_PRESET",
+          "declaration": {
+            "name": "SLIDER_SIZE_PRESET",
+            "module": "src/inputs/shared/design-presets.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FILE_INPUT_SIZE_PRESET",
+          "declaration": {
+            "name": "FILE_INPUT_SIZE_PRESET",
+            "module": "src/inputs/shared/design-presets.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/form-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FORM_CTX"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FORM_CTX",
+          "declaration": {
+            "name": "FORM_CTX",
+            "module": "src/inputs/shared/form-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/slider/slider.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SLIDER_TAG",
+          "description": "A slider for selecting a single numeric value or a numeric range.\n\nAdd the boolean `range` attribute to activate two-thumb range mode."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SLIDER_TAG",
+          "declaration": {
+            "name": "SLIDER_TAG",
+            "module": "src/inputs/slider/slider.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/switch/switch.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SWITCH_TAG",
+          "description": "A toggle switch component for binary on/off states."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SWITCH_TAG",
+          "declaration": {
+            "name": "SWITCH_TAG",
+            "module": "src/inputs/switch/switch.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/textarea/textarea.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TEXTAREA_TAG",
+          "description": "A multi-line text input with label, helper text, character counter, and auto-resize."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TEXTAREA_TAG",
+          "declaration": {
+            "name": "TEXTAREA_TAG",
+            "module": "src/inputs/textarea/textarea.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/box/box.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BOX_TAG",
+          "description": "bit-box — A foundational layout primitive with theming support."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BOX_TAG",
+          "declaration": {
+            "name": "BOX_TAG",
+            "module": "src/layout/box/box.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/grid/grid.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "GRID_TAG",
+          "description": "bit-grid — Flexible grid layout with responsive column control.\n\nColumns are computed in JS and applied as `--_cols` inline, so they respond\nto the element's own width via ResizeObserver. CSS custom properties\n`--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\nare honoured as fallbacks when no attribute is set."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GRID_TAG",
+          "declaration": {
+            "name": "GRID_TAG",
+            "module": "src/layout/grid/grid.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/grid-item/grid-item.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "GRID_ITEM_TAG",
+          "description": "bit-grid-item — A grid cell with declarative placement and span control.\n\nUse `col-span` / `row-span` for the common case of spanning columns/rows.\nUse `col` / `row` for full CSS grid-column / grid-row shorthand power\n(e.g. explicit placement, mixed span + start, negative lines)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GRID_ITEM_TAG",
+          "declaration": {
+            "name": "GRID_ITEM_TAG",
+            "module": "src/layout/grid-item/grid-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/sidebar/sidebar.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "SIDEBAR_CTX",
+          "description": "Injection key for the sidebar context."
+        },
+        {
+          "kind": "variable",
+          "name": "SIDEBAR_TAG",
+          "description": "`bit-sidebar` — A collapsible navigation sidebar with group and item support."
+        },
+        {
+          "kind": "variable",
+          "name": "SIDEBAR_GROUP_TAG",
+          "description": "`bit-sidebar-group` — A labelled section within `bit-sidebar`."
+        },
+        {
+          "kind": "variable",
+          "name": "SIDEBAR_ITEM_TAG",
+          "description": "`bit-sidebar-item` — An individual navigation item in a `bit-sidebar`.\n\nRenders as an `<a>` when `href` is provided, otherwise as a `<button>`.\nMarks the active page via `aria-current=\"page\"` when the `active` attribute is set."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SIDEBAR_CTX",
+          "declaration": {
+            "name": "SIDEBAR_CTX",
+            "module": "src/layout/sidebar/sidebar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SIDEBAR_TAG",
+          "declaration": {
+            "name": "SIDEBAR_TAG",
+            "module": "src/layout/sidebar/sidebar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SIDEBAR_GROUP_TAG",
+          "declaration": {
+            "name": "SIDEBAR_GROUP_TAG",
+            "module": "src/layout/sidebar/sidebar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SIDEBAR_ITEM_TAG",
+          "declaration": {
+            "name": "SIDEBAR_ITEM_TAG",
+            "module": "src/layout/sidebar/sidebar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/overlay/dialog/dialog.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DIALOG_TAG",
+          "description": "A modal dialog that traps focus, blocks page interaction, and dismisses on\n`Escape`. Built on the native `<dialog>` element for correct top-layer stacking\nand browser-managed accessibility."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DIALOG_TAG",
+          "declaration": {
+            "name": "DIALOG_TAG",
+            "module": "src/overlay/dialog/dialog.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/overlay/drawer/drawer.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DRAWER_TAG",
+          "description": "A panel that slides in from any edge of the screen, built on the native `<dialog>` element."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DRAWER_TAG",
+          "declaration": {
+            "name": "DRAWER_TAG",
+            "module": "src/overlay/drawer/drawer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/overlay/menu/menu.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "MENU_ITEM_TAG"
+        },
+        {
+          "kind": "variable",
+          "name": "SEPARATOR_TAG"
+        },
+        {
+          "kind": "variable",
+          "name": "MENU_TAG",
+          "default": "defineComponent<BitMenuProps, BitMenuEvents>({ props: { color: { default: undefined }, disabled: { default: false }, placement: { default: 'bottom-start' }, size: { default: undefined }, }, setup({ emit, host, props }) { const menuId = createId('menu'); const isOpen = signal(false); let triggerEl: HTMLElement | null = null; let panelEl: HTMLElement | null = null; // ── Helpers ─────────────────────────────────────────────────────────────── function getItems(): HTMLElement[] { return Array.from(host.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])')); } let focusedIndex = -1; const listNavigation = createListNavigation<HTMLElement>({ getIndex: () => focusedIndex, getItems, isItemDisabled: (item) => item.hasAttribute('disabled'), setIndex: (index) => { focusedIndex = index; getItems()[index]?.focus(); }, }); function updatePosition() { if (!panelEl || !triggerEl) return; positionFloat(triggerEl, panelEl, { middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })], placement: props.placement.value, }); } const overlay = createOverlayControl({ getBoundaryElement: () => host, getPanelElement: () => panelEl, getTriggerElement: () => triggerEl, isDisabled: () => Boolean(props.disabled.value), isOpen: () => isOpen.value, onClose: (reason) => emit('close', { reason }), onOpen: (reason) => emit('open', { reason }), positioner: { floating: () => panelEl, reference: () => triggerEl, update: updatePosition, }, setOpen: (next) => { isOpen.value = next; if (!next) listNavigation.reset(); }, }); const activateItem = (item: HTMLElement): void => { const type = item.getAttribute('type'); if (type === 'checkbox') { const next = !item.hasAttribute('checked'); if (next) item.setAttribute('checked', ''); else item.removeAttribute('checked'); } else if (type === 'radio') { for (const radio of host.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) { radio.removeAttribute('checked'); } item.setAttribute('checked', ''); } const value = item.getAttribute('value') ?? ''; const checked = type === 'checkbox' || type === 'radio' ? item.hasAttribute('checked') : undefined; emit('select', { checked, value }); if (type !== 'checkbox' && type !== 'radio') { overlay.close({ reason: 'programmatic' }); } }; // ── Keyboard Navigation ─────────────────────────────────────────────────── function handleMenuKeydown(e: KeyboardEvent) { const open = isOpen.value; // When closed: open on Enter / Space / ArrowDown if (!open) { if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') { e.preventDefault(); overlay.open(); requestAnimationFrame(() => listNavigation.first()); } return; } // When open: navigate and activate switch (e.key) { case ' ': { e.preventDefault(); const focused = listNavigation.getActiveItem(); if (focused) activateItem(focused); break; } case 'ArrowDown': e.preventDefault(); listNavigation.next(); break; case 'ArrowUp': e.preventDefault(); listNavigation.prev(); break; case 'End': e.preventDefault(); listNavigation.last(); break; case 'Enter': { e.preventDefault(); const focused = listNavigation.getActiveItem(); if (focused) activateItem(focused); break; } case 'Escape': e.preventDefault(); overlay.close({ reason: 'escape' }); break; case 'Home': e.preventDefault(); listNavigation.first(); break; case 'Tab': overlay.close({ reason: 'programmatic' }); break; } } // ── Lifecycle ───────────────────────────────────────────────────────────── onMount(() => { const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]'); panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null; let prevTriggerEl: HTMLElement | null = null; function resolveTrigger() { if (prevTriggerEl) { prevTriggerEl.removeEventListener('click', toggleMenu); prevTriggerEl.removeEventListener('keydown', handleMenuKeydown); } const assigned = triggerSlot?.assignedElements({ flatten: true }); triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null; prevTriggerEl = triggerEl; if (triggerEl) { aria(triggerEl, { controls: () => menuId, disabled: () => props.disabled.value, expanded: () => (isOpen.value ? 'true' : 'false'), haspopup: 'menu', }); triggerEl.addEventListener('click', toggleMenu); triggerEl.addEventListener('keydown', handleMenuKeydown); } } function toggleMenu() { overlay.toggle(); } onSlotChange('trigger', resolveTrigger); // Item activation via click handle(host, 'click', ((e: Event) => { if (!isOpen.value) return; const me = e as MouseEvent; const path = me.composedPath(); const itemFromPath = path.find( (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM', ); const item = itemFromPath ?? (me.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null; if (!item || item.hasAttribute('disabled')) return; activateItem(item); }) as EventListener); const removeOutsideClick = overlay.bindOutsideClick(document); effect(() => { panelEl?.toggleAttribute('data-open', isOpen.value); }); handle(panelEl, 'keydown', handleMenuKeydown as EventListener); return () => { removeOutsideClick(); if (prevTriggerEl) { prevTriggerEl.removeEventListener('click', toggleMenu); prevTriggerEl.removeEventListener('keydown', handleMenuKeydown); } }; }); return html` <style> ${componentStyles}${themeStyles} </style> <slot name=\"trigger\"></slot> <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\"> <slot></slot> </div> `; }, tag: 'bit-menu', }) as unknown",
+          "description": "`bit-menu` — Action dropdown menu triggered by a slotted trigger element.\nNest `<bit-menu-item>` elements inside for menu options."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MENU_ITEM_TAG",
+          "declaration": {
+            "name": "MENU_ITEM_TAG",
+            "module": "src/overlay/menu/menu.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SEPARATOR_TAG",
+          "declaration": {
+            "name": "SEPARATOR_TAG",
+            "module": "src/overlay/menu/menu.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MENU_TAG",
+          "declaration": {
+            "name": "MENU_TAG",
+            "module": "src/overlay/menu/menu.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/overlay/popover/popover.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "POPOVER_TAG",
+          "description": "A floating informational or interactive panel anchored to a trigger element.\nUnlike tooltips, popovers support arbitrary interactive content via slots."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "POPOVER_TAG",
+          "declaration": {
+            "name": "POPOVER_TAG",
+            "module": "src/overlay/popover/popover.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/overlay/tooltip/tooltip.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TOOLTIP_TAG",
+          "description": "A lightweight tooltip shown on hover/focus/click relative to the slotted trigger."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TOOLTIP_TAG",
+          "declaration": {
+            "name": "TOOLTIP_TAG",
+            "module": "src/overlay/tooltip/tooltip.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/composables/use-text-field.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "useTextField",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "TextFieldBaseProps"
+              }
+            },
+            {
+              "name": "fieldPrefix",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "useTextField",
+          "declaration": {
+            "name": "useTextField",
+            "module": "src/inputs/shared/composables/use-text-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/composables/use-toggle-field.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "useToggleField",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "ToggleFieldBaseProps"
+              },
+              "description": "Component props object with `disabled`, `value`, and `checked`"
+            },
+            {
+              "name": "onExtraReset",
+              "optional": true,
+              "type": {
+                "text": "() => void"
+              },
+              "description": "Optional callback invoked alongside the field reset (e.g. to reset `indeterminateSignal`)"
+            }
+          ],
+          "description": "Shared setup for toggle-style form fields (checkbox, switch)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "useToggleField",
+          "declaration": {
+            "name": "useToggleField",
+            "module": "src/inputs/shared/composables/use-toggle-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/dom-sync/dropdown.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createDropdownPositioner",
+          "parameters": [
+            {
+              "name": "getReferenceEl",
+              "type": {
+                "text": "() => HTMLElement | null"
+              }
+            },
+            {
+              "name": "getFloatingEl",
+              "type": {
+                "text": "() => HTMLElement | null"
+              }
+            },
+            {
+              "name": "{ padding = 6 }",
+              "default": "{}",
+              "type": {
+                "text": "{ padding?: number }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createDropdownPositioner",
+          "declaration": {
+            "name": "createDropdownPositioner",
+            "module": "src/inputs/shared/dom-sync/dropdown.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/dom-sync/field-sync.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "syncCounter",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "config",
+              "type": {
+                "text": "CounterConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "syncSplitAssistive",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "config",
+              "type": {
+                "text": "SplitAssistiveConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "syncMergedAssistive",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "config",
+              "type": {
+                "text": "MergedAssistiveConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "setupFieldEvents",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLInputElement | HTMLTextAreaElement | null | undefined"
+              }
+            },
+            {
+              "name": "handlers",
+              "type": {
+                "text": "FieldEventHandlers"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "syncCounter",
+          "declaration": {
+            "name": "syncCounter",
+            "module": "src/inputs/shared/dom-sync/field-sync.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "syncSplitAssistive",
+          "declaration": {
+            "name": "syncSplitAssistive",
+            "module": "src/inputs/shared/dom-sync/field-sync.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "syncMergedAssistive",
+          "declaration": {
+            "name": "syncMergedAssistive",
+            "module": "src/inputs/shared/dom-sync/field-sync.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "setupFieldEvents",
+          "declaration": {
+            "name": "setupFieldEvents",
+            "module": "src/inputs/shared/dom-sync/field-sync.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/dom-sync/form-context.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mountFormContextSync",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "name": "formCtx",
+              "type": {
+                "text": "FormContext | undefined"
+              }
+            },
+            {
+              "name": "props",
+              "type": {
+                "text": "FormContextSyncProps"
+              }
+            }
+          ],
+          "description": "Propagates form context `disabled`, `size`, and optionally `variant` to the\nhost element's attributes. Call this in setup or inside an `onMount` callback.\n\n- `disabled` is tracked with a flag so that context-driven removal only\n  clears the attribute when it was set by the context (not by the component).\n- `size` and `variant` are only applied when the component's own prop is unset,\n  and removed when the context value disappears to prevent stale attributes."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mountFormContextSync",
+          "declaration": {
+            "name": "mountFormContextSync",
+            "module": "src/inputs/shared/dom-sync/form-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/dom-sync/label-sync.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mountLabelSyncStandalone",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "labelInsetRef",
+              "type": {
+                "text": "{ value: HTMLElement | null | undefined }"
+              }
+            },
+            {
+              "name": "labelOutsideRef",
+              "type": {
+                "text": "{ value: HTMLElement | null | undefined }"
+              }
+            },
+            {
+              "name": "props",
+              "type": {
+                "text": "LabelSyncProps"
+              }
+            }
+          ],
+          "description": "Reactively synchronises label text and visibility for components that manage\ntheir own `labelInsetRef` / `labelOutsideRef` refs (e.g. select, combobox).\nCall inside `onMount` once DOM refs are ready."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mountLabelSyncStandalone",
+          "declaration": {
+            "name": "mountLabelSyncStandalone",
+            "module": "src/inputs/shared/dom-sync/label-sync.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/utils/assistive-text.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "resolveCounterState",
+          "return": {
+            "type": {
+              "text": "CounterState"
+            }
+          },
+          "parameters": [
+            {
+              "name": "length",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number | null"
+              }
+            }
+          ],
+          "description": "Shared counter-state thresholds for text controls with maxlength support."
+        },
+        {
+          "kind": "function",
+          "name": "resolveSplitAssistiveText",
+          "return": {
+            "type": {
+              "text": "SplitAssistiveState"
+            }
+          },
+          "parameters": [
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "helper",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ],
+          "description": "Split helper/error state for controls that render separate helper and error elements (input)."
+        },
+        {
+          "kind": "function",
+          "name": "resolveMergedAssistiveText",
+          "return": {
+            "type": {
+              "text": "MergedAssistiveState"
+            }
+          },
+          "parameters": [
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "helper",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ],
+          "description": "Merged helper/error state for controls that render one assistive text element (textarea)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "resolveCounterState",
+          "declaration": {
+            "name": "resolveCounterState",
+            "module": "src/inputs/shared/utils/assistive-text.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveSplitAssistiveText",
+          "declaration": {
+            "name": "resolveSplitAssistiveText",
+            "module": "src/inputs/shared/utils/assistive-text.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveMergedAssistiveText",
+          "declaration": {
+            "name": "resolveMergedAssistiveText",
+            "module": "src/inputs/shared/utils/assistive-text.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/utils/choice-change.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "createChoiceChangeDetail",
+          "return": {
+            "type": {
+              "text": "ChoiceChangeDetail"
+            }
+          },
+          "parameters": [
+            {
+              "name": "values",
+              "type": {
+                "text": "string[]"
+              }
+            },
+            {
+              "name": "labels",
+              "type": {
+                "text": "string[]"
+              }
+            },
+            {
+              "name": "originalEvent",
+              "optional": true,
+              "type": {
+                "text": "Event"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createChoiceChangeDetail",
+          "declaration": {
+            "name": "createChoiceChangeDetail",
+            "module": "src/inputs/shared/utils/choice-change.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/utils/controlled-csv.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "computeControlledCsvState",
+          "return": {
+            "type": {
+              "text": "ControlledCsvState"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "computeControlledCsvState",
+          "declaration": {
+            "name": "computeControlledCsvState",
+            "module": "src/inputs/shared/utils/controlled-csv.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/inputs/shared/utils/field-values.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseCsvValues",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ],
+          "description": "Parse comma-separated values used by multi-select style controls."
+        },
+        {
+          "kind": "function",
+          "name": "parsePositiveNumber",
+          "return": {
+            "type": {
+              "text": "number | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "unknown"
+              }
+            }
+          ],
+          "description": "Parse positive numeric values from optional component props."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseCsvValues",
+          "declaration": {
+            "name": "parseCsvValues",
+            "module": "src/inputs/shared/utils/field-values.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "parsePositiveNumber",
+          "declaration": {
+            "name": "parsePositiveNumber",
+            "module": "src/inputs/shared/utils/field-values.ts"
+          }
+        }
+      ]
+    }
+  ]
+}