@vielzeug/buildit 2.0.0

package/dist/menu.js

@@ -0,0 +1,296 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import { e as i } from "./craftit/dist/labs/list.js";
+import { t as a } from "./craftit/dist/labs/overlay.js";
+import "./craftit/dist/labs.js";
+import o from "./overlay/menu/menu.css?inline.js";
+import { aria as s, computed as c, createId as l, css as u, defineComponent as d, effect as f, handle as p, html as m, onMount as h, onSlotChange as g, signal as _ } from "@vielzeug/craftit";
+import { flip as v, offset as y, positionFloat as b, shift as x } from "@vielzeug/floatit";
+//#region src/overlay/menu/menu.ts
+var S = u`
+  ${n}
+  ${t}
+  ${r}
+`, C = d({
+	props: {
+		checked: {
+			default: !1,
+			type: Boolean
+		},
+		disabled: {
+			default: !1,
+			type: Boolean
+		},
+		type: { default: void 0 },
+		value: { default: void 0 }
+	},
+	setup({ props: t }) {
+		let n = u`
+      @layer buildit.base {
+        :host {
+          display: block;
+          outline: none;
+        }
+
+        .item {
+          align-items: center;
+          border-radius: 0;
+          cursor: pointer;
+          display: flex;
+          font-size: var(--text-sm);
+          gap: var(--size-2);
+          line-height: var(--leading-normal);
+          padding: var(--size-1-5) var(--size-3);
+          transition:
+            background var(--transition-fast),
+            color var(--transition-fast);
+          user-select: none;
+          white-space: nowrap;
+        }
+
+        :host(:first-of-type) .item {
+          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;
+        }
+
+        :host(:last-child) .item {
+          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);
+        }
+
+        :host(:first-of-type:last-child) .item {
+          border-radius: var(--rounded-sm);
+        }
+
+        :host(:not([disabled])) .item:hover {
+          background: var(--color-contrast-100);
+        }
+
+        :host(:focus-visible) .item {
+          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));
+          color: var(--color-primary);
+        }
+
+        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */
+        .item.is-checkable {
+          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));
+        }
+
+        .item.is-checked {
+          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));
+          color: var(--color-primary);
+          font-weight: var(--font-medium);
+        }
+
+        :host([disabled]) .item {
+          color: var(--color-contrast-400);
+          cursor: not-allowed;
+          opacity: 0.6;
+          pointer-events: none;
+        }
+
+        .icon-slot {
+          display: contents;
+        }
+
+        .item-check {
+          align-items: center;
+          color: currentColor;
+          display: inline-flex;
+          flex-shrink: 0;
+          justify-content: center;
+          width: 1.25rem;
+        }
+
+        .item-label {
+          flex: 1;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      ${e}
+    `, r = c(() => t.type.value === "checkbox" || t.type.value === "radio"), i = c(() => r.value && t.checked.value), a = c(() => t.type.value === "checkbox" ? "menuitemcheckbox" : t.type.value === "radio" ? "menuitemradio" : "menuitem"), o = c(() => t.type.value === "checkbox" ? t.checked.value ? "☑" : "☐" : t.type.value === "radio" ? t.checked.value ? "◉" : "◯" : ""), s = c(() => `item${r.value ? " is-checkable" : ""}${i.value ? " is-checked" : ""}`), l = () => m`
+      <span class="item-check" aria-hidden="true">${() => o.value}</span>
+      <span class="icon-slot"><slot name="icon"></slot></span>
+      <span class="item-label"><slot></slot></span>
+    `;
+		return m`
+      <style>
+        ${n}
+      </style>
+      ${() => r.value ? m`
+              <div
+                class="${() => s.value}"
+                tabindex="-1"
+                role="${() => a.value}"
+                aria-checked="${() => String(i.value)}"
+                aria-disabled="${() => String(t.disabled.value)}">
+                ${l()}
+              </div>
+            ` : m`
+              <div
+                class="${() => s.value}"
+                tabindex="-1"
+                role="menuitem"
+                aria-disabled="${() => String(t.disabled.value)}">
+                <span class="icon-slot"><slot name="icon"></slot></span>
+                <span class="item-label"><slot></slot></span>
+              </div>
+            `}
+    `;
+	},
+	tag: "bit-menu-item"
+}), w = d({
+	setup() {
+		return m`<style>
+      @layer buildit.base {
+        :host {
+          display: block;
+          margin: var(--size-1) 0;
+          border-top: var(--border) solid var(--color-contrast-200);
+        }
+      }
+    </style>`;
+	},
+	tag: "bit-menu-separator"
+}), T = d({
+	props: {
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		placement: { default: "bottom-start" },
+		size: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = l("menu"), c = _(!1), u = null, d = null;
+		function C() {
+			return Array.from(t.querySelectorAll("bit-menu-item:not([disabled])"));
+		}
+		let w = -1, T = i({
+			getIndex: () => w,
+			getItems: C,
+			isItemDisabled: (e) => e.hasAttribute("disabled"),
+			setIndex: (e) => {
+				w = e, C()[e]?.focus();
+			}
+		});
+		function E() {
+			!d || !u || b(u, d, {
+				middleware: [
+					y(4),
+					v({ padding: 6 }),
+					x({ padding: 6 })
+				],
+				placement: n.placement.value
+			});
+		}
+		let D = a({
+			getBoundaryElement: () => t,
+			getPanelElement: () => d,
+			getTriggerElement: () => u,
+			isDisabled: () => !!n.disabled.value,
+			isOpen: () => c.value,
+			onClose: (t) => e("close", { reason: t }),
+			onOpen: (t) => e("open", { reason: t }),
+			positioner: {
+				floating: () => d,
+				reference: () => u,
+				update: E
+			},
+			setOpen: (e) => {
+				c.value = e, e || T.reset();
+			}
+		}), O = (n) => {
+			let r = n.getAttribute("type");
+			if (r === "checkbox") n.hasAttribute("checked") ? n.removeAttribute("checked") : n.setAttribute("checked", "");
+			else if (r === "radio") {
+				for (let e of t.querySelectorAll("bit-menu-item[type=\"radio\"]")) e.removeAttribute("checked");
+				n.setAttribute("checked", "");
+			}
+			let i = n.getAttribute("value") ?? "";
+			e("select", {
+				checked: r === "checkbox" || r === "radio" ? n.hasAttribute("checked") : void 0,
+				value: i
+			}), r !== "checkbox" && r !== "radio" && D.close({ reason: "programmatic" });
+		};
+		function k(e) {
+			if (!c.value) {
+				(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), D.open(), requestAnimationFrame(() => T.first()));
+				return;
+			}
+			switch (e.key) {
+				case " ": {
+					e.preventDefault();
+					let t = T.getActiveItem();
+					t && O(t);
+					break;
+				}
+				case "ArrowDown":
+					e.preventDefault(), T.next();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), T.prev();
+					break;
+				case "End":
+					e.preventDefault(), T.last();
+					break;
+				case "Enter": {
+					e.preventDefault();
+					let t = T.getActiveItem();
+					t && O(t);
+					break;
+				}
+				case "Escape":
+					e.preventDefault(), D.close({ reason: "escape" });
+					break;
+				case "Home":
+					e.preventDefault(), T.first();
+					break;
+				case "Tab":
+					D.close({ reason: "programmatic" });
+					break;
+			}
+		}
+		return h(() => {
+			let e = t.shadowRoot?.querySelector("slot[name=\"trigger\"]");
+			d = t.shadowRoot?.querySelector(".menu-panel") ?? null;
+			let i = null;
+			function a() {
+				i && (i.removeEventListener("click", o), i.removeEventListener("keydown", k)), u = e?.assignedElements({ flatten: !0 })?.[0] ?? null, i = u, u && (s(u, {
+					controls: () => r,
+					disabled: () => n.disabled.value,
+					expanded: () => c.value ? "true" : "false",
+					haspopup: "menu"
+				}), u.addEventListener("click", o), u.addEventListener("keydown", k));
+			}
+			function o() {
+				D.toggle();
+			}
+			g("trigger", a), p(t, "click", ((e) => {
+				if (!c.value) return;
+				let t = e, n = t.composedPath().find((e) => e instanceof HTMLElement && e.tagName === "BIT-MENU-ITEM") ?? t.target?.closest("bit-menu-item") ?? null;
+				!n || n.hasAttribute("disabled") || O(n);
+			}));
+			let l = D.bindOutsideClick(document);
+			return f(() => {
+				d?.toggleAttribute("data-open", c.value);
+			}), p(d, "keydown", k), () => {
+				l(), i && (i.removeEventListener("click", o), i.removeEventListener("keydown", k));
+			};
+		}), m`
+      <style>
+        ${o}${S}
+      </style>
+      <slot name="trigger"></slot>
+      <div class="menu-panel" id="${r}" role="menu" aria-orientation="vertical">
+        <slot></slot>
+      </div>
+    `;
+	},
+	tag: "bit-menu"
+});
+//#endregion
+export { C as MENU_ITEM_TAG, T as MENU_TAG, w as SEPARATOR_TAG };
+
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createId,\n  css,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  onMount,\n  onSlotChange,\n  signal,\n} from '@vielzeug/craftit';\nimport {\n  createListNavigation,\n  createOverlayControl,\n  type OverlayOpenReason,\n  type OverlayCloseReason,\n} from '@vielzeug/craftit/labs';\nimport { flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport type { AddEventListeners, ComponentSize, ThemeColor } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type BitMenuItemType = 'checkbox' | 'radio';\n\nexport type BitMenuEvents = {\n  close: { reason: OverlayCloseReason };\n  open: { reason: OverlayOpenReason };\n  select: MenuSelectDetail;\n};\n\nexport type BitMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: BitMenuItemType;\n  value?: string;\n};\n\nexport type BitMenuProps = {\n  color?: ThemeColor;\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ============================================\n// Styles\n// ============================================\n\nimport componentStyles from './menu.css?inline';\n\nconst themeStyles = /* css */ css`\n  ${colorThemeMixin}\n  ${sizeVariantMixin}\n  ${forcedColorsMixin}\n`;\n\n// ============================================\n// Menu Item Component\n// ============================================\n\nexport const MENU_ITEM_TAG = defineComponent<BitMenuItemProps>({\n  props: {\n    checked: { default: false, type: Boolean },\n    disabled: { default: false, type: Boolean },\n    type: { default: undefined },\n    value: { default: undefined },\n  },\n  setup({ props }) {\n    const itemStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: block;\n          outline: none;\n        }\n\n        .item {\n          align-items: center;\n          border-radius: 0;\n          cursor: pointer;\n          display: flex;\n          font-size: var(--text-sm);\n          gap: var(--size-2);\n          line-height: var(--leading-normal);\n          padding: var(--size-1-5) var(--size-3);\n          transition:\n            background var(--transition-fast),\n            color var(--transition-fast);\n          user-select: none;\n          white-space: nowrap;\n        }\n\n        :host(:first-of-type) .item {\n          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n        }\n\n        :host(:last-child) .item {\n          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n        }\n\n        :host(:first-of-type:last-child) .item {\n          border-radius: var(--rounded-sm);\n        }\n\n        :host(:not([disabled])) .item:hover {\n          background: var(--color-contrast-100);\n        }\n\n        :host(:focus-visible) .item {\n          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));\n          color: var(--color-primary);\n        }\n\n        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */\n        .item.is-checkable {\n          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));\n        }\n\n        .item.is-checked {\n          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));\n          color: var(--color-primary);\n          font-weight: var(--font-medium);\n        }\n\n        :host([disabled]) .item {\n          color: var(--color-contrast-400);\n          cursor: not-allowed;\n          opacity: 0.6;\n          pointer-events: none;\n        }\n\n        .icon-slot {\n          display: contents;\n        }\n\n        .item-check {\n          align-items: center;\n          color: currentColor;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          width: 1.25rem;\n        }\n\n        .item-label {\n          flex: 1;\n          min-width: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n      ${coarsePointerMixin}\n    `;\n\n    const isCheckable = computed(() => props.type.value === 'checkbox' || props.type.value === 'radio');\n    const isChecked = computed(() => isCheckable.value && props.checked.value);\n    const itemRole = computed(() => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    });\n    const checkIndicator = computed(() => {\n      if (props.type.value === 'checkbox') return props.checked.value ? '☑' : '☐';\n\n      if (props.type.value === 'radio') return props.checked.value ? '◉' : '◯';\n\n      return '';\n    });\n    const itemClass = computed(\n      () => `item${isCheckable.value ? ' is-checkable' : ''}${isChecked.value ? ' is-checked' : ''}`,\n    );\n    const renderContent = () => html`\n      <span class=\"item-check\" aria-hidden=\"true\">${() => checkIndicator.value}</span>\n      <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n      <span class=\"item-label\"><slot></slot></span>\n    `;\n\n    return html`\n      <style>\n        ${itemStyles}\n      </style>\n      ${() =>\n        isCheckable.value\n          ? html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"${() => itemRole.value}\"\n                aria-checked=\"${() => String(isChecked.value)}\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                ${renderContent()}\n              </div>\n            `\n          : html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"menuitem\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n                <span class=\"item-label\"><slot></slot></span>\n              </div>\n            `}\n    `;\n  },\n  tag: 'bit-menu-item',\n});\n\n// ============================================\n// Menu Separator\n// ============================================\n\nexport const SEPARATOR_TAG = defineComponent({\n  setup() {\n    return html`<style>\n      @layer buildit.base {\n        :host {\n          display: block;\n          margin: var(--size-1) 0;\n          border-top: var(--border) solid var(--color-contrast-200);\n        }\n      }\n    </style>`;\n  },\n  tag: 'bit-menu-separator',\n});\n\n// ============================================\n// Menu Component\n// ============================================\n\n/**\n * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.\n * Nest `<bit-menu-item>` elements inside for menu options.\n *\n * @example\n * ```html\n * <bit-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <bit-menu-item value=\"edit\">Edit</bit-menu-item>\n *   <bit-menu-item value=\"delete\">Delete</bit-menu-item>\n * </bit-menu>\n * ```\n */\nexport const MENU_TAG = defineComponent<BitMenuProps, BitMenuEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    placement: { default: 'bottom-start' },\n    size: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const menuId = createId('menu');\n    const isOpen = signal(false);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(host.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])'));\n    }\n\n    let focusedIndex = -1;\n\n    const listNavigation = createListNavigation<HTMLElement>({\n      getIndex: () => focusedIndex,\n      getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      setIndex: (index) => {\n        focusedIndex = index;\n        getItems()[index]?.focus();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !triggerEl) return;\n\n      positionFloat(triggerEl, panelEl, {\n        middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })],\n        placement: props.placement.value,\n      });\n    }\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => panelEl,\n      getTriggerElement: () => triggerEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isOpen: () => isOpen.value,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => triggerEl,\n        update: updatePosition,\n      },\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n\n      if (type === 'checkbox') {\n        const next = !item.hasAttribute('checked');\n\n        if (next) item.setAttribute('checked', '');\n        else item.removeAttribute('checked');\n      } else if (type === 'radio') {\n        for (const radio of host.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) {\n          radio.removeAttribute('checked');\n        }\n        item.setAttribute('checked', '');\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = type === 'checkbox' || type === 'radio' ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (type !== 'checkbox' && type !== 'radio') {\n        overlay.close({ reason: 'programmatic' });\n      }\n    };\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      const open = isOpen.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          overlay.open();\n          requestAnimationFrame(() => listNavigation.first());\n        }\n\n        return;\n      }\n\n      // When open: navigate and activate\n      switch (e.key) {\n        case ' ': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'ArrowDown':\n          e.preventDefault();\n          listNavigation.next();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          listNavigation.prev();\n          break;\n        case 'End':\n          e.preventDefault();\n          listNavigation.last();\n          break;\n        case 'Enter': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'Escape':\n          e.preventDefault();\n          overlay.close({ reason: 'escape' });\n          break;\n        case 'Home':\n          e.preventDefault();\n          listNavigation.first();\n          break;\n        case 'Tab':\n          overlay.close({ reason: 'programmatic' });\n          break;\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n\n      panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null;\n\n      let prevTriggerEl: HTMLElement | null = null;\n\n      function resolveTrigger() {\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n\n        const assigned = triggerSlot?.assignedElements({ flatten: true });\n\n        triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n        prevTriggerEl = triggerEl;\n\n        if (triggerEl) {\n          aria(triggerEl, {\n            controls: () => menuId,\n            disabled: () => props.disabled.value,\n            expanded: () => (isOpen.value ? 'true' : 'false'),\n            haspopup: 'menu',\n          });\n          triggerEl.addEventListener('click', toggleMenu);\n          triggerEl.addEventListener('keydown', handleMenuKeydown);\n        }\n      }\n\n      function toggleMenu() {\n        overlay.toggle();\n      }\n\n      onSlotChange('trigger', resolveTrigger);\n\n      // Item activation via click\n      handle(host, 'click', ((e: Event) => {\n        if (!isOpen.value) return;\n\n        const me = e as MouseEvent;\n        const path = me.composedPath();\n        const itemFromPath = path.find(\n          (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM',\n        );\n        const item = itemFromPath ?? (me.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null;\n\n        if (!item || item.hasAttribute('disabled')) return;\n\n        activateItem(item);\n      }) as EventListener);\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      effect(() => {\n        panelEl?.toggleAttribute('data-open', isOpen.value);\n      });\n\n      handle(panelEl, 'keydown', handleMenuKeydown as EventListener);\n\n      return () => {\n        removeOutsideClick();\n\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n      };\n    });\n\n    return html`\n      <style>\n        ${componentStyles}${themeStyles}\n      </style>\n      <slot name=\"trigger\"></slot>\n      <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  tag: 'bit-menu',\n}) as unknown as AddEventListeners<BitMenuEvents>;\n"],"mappings":"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"}

package/dist/number-input.cjs

@@ -0,0 +1,55 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/states.css.cjs`);require(`./styles/index.cjs`),require(`./button.cjs`);const t=require(`./icons.cjs`);require(`./input.cjs`);const n=require(`./inputs/number-input/number-input.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({formAssociated:!0,props:{color:{default:void 0},disabled:{default:!1},fullwidth:{default:!1},label:{default:void 0},"label-placement":{default:`inset`},"large-step":{default:void 0},max:{default:void 0},min:{default:void 0},name:{default:void 0},nullable:{default:!1},placeholder:{default:void 0},readonly:{default:!1},size:{default:void 0},step:{default:1},value:{default:void 0},variant:{default:void 0}},setup({emit:e,host:n,props:i}){let a=(0,r.signal)(i.value.value==null?``:String(i.value.value));(0,r.defineField)({disabled:(0,r.computed)(()=>!!i.disabled.value),value:(0,r.computed)(()=>a.value===``?null:a.value)},{onReset:()=>{a.value=i.value.value==null?``:String(i.value.value)}}),(0,r.watch)(i.value,e=>{let t=e==null?``:String(e);a.value!==t&&(a.value=t)});function o(e){let t=i.min.value,n=i.max.value;return t!=null&&e<Number(t)?Number(t):n!=null&&e>Number(n)?Number(n):e}function s(){let e=a.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function c(t,r){let i=t==null?null:o(t);a.value=i==null?``:String(i),i==null?n.removeAttribute(`value`):n.setAttribute(`value`,String(i)),e(`change`,{originalEvent:r,value:i})}function l(e,t){i.disabled.value||i.readonly.value||c((s()??(i.min.value==null?0:Number(i.min.value)))+e,t)}function u(e){if(i.disabled.value||i.readonly.value)return;let t=Number(i.step.value)||1,n=Number(i[`large-step`].value)||t*10;switch(e.key){case`ArrowDown`:e.preventDefault(),l(-t,e);break;case`ArrowUp`:e.preventDefault(),l(t,e);break;case`End`:i.max.value!=null&&(e.preventDefault(),c(Number(i.max.value),e));break;case`Home`:i.min.value!=null&&(e.preventDefault(),c(Number(i.min.value),e));break;case`PageDown`:e.preventDefault(),l(-n,e);break;case`PageUp`:e.preventDefault(),l(n,e);break}}let d=(0,r.computed)(()=>i.min.value!=null&&s()!=null&&s()<=Number(i.min.value)),f=(0,r.computed)(()=>i.max.value!=null&&s()!=null&&s()>=Number(i.max.value));return r.html`
+      <div
+        class="wrapper"
+        role="spinbutton"
+        part="control"
+        :aria-valuenow="${()=>s()??null}"
+        :aria-valuemin="${()=>i.min.value??null}"
+        :aria-valuemax="${()=>i.max.value??null}"
+        :aria-label="${()=>i.label.value||null}"
+        :aria-disabled="${()=>i.disabled.value?`true`:null}"
+        :aria-readonly="${()=>i.readonly.value?`true`:null}"
+        @keydown="${u}">
+        <bit-button
+          icon-only
+          type="button"
+          part="decrement-btn"
+          aria-label="Decrease"
+          variant="ghost"
+          :size="${()=>i.size.value||null}"
+          :color="${()=>i.color.value||null}"
+          ?disabled="${()=>i.disabled.value||i.readonly.value||d.value}"
+          @click="${e=>l(-(Number(i.step.value)||1),e)}"
+          >${t.minusIcon}</bit-button
+        >
+        <bit-input
+          part="input"
+          type="text"
+          inputmode="decimal"
+          aria-hidden="true"
+          :value="${()=>a.value}"
+          :label="${()=>i.label.value||null}"
+          :label-placement="${()=>i[`label-placement`].value}"
+          :placeholder="${()=>i.placeholder.value||null}"
+          :color="${()=>i.color.value||null}"
+          :size="${()=>i.size.value||null}"
+          :variant="${()=>i.variant.value||null}"
+          ?disabled="${()=>i.disabled.value}"
+          ?readonly="${()=>i.readonly.value}"
+          @input="${t=>{let n=t.detail?.value;typeof n==`string`&&(a.value=n,e(`input`,{originalEvent:t.detail?.originalEvent??t,value:s()}))}}"
+          @change="${e=>{let t=e.detail?.value;if(typeof t!=`string`)return;a.value=t;let n=e.detail?.originalEvent??e;c(s(),n)}}"></bit-input>
+        <bit-button
+          icon-only
+          type="button"
+          part="increment-btn"
+          aria-label="Increase"
+          variant="ghost"
+          :size="${()=>i.size.value||null}"
+          :color="${()=>i.color.value||null}"
+          ?disabled="${()=>i.disabled.value||i.readonly.value||f.value}"
+          @click="${e=>l(Number(i.step.value)||1,e)}"
+          >${t.plusIcon}</bit-button
+        >
+      </div>
+    `},styles:[e.disabledStateMixin(),n.default],tag:`bit-number-input`});exports.NUMBER_INPUT_TAG=i;
+//# sourceMappingURL=number-input.cjs.map

package/dist/number-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { computed, defineComponent, defineField, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport { minusIcon, plusIcon } from '../../icons';\nimport { disabledStateMixin } from '../../styles';\n// Ensure child components are registered\nimport '../button/button';\nimport '../input/input';\nimport styles from './number-input.css?inline';\n\nexport type BitNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\n};\n\n/** Number Input props */\nexport type BitNumberInputProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Stretch to full width of container */\n    fullwidth?: boolean;\n    /** Visible label */\n    label?: string;\n    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n    'label-placement'?: 'inset' | 'outside';\n    /** Large step (for Page Up/Down, default: 10 × step) */\n    'large-step'?: number;\n    /** Maximum allowed value */\n    max?: number;\n    /** Minimum allowed value */\n    min?: number;\n    name?: string;\n    /** Allow null/empty value */\n    nullable?: boolean;\n    /** Form field name */\n\n    /** Placeholder text */\n    placeholder?: string;\n    /** Make the input read-only */\n    readonly?: boolean;\n    /** Step size for increment/decrement */\n    step?: number;\n    /** Current numeric value */\n    value?: number;\n    /** Visual variant */\n    variant?: VisualVariant;\n  };\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element bit-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @example\n * ```html\n * <bit-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></bit-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = defineComponent<BitNumberInputProps, BitNumberInputEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    fullwidth: { default: false },\n    label: { default: undefined },\n    'label-placement': { default: 'inset' },\n    'large-step': { default: undefined },\n    max: { default: undefined },\n    min: { default: undefined },\n    name: { default: undefined },\n    nullable: { default: false },\n    placeholder: { default: undefined },\n    readonly: { default: false },\n    size: { default: undefined },\n    step: { default: 1 },\n    value: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const inputValue = signal<string>(props.value.value != null ? String(props.value.value) : '');\n\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        value: computed(() => (inputValue.value !== '' ? inputValue.value : null)),\n      },\n      {\n        onReset: () => {\n          inputValue.value = props.value.value != null ? String(props.value.value) : '';\n        },\n      },\n    );\n    watch(props.value, (v) => {\n      const newVal = v != null ? String(v) : '';\n\n      if (inputValue.value !== newVal) inputValue.value = newVal;\n    });\n    function clamp(n: number): number {\n      const min = props.min.value;\n      const max = props.max.value;\n\n      if (min != null && n < Number(min)) return Number(min);\n\n      if (max != null && n > Number(max)) return Number(max);\n\n      return n;\n    }\n    function parseValue(): number | null {\n      const v = inputValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n    function commit(val: number | null, originalEvent?: Event) {\n      const clamped = val != null ? clamp(val) : null;\n\n      inputValue.value = clamped != null ? String(clamped) : '';\n\n      if (clamped != null) host.setAttribute('value', String(clamped));\n      else host.removeAttribute('value');\n\n      emit('change', { originalEvent, value: clamped });\n    }\n    function increment(delta: number, originalEvent?: Event) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const current = parseValue() ?? (props.min.value != null ? Number(props.min.value) : 0);\n\n      commit(current + delta, originalEvent);\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const step = Number(props.step.value) || 1;\n      const largeStep = Number(props['large-step'].value) || step * 10;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          increment(-step, e);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          increment(step, e);\n          break;\n        case 'End':\n          if (props.max.value != null) {\n            e.preventDefault();\n            commit(Number(props.max.value), e);\n          }\n\n          break;\n        case 'Home':\n          if (props.min.value != null) {\n            e.preventDefault();\n            commit(Number(props.min.value), e);\n          }\n\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          increment(-largeStep, e);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          increment(largeStep, e);\n          break;\n      }\n    }\n\n    const atMin = computed(\n      () => props.min.value != null && parseValue() != null && parseValue()! <= Number(props.min.value),\n    );\n    const atMax = computed(\n      () => props.max.value != null && parseValue() != null && parseValue()! >= Number(props.max.value),\n    );\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"spinbutton\"\n        part=\"control\"\n        :aria-valuenow=\"${() => parseValue() ?? null}\"\n        :aria-valuemin=\"${() => props.min.value ?? null}\"\n        :aria-valuemax=\"${() => props.max.value ?? null}\"\n        :aria-label=\"${() => props.label.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        :aria-readonly=\"${() => (props.readonly.value ? 'true' : null)}\"\n        @keydown=\"${handleKeydown}\">\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMin.value}\"\n          @click=\"${(e: Event) => increment(-(Number(props.step.value) || 1), e)}\"\n          >${minusIcon}</bit-button\n        >\n        <bit-input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          aria-hidden=\"true\"\n          :value=\"${() => inputValue.value}\"\n          :label=\"${() => props.label.value || null}\"\n          :label-placement=\"${() => props['label-placement'].value}\"\n          :placeholder=\"${() => props.placeholder.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          :size=\"${() => props.size.value || null}\"\n          :variant=\"${() => props.variant.value || null}\"\n          ?disabled=\"${() => props.disabled.value}\"\n          ?readonly=\"${() => props.readonly.value}\"\n          @input=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            emit('input', { originalEvent, value: parseValue() });\n          }}\"\n          @change=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            commit(parseValue(), originalEvent);\n          }}\"></bit-input>\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMax.value}\"\n          @click=\"${(e: Event) => increment(Number(props.step.value) || 1, e)}\"\n          >${plusIcon}</bit-button\n        >\n      </div>\n    `;\n  },\n  styles: [disabledStateMixin(), styles],\n  tag: 'bit-number-input',\n});\n"],"mappings":"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"}

package/dist/number-input.js

@@ -0,0 +1,158 @@
+import { disabledStateMixin as e } from "./styles/mixins/states.css.js";
+import "./styles/index.js";
+import "./button.js";
+import { minusIcon as t, plusIcon as n } from "./icons.js";
+import "./input.js";
+import r from "./inputs/number-input/number-input.css?inline.js";
+import { computed as i, defineComponent as a, defineField as o, html as s, signal as c, watch as l } from "@vielzeug/craftit";
+//#region src/inputs/number-input/number-input.ts
+var u = a({
+	formAssociated: !0,
+	props: {
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		fullwidth: { default: !1 },
+		label: { default: void 0 },
+		"label-placement": { default: "inset" },
+		"large-step": { default: void 0 },
+		max: { default: void 0 },
+		min: { default: void 0 },
+		name: { default: void 0 },
+		nullable: { default: !1 },
+		placeholder: { default: void 0 },
+		readonly: { default: !1 },
+		size: { default: void 0 },
+		step: { default: 1 },
+		value: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: r, props: a }) {
+		let u = c(a.value.value == null ? "" : String(a.value.value));
+		o({
+			disabled: i(() => !!a.disabled.value),
+			value: i(() => u.value === "" ? null : u.value)
+		}, { onReset: () => {
+			u.value = a.value.value == null ? "" : String(a.value.value);
+		} }), l(a.value, (e) => {
+			let t = e == null ? "" : String(e);
+			u.value !== t && (u.value = t);
+		});
+		function d(e) {
+			let t = a.min.value, n = a.max.value;
+			return t != null && e < Number(t) ? Number(t) : n != null && e > Number(n) ? Number(n) : e;
+		}
+		function f() {
+			let e = u.value.trim();
+			if (!e) return null;
+			let t = Number.parseFloat(e);
+			return Number.isNaN(t) ? null : t;
+		}
+		function p(t, n) {
+			let i = t == null ? null : d(t);
+			u.value = i == null ? "" : String(i), i == null ? r.removeAttribute("value") : r.setAttribute("value", String(i)), e("change", {
+				originalEvent: n,
+				value: i
+			});
+		}
+		function m(e, t) {
+			a.disabled.value || a.readonly.value || p((f() ?? (a.min.value == null ? 0 : Number(a.min.value))) + e, t);
+		}
+		function h(e) {
+			if (a.disabled.value || a.readonly.value) return;
+			let t = Number(a.step.value) || 1, n = Number(a["large-step"].value) || t * 10;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), m(-t, e);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), m(t, e);
+					break;
+				case "End":
+					a.max.value != null && (e.preventDefault(), p(Number(a.max.value), e));
+					break;
+				case "Home":
+					a.min.value != null && (e.preventDefault(), p(Number(a.min.value), e));
+					break;
+				case "PageDown":
+					e.preventDefault(), m(-n, e);
+					break;
+				case "PageUp":
+					e.preventDefault(), m(n, e);
+					break;
+			}
+		}
+		let g = i(() => a.min.value != null && f() != null && f() <= Number(a.min.value)), _ = i(() => a.max.value != null && f() != null && f() >= Number(a.max.value));
+		return s`
+      <div
+        class="wrapper"
+        role="spinbutton"
+        part="control"
+        :aria-valuenow="${() => f() ?? null}"
+        :aria-valuemin="${() => a.min.value ?? null}"
+        :aria-valuemax="${() => a.max.value ?? null}"
+        :aria-label="${() => a.label.value || null}"
+        :aria-disabled="${() => a.disabled.value ? "true" : null}"
+        :aria-readonly="${() => a.readonly.value ? "true" : null}"
+        @keydown="${h}">
+        <bit-button
+          icon-only
+          type="button"
+          part="decrement-btn"
+          aria-label="Decrease"
+          variant="ghost"
+          :size="${() => a.size.value || null}"
+          :color="${() => a.color.value || null}"
+          ?disabled="${() => a.disabled.value || a.readonly.value || g.value}"
+          @click="${(e) => m(-(Number(a.step.value) || 1), e)}"
+          >${t}</bit-button
+        >
+        <bit-input
+          part="input"
+          type="text"
+          inputmode="decimal"
+          aria-hidden="true"
+          :value="${() => u.value}"
+          :label="${() => a.label.value || null}"
+          :label-placement="${() => a["label-placement"].value}"
+          :placeholder="${() => a.placeholder.value || null}"
+          :color="${() => a.color.value || null}"
+          :size="${() => a.size.value || null}"
+          :variant="${() => a.variant.value || null}"
+          ?disabled="${() => a.disabled.value}"
+          ?readonly="${() => a.readonly.value}"
+          @input="${(t) => {
+			let n = t.detail?.value;
+			typeof n == "string" && (u.value = n, e("input", {
+				originalEvent: t.detail?.originalEvent ?? t,
+				value: f()
+			}));
+		}}"
+          @change="${(e) => {
+			let t = e.detail?.value;
+			if (typeof t != "string") return;
+			u.value = t;
+			let n = e.detail?.originalEvent ?? e;
+			p(f(), n);
+		}}"></bit-input>
+        <bit-button
+          icon-only
+          type="button"
+          part="increment-btn"
+          aria-label="Increase"
+          variant="ghost"
+          :size="${() => a.size.value || null}"
+          :color="${() => a.color.value || null}"
+          ?disabled="${() => a.disabled.value || a.readonly.value || _.value}"
+          @click="${(e) => m(Number(a.step.value) || 1, e)}"
+          >${n}</bit-button
+        >
+      </div>
+    `;
+	},
+	styles: [e(), r],
+	tag: "bit-number-input"
+});
+//#endregion
+export { u as NUMBER_INPUT_TAG };
+
+//# sourceMappingURL=number-input.js.map

package/dist/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { computed, defineComponent, defineField, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport { minusIcon, plusIcon } from '../../icons';\nimport { disabledStateMixin } from '../../styles';\n// Ensure child components are registered\nimport '../button/button';\nimport '../input/input';\nimport styles from './number-input.css?inline';\n\nexport type BitNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\n};\n\n/** Number Input props */\nexport type BitNumberInputProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Stretch to full width of container */\n    fullwidth?: boolean;\n    /** Visible label */\n    label?: string;\n    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n    'label-placement'?: 'inset' | 'outside';\n    /** Large step (for Page Up/Down, default: 10 × step) */\n    'large-step'?: number;\n    /** Maximum allowed value */\n    max?: number;\n    /** Minimum allowed value */\n    min?: number;\n    name?: string;\n    /** Allow null/empty value */\n    nullable?: boolean;\n    /** Form field name */\n\n    /** Placeholder text */\n    placeholder?: string;\n    /** Make the input read-only */\n    readonly?: boolean;\n    /** Step size for increment/decrement */\n    step?: number;\n    /** Current numeric value */\n    value?: number;\n    /** Visual variant */\n    variant?: VisualVariant;\n  };\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element bit-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @example\n * ```html\n * <bit-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></bit-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = defineComponent<BitNumberInputProps, BitNumberInputEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    fullwidth: { default: false },\n    label: { default: undefined },\n    'label-placement': { default: 'inset' },\n    'large-step': { default: undefined },\n    max: { default: undefined },\n    min: { default: undefined },\n    name: { default: undefined },\n    nullable: { default: false },\n    placeholder: { default: undefined },\n    readonly: { default: false },\n    size: { default: undefined },\n    step: { default: 1 },\n    value: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const inputValue = signal<string>(props.value.value != null ? String(props.value.value) : '');\n\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        value: computed(() => (inputValue.value !== '' ? inputValue.value : null)),\n      },\n      {\n        onReset: () => {\n          inputValue.value = props.value.value != null ? String(props.value.value) : '';\n        },\n      },\n    );\n    watch(props.value, (v) => {\n      const newVal = v != null ? String(v) : '';\n\n      if (inputValue.value !== newVal) inputValue.value = newVal;\n    });\n    function clamp(n: number): number {\n      const min = props.min.value;\n      const max = props.max.value;\n\n      if (min != null && n < Number(min)) return Number(min);\n\n      if (max != null && n > Number(max)) return Number(max);\n\n      return n;\n    }\n    function parseValue(): number | null {\n      const v = inputValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n    function commit(val: number | null, originalEvent?: Event) {\n      const clamped = val != null ? clamp(val) : null;\n\n      inputValue.value = clamped != null ? String(clamped) : '';\n\n      if (clamped != null) host.setAttribute('value', String(clamped));\n      else host.removeAttribute('value');\n\n      emit('change', { originalEvent, value: clamped });\n    }\n    function increment(delta: number, originalEvent?: Event) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const current = parseValue() ?? (props.min.value != null ? Number(props.min.value) : 0);\n\n      commit(current + delta, originalEvent);\n    }\n    function handleKeydown(e: KeyboardEvent) {\n      if (props.disabled.value || props.readonly.value) return;\n\n      const step = Number(props.step.value) || 1;\n      const largeStep = Number(props['large-step'].value) || step * 10;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          increment(-step, e);\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          increment(step, e);\n          break;\n        case 'End':\n          if (props.max.value != null) {\n            e.preventDefault();\n            commit(Number(props.max.value), e);\n          }\n\n          break;\n        case 'Home':\n          if (props.min.value != null) {\n            e.preventDefault();\n            commit(Number(props.min.value), e);\n          }\n\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          increment(-largeStep, e);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          increment(largeStep, e);\n          break;\n      }\n    }\n\n    const atMin = computed(\n      () => props.min.value != null && parseValue() != null && parseValue()! <= Number(props.min.value),\n    );\n    const atMax = computed(\n      () => props.max.value != null && parseValue() != null && parseValue()! >= Number(props.max.value),\n    );\n\n    return html`\n      <div\n        class=\"wrapper\"\n        role=\"spinbutton\"\n        part=\"control\"\n        :aria-valuenow=\"${() => parseValue() ?? null}\"\n        :aria-valuemin=\"${() => props.min.value ?? null}\"\n        :aria-valuemax=\"${() => props.max.value ?? null}\"\n        :aria-label=\"${() => props.label.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        :aria-readonly=\"${() => (props.readonly.value ? 'true' : null)}\"\n        @keydown=\"${handleKeydown}\">\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMin.value}\"\n          @click=\"${(e: Event) => increment(-(Number(props.step.value) || 1), e)}\"\n          >${minusIcon}</bit-button\n        >\n        <bit-input\n          part=\"input\"\n          type=\"text\"\n          inputmode=\"decimal\"\n          aria-hidden=\"true\"\n          :value=\"${() => inputValue.value}\"\n          :label=\"${() => props.label.value || null}\"\n          :label-placement=\"${() => props['label-placement'].value}\"\n          :placeholder=\"${() => props.placeholder.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          :size=\"${() => props.size.value || null}\"\n          :variant=\"${() => props.variant.value || null}\"\n          ?disabled=\"${() => props.disabled.value}\"\n          ?readonly=\"${() => props.readonly.value}\"\n          @input=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            emit('input', { originalEvent, value: parseValue() });\n          }}\"\n          @change=\"${(e: Event) => {\n            const v = (\n              e as CustomEvent<{\n                value?: string;\n              }>\n            ).detail?.value;\n\n            if (typeof v !== 'string') return;\n\n            inputValue.value = v;\n\n            const originalEvent = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent ?? e;\n\n            commit(parseValue(), originalEvent);\n          }}\"></bit-input>\n        <bit-button\n          icon-only\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          variant=\"ghost\"\n          :size=\"${() => props.size.value || null}\"\n          :color=\"${() => props.color.value || null}\"\n          ?disabled=\"${() => props.disabled.value || props.readonly.value || atMax.value}\"\n          @click=\"${(e: Event) => increment(Number(props.step.value) || 1, e)}\"\n          >${plusIcon}</bit-button\n        >\n      </div>\n    `;\n  },\n  styles: [disabledStateMixin(), styles],\n  tag: 'bit-number-input',\n});\n"],"mappings":"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"}

package/dist/otp-input.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./inputs/otp-input/otp-input.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{color:(0,r.typed)(void 0),disabled:(0,r.typed)(!1),label:(0,r.typed)(`One-time password`),length:(0,r.typed)(6),masked:(0,r.typed)(!1),name:(0,r.typed)(void 0),separator:(0,r.typed)(void 0),size:(0,r.typed)(void 0),type:(0,r.typed)(`numeric`),value:(0,r.typed)(``),variant:(0,r.typed)(void 0)},setup({emit:e,host:t,props:n}){let i=(0,r.computed)(()=>Array.from({length:Number(n.length.value)||6},(e,t)=>t));function a(){return[...t.shadowRoot?.querySelectorAll(`input.cell`)??[]]}function o(){return a().map(e=>e.value).join(``)}function s(e){return n.type.value===`numeric`?/^\d$/.test(e):/^[a-z\d]$/i.test(e)}function c(n,r){let i=n.target,c=i.value;if(c.length>1&&(c=c.slice(-1)),c&&!s(c)){i.value=``;return}i.value=c;let l=a(),u=o(),d=u.length===l.length&&u.split(``).every(Boolean);t.setAttribute(`value`,u),e(`change`,{complete:d,originalEvent:n,value:u}),d&&e(`complete`,{originalEvent:n,value:u}),c&&r<l.length-1&&(l[r+1].focus(),l[r+1].select())}function l(n,r){let i=n.target,s=a();if(n.key===`Backspace`){i.value?i.value=``:r>0&&(s[r-1].focus(),s[r-1].select(),s[r-1].value=``);let a=o();t.setAttribute(`value`,a),e(`change`,{complete:!1,originalEvent:n,value:a}),n.preventDefault()}else n.key===`ArrowLeft`&&r>0?(s[r-1].focus(),n.preventDefault()):n.key===`ArrowRight`&&r<s.length-1?(s[r+1].focus(),n.preventDefault()):n.key===`Home`?(s[0].focus(),n.preventDefault()):n.key===`End`&&(s[s.length-1].focus(),n.preventDefault())}function u(r){r.preventDefault();let i=(r.clipboardData?.getData(`text`)??``).split(``).filter(e=>s(e)).slice(0,Number(n.length.value)||6),c=a();i.forEach((e,t)=>{c[t]&&(c[t].value=e)});let l=o(),u=l.length===c.length&&l.split(``).every(Boolean);t.setAttribute(`value`,l),e(`change`,{complete:u,originalEvent:r,value:l}),u&&e(`complete`,{originalEvent:r,value:l}),c[Math.min(i.length,c.length-1)]?.focus()}(0,r.onMount)(()=>{let e=String(n.value.value||``),t=a();e.split(``).forEach((e,n)=>{t[n]&&(t[n].value=e)})});let d=(0,r.computed)(()=>{let e=Number(n.length.value)||6;return n.separator.value==null?-1:Math.floor(e/2)});return r.html`
+      <div class="otp-group" part="group" role="group" :aria-label="${()=>n.label.value}">
+        ${()=>i.value.map(e=>r.html`
+              ${()=>d.value>0&&e===d.value?r.html`<span class="separator" aria-hidden="true">${()=>n.separator.value||`-`}</span>`:``}
+              <input
+                class="cell"
+                part="cell"
+                :type="${()=>n.masked.value?`password`:`text`}"
+                :inputmode="${()=>n.type.value===`numeric`?`numeric`:`text`}"
+                maxlength="1"
+                :autocomplete="${()=>e===0?`one-time-code`:`off`}"
+                :aria-label="${()=>`Digit ${e+1} of ${n.length.value}`}"
+                :disabled="${()=>n.disabled.value||null}"
+                :name="${()=>n.name.value?`${n.name.value}[${e}]`:null}"
+                @input="${t=>c(t,e)}"
+                @keydown="${t=>l(t,e)}"
+                @paste="${t=>e===0?u(t):t.preventDefault()}"
+                @focus="${e=>e.target.select()}" />
+            `)}
+      </div>
+    `},styles:[t.colorThemeMixin,e.sizeVariantMixin({}),t.forcedColorsFocusMixin(`.cell`),n.default],tag:`bit-otp-input`});exports.OTP_INPUT_TAG=i;
+//# sourceMappingURL=otp-input.cjs.map