@vielzeug/buildit 2.0.0

package/dist/sidebar.js

@@ -0,0 +1,202 @@
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import "./styles/index.js";
+import { chevronLeftIcon as n, chevronRightIcon as r } from "./icons.js";
+import i from "./layout/sidebar/sidebar.css?inline.js";
+import a from "./layout/sidebar/sidebar-group.css?inline.js";
+import o from "./layout/sidebar/sidebar-item.css?inline.js";
+import { computed as s, createContext as c, defineComponent as l, effect as u, html as d, inject as f, onMount as p, provide as m, signal as h, watch as g } from "@vielzeug/craftit";
+//#region src/layout/sidebar/sidebar.ts
+var _ = c("SidebarContext"), v = l({
+	props: {
+		collapsed: {
+			default: void 0,
+			type: Boolean
+		},
+		collapsible: {
+			default: !1,
+			type: Boolean
+		},
+		"default-collapsed": {
+			default: !1,
+			type: Boolean
+		},
+		label: { default: "Sidebar navigation" },
+		responsive: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: r, slots: i }) {
+		let a = s(() => i.has("header").value), o = s(() => i.has("footer").value), c = h(t.hasAttribute("collapsed")), l = h(c.value ? t.hasAttribute("collapsed") : r["default-collapsed"].value), f = s(() => l.value);
+		m(_, {
+			collapsed: f,
+			variant: r.variant
+		});
+		let v = (t, n) => {
+			f.value !== t && (c.value || (l.value = t), e("collapsed-change", {
+				collapsed: t,
+				source: n
+			}));
+		}, y = () => {
+			v(!f.value, "toggle");
+		};
+		return u(() => {
+			t.toggleAttribute("data-collapsed", f.value);
+		}), p(() => {
+			let e = t;
+			e.setCollapsed = (e) => v(!!e, "api"), e.toggle = y;
+			let n, i = new MutationObserver(() => {
+				!t.hasAttribute("collapsed") && !c.value || (c.value = !0, l.value = t.hasAttribute("collapsed"));
+			});
+			return i.observe(t, {
+				attributeFilter: ["collapsed"],
+				attributes: !0
+			}), g(r.responsive, (e) => {
+				n?.(), n = void 0;
+				let t = String(e ?? "").trim();
+				if (!t) return;
+				let r = window.matchMedia(t), i = (e) => {
+					v(e.matches, "responsive");
+				};
+				v(r.matches, "responsive"), r.addEventListener("change", i), n = () => {
+					r.removeEventListener("change", i);
+				};
+			}, { immediate: !0 }), () => {
+				i.disconnect(), n?.();
+			};
+		}), d`
+      <nav aria-label="${() => r.label.value}" part="nav">
+        <div class="sidebar-header" part="header" ?hidden=${() => !a.value && !r.collapsible.value}>
+          <slot name="header"></slot>
+          <button
+            class="toggle-btn"
+            part="toggle-btn"
+            type="button"
+            ?hidden=${() => !r.collapsible.value}
+            aria-label="${() => f.value ? "Expand sidebar" : "Collapse sidebar"}"
+            aria-expanded="${() => String(!f.value)}"
+            @click="${y}">
+            <span class="toggle-icon" aria-hidden="true">${n}</span>
+          </button>
+        </div>
+        <div class="sidebar-content" part="content">
+          <slot></slot>
+        </div>
+        <div class="sidebar-footer" part="footer" ?hidden=${() => !o.value}>
+          <slot name="footer"></slot>
+        </div>
+      </nav>
+    `;
+	},
+	styles: [
+		e,
+		t,
+		i
+	],
+	tag: "bit-sidebar"
+}), y = l({
+	props: {
+		collapsible: {
+			default: !1,
+			type: Boolean
+		},
+		"default-open": {
+			default: !0,
+			type: Boolean
+		},
+		label: { default: "" },
+		open: {
+			default: void 0,
+			type: Boolean
+		}
+	},
+	setup({ emit: e, host: t, props: n, slots: i }) {
+		let a = s(() => i.has("icon").value), o = f(_, void 0);
+		u(() => {
+			t.toggleAttribute("sidebar-collapsed", o?.collapsed.value ?? !1);
+		});
+		let c = s(() => n.open.value !== void 0), l = h(n["default-open"].value), p = s(() => n.collapsible.value ? c.value ? n.open.value ?? !1 : l.value : !0);
+		return g(n.open, (e) => {
+			e !== void 0 && (l.value = e);
+		}), u(() => {
+			t.toggleAttribute("open", p.value);
+		}), d`
+      <details class="group" part="group" ?open=${() => p.value} @click="${(t) => {
+			if (!(t.target instanceof HTMLElement) || !t.target.closest(".group-header") || (t.stopPropagation(), t.preventDefault(), !n.collapsible.value)) return;
+			let r = !p.value;
+			n.open.value !== r && (c.value || (l.value = r), e("open-change", { open: r }));
+		}}">
+        <summary
+          class="group-header"
+          part="group-header"
+          :aria-expanded="${() => n.collapsible.value ? String(n.open.value) : null}">
+          <span class="group-icon" part="group-icon" ?hidden=${() => !a.value} aria-hidden="true">
+            <slot name="icon"></slot>
+          </span>
+          <span class="group-label" part="group-label">${() => n.label.value}</span>
+          <span class="chevron" ?hidden=${() => !n.collapsible.value} aria-hidden="true">${r}</span>
+        </summary>
+        <div class="group-items" part="group-items" role="list">
+          <slot></slot>
+        </div>
+      </details>
+    `;
+	},
+	styles: [t, a],
+	tag: "bit-sidebar-group"
+}), b = l({
+	props: {
+		active: {
+			default: !1,
+			type: Boolean
+		},
+		disabled: {
+			default: !1,
+			type: Boolean
+		},
+		href: { default: void 0 },
+		rel: { default: void 0 },
+		target: { default: void 0 }
+	},
+	setup({ host: e, props: t, slots: n }) {
+		let r = s(() => n.has("icon").value), i = s(() => n.has("end").value), a = f(_, void 0);
+		u(() => {
+			e.toggleAttribute("sidebar-collapsed", a?.collapsed.value ?? !1);
+		});
+		let o = s(() => !!t.href.value && !t.disabled.value), c = () => d`
+      <span class="item-icon" part="item-icon" ?hidden=${() => !r.value} aria-hidden="true">
+        <slot name="icon"></slot>
+      </span>
+      <span class="item-label" part="item-label"><slot></slot></span>
+      <span class="item-end" part="item-end" ?hidden=${() => !i.value}>
+        <slot name="end"></slot>
+      </span>
+    `;
+		return d`
+      ${() => o.value ? d`
+              <a
+                class="item"
+                part="item"
+                href="${() => t.href.value}"
+                :rel="${() => t.rel.value ?? null}"
+                :target="${() => t.target.value ?? null}"
+                :aria-current="${() => t.active.value ? "page" : null}">
+                ${c()}
+              </a>
+            ` : d`
+              <button
+                class="item"
+                part="item"
+                type="button"
+                :aria-current="${() => t.active.value ? "page" : null}"
+                :disabled="${() => t.disabled.value || null}">
+                ${c()}
+              </button>
+            `}
+    `;
+	},
+	styles: [e, o],
+	tag: "bit-sidebar-item"
+});
+//#endregion
+export { _ as SIDEBAR_CTX, y as SIDEBAR_GROUP_TAG, b as SIDEBAR_ITEM_TAG, v as SIDEBAR_TAG };
+
+//# sourceMappingURL=sidebar.js.map

package/dist/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../src/layout/sidebar/sidebar.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  effect,\n  html,\n  inject,\n  onMount,\n  provide,\n  signal,\n  type ReadonlySignal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport { chevronLeftIcon, chevronRightIcon } from '../../icons';\nimport { coarsePointerMixin, reducedMotionMixin } from '../../styles';\n\n// ─── Types ────────────────────────────────────────────────────────────────\n\ntype SidebarVariant = 'floating' | 'inset';\ntype SidebarCollapseSource = 'api' | 'responsive' | 'toggle';\n\n/** Context provided by `bit-sidebar` to its `bit-sidebar-group` and `bit-sidebar-item` children. */\nexport type SidebarContext = {\n  collapsed: ReadonlySignal<boolean>;\n  variant: ReadonlySignal<SidebarVariant | undefined>;\n};\n\n/** Injection key for the sidebar context. */\nexport const SIDEBAR_CTX = createContext<SidebarContext>('SidebarContext');\n\n// ─── bit-sidebar styles ──────────────────────────────────────────────────────\n\nimport sidebarStyles from './sidebar.css?inline';\n\n/** bit-sidebar element interface */\nexport type SidebarElement = HTMLElement &\n  BitSidebarProps & {\n    /** Set collapsed state imperatively. */\n    setCollapsed(next: boolean): void;\n    /** Toggle between collapsed and expanded. */\n    toggle(): void;\n  };\n\n/** Sidebar component properties */\n\nexport type BitSidebarEvents = {\n  'collapsed-change': { collapsed: boolean; source: SidebarCollapseSource };\n};\n\nexport type BitSidebarGroupEvents = {\n  'open-change': { open: boolean };\n};\n\nexport type BitSidebarProps = {\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Whether the sidebar supports collapsing */\n  collapsible?: boolean;\n  /** Initial collapsed state in uncontrolled mode */\n  'default-collapsed'?: boolean;\n  /**\n   * Accessible label for the navigation landmark.\n   * Use to distinguish multiple navigation regions on a page.\n   * @default 'Sidebar navigation'\n   */\n  label?: string;\n  /**\n   * CSS media query that, when it matches, automatically collapses the sidebar.\n   * Unset by default — no automatic collapse.\n   * @example 'responsive=\"(max-width: 768px)\"'\n   */\n  responsive?: string;\n  /** Visual style variant */\n  variant?: SidebarVariant;\n};\n\n/**\n * `bit-sidebar` — A collapsible navigation sidebar with group and item support.\n *\n * @element bit-sidebar\n *\n * @attr {boolean} collapsed - Controlled collapsed state\n * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars\n * @attr {boolean} collapsible - Show the collapse toggle button\n * @attr {string} variant - Visual variant: 'floating' | 'inset'\n * @attr {string} label - Accessible aria-label for the nav landmark\n *\n * @slot header - Branding or logo content above the nav\n * @slot - Navigation content (bit-sidebar-group / bit-sidebar-item)\n * @slot footer - Footer content below the nav (user info, settings, etc.)\n *\n * @fires collapsed-change - Fired when collapsed state changes\n *\n * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)\n * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)\n * @cssprop --sidebar-bg - Sidebar background color\n * @cssprop --sidebar-border-color - Border color\n *\n * @attr {string} responsive - CSS media query that auto-collapses the sidebar when it matches (e.g. '(max-width: 768px)')\n *\n * @example\n * ```html\n * <bit-sidebar collapsible label=\"App navigation\">\n *   <span slot=\"header\">My App</span>\n *   <bit-sidebar-group label=\"Main\">\n *     <bit-sidebar-item href=\"/dashboard\" active>Dashboard</bit-sidebar-item>\n *     <bit-sidebar-item href=\"/settings\">Settings</bit-sidebar-item>\n *   </bit-sidebar-group>\n * </bit-sidebar>\n *\n * <!-- Auto-collapse on mobile -->\n * <bit-sidebar collapsible responsive=\"(max-width: 768px)\">...</bit-sidebar>\n * ```\n */\nexport const SIDEBAR_TAG = defineComponent<BitSidebarProps, BitSidebarEvents>({\n  props: {\n    collapsed: { default: undefined, type: Boolean },\n    collapsible: { default: false, type: Boolean },\n    'default-collapsed': { default: false, type: Boolean },\n    label: { default: 'Sidebar navigation' },\n    responsive: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    const hasHeader = computed(() => slots.has('header').value);\n    const hasFooter = computed(() => slots.has('footer').value);\n\n    const isControlled = signal(host.hasAttribute('collapsed'));\n    const collapsedState = signal(\n      isControlled.value ? host.hasAttribute('collapsed') : props['default-collapsed'].value,\n    );\n\n    const isCollapsed = computed(() => collapsedState.value);\n\n    provide(SIDEBAR_CTX, {\n      collapsed: isCollapsed as ReadonlySignal<boolean>,\n      variant: props.variant as ReadonlySignal<SidebarVariant | undefined>,\n    });\n\n    const setCollapsed = (next: boolean, source: SidebarCollapseSource) => {\n      if (isCollapsed.value === next) return;\n\n      if (!isControlled.value) {\n        collapsedState.value = next;\n      }\n\n      emit('collapsed-change', { collapsed: next, source });\n    };\n    const doToggle = () => {\n      setCollapsed(!isCollapsed.value, 'toggle');\n    };\n\n    effect(() => {\n      host.toggleAttribute('data-collapsed', isCollapsed.value);\n    });\n\n    onMount(() => {\n      const el = host as SidebarElement;\n\n      el.setCollapsed = (next) => setCollapsed(Boolean(next), 'api');\n      el.toggle = doToggle;\n\n      let mediaCleanup: (() => void) | undefined;\n      const observer = new MutationObserver(() => {\n        if (!host.hasAttribute('collapsed') && !isControlled.value) return;\n\n        isControlled.value = true;\n        collapsedState.value = host.hasAttribute('collapsed');\n      });\n\n      observer.observe(host, {\n        attributeFilter: ['collapsed'],\n        attributes: true,\n      });\n\n      watch(\n        props.responsive,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          if (!mediaQuery) return;\n\n          const mql = window.matchMedia(mediaQuery);\n          const onChange = (event: MediaQueryListEvent) => {\n            setCollapsed(event.matches, 'responsive');\n          };\n\n          setCollapsed(mql.matches, 'responsive');\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      return () => {\n        observer.disconnect();\n        mediaCleanup?.();\n      };\n    });\n\n    return html`\n      <nav aria-label=\"${() => props.label.value}\" part=\"nav\">\n        <div class=\"sidebar-header\" part=\"header\" ?hidden=${() => !hasHeader.value && !props.collapsible.value}>\n          <slot name=\"header\"></slot>\n          <button\n            class=\"toggle-btn\"\n            part=\"toggle-btn\"\n            type=\"button\"\n            ?hidden=${() => !props.collapsible.value}\n            aria-label=\"${() => (isCollapsed.value ? 'Expand sidebar' : 'Collapse sidebar')}\"\n            aria-expanded=\"${() => String(!isCollapsed.value)}\"\n            @click=\"${doToggle}\">\n            <span class=\"toggle-icon\" aria-hidden=\"true\">${chevronLeftIcon}</span>\n          </button>\n        </div>\n        <div class=\"sidebar-content\" part=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"sidebar-footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n          <slot name=\"footer\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [coarsePointerMixin, reducedMotionMixin, sidebarStyles],\n  tag: 'bit-sidebar',\n});\n\n// ─── bit-sidebar-group styles ────────────────────────────────────────────────\n\nimport groupStyles from './sidebar-group.css?inline';\n\n/** Sidebar group properties */\nexport type BitSidebarGroupProps = {\n  /** Whether this group can be collapsed */\n  collapsible?: boolean;\n  /** Initial open state in uncontrolled mode */\n  'default-open'?: boolean;\n  /** Accessible label for the group */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n};\n\n/**\n * `bit-sidebar-group` — A labelled section within `bit-sidebar`.\n *\n * @element bit-sidebar-group\n *\n * @attr {string} label - Group label text\n * @attr {boolean} collapsible - Whether this group can be toggled open/closed\n * @attr {boolean} open - Controlled expanded state\n * @attr {boolean} default-open - Initial expanded state in uncontrolled mode\n *\n * @slot - Navigation items (`bit-sidebar-item`)\n * @slot icon - Icon displayed before the label\n *\n * @fires open-change - Fired when the group open state changes (collapsible groups only)\n *\n * @example\n * ```html\n * <bit-sidebar-group label=\"Main\" collapsible open>\n *   <bit-sidebar-item href=\"/home\">Home</bit-sidebar-item>\n * </bit-sidebar-group>\n * ```\n */\nexport const SIDEBAR_GROUP_TAG = defineComponent<BitSidebarGroupProps, BitSidebarGroupEvents>({\n  props: {\n    collapsible: { default: false, type: Boolean },\n    'default-open': { default: true, type: Boolean },\n    label: { default: '' },\n    open: { default: undefined, type: Boolean },\n  },\n  setup({ emit, host, props, slots }) {\n    const hasIcon = computed(() => slots.has('icon').value);\n    const sidebarCtx = inject(SIDEBAR_CTX, undefined);\n\n    effect(() => {\n      host.toggleAttribute('sidebar-collapsed', sidebarCtx?.collapsed.value ?? false);\n    });\n\n    const isControlled = computed(() => props.open.value !== undefined);\n    const openState = signal(props['default-open'].value);\n    const isOpen = computed(() => {\n      if (!props.collapsible.value) return true;\n\n      if (isControlled.value) return props.open.value ?? false;\n\n      return openState.value;\n    });\n\n    watch(props.open, (value) => {\n      if (value === undefined) return;\n\n      openState.value = value;\n    });\n\n    effect(() => {\n      host.toggleAttribute('open', isOpen.value);\n    });\n\n    const handleGroupClick = (e: MouseEvent) => {\n      if (!(e.target instanceof HTMLElement) || !e.target.closest('.group-header')) return;\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      if (!props.collapsible.value) {\n        return;\n      }\n\n      const next = !isOpen.value;\n\n      if (props.open.value === next) return;\n\n      if (!isControlled.value) {\n        openState.value = next;\n      }\n\n      emit('open-change', { open: next });\n    };\n\n    return html`\n      <details class=\"group\" part=\"group\" ?open=${() => isOpen.value} @click=\"${handleGroupClick}\">\n        <summary\n          class=\"group-header\"\n          part=\"group-header\"\n          :aria-expanded=\"${() => (props.collapsible.value ? String(props.open.value) : null)}\">\n          <span class=\"group-icon\" part=\"group-icon\" ?hidden=${() => !hasIcon.value} aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span class=\"group-label\" part=\"group-label\">${() => props.label.value}</span>\n          <span class=\"chevron\" ?hidden=${() => !props.collapsible.value} aria-hidden=\"true\">${chevronRightIcon}</span>\n        </summary>\n        <div class=\"group-items\" part=\"group-items\" role=\"list\">\n          <slot></slot>\n        </div>\n      </details>\n    `;\n  },\n  styles: [reducedMotionMixin, groupStyles],\n  tag: 'bit-sidebar-group',\n});\n\n// ─── bit-sidebar-item styles ─────────────────────────────────────────────────\n\nimport itemStyles from './sidebar-item.css?inline';\n\n/** Sidebar item properties */\nexport type BitSidebarItemProps = {\n  /** Whether this item represents the current page/section */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */\n  href?: string;\n  /**\n   * Relationship of the linked URL (`rel` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  rel?: string;\n  /**\n   * Browsing context for the link (`target` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  target?: string;\n};\n\n/**\n * `bit-sidebar-item` — An individual navigation item in a `bit-sidebar`.\n *\n * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.\n * Marks the active page via `aria-current=\"page\"` when the `active` attribute is set.\n *\n * @element bit-sidebar-item\n *\n * @attr {string} href - Link URL; renders an anchor when set\n * @attr {boolean} active - Marks the item as the current page\n * @attr {boolean} disabled - Disables the item\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Label text\n * @slot icon - Leading icon\n * @slot end - Trailing content (badge, shortcut, arrow, etc.)\n *\n * @part item - The inner anchor or button element\n * @part item-icon - The icon wrapper\n * @part item-label - The label wrapper\n * @part item-end - The trailing content wrapper\n *\n * @cssprop --sidebar-item-color - Default text color\n * @cssprop --sidebar-item-hover-bg - Hover background\n * @cssprop --sidebar-item-hover-color - Hover text color\n * @cssprop --sidebar-item-active-bg - Active background\n * @cssprop --sidebar-item-active-color - Active text color\n * @cssprop --sidebar-item-indicator - Active indicator bar color\n *\n * @example\n * ```html\n * <bit-sidebar-item href=\"/dashboard\" active>\n *   <span slot=\"icon\">🏠</span>\n *   Dashboard\n * </bit-sidebar-item>\n *\n * <bit-sidebar-item href=\"/users\">\n *   <span slot=\"icon\">👤</span>\n *   Users\n *   <bit-badge slot=\"end\" color=\"primary\">3</bit-badge>\n * </bit-sidebar-item>\n * ```\n */\nexport const SIDEBAR_ITEM_TAG = defineComponent<BitSidebarItemProps>({\n  props: {\n    active: { default: false, type: Boolean },\n    disabled: { default: false, type: Boolean },\n    href: { default: undefined },\n    rel: { default: undefined },\n    target: { default: undefined },\n  },\n  setup({ host, props, slots }) {\n    const hasIcon = computed(() => slots.has('icon').value);\n    const hasEnd = computed(() => slots.has('end').value);\n    const sidebarCtx = inject(SIDEBAR_CTX, undefined);\n\n    effect(() => {\n      host.toggleAttribute('sidebar-collapsed', sidebarCtx?.collapsed.value ?? false);\n    });\n\n    const isLink = computed(() => !!props.href.value && !props.disabled.value);\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon.value} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd.value}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() =>\n        isLink.value\n          ? html`\n              <a\n                class=\"item\"\n                part=\"item\"\n                href=\"${() => props.href.value}\"\n                :rel=\"${() => props.rel.value ?? null}\"\n                :target=\"${() => props.target.value ?? null}\"\n                :aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n                ${renderItemContent()}\n              </a>\n            `\n          : html`\n              <button\n                class=\"item\"\n                part=\"item\"\n                type=\"button\"\n                :aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n                :disabled=\"${() => props.disabled.value || null}\">\n                ${renderItemContent()}\n              </button>\n            `}\n    `;\n  },\n  styles: [coarsePointerMixin, itemStyles],\n  tag: 'bit-sidebar-item',\n});\n"],"mappings":"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"}

package/dist/skeleton.cjs

@@ -0,0 +1,10 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./craftit/dist/labs/observers.cjs`);require(`./craftit/dist/labs.cjs`);const n=require(`./feedback/skeleton/skeleton.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{animated:{default:!0},height:{default:void 0},lines:{default:1},radius:{default:void 0},size:{default:void 0},striped:{default:!1},variant:{default:`rect`},width:{default:void 0}},setup({host:e,props:n}){let i=(0,r.computed)(()=>{let e=Math.floor(Number(n.lines.value));return Number.isFinite(e)&&e>0?e:1}),a=(0,r.computed)(()=>n.variant.value===`text`?i.value:1);return(0,r.watch)([n.width,n.height,n.radius,n.animated],()=>{n.width.value?e.style.setProperty(`--skeleton-width`,n.width.value):e.style.removeProperty(`--skeleton-width`),n.height.value?e.style.setProperty(`--skeleton-height`,n.height.value):e.style.removeProperty(`--skeleton-height`),n.radius.value?e.style.setProperty(`--skeleton-radius`,n.radius.value):e.style.removeProperty(`--skeleton-radius`);let t=e.getAttribute(`animated`)!==`false`&&n.animated.value!==!1;e.setAttribute(`data-animated`,t?`true`:`false`)},{immediate:!0}),(0,r.onMount)(()=>{(0,r.watch)(t.r(e,{threshold:0}),t=>{e.toggleAttribute(`data-paused`,t!==null&&!t.isIntersecting)})}),r.html`
+      <div class="stack" part="stack">
+        ${()=>Array.from({length:a.value},(e,t)=>{let i=n.variant.value===`text`&&a.value>1&&t===a.value-1;return r.html`<div
+              class="bone"
+              part="bone"
+              aria-hidden="true"
+              :data-last="${()=>i?`true`:null}"></div>`})}
+      </div>
+    `},styles:[e.reducedMotionMixin,n.default],tag:`bit-skeleton`});exports.SKELETON_TAG=i;
+//# sourceMappingURL=skeleton.cjs.map

package/dist/skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.cjs","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, watch } from '@vielzeug/craftit';\nimport { observeIntersection } from '@vielzeug/craftit/labs';\n\nimport type { ComponentSize } from '../../types';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type BitSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element bit-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <bit-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></bit-skeleton>\n *\n * <!-- Avatar -->\n * <bit-skeleton variant=\"circle\" size=\"md\"></bit-skeleton>\n *\n * <!-- Card image -->\n * <bit-skeleton width=\"100%\" height=\"10rem\"></bit-skeleton>\n * ```\n */\nexport const SKELETON_TAG = defineComponent<BitSkeletonProps>({\n  props: {\n    animated: { default: true },\n    height: { default: undefined },\n    lines: { default: 1 },\n    radius: { default: undefined },\n    size: { default: undefined },\n    striped: { default: false },\n    variant: { default: 'rect' },\n    width: { default: undefined },\n  },\n  setup({ host, props }) {\n    const lineCount = computed(() => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    });\n    const renderLineCount = computed(() => (props.variant.value === 'text' ? lineCount.value : 1));\n\n    watch(\n      [props.width, props.height, props.radius, props.animated],\n      () => {\n        if (props.width.value) host.style.setProperty('--skeleton-width', props.width.value);\n        else host.style.removeProperty('--skeleton-width');\n\n        if (props.height.value) host.style.setProperty('--skeleton-height', props.height.value);\n        else host.style.removeProperty('--skeleton-height');\n\n        if (props.radius.value) host.style.setProperty('--skeleton-radius', props.radius.value);\n        else host.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = host.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        host.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n    onMount(() => {\n      const entry = observeIntersection(host, { threshold: 0 });\n\n      watch(entry, (e) => {\n        host.toggleAttribute('data-paused', e !== null && !e.isIntersecting);\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount.value }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount.value > 1 && index === renderLineCount.value - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n  tag: 'bit-skeleton',\n});\n"],"mappings":"oVAmEA,IAAa,GAAA,EAAA,EAAA,iBAAiD,CAC5D,MAAO,CACL,SAAU,CAAE,QAAS,GAAM,CAC3B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,MAAO,CAAE,QAAS,EAAG,CACrB,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,GAAO,CAC3B,QAAS,CAAE,QAAS,OAAQ,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC9B,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,cAA2B,CAC/B,IAAM,EAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,MAAM,CAAC,CAEnD,OAAO,OAAO,SAAS,EAAM,EAAI,EAAQ,EAAI,EAAQ,GACrD,CACI,GAAA,EAAA,EAAA,cAAkC,EAAM,QAAQ,QAAU,OAAS,EAAU,MAAQ,EAAG,CA6B9F,OA3BA,EAAA,EAAA,OACE,CAAC,EAAM,MAAO,EAAM,OAAQ,EAAM,OAAQ,EAAM,SAAS,KACnD,CACA,EAAM,MAAM,MAAO,EAAK,MAAM,YAAY,mBAAoB,EAAM,MAAM,MAAM,CAC/E,EAAK,MAAM,eAAe,mBAAmB,CAE9C,EAAM,OAAO,MAAO,EAAK,MAAM,YAAY,oBAAqB,EAAM,OAAO,MAAM,CAClF,EAAK,MAAM,eAAe,oBAAoB,CAE/C,EAAM,OAAO,MAAO,EAAK,MAAM,YAAY,oBAAqB,EAAM,OAAO,MAAM,CAClF,EAAK,MAAM,eAAe,oBAAoB,CAGnD,IAAM,EADc,EAAK,aAAa,WAAW,GACd,SAAW,EAAM,SAAS,QAAU,GAEvE,EAAK,aAAa,gBAAiB,EAAa,OAAS,QAAQ,EAEnE,CAAE,UAAW,GAAM,CACpB,EACD,EAAA,EAAA,aAAc,EAGZ,EAAA,EAAA,OAFc,EAAA,EAAoB,EAAM,CAAE,UAAW,EAAG,CAAC,CAE3C,GAAM,CAClB,EAAK,gBAAgB,cAAe,IAAM,MAAQ,CAAC,EAAE,eAAe,EACpE,EACF,CAEK,EAAA,IAAI;;cAGL,MAAM,KAAK,CAAE,OAAQ,EAAgB,MAAO,EAAG,EAAG,IAAU,CAC1D,IAAM,EACJ,EAAM,QAAQ,QAAU,QAAU,EAAgB,MAAQ,GAAK,IAAU,EAAgB,MAAQ,EAEnG,MAAO,GAAA,IAAI;;;;gCAIY,EAAa,OAAS,KAAM,WACnD,CAAC;;OAIX,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAgB,CAC7C,IAAK,eACN,CAAC"}

package/dist/skeleton.js

@@ -0,0 +1,56 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import "./styles/index.js";
+import { r as t } from "./craftit/dist/labs/observers.js";
+import "./craftit/dist/labs.js";
+import n from "./feedback/skeleton/skeleton.css?inline.js";
+import { computed as r, defineComponent as i, html as a, onMount as o, watch as s } from "@vielzeug/craftit";
+//#region src/feedback/skeleton/skeleton.ts
+var c = i({
+	props: {
+		animated: { default: !0 },
+		height: { default: void 0 },
+		lines: { default: 1 },
+		radius: { default: void 0 },
+		size: { default: void 0 },
+		striped: { default: !1 },
+		variant: { default: "rect" },
+		width: { default: void 0 }
+	},
+	setup({ host: e, props: n }) {
+		let i = r(() => {
+			let e = Math.floor(Number(n.lines.value));
+			return Number.isFinite(e) && e > 0 ? e : 1;
+		}), c = r(() => n.variant.value === "text" ? i.value : 1);
+		return s([
+			n.width,
+			n.height,
+			n.radius,
+			n.animated
+		], () => {
+			n.width.value ? e.style.setProperty("--skeleton-width", n.width.value) : e.style.removeProperty("--skeleton-width"), n.height.value ? e.style.setProperty("--skeleton-height", n.height.value) : e.style.removeProperty("--skeleton-height"), n.radius.value ? e.style.setProperty("--skeleton-radius", n.radius.value) : e.style.removeProperty("--skeleton-radius");
+			let t = e.getAttribute("animated") !== "false" && n.animated.value !== !1;
+			e.setAttribute("data-animated", t ? "true" : "false");
+		}, { immediate: !0 }), o(() => {
+			s(t(e, { threshold: 0 }), (t) => {
+				e.toggleAttribute("data-paused", t !== null && !t.isIntersecting);
+			});
+		}), a`
+      <div class="stack" part="stack">
+        ${() => Array.from({ length: c.value }, (e, t) => {
+			let r = n.variant.value === "text" && c.value > 1 && t === c.value - 1;
+			return a`<div
+              class="bone"
+              part="bone"
+              aria-hidden="true"
+              :data-last="${() => r ? "true" : null}"></div>`;
+		})}
+      </div>
+    `;
+	},
+	styles: [e, n],
+	tag: "bit-skeleton"
+});
+//#endregion
+export { c as SKELETON_TAG };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../src/feedback/skeleton/skeleton.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, watch } from '@vielzeug/craftit';\nimport { observeIntersection } from '@vielzeug/craftit/labs';\n\nimport type { ComponentSize } from '../../types';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './skeleton.css?inline';\n\n/** Skeleton loader component properties */\nexport type BitSkeletonProps = {\n  /** Toggle shimmer animation */\n  animated?: boolean;\n  /** Height override (e.g. '1rem', '3rem') */\n  height?: string;\n  /** Number of text lines for `variant='text'` */\n  lines?: number;\n  /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */\n  radius?: string;\n  /** Size preset controlling line height and circle size */\n  size?: ComponentSize;\n  /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */\n  striped?: boolean;\n  /** Visual variant: 'rect' (default), 'circle', or 'text' */\n  variant?: 'rect' | 'circle' | 'text';\n  /** Width override (e.g. '12rem', '70%') */\n  width?: string;\n};\n\n/**\n * A shimmer placeholder that represents loading content.\n * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\n * or via `width` / `height` inline styles.\n *\n * @element bit-skeleton\n *\n * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'\n * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'\n * @attr {string}  width    - Width override (CSS length/percentage)\n * @attr {string}  height   - Height override (CSS length)\n * @attr {string}  radius   - Radius override\n * @attr {boolean} animated - Disable with `animated=\"false\"`\n * @attr {number}  lines    - Text line count (only for `variant='text'`)\n * @attr {boolean} striped  - Replace shimmer with diagonal stripes\n *\n * @cssprop --skeleton-bg          - Base shimmer color\n * @cssprop --skeleton-highlight - Shimmer highlight color\n * @cssprop --skeleton-radius    - Border radius\n * @cssprop --skeleton-size      - Circle fallback size\n * @cssprop --skeleton-width     - Width (default: 100%)\n * @cssprop --skeleton-height    - Height (default: var(--size-4))\n * @cssprop --skeleton-line-gap  - Vertical gap between text lines\n * @cssprop --skeleton-last-line-width - Width of the final text line\n * @cssprop --skeleton-duration    - Shimmer animation duration\n * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)\n *\n * @example\n * ```html\n * <!-- Paragraph lines -->\n * <bit-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></bit-skeleton>\n *\n * <!-- Avatar -->\n * <bit-skeleton variant=\"circle\" size=\"md\"></bit-skeleton>\n *\n * <!-- Card image -->\n * <bit-skeleton width=\"100%\" height=\"10rem\"></bit-skeleton>\n * ```\n */\nexport const SKELETON_TAG = defineComponent<BitSkeletonProps>({\n  props: {\n    animated: { default: true },\n    height: { default: undefined },\n    lines: { default: 1 },\n    radius: { default: undefined },\n    size: { default: undefined },\n    striped: { default: false },\n    variant: { default: 'rect' },\n    width: { default: undefined },\n  },\n  setup({ host, props }) {\n    const lineCount = computed(() => {\n      const value = Math.floor(Number(props.lines.value));\n\n      return Number.isFinite(value) && value > 0 ? value : 1;\n    });\n    const renderLineCount = computed(() => (props.variant.value === 'text' ? lineCount.value : 1));\n\n    watch(\n      [props.width, props.height, props.radius, props.animated],\n      () => {\n        if (props.width.value) host.style.setProperty('--skeleton-width', props.width.value);\n        else host.style.removeProperty('--skeleton-width');\n\n        if (props.height.value) host.style.setProperty('--skeleton-height', props.height.value);\n        else host.style.removeProperty('--skeleton-height');\n\n        if (props.radius.value) host.style.setProperty('--skeleton-radius', props.radius.value);\n        else host.style.removeProperty('--skeleton-radius');\n\n        const rawAnimated = host.getAttribute('animated');\n        const isAnimated = rawAnimated !== 'false' && props.animated.value !== false;\n\n        host.setAttribute('data-animated', isAnimated ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n    onMount(() => {\n      const entry = observeIntersection(host, { threshold: 0 });\n\n      watch(entry, (e) => {\n        host.toggleAttribute('data-paused', e !== null && !e.isIntersecting);\n      });\n    });\n\n    return html`\n      <div class=\"stack\" part=\"stack\">\n        ${() =>\n          Array.from({ length: renderLineCount.value }, (_, index) => {\n            const isLastLine =\n              props.variant.value === 'text' && renderLineCount.value > 1 && index === renderLineCount.value - 1;\n\n            return html`<div\n              class=\"bone\"\n              part=\"bone\"\n              aria-hidden=\"true\"\n              :data-last=\"${() => (isLastLine ? 'true' : null)}\"></div>`;\n          })}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n  tag: 'bit-skeleton',\n});\n"],"mappings":";;;;;;;AAmEA,IAAa,IAAe,EAAkC;CAC5D,OAAO;EACL,UAAU,EAAE,SAAS,IAAM;EAC3B,QAAQ,EAAE,SAAS,KAAA,GAAW;EAC9B,OAAO,EAAE,SAAS,GAAG;EACrB,QAAQ,EAAE,SAAS,KAAA,GAAW;EAC9B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,SAAS,EAAE,SAAS,IAAO;EAC3B,SAAS,EAAE,SAAS,QAAQ;EAC5B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC9B;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAY,QAAe;GAC/B,IAAM,IAAQ,KAAK,MAAM,OAAO,EAAM,MAAM,MAAM,CAAC;AAEnD,UAAO,OAAO,SAAS,EAAM,IAAI,IAAQ,IAAI,IAAQ;IACrD,EACI,IAAkB,QAAgB,EAAM,QAAQ,UAAU,SAAS,EAAU,QAAQ,EAAG;AA6B9F,SA3BA,EACE;GAAC,EAAM;GAAO,EAAM;GAAQ,EAAM;GAAQ,EAAM;GAAS,QACnD;AAOJ,GANI,EAAM,MAAM,QAAO,EAAK,MAAM,YAAY,oBAAoB,EAAM,MAAM,MAAM,GAC/E,EAAK,MAAM,eAAe,mBAAmB,EAE9C,EAAM,OAAO,QAAO,EAAK,MAAM,YAAY,qBAAqB,EAAM,OAAO,MAAM,GAClF,EAAK,MAAM,eAAe,oBAAoB,EAE/C,EAAM,OAAO,QAAO,EAAK,MAAM,YAAY,qBAAqB,EAAM,OAAO,MAAM,GAClF,EAAK,MAAM,eAAe,oBAAoB;GAGnD,IAAM,IADc,EAAK,aAAa,WAAW,KACd,WAAW,EAAM,SAAS,UAAU;AAEvE,KAAK,aAAa,iBAAiB,IAAa,SAAS,QAAQ;KAEnE,EAAE,WAAW,IAAM,CACpB,EACD,QAAc;AAGZ,KAFc,EAAoB,GAAM,EAAE,WAAW,GAAG,CAAC,GAE3C,MAAM;AAClB,MAAK,gBAAgB,eAAe,MAAM,QAAQ,CAAC,EAAE,eAAe;KACpE;IACF,EAEK,CAAI;;gBAGL,MAAM,KAAK,EAAE,QAAQ,EAAgB,OAAO,GAAG,GAAG,MAAU;GAC1D,IAAM,IACJ,EAAM,QAAQ,UAAU,UAAU,EAAgB,QAAQ,KAAK,MAAU,EAAgB,QAAQ;AAEnG,UAAO,CAAI;;;;kCAIY,IAAa,SAAS,KAAM;IACnD,CAAC;;;;CAIX,QAAQ,CAAC,GAAoB,EAAgB;CAC7C,KAAK;CACN,CAAC"}

package/dist/slider.cjs

@@ -0,0 +1,24 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/states.css.cjs`),r=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const i=require(`./inputs/shared/form-context.cjs`),a=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const o=require(`./inputs/shared/validation/index.cjs`),s=require(`./inputs/shared/design-presets.cjs`),c=require(`./inputs/slider/slider.css?inline.cjs`);let l=require(`@vielzeug/craftit`);var u=(0,l.defineComponent)({formAssociated:!0,props:{color:{default:void 0},disabled:{default:!1},from:{default:`0`},"from-value-text":{default:void 0},max:{default:`100`},min:{default:`0`},name:{default:``},range:{default:!1},size:{default:void 0},step:{default:`1`},to:{default:`100`},"to-value-text":{default:void 0},value:{default:`0`},"value-text":{default:void 0}},setup({emit:e,host:t,props:n,slots:r}){let s=n.range.value,c=(e,t)=>{let n=Number(e);return Number.isFinite(n)?n:t},u=e=>{let t=c(n.min.value,0),r=c(n.max.value,100),i=c(n.step.value,1);return Math.max(t,Math.min(r,Math.round(e/i)*i))},d=e=>{let t=c(n.min.value,0),r=c(n.max.value,100);return(e-t)/(r-t)*100},f=(0,l.inject)(i.FORM_CTX,void 0);a.mountFormContextSync(t,f,n);let p,m=(0,l.signal)(`0`);s||(p=(0,l.defineField)({disabled:(0,l.computed)(()=>!!n.disabled.value),value:m},{onReset:()=>{m.value=`0`}}),(0,l.watch)(n.value,e=>{m.value=String(e)},{immediate:!0}),(0,l.aria)({disabled:()=>!!n.disabled.value,valuemax:()=>c(n.max.value,100),valuemin:()=>c(n.min.value,0),valuenow:()=>Number(m.value||0),valuetext:()=>n[`value-text`].value??null}));let h=(0,l.signal)(0),g=(0,l.signal)(100);s&&(p=(0,l.defineField)({disabled:(0,l.computed)(()=>!!n.disabled.value),toFormValue:({from:e,to:t})=>{let r=n.name.value;if(!r)return null;let i=new FormData;return i.append(`${r}[from]`,String(e)),i.append(`${r}[to]`,String(t)),i},value:(0,l.computed)(()=>({from:h.value,to:g.value}))},{onReset:()=>{h.value=u(c(n.from.value,0)),g.value=u(c(n.to.value,100))}}),(0,l.watch)(n.from,e=>{h.value=u(c(e,0))},{immediate:!0}),(0,l.watch)(n.to,e=>{g.value=u(c(e,100))},{immediate:!0}));let _=(0,l.ref)(),v=(0,l.ref)(),y=(0,l.ref)(),b=(0,l.ref)(),x=(0,l.createId)(`slider-start`),S=(0,l.createId)(`slider-end`),C=e=>{let n=d(e);t.style.setProperty(`--_thumb-pos`,`${n}%`),t.style.setProperty(`--_fill-start`,`0%`),t.style.setProperty(`--_fill-width`,`${n}%`)},w=()=>{let e=d(h.value),n=d(g.value);t.style.setProperty(`--_thumb-start`,`${e}%`),t.style.setProperty(`--_thumb-end`,`${n}%`),t.style.setProperty(`--_fill-start`,`${e}%`),t.style.setProperty(`--_fill-width`,`${n-e}%`)},T=(e,t,n,r,i)=>e===`ArrowRight`||e===`ArrowUp`?i+t:e===`ArrowLeft`||e===`ArrowDown`?i-t:e===`Home`?n:e===`End`?r:null,{triggerValidation:E}=o.createFieldValidation(f,{reportValidity:()=>p?.reportValidity()??!1}),D=r=>{w();let i=e=>{let t=r.getBoundingClientRect(),i=c(n.min.value,0),a=c(n.max.value,100);return u(i+Math.max(0,Math.min(1,(e-t.left)/t.width))*(a-i))},a=null,o=t=>{let r=c(n.min.value,0),i=c(n.max.value,100);a===`start`?h.value=Math.min(u(t),g.value):a===`end`&&(g.value=Math.max(u(t),h.value)),h.value=Math.max(r,Math.min(h.value,i)),g.value=Math.max(r,Math.min(g.value,i)),w(),e(`change`,{from:h.value,to:g.value,value:{from:h.value,to:g.value}}),E(`change`)};(0,l.handle)(r,`pointerdown`,(0,l.guard)(()=>!n.disabled.value,e=>{e.preventDefault();let n=i(e.clientX);a=Math.abs(n-h.value)<=Math.abs(n-g.value)?`start`:`end`,t.setAttribute(`data-dragging`,``),e.target.setPointerCapture(e.pointerId),o(n)})),(0,l.handle)(r,`pointermove`,(0,l.guard)(()=>!!a,e=>{e.preventDefault(),o(i(e.clientX))})),(0,l.handle)(r,`pointerup`,(0,l.guard)(()=>!!a,e=>{e.preventDefault(),a=null,t.removeAttribute(`data-dragging`),e.target.releasePointerCapture(e.pointerId)}));let s=(t,r)=>i=>{if(n.disabled.value)return;let a=c(n.step.value,1),o=c(n.min.value,0),s=c(n.max.value,100),l=T(i.key,a,o,s,t());l!==null&&(i.preventDefault(),r(u(Math.max(o,Math.min(s,l)))),w(),e(`change`,{from:h.value,originalEvent:i,to:g.value,value:{from:h.value,to:g.value}}),E(`change`))},d=y.value,f=b.value;d&&(d.addEventListener(`keydown`,s(()=>h.value,e=>{h.value=Math.min(e,g.value)})),(0,l.aria)(d,{label:`Range start`,valuemax:()=>g.value,valuemin:()=>c(n.min.value,0),valuenow:()=>h.value,valuetext:()=>n[`from-value-text`].value??null})),f&&(f.addEventListener(`keydown`,s(()=>g.value,e=>{g.value=Math.max(e,h.value)})),(0,l.aria)(f,{label:`Range end`,valuemax:()=>c(n.max.value,100),valuemin:()=>h.value,valuenow:()=>g.value,valuetext:()=>n[`to-value-text`].value??null}))},O=r=>{t.setAttribute(`role`,`slider`),n.disabled.value||t.setAttribute(`tabindex`,`0`),C(Number(m.value));let i=t=>{if(n.disabled.value)return;let i=r.getBoundingClientRect(),a=c(n.min.value,0),o=c(n.max.value,100),s=c(n.step.value,1),l=Math.max(0,Math.min(1,(t-i.left)/i.width)),u=Math.max(a,Math.min(o,Math.round((a+l*(o-a))/s)*s));Number(m.value)!==u&&(m.value=u.toString(),C(u),e(`change`,{value:u}),E(`change`))},a=!1;(0,l.handle)(r,`pointerdown`,(0,l.guard)(()=>!n.disabled.value,e=>{e.preventDefault(),a=!0,i(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,l.handle)(r,`pointermove`,(0,l.guard)(()=>a,e=>{e.preventDefault(),t.hasAttribute(`data-dragging`)||t.setAttribute(`data-dragging`,``),i(e.clientX)})),(0,l.handle)(r,`pointerup`,(0,l.guard)(()=>a,e=>{e.preventDefault(),a=!1,t.removeAttribute(`data-dragging`),e.target.releasePointerCapture(e.pointerId)})),(0,l.handle)(t,`keydown`,(0,l.guard)(()=>!n.disabled.value,t=>{let r=c(n.min.value,0),i=c(n.max.value,100),a=c(n.step.value,1),o=Number(m.value||0),s=T(t.key,a,r,i,o);if(s===null)return;t.preventDefault();let l=Math.max(r,Math.min(i,s));l!==o&&(m.value=l.toString(),C(l),e(`change`,{originalEvent:t,value:l}),E(`change`))}))};return(0,l.onMount)(()=>{let e=_.value;if(e){if(r.has(`default`).value&&v.value){let e=(0,l.createId)(`slider-label`);v.value.id=e,s||(0,l.aria)({labelledby:e})}s?D(e):O(e)}}),l.html`
+      <div class="slider-container" part="slider" ref=${_}>
+        <div class="slider-track" part="track">
+          <div class="slider-fill" part="fill"></div>
+          <div class="slider-thumb slider-thumb-sole" part="thumb"></div>
+          <div
+            class="slider-thumb slider-thumb-start"
+            part="thumb-start"
+            ref=${y}
+            role="slider"
+            tabindex="${()=>n.disabled.value?`-1`:`0`}"
+            id="${x}"></div>
+          <div
+            class="slider-thumb slider-thumb-end"
+            part="thumb-end"
+            ref=${b}
+            role="slider"
+            tabindex="${()=>n.disabled.value?`-1`:`0`}"
+            id="${S}"></div>
+        </div>
+      </div>
+      <span class="label" part="label" ref=${v}><slot></slot></span>
+    `},styles:[n.disabledStateMixin(),r.colorThemeMixin,t.sizeVariantMixin(s.SLIDER_SIZE_PRESET),c.default,e.coarsePointerMixin],tag:`bit-slider`});exports.SLIDER_TAG=u;
+//# sourceMappingURL=slider.cjs.map

package/dist/slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.cjs","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createId,\n  defineComponent,\n  defineField,\n  guard,\n  handle,\n  html,\n  inject,\n  onMount,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { SLIDER_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createFieldValidation } from '../shared/validation';\nimport componentStyles from './slider.css?inline';\n\n/** Slider component properties */\n\nexport type BitSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type BitSliderProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Range mode: lower bound */\n    from?: number | string;\n    /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n    'from-value-text'?: string;\n    /** Maximum value */\n    max?: number | string;\n    /** Minimum value */\n    min?: number | string;\n    /** Single-value mode: form field name */\n    name?: string;\n    /** Activate two-thumb range selection */\n    range?: boolean;\n    /** Step increment */\n    step?: number | string;\n    /** Range mode: upper bound */\n    to?: number | string;\n    /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n    'to-value-text'?: string;\n    /** Single-value mode: current value */\n    value?: number | string;\n    /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n    'value-text'?: string;\n  };\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element bit-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n *\n * @cssprop --slider-height - Track height\n * @cssprop --slider-size   - Thumb dimensions\n * @cssprop --slider-track  - Track background color\n * @cssprop --slider-fill   - Fill background color\n * @cssprop --slider-thumb  - Thumb background color\n *\n * @example\n * ```html\n * <bit-slider value=\"50\" name=\"volume\">Volume</bit-slider>\n * <bit-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</bit-slider>\n * ```\n */\nexport const SLIDER_TAG = defineComponent<BitSliderProps, BitSliderEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    from: { default: '0' },\n    'from-value-text': { default: undefined },\n    max: { default: '100' },\n    min: { default: '0' },\n    name: { default: '' },\n    range: { default: false },\n    size: { default: undefined },\n    step: { default: '1' },\n    to: { default: '100' },\n    'to-value-text': { default: undefined },\n    value: { default: '0' },\n    'value-text': { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const getNum = (v: string | number | undefined, fallback: number) => {\n      const n = Number(v);\n\n      return Number.isFinite(n) ? n : fallback;\n    };\n    const snapVal = (value: number) => {\n      const min = getNum(props.min.value, 0);\n      const max = getNum(props.max.value, 100);\n      const step = getNum(props.step.value, 1);\n\n      return Math.max(min, Math.min(max, Math.round(value / step) * step));\n    };\n    const toPercent = (value: number) => {\n      const min = getNum(props.min.value, 0);\n      const max = getNum(props.max.value, 100);\n\n      return ((value - min) / (max - min)) * 100;\n    };\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = defineField(\n        { disabled: computed(() => Boolean(props.disabled.value)), value: valueSignal },\n        {\n          onReset: () => {\n            valueSignal.value = '0';\n          },\n        },\n      );\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      aria({\n        disabled: () => Boolean(props.disabled.value),\n        valuemax: () => getNum(props.max.value, 100),\n        valuemin: () => getNum(props.min.value, 0),\n        valuenow: () => Number(valueSignal.value || 0),\n        valuetext: () => props['value-text'].value ?? null,\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = defineField<{\n        from: number;\n        to: number;\n      }>(\n        {\n          disabled: computed(() => Boolean(props.disabled.value)),\n          toFormValue: ({ from, to }) => {\n            const name = props.name.value;\n\n            if (!name) return null;\n\n            const fd = new FormData();\n\n            fd.append(`${name}[from]`, String(from));\n            fd.append(`${name}[to]`, String(to));\n\n            return fd;\n          },\n          value: computed(() => ({ from: startVal.value, to: endVal.value })),\n        },\n        {\n          onReset: () => {\n            startVal.value = snapVal(getNum(props.from.value, 0));\n            endVal.value = snapVal(getNum(props.to.value, 100));\n          },\n        },\n      );\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = snapVal(getNum(v as string | number | undefined, 0));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = snapVal(getNum(v as string | number | undefined, 100));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createId('slider-start');\n    const endId = createId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = toPercent(value);\n\n      host.style.setProperty('--_thumb-pos', `${pct}%`);\n      host.style.setProperty('--_fill-start', '0%');\n      host.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = toPercent(startVal.value);\n      const e = toPercent(endVal.value);\n\n      host.style.setProperty('--_thumb-start', `${s}%`);\n      host.style.setProperty('--_thumb-end', `${e}%`);\n      host.style.setProperty('--_fill-start', `${s}%`);\n      host.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n    // ── Key-delta maps (avoids switch complexity) ─────────────────\n    const keyDelta = (key: string, step: number, min: number, max: number, current: number): number | null => {\n      if (key === 'ArrowRight' || key === 'ArrowUp') return current + step;\n\n      if (key === 'ArrowLeft' || key === 'ArrowDown') return current - step;\n\n      if (key === 'Home') return min;\n\n      if (key === 'End') return max;\n\n      return null;\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const { triggerValidation } = createFieldValidation(formCtx, {\n      reportValidity: () => sliderFd?.reportValidity() ?? false,\n    });\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n\n        return snapVal(min + pct * (max - min));\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n\n        if (dragging === 'start') startVal.value = Math.min(snapVal(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(snapVal(val), startVal.value);\n\n        startVal.value = Math.max(min, Math.min(startVal.value, max));\n        endVal.value = Math.max(min, Math.min(endVal.value, max));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !props.disabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            host.setAttribute('data-dragging', '');\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            host.removeAttribute('data-dragging');\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (props.disabled.value) return;\n\n        const step = getNum(props.step.value, 1);\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const next = keyDelta(e.key, step, min, max, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(snapVal(Math.max(min, Math.min(max, next))));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        thumbStartEl.addEventListener(\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        aria(thumbStartEl, {\n          label: 'Range start',\n          valuemax: () => endVal.value,\n          valuemin: () => getNum(props.min.value, 0),\n          valuenow: () => startVal.value,\n          valuetext: () => props['from-value-text'].value ?? null,\n        });\n      }\n\n      if (thumbEndEl) {\n        thumbEndEl.addEventListener(\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        aria(thumbEndEl, {\n          label: 'Range end',\n          valuemax: () => getNum(props.max.value, 100),\n          valuemin: () => startVal.value,\n          valuenow: () => endVal.value,\n          valuetext: () => props['to-value-text'].value ?? null,\n        });\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      host.setAttribute('role', 'slider');\n\n      if (!props.disabled.value) host.setAttribute('tabindex', '0');\n\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (props.disabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const step = getNum(props.step.value, 1);\n        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n        const newValue = Math.max(min, Math.min(max, Math.round((min + pct * (max - min)) / step) * step));\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isDragging = false;\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !props.disabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => isDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!host.hasAttribute('data-dragging')) host.setAttribute('data-dragging', '');\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => isDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isDragging = false;\n            host.removeAttribute('data-dragging');\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        host,\n        'keydown',\n        guard(\n          () => !props.disabled.value,\n          (e: KeyboardEvent) => {\n            const min = getNum(props.min.value, 0);\n            const max = getNum(props.max.value, 100);\n            const step = getNum(props.step.value, 1);\n            const val = Number(valueSignal.value || 0);\n            const next = keyDelta(e.key, step, min, max, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = Math.max(min, Math.min(max, next));\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMount(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has('default').value && labelRef.value) {\n        const labelId = createId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) aria({ labelledby: labelId });\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n    `;\n  },\n  styles: [\n    disabledStateMixin(),\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n  tag: 'bit-slider',\n});\n"],"mappings":"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"}