@hypoth-ui/wc 0.1.1

package/dist/chunk-WQ5BEP3E.js

@@ -0,0 +1,2845 @@
+import {
+  StandardEvents,
+  emitEvent
+} from "./chunk-YDQ434UH.js";
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/collapsible/collapsible-content.ts
+import { createPresence, prefersReducedMotion } from "@hypoth-ui/primitives-dom";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var DsCollapsibleContent = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.forceMount = false;
+    this.dataState = "closed";
+    this.isAnimatingOut = false;
+    this.presence = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "region");
+    this.updateVisibility();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.presence?.destroy();
+    this.presence = null;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("dataState")) {
+      this.handleStateChange();
+    }
+  }
+  handleStateChange() {
+    this.setAttribute("data-state", this.dataState);
+    if (this.dataState === "open") {
+      this.isAnimatingOut = false;
+      this.updateVisibility();
+    } else if (!this.forceMount && !prefersReducedMotion()) {
+      this.isAnimatingOut = true;
+      this.presence?.destroy();
+      this.presence = createPresence({
+        onExitComplete: () => {
+          this.isAnimatingOut = false;
+          this.updateVisibility();
+        }
+      });
+      this.presence.hide(this);
+    } else {
+      this.updateVisibility();
+    }
+  }
+  updateVisibility() {
+    if (this.forceMount) {
+      this.hidden = false;
+      return;
+    }
+    if (this.isAnimatingOut) {
+      this.hidden = false;
+      return;
+    }
+    this.hidden = this.dataState === "closed";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, attribute: "force-mount" })
+], DsCollapsibleContent.prototype, "forceMount", 2);
+__decorateClass([
+  state()
+], DsCollapsibleContent.prototype, "dataState", 2);
+__decorateClass([
+  state()
+], DsCollapsibleContent.prototype, "isAnimatingOut", 2);
+define("ds-collapsible-content", DsCollapsibleContent);
+
+// src/components/collapsible/collapsible-trigger.ts
+import { html as html2 } from "lit";
+var DsCollapsibleTrigger = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
+  }
+  render() {
+    return html2`<slot></slot>`;
+  }
+};
+define("ds-collapsible-trigger", DsCollapsibleTrigger);
+
+// src/components/collapsible/collapsible.ts
+import { html as html3 } from "lit";
+import { property as property2, state as state2 } from "lit/decorators.js";
+var DsCollapsible = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.disabled = false;
+    this.contentId = `collapsible-${crypto.randomUUID().slice(0, 8)}`;
+    this.handleTriggerClick = (event) => {
+      const target = event.target;
+      const trigger = target.closest('[slot="trigger"], ds-collapsible-trigger');
+      if (trigger && this.contains(trigger)) {
+        this.toggle();
+      }
+    };
+    this.handleKeyDown = (event) => {
+      const target = event.target;
+      const trigger = target.closest('[slot="trigger"], ds-collapsible-trigger');
+      if (trigger && this.contains(trigger)) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          this.toggle();
+        }
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleTriggerClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleTriggerClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  /**
+   * Toggle the open state.
+   */
+  toggle() {
+    if (this.disabled) return;
+    this.setOpen(!this.open);
+  }
+  /**
+   * Set the open state.
+   */
+  setOpen(open) {
+    if (this.disabled || this.open === open) return;
+    this.open = open;
+    emitEvent(this, open ? StandardEvents.OPEN : StandardEvents.CLOSE);
+    this.updateContent();
+  }
+  updated() {
+    this.updateContent();
+    this.updateTrigger();
+  }
+  updateContent() {
+    const content = this.querySelector("ds-collapsible-content");
+    if (content) {
+      content.id = this.contentId;
+      content.dataState = this.open ? "open" : "closed";
+    }
+  }
+  updateTrigger() {
+    const trigger = this.querySelector('[slot="trigger"]') || this.querySelector("ds-collapsible-trigger");
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", String(this.open));
+      trigger.setAttribute("aria-controls", this.contentId);
+      if (this.disabled) {
+        trigger.setAttribute("aria-disabled", "true");
+      } else {
+        trigger.removeAttribute("aria-disabled");
+      }
+    }
+  }
+  render() {
+    return html3`
+      <slot name="trigger"></slot>
+      <slot></slot>
+    `;
+  }
+};
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], DsCollapsible.prototype, "open", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], DsCollapsible.prototype, "disabled", 2);
+__decorateClass([
+  state2()
+], DsCollapsible.prototype, "contentId", 2);
+define("ds-collapsible", DsCollapsible);
+
+// src/components/tabs/tabs-list.ts
+import { html as html4 } from "lit";
+var DsTabsList = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      this.setupBehavior();
+    });
+  }
+  /**
+   * Setup behavior connection (called by parent when options change).
+   */
+  setupBehavior() {
+    const tabsRoot = this.closest("ds-tabs");
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    if (!tabsBehavior) return;
+    const tablistProps = tabsBehavior.getTabListProps();
+    this.setAttribute("id", tablistProps.id);
+    this.setAttribute("role", tablistProps.role);
+    this.setAttribute("aria-orientation", tablistProps["aria-orientation"]);
+    tabsBehavior.setTablistElement(this);
+  }
+  render() {
+    return html4`<slot></slot>`;
+  }
+};
+define("ds-tabs-list", DsTabsList);
+
+// src/components/tabs/tabs-trigger.ts
+import { html as html5 } from "lit";
+import { property as property3, state as state3 } from "lit/decorators.js";
+var DsTabsTrigger = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+    this.handleClick = () => {
+      const tabsRoot = this.closest("ds-tabs");
+      const tabsBehavior = tabsRoot?.getTabsBehavior();
+      tabsBehavior?.handleTriggerClick(this.value);
+    };
+    this.handleKeyDown = (event) => {
+      const tabsRoot = this.closest("ds-tabs");
+      const tabsBehavior = tabsRoot?.getTabsBehavior();
+      tabsBehavior?.handleTriggerKeyDown(event, this.value);
+    };
+    this.handleFocus = () => {
+      const tabsRoot = this.closest("ds-tabs");
+      const tabsBehavior = tabsRoot?.getTabsBehavior();
+      tabsBehavior?.handleTriggerFocus(this.value);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+    this.addEventListener("focus", this.handleFocus);
+    requestAnimationFrame(() => {
+      this.registerWithBehavior();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+    this.removeEventListener("focus", this.handleFocus);
+    const tabsRoot = this.closest("ds-tabs");
+    tabsRoot?.getTabsBehavior()?.unregisterTab(this.value);
+  }
+  registerWithBehavior() {
+    const tabsRoot = this.closest("ds-tabs");
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    if (!tabsBehavior) return;
+    tabsBehavior.registerTab(this.value, { disabled: this.disabled });
+    this.applyBehaviorProps();
+  }
+  applyBehaviorProps() {
+    const tabsRoot = this.closest("ds-tabs");
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    if (!tabsBehavior) return;
+    const triggerProps = tabsBehavior.getTriggerProps(this.value, { disabled: this.disabled });
+    this.id = triggerProps.id;
+    this.setAttribute("role", triggerProps.role);
+    this.setAttribute("tabindex", String(triggerProps.tabIndex));
+    this.setAttribute("aria-selected", triggerProps["aria-selected"]);
+    this.setAttribute("aria-controls", triggerProps["aria-controls"]);
+    if (triggerProps["aria-disabled"]) {
+      this.setAttribute("aria-disabled", triggerProps["aria-disabled"]);
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
+  }
+  /**
+   * Update from behavior (called by parent).
+   */
+  updateFromBehavior(selected) {
+    this.selected = selected;
+    this.applyBehaviorProps();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      const tabsRoot = this.closest("ds-tabs");
+      const tabsBehavior = tabsRoot?.getTabsBehavior();
+      if (tabsBehavior) {
+        tabsBehavior.unregisterTab(this.value);
+        tabsBehavior.registerTab(this.value, { disabled: this.disabled });
+        this.applyBehaviorProps();
+      }
+    }
+  }
+  render() {
+    return html5`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property3({ reflect: true })
+], DsTabsTrigger.prototype, "value", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], DsTabsTrigger.prototype, "disabled", 2);
+__decorateClass([
+  state3()
+], DsTabsTrigger.prototype, "selected", 2);
+define("ds-tabs-trigger", DsTabsTrigger);
+
+// src/components/tabs/tabs-content.ts
+import { html as html6 } from "lit";
+import { property as property4, state as state4 } from "lit/decorators.js";
+var DsTabsContent = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.forceMount = false;
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      this.applyBehaviorProps();
+    });
+  }
+  applyBehaviorProps() {
+    const tabsRoot = this.closest("ds-tabs");
+    const tabsBehavior = tabsRoot?.getTabsBehavior();
+    if (!tabsBehavior) {
+      this.setAttribute("role", "tabpanel");
+      return;
+    }
+    const panelProps = tabsBehavior.getPanelProps(this.value);
+    this.id = panelProps.id;
+    this.setAttribute("role", panelProps.role);
+    this.setAttribute("aria-labelledby", panelProps["aria-labelledby"]);
+    this.setAttribute("tabindex", String(panelProps.tabIndex));
+    if (this.forceMount) {
+      this.hidden = false;
+    } else {
+      this.hidden = panelProps.hidden;
+    }
+    this.setAttribute("data-state", panelProps.hidden ? "inactive" : "active");
+  }
+  /**
+   * Update from behavior (called by parent).
+   */
+  updateFromBehavior(active) {
+    this.active = active;
+    this.applyBehaviorProps();
+  }
+  render() {
+    return html6`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property4({ reflect: true })
+], DsTabsContent.prototype, "value", 2);
+__decorateClass([
+  property4({ type: Boolean, attribute: "force-mount" })
+], DsTabsContent.prototype, "forceMount", 2);
+__decorateClass([
+  state4()
+], DsTabsContent.prototype, "active", 2);
+define("ds-tabs-content", DsTabsContent);
+
+// src/components/tabs/tabs.ts
+import {
+  createTabsBehavior
+} from "@hypoth-ui/primitives-dom";
+import { html as html7 } from "lit";
+import { property as property5, state as state5 } from "lit/decorators.js";
+var DsTabs = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.activationMode = "automatic";
+    this.loop = true;
+    /** Behavior primitive instance */
+    this.tabsBehavior = null;
+  }
+  /** Whether we're in controlled mode */
+  get isControlled() {
+    return this.value !== void 0;
+  }
+  /** Current active value */
+  get activeValue() {
+    return this.isControlled ? this.value : this.internalValue;
+  }
+  /** Get the tabs behavior (for child components) */
+  getTabsBehavior() {
+    return this.tabsBehavior;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.isControlled && this.defaultValue) {
+      this.internalValue = this.defaultValue;
+    }
+    this.initTabsBehavior();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.tabsBehavior?.destroy();
+    this.tabsBehavior = null;
+  }
+  initTabsBehavior() {
+    this.tabsBehavior = createTabsBehavior({
+      defaultValue: this.activeValue ?? this.defaultValue ?? "",
+      orientation: this.orientation,
+      activationMode: this.activationMode,
+      loop: this.loop,
+      onValueChange: (newValue) => {
+        if (!this.isControlled) {
+          this.internalValue = newValue;
+        }
+        emitEvent(this, "ds:change", { detail: { value: newValue } });
+        this.updateTabsState();
+      }
+    });
+  }
+  /**
+   * Select a tab by value.
+   */
+  selectTab(value) {
+    if (this.activeValue === value) return;
+    this.tabsBehavior?.select(value);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") && this.isControlled && this.value) {
+      this.tabsBehavior?.select(this.value);
+      this.updateTabsState();
+    }
+    if (changedProperties.has("internalValue")) {
+      this.updateTabsState();
+    }
+    if (changedProperties.has("defaultValue") && !this.isControlled && !this.internalValue) {
+      this.internalValue = this.defaultValue;
+      this.tabsBehavior?.select(this.defaultValue ?? "");
+      this.updateTabsState();
+    }
+    if (changedProperties.has("orientation") || changedProperties.has("activationMode") || changedProperties.has("loop")) {
+      const currentValue = this.activeValue;
+      this.tabsBehavior?.destroy();
+      this.initTabsBehavior();
+      if (currentValue) {
+        this.tabsBehavior?.select(currentValue);
+      }
+      const tabsList = this.querySelector("ds-tabs-list");
+      tabsList?.setupBehavior();
+      this.updateTabsState();
+    }
+  }
+  updateTabsState() {
+    const activeValue = this.activeValue;
+    const triggers = this.querySelectorAll("ds-tabs-trigger");
+    for (const trigger of triggers) {
+      trigger.updateFromBehavior(trigger.value === activeValue);
+    }
+    const contents = this.querySelectorAll("ds-tabs-content");
+    for (const content of contents) {
+      content.updateFromBehavior(content.value === activeValue);
+    }
+  }
+  render() {
+    return html7`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property5()
+], DsTabs.prototype, "value", 2);
+__decorateClass([
+  property5({ attribute: "default-value" })
+], DsTabs.prototype, "defaultValue", 2);
+__decorateClass([
+  property5({ reflect: true })
+], DsTabs.prototype, "orientation", 2);
+__decorateClass([
+  property5({ attribute: "activation-mode" })
+], DsTabs.prototype, "activationMode", 2);
+__decorateClass([
+  property5({ type: Boolean })
+], DsTabs.prototype, "loop", 2);
+__decorateClass([
+  state5()
+], DsTabs.prototype, "internalValue", 2);
+define("ds-tabs", DsTabs);
+
+// src/components/accordion/accordion-item.ts
+import { html as html8 } from "lit";
+import { property as property6, state as state6 } from "lit/decorators.js";
+var DsAccordionItem = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.expanded = false;
+    /** ID for ARIA relationships */
+    this.contentId = "";
+    this.triggerId = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const id = crypto.randomUUID().slice(0, 8);
+    this.contentId = `accordion-content-${this.value}-${id}`;
+    this.triggerId = `accordion-trigger-${this.value}-${id}`;
+    this.setAttribute("data-state", "closed");
+  }
+  /**
+   * Set the expanded state (called by parent).
+   */
+  setExpanded(expanded) {
+    this.expanded = expanded;
+    this.setAttribute("data-state", expanded ? "open" : "closed");
+    this.updateChildren();
+  }
+  /**
+   * Get whether the item is expanded.
+   */
+  isExpanded() {
+    return this.expanded;
+  }
+  /**
+   * Get the content ID.
+   */
+  getContentId() {
+    return this.contentId;
+  }
+  /**
+   * Get the trigger ID.
+   */
+  getTriggerId() {
+    return this.triggerId;
+  }
+  updateChildren() {
+    const trigger = this.querySelector("ds-accordion-trigger");
+    const content = this.querySelector("ds-accordion-content");
+    if (trigger) {
+      trigger.id = this.triggerId;
+      trigger.setExpanded(this.expanded);
+      trigger.setContentId(this.contentId);
+      if (this.disabled) {
+        trigger.setAttribute("aria-disabled", "true");
+      } else {
+        trigger.removeAttribute("aria-disabled");
+      }
+    }
+    if (content) {
+      content.id = this.contentId;
+      content.setExpanded(this.expanded);
+      content.setTriggerId(this.triggerId);
+    }
+  }
+  updated() {
+    this.updateChildren();
+  }
+  render() {
+    return html8`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property6({ reflect: true })
+], DsAccordionItem.prototype, "value", 2);
+__decorateClass([
+  property6({ type: Boolean, reflect: true })
+], DsAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  state6()
+], DsAccordionItem.prototype, "expanded", 2);
+define("ds-accordion-item", DsAccordionItem);
+
+// src/components/accordion/accordion-trigger.ts
+import { html as html9 } from "lit";
+import { state as state7 } from "lit/decorators.js";
+var DsAccordionTrigger = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.expanded = false;
+    this.contentId = "";
+    this.handleClick = () => {
+      if (this.hasAttribute("aria-disabled")) return;
+      this.toggle();
+    };
+    this.handleKeyDown = (event) => {
+      if (this.hasAttribute("aria-disabled")) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.toggle();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  /**
+   * Set the expanded state (called by parent).
+   */
+  setExpanded(expanded) {
+    this.expanded = expanded;
+    this.updateAccessibility();
+  }
+  /**
+   * Set the content ID for aria-controls.
+   */
+  setContentId(id) {
+    this.contentId = id;
+    this.updateAccessibility();
+  }
+  toggle() {
+    const item = this.closest("ds-accordion-item");
+    if (!item) return;
+    emitEvent(this, "ds:accordion-toggle", {
+      detail: { value: item.value },
+      bubbles: true
+    });
+  }
+  updateAccessibility() {
+    this.setAttribute("aria-expanded", String(this.expanded));
+    if (this.contentId) {
+      this.setAttribute("aria-controls", this.contentId);
+    }
+  }
+  updated() {
+    this.updateAccessibility();
+  }
+  render() {
+    return html9`<slot></slot>`;
+  }
+};
+__decorateClass([
+  state7()
+], DsAccordionTrigger.prototype, "expanded", 2);
+__decorateClass([
+  state7()
+], DsAccordionTrigger.prototype, "contentId", 2);
+define("ds-accordion-trigger", DsAccordionTrigger);
+
+// src/components/accordion/accordion-content.ts
+import { createPresence as createPresence2, prefersReducedMotion as prefersReducedMotion2 } from "@hypoth-ui/primitives-dom";
+import { html as html10 } from "lit";
+import { property as property7, state as state8 } from "lit/decorators.js";
+var DsAccordionContent = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.forceMount = false;
+    this.expanded = false;
+    this.triggerId = "";
+    this.isAnimatingOut = false;
+    this.presence = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "region");
+    this.updateVisibility();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.presence?.destroy();
+    this.presence = null;
+  }
+  /**
+   * Set the expanded state (called by parent).
+   */
+  setExpanded(expanded) {
+    const wasExpanded = this.expanded;
+    this.expanded = expanded;
+    this.setAttribute("data-state", expanded ? "open" : "closed");
+    if (wasExpanded && !expanded) {
+      this.handleCollapse();
+    } else {
+      this.isAnimatingOut = false;
+      this.updateVisibility();
+    }
+  }
+  /**
+   * Set the trigger ID for aria-labelledby.
+   */
+  setTriggerId(id) {
+    this.triggerId = id;
+    this.setAttribute("aria-labelledby", id);
+  }
+  handleCollapse() {
+    if (!this.forceMount && !prefersReducedMotion2()) {
+      this.isAnimatingOut = true;
+      this.presence?.destroy();
+      this.presence = createPresence2({
+        onExitComplete: () => {
+          this.isAnimatingOut = false;
+          this.updateVisibility();
+        }
+      });
+      this.presence.hide(this);
+    } else {
+      this.updateVisibility();
+    }
+  }
+  updateVisibility() {
+    if (this.forceMount) {
+      this.hidden = false;
+      return;
+    }
+    if (this.isAnimatingOut) {
+      this.hidden = false;
+      return;
+    }
+    this.hidden = !this.expanded;
+  }
+  render() {
+    return html10`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property7({ type: Boolean, attribute: "force-mount" })
+], DsAccordionContent.prototype, "forceMount", 2);
+__decorateClass([
+  state8()
+], DsAccordionContent.prototype, "expanded", 2);
+__decorateClass([
+  state8()
+], DsAccordionContent.prototype, "triggerId", 2);
+__decorateClass([
+  state8()
+], DsAccordionContent.prototype, "isAnimatingOut", 2);
+define("ds-accordion-content", DsAccordionContent);
+
+// src/components/accordion/accordion.ts
+import { createRovingFocus } from "@hypoth-ui/primitives-dom";
+import { html as html11 } from "lit";
+import { property as property8, state as state9 } from "lit/decorators.js";
+var DsAccordion = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.type = "single";
+    this.collapsible = false;
+    this.orientation = "vertical";
+    this.internalValue = /* @__PURE__ */ new Set();
+    this.rovingFocus = null;
+    this.handleItemToggle = (event) => {
+      this.toggleItem(event.detail.value);
+    };
+  }
+  /** Whether we're in controlled mode */
+  get isControlled() {
+    return this.value !== void 0;
+  }
+  /** Current expanded values */
+  get expandedValues() {
+    if (this.isControlled) {
+      return this.parseValue(this.value);
+    }
+    return this.internalValue;
+  }
+  parseValue(value) {
+    if (!value) return /* @__PURE__ */ new Set();
+    if (value.startsWith("[")) {
+      try {
+        const arr = JSON.parse(value);
+        return new Set(Array.isArray(arr) ? arr : []);
+      } catch {
+        return /* @__PURE__ */ new Set();
+      }
+    }
+    return /* @__PURE__ */ new Set([value]);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.isControlled && this.defaultValue) {
+      this.internalValue = this.parseValue(this.defaultValue);
+    }
+    this.addEventListener("ds:accordion-toggle", this.handleItemToggle);
+    requestAnimationFrame(() => {
+      this.setupRovingFocus();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:accordion-toggle", this.handleItemToggle);
+    this.rovingFocus?.destroy();
+    this.rovingFocus = null;
+  }
+  setupRovingFocus() {
+    this.rovingFocus = createRovingFocus({
+      container: this,
+      selector: "ds-accordion-trigger:not([aria-disabled='true'])",
+      direction: this.orientation,
+      loop: true
+    });
+  }
+  /**
+   * Toggle an item's expanded state.
+   */
+  toggleItem(value) {
+    const items = this.querySelectorAll("ds-accordion-item");
+    const item = Array.from(items).find((i) => i.value === value);
+    if (!item || item.disabled) return;
+    const currentExpanded = this.expandedValues;
+    const isExpanded = currentExpanded.has(value);
+    let newValue;
+    if (this.type === "single") {
+      if (isExpanded) {
+        newValue = this.collapsible ? /* @__PURE__ */ new Set() : currentExpanded;
+      } else {
+        newValue = /* @__PURE__ */ new Set([value]);
+      }
+    } else {
+      newValue = new Set(currentExpanded);
+      if (isExpanded) {
+        newValue.delete(value);
+      } else {
+        newValue.add(value);
+      }
+    }
+    if (!this.isControlled) {
+      this.internalValue = newValue;
+    }
+    const eventValue = this.type === "single" ? Array.from(newValue)[0] ?? "" : JSON.stringify(Array.from(newValue));
+    emitEvent(this, "ds:change", { detail: { value: eventValue } });
+    this.updateItems();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("internalValue") || changedProperties.has("defaultValue")) {
+      this.updateItems();
+    }
+  }
+  updateItems() {
+    const expanded = this.expandedValues;
+    const items = this.querySelectorAll("ds-accordion-item");
+    for (const item of items) {
+      item.setExpanded(expanded.has(item.value));
+    }
+  }
+  render() {
+    return html11`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property8({ reflect: true })
+], DsAccordion.prototype, "type", 2);
+__decorateClass([
+  property8()
+], DsAccordion.prototype, "value", 2);
+__decorateClass([
+  property8({ attribute: "default-value" })
+], DsAccordion.prototype, "defaultValue", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], DsAccordion.prototype, "collapsible", 2);
+__decorateClass([
+  property8({ reflect: true })
+], DsAccordion.prototype, "orientation", 2);
+__decorateClass([
+  state9()
+], DsAccordion.prototype, "internalValue", 2);
+define("ds-accordion", DsAccordion);
+
+// src/components/navigation-menu/navigation-menu-list.ts
+import { html as html12 } from "lit";
+var DsNavigationMenuList = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menubar");
+  }
+  render() {
+    return html12`<slot></slot>`;
+  }
+};
+define("ds-navigation-menu-list", DsNavigationMenuList);
+
+// src/components/navigation-menu/navigation-menu-item.ts
+import { html as html13 } from "lit";
+import { property as property9 } from "lit/decorators.js";
+var DsNavigationMenuItem = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.handleMouseEnter = () => {
+      emitEvent(this, "ds:navigation-item-enter", {
+        detail: { value: this.value },
+        bubbles: true
+      });
+    };
+    this.handleMouseLeave = () => {
+      emitEvent(this, "ds:navigation-item-leave", {
+        detail: { value: this.value },
+        bubbles: true
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
+    this.setAttribute("data-state", "closed");
+    this.addEventListener("mouseenter", this.handleMouseEnter);
+    this.addEventListener("mouseleave", this.handleMouseLeave);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.removeEventListener("mouseleave", this.handleMouseLeave);
+  }
+  render() {
+    return html13`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property9({ type: String, reflect: true })
+], DsNavigationMenuItem.prototype, "value", 2);
+define("ds-navigation-menu-item", DsNavigationMenuItem);
+
+// src/components/navigation-menu/navigation-menu-trigger.ts
+import { html as html14 } from "lit";
+import { property as property10 } from "lit/decorators.js";
+var DsNavigationMenuTrigger = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.observer = null;
+    this.handleClick = () => {
+      if (this.disabled) return;
+      const value = this.getItemValue();
+      emitEvent(this, "ds:navigation-trigger", {
+        detail: { value, type: "click" },
+        bubbles: true
+      });
+    };
+    this.handleKeyDown = (event) => {
+      if (this.disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handleClick();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const value = this.getItemValue();
+        emitEvent(this, "ds:navigation-trigger", {
+          detail: { value, type: "focus" },
+          bubbles: true
+        });
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("aria-haspopup", "menu");
+    this.updateAriaExpanded();
+    const item = this.closest("ds-navigation-menu-item");
+    if (item) {
+      this.observer = new MutationObserver(() => {
+        this.updateAriaExpanded();
+      });
+      this.observer.observe(item, { attributes: true, attributeFilter: ["data-state"] });
+    }
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+  /**
+   * Update aria-expanded based on parent item's state.
+   * Per APG, menuitem with submenu should have aria-expanded.
+   */
+  updateAriaExpanded() {
+    const item = this.closest("ds-navigation-menu-item");
+    const isOpen = item?.getAttribute("data-state") === "open";
+    this.setAttribute("aria-expanded", String(isOpen));
+  }
+  getItemValue() {
+    const item = this.closest("ds-navigation-menu-item");
+    return item?.getAttribute("value") || "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+  render() {
+    return html14`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property10({ type: Boolean, reflect: true })
+], DsNavigationMenuTrigger.prototype, "disabled", 2);
+define("ds-navigation-menu-trigger", DsNavigationMenuTrigger);
+
+// src/components/navigation-menu/navigation-menu-content.ts
+import { html as html15 } from "lit";
+var DsNavigationMenuContent = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  render() {
+    return html15`<slot></slot>`;
+  }
+};
+define("ds-navigation-menu-content", DsNavigationMenuContent);
+
+// src/components/navigation-menu/navigation-menu-link.ts
+import { html as html16 } from "lit";
+import { property as property11 } from "lit/decorators.js";
+var DsNavigationMenuLink = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.active = false;
+    this.disabled = false;
+    this.handleClick = (event) => {
+      if (this.disabled) return;
+      const navigateEvent = emitEvent(this, "ds:navigate", {
+        detail: { href: this.href },
+        bubbles: true,
+        cancelable: true
+      });
+      if (!navigateEvent.defaultPrevented && this.href) {
+        if (event.ctrlKey || event.metaKey) {
+          window.open(this.href, "_blank");
+        } else {
+          window.location.href = this.href;
+        }
+      }
+    };
+    this.handleKeyDown = (event) => {
+      if (this.disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handleClick(new MouseEvent("click"));
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      this.setAttribute("aria-current", this.active ? "page" : "false");
+    }
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+  render() {
+    return html16`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property11({ type: String, reflect: true })
+], DsNavigationMenuLink.prototype, "href", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], DsNavigationMenuLink.prototype, "active", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], DsNavigationMenuLink.prototype, "disabled", 2);
+define("ds-navigation-menu-link", DsNavigationMenuLink);
+
+// src/components/navigation-menu/navigation-menu-indicator.ts
+import { html as html17 } from "lit";
+var DsNavigationMenuIndicator = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-hidden", "true");
+  }
+  render() {
+    return html17`<div class="ds-navigation-menu-indicator__arrow"></div>`;
+  }
+};
+define("ds-navigation-menu-indicator", DsNavigationMenuIndicator);
+
+// src/components/navigation-menu/navigation-menu-viewport.ts
+import { html as html18 } from "lit";
+var DsNavigationMenuViewport = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.contentObserver = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("hidden", "");
+    this.setAttribute("data-state", "closed");
+    this.setupContentObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.contentObserver?.disconnect();
+    this.contentObserver = null;
+  }
+  setupContentObserver() {
+    const menu = this.closest("ds-navigation-menu");
+    if (!menu) return;
+    this.contentObserver = new MutationObserver(() => {
+      this.updateContent();
+    });
+    this.contentObserver.observe(menu, {
+      attributes: true,
+      attributeFilter: ["value"]
+    });
+    this.updateContent();
+  }
+  updateContent() {
+    const menu = this.closest("ds-navigation-menu");
+    if (!menu) return;
+    const value = menu.getAttribute("value");
+    const items = menu.querySelectorAll("ds-navigation-menu-item");
+    this.innerHTML = "";
+    for (const item of items) {
+      const itemValue = item.getAttribute("value");
+      const content = item.querySelector("ds-navigation-menu-content");
+      if (itemValue === value && content) {
+        const clone = content.cloneNode(true);
+        clone.setAttribute("data-value", itemValue || "");
+        this.appendChild(clone);
+      }
+    }
+  }
+  render() {
+    return html18`<slot></slot>`;
+  }
+};
+define("ds-navigation-menu-viewport", DsNavigationMenuViewport);
+
+// src/components/navigation-menu/navigation-menu.ts
+import {
+  createDismissableLayer,
+  createRovingFocus as createRovingFocus2
+} from "@hypoth-ui/primitives-dom";
+import { html as html19 } from "lit";
+import { property as property12 } from "lit/decorators.js";
+var DsNavigationMenu = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.delayDuration = 200;
+    this.skipDelayDuration = 300;
+    this.orientation = "horizontal";
+    this.rovingFocus = null;
+    this.dismissLayer = null;
+    this.openTimer = null;
+    this.closeTimer = null;
+    this.previousValue = "";
+    this.handleTriggerInteraction = (event) => {
+      const { value } = event.detail;
+      if (this.value === value) {
+        this.close();
+      } else {
+        this.open(value);
+      }
+    };
+    this.handleItemEnter = (event) => {
+      const { value } = event.detail;
+      this.clearTimers();
+      const delay = this.value ? 0 : this.delayDuration;
+      this.openTimer = setTimeout(() => {
+        this.open(value);
+      }, delay);
+    };
+    this.handleItemLeave = () => {
+      this.clearTimers();
+      this.closeTimer = setTimeout(() => {
+        this.close();
+      }, this.skipDelayDuration);
+    };
+    this.handleDismiss = () => {
+      this.close();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "Main");
+    this.addEventListener("ds:navigation-trigger", this.handleTriggerInteraction);
+    this.addEventListener("ds:navigation-item-enter", this.handleItemEnter);
+    this.addEventListener("ds:navigation-item-leave", this.handleItemLeave);
+    this.updateComplete.then(() => {
+      this.setupRovingFocus();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "ds:navigation-trigger",
+      this.handleTriggerInteraction
+    );
+    this.removeEventListener("ds:navigation-item-enter", this.handleItemEnter);
+    this.removeEventListener("ds:navigation-item-leave", this.handleItemLeave);
+    this.cleanup();
+  }
+  /**
+   * Opens a navigation item by value.
+   */
+  open(itemValue) {
+    if (this.value === itemValue) return;
+    this.clearTimers();
+    this.previousValue = this.value;
+    this.value = itemValue;
+    this.updateActiveItem();
+    this.setupDismissLayer();
+    emitEvent(this, "ds:value-change", {
+      detail: { value: this.value },
+      bubbles: true
+    });
+  }
+  /**
+   * Closes the navigation menu.
+   */
+  close() {
+    if (!this.value) return;
+    this.clearTimers();
+    this.previousValue = this.value;
+    this.value = "";
+    this.updateActiveItem();
+    this.dismissLayer?.deactivate();
+    this.dismissLayer = null;
+    emitEvent(this, "ds:value-change", {
+      detail: { value: "" },
+      bubbles: true
+    });
+  }
+  clearTimers() {
+    if (this.openTimer) {
+      clearTimeout(this.openTimer);
+      this.openTimer = null;
+    }
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  }
+  setupRovingFocus() {
+    const list = this.querySelector("ds-navigation-menu-list");
+    if (!list) return;
+    this.rovingFocus = createRovingFocus2({
+      container: list,
+      selector: "ds-navigation-menu-trigger, ds-navigation-menu-link:not([disabled])",
+      direction: this.orientation === "horizontal" ? "horizontal" : "vertical",
+      loop: true,
+      skipDisabled: true
+    });
+  }
+  setupDismissLayer() {
+    if (this.dismissLayer) {
+      this.dismissLayer.deactivate();
+    }
+    const viewport = this.querySelector("ds-navigation-menu-viewport");
+    if (!viewport) return;
+    this.dismissLayer = createDismissableLayer({
+      container: viewport,
+      excludeElements: [this],
+      onDismiss: this.handleDismiss,
+      closeOnEscape: true,
+      closeOnOutsideClick: true
+    });
+    this.dismissLayer.activate();
+  }
+  updateActiveItem() {
+    const items = this.querySelectorAll("ds-navigation-menu-item");
+    for (const item of items) {
+      const itemValue = item.getAttribute("value") || "";
+      const isActive = itemValue === this.value;
+      if (isActive) {
+        item.setAttribute("data-state", "open");
+      } else {
+        item.setAttribute("data-state", "closed");
+      }
+    }
+    const viewport = this.querySelector("ds-navigation-menu-viewport");
+    if (viewport) {
+      if (this.value) {
+        viewport.removeAttribute("hidden");
+        viewport.setAttribute("data-state", "open");
+      } else {
+        viewport.setAttribute("data-state", "closed");
+        setTimeout(() => {
+          if (!this.value) {
+            viewport.setAttribute("hidden", "");
+          }
+        }, 200);
+      }
+    }
+  }
+  cleanup() {
+    this.clearTimers();
+    this.rovingFocus?.destroy();
+    this.rovingFocus = null;
+    this.dismissLayer?.deactivate();
+    this.dismissLayer = null;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.updateActiveItem();
+    }
+  }
+  render() {
+    return html19`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property12({ type: String, reflect: true })
+], DsNavigationMenu.prototype, "value", 2);
+__decorateClass([
+  property12({ type: Number, attribute: "delay-duration" })
+], DsNavigationMenu.prototype, "delayDuration", 2);
+__decorateClass([
+  property12({ type: Number, attribute: "skip-delay-duration" })
+], DsNavigationMenu.prototype, "skipDelayDuration", 2);
+__decorateClass([
+  property12({ type: String, reflect: true })
+], DsNavigationMenu.prototype, "orientation", 2);
+define("ds-navigation-menu", DsNavigationMenu);
+
+// src/components/scroll-area/scroll-area-viewport.ts
+import { html as html20 } from "lit";
+var DsScrollAreaViewport = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.resizeObserver = null;
+    this.handleScroll = () => {
+      this.updateScrollbarPositions();
+      emitEvent(this, "ds:scroll", {
+        detail: {
+          scrollTop: this.scrollTop,
+          scrollLeft: this.scrollLeft,
+          scrollHeight: this.scrollHeight,
+          scrollWidth: this.scrollWidth
+        },
+        bubbles: true
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("scroll", this.handleScroll);
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateOverflowState();
+    });
+    this.resizeObserver.observe(this);
+    this.updateComplete.then(() => {
+      this.updateOverflowState();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("scroll", this.handleScroll);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+  updateOverflowState() {
+    const hasVerticalOverflow = this.scrollHeight > this.clientHeight;
+    const hasHorizontalOverflow = this.scrollWidth > this.clientWidth;
+    this.toggleAttribute("data-overflow-y", hasVerticalOverflow);
+    this.toggleAttribute("data-overflow-x", hasHorizontalOverflow);
+    const scrollArea = this.closest("ds-scroll-area");
+    if (scrollArea) {
+      scrollArea.toggleAttribute("data-overflow-y", hasVerticalOverflow);
+      scrollArea.toggleAttribute("data-overflow-x", hasHorizontalOverflow);
+    }
+    this.updateScrollbarPositions();
+  }
+  updateScrollbarPositions() {
+    const scrollArea = this.closest("ds-scroll-area");
+    if (!scrollArea) return;
+    const scrollbars = scrollArea.querySelectorAll("ds-scroll-area-scrollbar");
+    for (const scrollbar of scrollbars) {
+      const orientation = scrollbar.getAttribute("orientation") || "vertical";
+      const thumb = scrollbar.querySelector("ds-scroll-area-thumb");
+      if (!thumb) continue;
+      if (orientation === "vertical") {
+        const scrollRatio = this.scrollTop / (this.scrollHeight - this.clientHeight);
+        const thumbHeight = this.clientHeight / this.scrollHeight * 100;
+        const thumbTop = scrollRatio * (100 - thumbHeight);
+        thumb.style.height = `${Math.max(10, thumbHeight)}%`;
+        thumb.style.top = `${thumbTop}%`;
+      } else {
+        const scrollRatio = this.scrollLeft / (this.scrollWidth - this.clientWidth);
+        const thumbWidth = this.clientWidth / this.scrollWidth * 100;
+        const thumbLeft = scrollRatio * (100 - thumbWidth);
+        thumb.style.width = `${Math.max(10, thumbWidth)}%`;
+        thumb.style.left = `${thumbLeft}%`;
+      }
+    }
+  }
+  /**
+   * Scrolls to a specific position.
+   */
+  scrollToPosition(options) {
+    this.scrollTo(options);
+  }
+  render() {
+    return html20`<slot></slot>`;
+  }
+};
+define("ds-scroll-area-viewport", DsScrollAreaViewport);
+
+// src/components/scroll-area/scroll-area-scrollbar.ts
+import { html as html21 } from "lit";
+import { property as property13 } from "lit/decorators.js";
+var DsScrollAreaScrollbar = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "vertical";
+    this.hideTimer = null;
+    this.isHovered = false;
+    this.handleTrackClick = (event) => {
+      const thumb = event.target;
+      if (thumb.tagName === "DS-SCROLL-AREA-THUMB") return;
+      const scrollArea = this.closest("ds-scroll-area");
+      const viewport = scrollArea?.querySelector("ds-scroll-area-viewport");
+      if (!viewport) return;
+      const rect = this.getBoundingClientRect();
+      if (this.orientation === "vertical") {
+        const clickRatio = (event.clientY - rect.top) / rect.height;
+        const scrollHeight = viewport.scrollHeight - viewport.clientHeight;
+        viewport.scrollTo({
+          top: clickRatio * scrollHeight,
+          behavior: "smooth"
+        });
+      } else {
+        const clickRatio = (event.clientX - rect.left) / rect.width;
+        const scrollWidth = viewport.scrollWidth - viewport.clientWidth;
+        viewport.scrollTo({
+          left: clickRatio * scrollWidth,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleViewportScroll = () => {
+      this.setAttribute("data-state", "visible");
+      this.scheduleHide();
+    };
+    this.handleMouseEnter = () => {
+      this.isHovered = true;
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+    };
+    this.handleMouseLeave = () => {
+      this.isHovered = false;
+      this.scheduleHide();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "scrollbar");
+    this.setAttribute("aria-orientation", this.orientation);
+    this.addEventListener("mousedown", this.handleTrackClick);
+    this.addEventListener("mouseenter", this.handleMouseEnter);
+    this.addEventListener("mouseleave", this.handleMouseLeave);
+    const scrollArea = this.closest("ds-scroll-area");
+    const viewport = scrollArea?.querySelector("ds-scroll-area-viewport");
+    if (viewport) {
+      viewport.addEventListener("scroll", this.handleViewportScroll);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mousedown", this.handleTrackClick);
+    this.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.removeEventListener("mouseleave", this.handleMouseLeave);
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+    }
+    const scrollArea = this.closest("ds-scroll-area");
+    const viewport = scrollArea?.querySelector("ds-scroll-area-viewport");
+    if (viewport) {
+      viewport.removeEventListener("scroll", this.handleViewportScroll);
+    }
+  }
+  scheduleHide() {
+    const scrollArea = this.closest("ds-scroll-area");
+    const type = scrollArea?.getAttribute("type") || "hover";
+    if (type !== "hover") return;
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+    }
+    const delay = Number(scrollArea?.getAttribute("scroll-hide-delay")) || 600;
+    this.hideTimer = setTimeout(() => {
+      if (!this.isHovered) {
+        this.setAttribute("data-state", "hidden");
+      }
+    }, delay);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("orientation")) {
+      this.setAttribute("aria-orientation", this.orientation);
+    }
+  }
+  render() {
+    return html21`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property13({ type: String, reflect: true })
+], DsScrollAreaScrollbar.prototype, "orientation", 2);
+define("ds-scroll-area-scrollbar", DsScrollAreaScrollbar);
+
+// src/components/scroll-area/scroll-area-thumb.ts
+import { html as html22 } from "lit";
+var DsScrollAreaThumb = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.isDragging = false;
+    this.startY = 0;
+    this.startX = 0;
+    this.startScrollTop = 0;
+    this.startScrollLeft = 0;
+    /** Cached scrollbar dimensions to avoid layout thrashing during drag */
+    this.cachedDimensions = { width: 0, height: 0 };
+    /** ResizeObserver for tracking scrollbar size changes */
+    this.resizeObserver = null;
+    /** Scrollbar element reference for ResizeObserver */
+    this.scrollbarElement = null;
+    this.handleMouseDown = (event) => {
+      event.preventDefault();
+      this.startDrag(event.clientX, event.clientY);
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+    };
+    this.handleMouseMove = (event) => {
+      if (!this.isDragging) return;
+      this.drag(event.clientX, event.clientY);
+    };
+    this.handleMouseUp = () => {
+      this.cleanupDrag();
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.touches[0];
+      if (!touch) return;
+      event.preventDefault();
+      this.startDrag(touch.clientX, touch.clientY);
+      document.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+      document.addEventListener("touchend", this.handleTouchEnd);
+    };
+    this.handleTouchMove = (event) => {
+      if (!this.isDragging) return;
+      const touch = event.touches[0];
+      if (!touch) return;
+      event.preventDefault();
+      this.drag(touch.clientX, touch.clientY);
+    };
+    this.handleTouchEnd = () => {
+      this.cleanupDrag();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mousedown", this.handleMouseDown);
+    this.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+    this.setupResizeObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mousedown", this.handleMouseDown);
+    this.removeEventListener("touchstart", this.handleTouchStart);
+    this.cleanupDrag();
+    this.cleanupResizeObserver();
+  }
+  /**
+   * Set up ResizeObserver to cache scrollbar dimensions.
+   * This avoids calling getBoundingClientRect on every drag event.
+   */
+  setupResizeObserver() {
+    this.cleanupResizeObserver();
+    const scrollbar = this.closest("ds-scroll-area-scrollbar");
+    if (!scrollbar) return;
+    this.scrollbarElement = scrollbar;
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === this.scrollbarElement) {
+          this.cachedDimensions = {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height
+          };
+        }
+      }
+    });
+    this.resizeObserver.observe(scrollbar);
+    const rect = scrollbar.getBoundingClientRect();
+    this.cachedDimensions = {
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  /**
+   * Clean up ResizeObserver on disconnect.
+   */
+  cleanupResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    this.scrollbarElement = null;
+  }
+  getViewport() {
+    const scrollArea = this.closest("ds-scroll-area");
+    return scrollArea?.querySelector("ds-scroll-area-viewport") || null;
+  }
+  getOrientation() {
+    const scrollbar = this.closest("ds-scroll-area-scrollbar");
+    return scrollbar?.getAttribute("orientation") || "vertical";
+  }
+  startDrag(clientX, clientY) {
+    const viewport = this.getViewport();
+    if (!viewport) return;
+    this.isDragging = true;
+    this.startX = clientX;
+    this.startY = clientY;
+    this.startScrollTop = viewport.scrollTop;
+    this.startScrollLeft = viewport.scrollLeft;
+    this.setAttribute("data-dragging", "");
+    document.body.style.userSelect = "none";
+  }
+  /**
+   * Handle drag movement using cached dimensions.
+   * Uses ResizeObserver-cached values instead of getBoundingClientRect
+   * to avoid layout thrashing during drag operations.
+   */
+  drag(clientX, clientY) {
+    const viewport = this.getViewport();
+    if (!viewport) return;
+    const orientation = this.getOrientation();
+    const { width: trackWidth, height: trackHeight } = this.cachedDimensions;
+    if (orientation === "vertical") {
+      const deltaY = clientY - this.startY;
+      const scrollableHeight = viewport.scrollHeight - viewport.clientHeight;
+      if (trackHeight > 0 && scrollableHeight > 0) {
+        const scrollDelta = deltaY / trackHeight * scrollableHeight;
+        viewport.scrollTop = this.startScrollTop + scrollDelta;
+      }
+    } else {
+      const deltaX = clientX - this.startX;
+      const scrollableWidth = viewport.scrollWidth - viewport.clientWidth;
+      if (trackWidth > 0 && scrollableWidth > 0) {
+        const scrollDelta = deltaX / trackWidth * scrollableWidth;
+        viewport.scrollLeft = this.startScrollLeft + scrollDelta;
+      }
+    }
+  }
+  cleanupDrag() {
+    this.isDragging = false;
+    this.removeAttribute("data-dragging");
+    document.body.style.userSelect = "";
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    document.removeEventListener("touchmove", this.handleTouchMove);
+    document.removeEventListener("touchend", this.handleTouchEnd);
+  }
+  render() {
+    return html22``;
+  }
+};
+define("ds-scroll-area-thumb", DsScrollAreaThumb);
+
+// src/components/scroll-area/scroll-area.ts
+import { html as html23 } from "lit";
+import { property as property14 } from "lit/decorators.js";
+var DsScrollArea = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.type = "hover";
+    this.scrollHideDelay = 600;
+    this.orientation = "vertical";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return html23`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property14({ type: String, reflect: true })
+], DsScrollArea.prototype, "type", 2);
+__decorateClass([
+  property14({ type: Number, attribute: "scroll-hide-delay" })
+], DsScrollArea.prototype, "scrollHideDelay", 2);
+__decorateClass([
+  property14({ type: String, reflect: true })
+], DsScrollArea.prototype, "orientation", 2);
+define("ds-scroll-area", DsScrollArea);
+
+// src/components/breadcrumb/breadcrumb-list.ts
+import { html as html24 } from "lit";
+var DsBreadcrumbList = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "list");
+  }
+  render() {
+    return html24`<slot></slot>`;
+  }
+};
+define("ds-breadcrumb-list", DsBreadcrumbList);
+
+// src/components/breadcrumb/breadcrumb-item.ts
+import { html as html25 } from "lit";
+var DsBreadcrumbItem = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html25`<slot></slot>`;
+  }
+};
+define("ds-breadcrumb-item", DsBreadcrumbItem);
+
+// src/components/breadcrumb/breadcrumb-link.ts
+import { html as html26 } from "lit";
+import { property as property15 } from "lit/decorators.js";
+var DsBreadcrumbLink = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.handleClick = (event) => {
+      const navigateEvent = emitEvent(this, "ds:navigate", {
+        detail: { href: this.href },
+        bubbles: true,
+        cancelable: true
+      });
+      if (!navigateEvent.defaultPrevented && this.href) {
+        if (event.ctrlKey || event.metaKey) {
+          window.open(this.href, "_blank");
+        } else {
+          window.location.href = this.href;
+        }
+      }
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        this.handleClick(new MouseEvent("click"));
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  render() {
+    return html26`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property15({ type: String, reflect: true })
+], DsBreadcrumbLink.prototype, "href", 2);
+define("ds-breadcrumb-link", DsBreadcrumbLink);
+
+// src/components/breadcrumb/breadcrumb-page.ts
+import { html as html27 } from "lit";
+var DsBreadcrumbPage = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "link");
+    this.setAttribute("aria-current", "page");
+    this.setAttribute("aria-disabled", "true");
+  }
+  render() {
+    return html27`<slot></slot>`;
+  }
+};
+define("ds-breadcrumb-page", DsBreadcrumbPage);
+
+// src/components/breadcrumb/breadcrumb-separator.ts
+import { html as html28 } from "lit";
+var DsBreadcrumbSeparator = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+    this.setAttribute("aria-hidden", "true");
+  }
+  render() {
+    return html28`<slot>/</slot>`;
+  }
+};
+define("ds-breadcrumb-separator", DsBreadcrumbSeparator);
+
+// src/components/breadcrumb/breadcrumb.ts
+import { html as html29 } from "lit";
+var DsBreadcrumb = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "Breadcrumb");
+  }
+  render() {
+    return html29`<slot></slot>`;
+  }
+};
+define("ds-breadcrumb", DsBreadcrumb);
+
+// src/components/pagination/pagination-content.ts
+import { html as html30 } from "lit";
+var DsPaginationContent = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "list");
+  }
+  render() {
+    return html30`<slot></slot>`;
+  }
+};
+define("ds-pagination-content", DsPaginationContent);
+
+// src/components/pagination/pagination-item.ts
+import { html as html31 } from "lit";
+var DsPaginationItem = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html31`<slot></slot>`;
+  }
+};
+define("ds-pagination-item", DsPaginationItem);
+
+// src/components/pagination/pagination-link.ts
+import { html as html32 } from "lit";
+import { property as property16 } from "lit/decorators.js";
+var DsPaginationLink = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.page = 1;
+    this.active = false;
+    this.handleClick = () => {
+      if (this.active) return;
+      emitEvent(this, "ds:page-select", {
+        detail: { page: this.page },
+        bubbles: true
+      });
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handleClick();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.setAttribute("aria-current", "page");
+      } else {
+        this.removeAttribute("aria-current");
+      }
+    }
+  }
+  render() {
+    return html32`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property16({ type: Number, reflect: true })
+], DsPaginationLink.prototype, "page", 2);
+__decorateClass([
+  property16({ type: Boolean, reflect: true })
+], DsPaginationLink.prototype, "active", 2);
+define("ds-pagination-link", DsPaginationLink);
+
+// src/components/pagination/pagination-previous.ts
+import { html as html33 } from "lit";
+import { property as property17 } from "lit/decorators.js";
+var DsPaginationPrevious = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.handleClick = () => {
+      if (this.disabled) return;
+      const pagination = this.closest("ds-pagination");
+      pagination?.previousPage();
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handleClick();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("aria-label", "Go to previous page");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+  render() {
+    return html33`<slot>Previous</slot>`;
+  }
+};
+__decorateClass([
+  property17({ type: Boolean, reflect: true })
+], DsPaginationPrevious.prototype, "disabled", 2);
+define("ds-pagination-previous", DsPaginationPrevious);
+
+// src/components/pagination/pagination-next.ts
+import { html as html34 } from "lit";
+import { property as property18 } from "lit/decorators.js";
+var DsPaginationNext = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.handleClick = () => {
+      if (this.disabled) return;
+      const pagination = this.closest("ds-pagination");
+      pagination?.nextPage();
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handleClick();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("aria-label", "Go to next page");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", String(this.disabled));
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    }
+  }
+  render() {
+    return html34`<slot>Next</slot>`;
+  }
+};
+__decorateClass([
+  property18({ type: Boolean, reflect: true })
+], DsPaginationNext.prototype, "disabled", 2);
+define("ds-pagination-next", DsPaginationNext);
+
+// src/components/pagination/pagination-ellipsis.ts
+import { html as html35 } from "lit";
+var DsPaginationEllipsis = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-hidden", "true");
+  }
+  render() {
+    return html35`<span>...</span>`;
+  }
+};
+define("ds-pagination-ellipsis", DsPaginationEllipsis);
+
+// src/components/pagination/pagination.ts
+import { html as html36 } from "lit";
+import { property as property19 } from "lit/decorators.js";
+var DsPagination = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.page = 1;
+    this.totalPages = 1;
+    this.siblingCount = 1;
+    this.boundaryCount = 1;
+    this.handlePageSelect = (event) => {
+      event.stopPropagation();
+      this.goToPage(event.detail.page);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "Pagination");
+    this.addEventListener("ds:page-select", this.handlePageSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:page-select", this.handlePageSelect);
+  }
+  /**
+   * Navigate to a specific page.
+   */
+  goToPage(newPage) {
+    const clampedPage = Math.max(1, Math.min(newPage, this.totalPages));
+    if (clampedPage !== this.page) {
+      this.page = clampedPage;
+      this.updateActiveState();
+      emitEvent(this, "ds:page-change", {
+        detail: { page: this.page },
+        bubbles: true
+      });
+    }
+  }
+  /**
+   * Go to previous page.
+   */
+  previousPage() {
+    this.goToPage(this.page - 1);
+  }
+  /**
+   * Go to next page.
+   */
+  nextPage() {
+    this.goToPage(this.page + 1);
+  }
+  updateActiveState() {
+    const links = this.querySelectorAll("ds-pagination-link");
+    for (const link of links) {
+      const linkPage = Number(link.getAttribute("page"));
+      if (linkPage === this.page) {
+        link.setAttribute("aria-current", "page");
+        link.setAttribute("active", "");
+      } else {
+        link.removeAttribute("aria-current");
+        link.removeAttribute("active");
+      }
+    }
+    const prevButton = this.querySelector("ds-pagination-previous");
+    const nextButton = this.querySelector("ds-pagination-next");
+    if (prevButton) {
+      if (this.page <= 1) {
+        prevButton.setAttribute("disabled", "");
+      } else {
+        prevButton.removeAttribute("disabled");
+      }
+    }
+    if (nextButton) {
+      if (this.page >= this.totalPages) {
+        nextButton.setAttribute("disabled", "");
+      } else {
+        nextButton.removeAttribute("disabled");
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("page") || changedProperties.has("totalPages")) {
+      this.updateActiveState();
+    }
+  }
+  render() {
+    return html36`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property19({ type: Number, reflect: true })
+], DsPagination.prototype, "page", 2);
+__decorateClass([
+  property19({ type: Number, attribute: "total-pages" })
+], DsPagination.prototype, "totalPages", 2);
+__decorateClass([
+  property19({ type: Number, attribute: "sibling-count" })
+], DsPagination.prototype, "siblingCount", 2);
+__decorateClass([
+  property19({ type: Number, attribute: "boundary-count" })
+], DsPagination.prototype, "boundaryCount", 2);
+define("ds-pagination", DsPagination);
+
+// src/components/stepper/stepper-item.ts
+import { html as html37 } from "lit";
+import { property as property20 } from "lit/decorators.js";
+var DsStepperItem = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.step = 1;
+    this.completed = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+    this.setAttribute("data-state", "pending");
+  }
+  updated(_changedProperties) {
+    const state11 = this.getAttribute("data-state");
+    if (state11 === "active") {
+      this.setAttribute("aria-current", "step");
+    } else {
+      this.removeAttribute("aria-current");
+    }
+  }
+  render() {
+    return html37`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property20({ type: Number, reflect: true })
+], DsStepperItem.prototype, "step", 2);
+__decorateClass([
+  property20({ type: Boolean, reflect: true })
+], DsStepperItem.prototype, "completed", 2);
+__decorateClass([
+  property20({ type: Boolean, reflect: true })
+], DsStepperItem.prototype, "disabled", 2);
+define("ds-stepper-item", DsStepperItem);
+
+// src/components/stepper/stepper-trigger.ts
+import { html as html38 } from "lit";
+var DsStepperTrigger = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.handleClick = () => {
+      if (this.isDisabled()) return;
+      emitEvent(this, "ds:step-select", {
+        detail: { step: this.getStep() },
+        bubbles: true
+      });
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.handleClick();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "button");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  getStep() {
+    const item = this.closest("ds-stepper-item");
+    return Number(item?.getAttribute("step")) || 1;
+  }
+  isDisabled() {
+    const item = this.closest("ds-stepper-item");
+    return item?.hasAttribute("disabled") || false;
+  }
+  render() {
+    return html38`<slot></slot>`;
+  }
+};
+define("ds-stepper-trigger", DsStepperTrigger);
+
+// src/components/stepper/stepper-indicator.ts
+import { html as html39 } from "lit";
+var DsStepperIndicator = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-hidden", "true");
+  }
+  render() {
+    return html39`<slot></slot>`;
+  }
+};
+define("ds-stepper-indicator", DsStepperIndicator);
+
+// src/components/stepper/stepper-title.ts
+import { html as html40 } from "lit";
+var DsStepperTitle = class extends DSElement {
+  render() {
+    return html40`<slot></slot>`;
+  }
+};
+define("ds-stepper-title", DsStepperTitle);
+
+// src/components/stepper/stepper-description.ts
+import { html as html41 } from "lit";
+var DsStepperDescription = class extends DSElement {
+  render() {
+    return html41`<slot></slot>`;
+  }
+};
+define("ds-stepper-description", DsStepperDescription);
+
+// src/components/stepper/stepper-separator.ts
+import { html as html42 } from "lit";
+var DsStepperSeparator = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+    this.setAttribute("aria-hidden", "true");
+  }
+  render() {
+    return html42``;
+  }
+};
+define("ds-stepper-separator", DsStepperSeparator);
+
+// src/components/stepper/stepper-content.ts
+import { html as html43 } from "lit";
+var DsStepperContent = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tabpanel");
+  }
+  render() {
+    return html43`<slot></slot>`;
+  }
+};
+define("ds-stepper-content", DsStepperContent);
+
+// src/components/stepper/stepper.ts
+import { html as html44 } from "lit";
+import { property as property21 } from "lit/decorators.js";
+var DsStepper = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = 1;
+    this.orientation = "horizontal";
+    this.linear = false;
+    this.ariaLabel = "Progress steps";
+    this.handleStepSelect = (event) => {
+      event.stopPropagation();
+      this.goToStep(event.detail.step);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "list");
+    this.setAttribute("aria-label", this.ariaLabel);
+    this.addEventListener("ds:step-select", this.handleStepSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:step-select", this.handleStepSelect);
+  }
+  /**
+   * Go to a specific step.
+   */
+  goToStep(step) {
+    if (this.linear) {
+      const items = this.querySelectorAll("ds-stepper-item");
+      let maxAllowed = 1;
+      for (const item of items) {
+        const itemStep = Number(item.getAttribute("step"));
+        if (item.hasAttribute("completed") || itemStep === this.value) {
+          maxAllowed = Math.max(maxAllowed, itemStep + 1);
+        }
+      }
+      if (step > maxAllowed) return;
+    }
+    if (step !== this.value) {
+      this.value = step;
+      this.updateActiveState();
+      emitEvent(this, "ds:step-change", {
+        detail: { step: this.value },
+        bubbles: true
+      });
+    }
+  }
+  /**
+   * Go to next step.
+   */
+  nextStep() {
+    this.goToStep(this.value + 1);
+  }
+  /**
+   * Go to previous step.
+   */
+  previousStep() {
+    this.goToStep(this.value - 1);
+  }
+  updateActiveState() {
+    const items = this.querySelectorAll("ds-stepper-item");
+    for (const item of items) {
+      const step = Number(item.getAttribute("step"));
+      if (step === this.value) {
+        item.setAttribute("data-state", "active");
+      } else if (step < this.value || item.hasAttribute("completed")) {
+        item.setAttribute("data-state", "completed");
+      } else {
+        item.setAttribute("data-state", "pending");
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.updateActiveState();
+    }
+  }
+  render() {
+    return html44`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property21({ type: Number, reflect: true })
+], DsStepper.prototype, "value", 2);
+__decorateClass([
+  property21({ type: String, reflect: true })
+], DsStepper.prototype, "orientation", 2);
+__decorateClass([
+  property21({ type: Boolean })
+], DsStepper.prototype, "linear", 2);
+__decorateClass([
+  property21({ type: String, attribute: "aria-label" })
+], DsStepper.prototype, "ariaLabel", 2);
+define("ds-stepper", DsStepper);
+
+// src/components/command/command.ts
+import { property as property22, state as state10 } from "lit/decorators.js";
+var DsCommand = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.loading = false;
+    this.filter = true;
+    this.label = "Command palette";
+    this._visibleCount = 0;
+    this._handleInputChange = (event) => {
+      const e = event;
+      this.value = e.detail.value;
+      if (this.filter) {
+        this._filterItems(this.value);
+      }
+      emitEvent(this, "value-change", { detail: { value: this.value } });
+    };
+    this._handleSelect = (event) => {
+      const e = event;
+      emitEvent(this, "select", { detail: { value: e.detail.value } });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "search");
+    this.setAttribute("aria-label", this.label);
+    this.addEventListener("ds:command-input", this._handleInputChange);
+    this.addEventListener("ds:command-select", this._handleSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("ds:command-input", this._handleInputChange);
+    this.removeEventListener("ds:command-select", this._handleSelect);
+  }
+  _filterItems(query) {
+    const normalizedQuery = query.toLowerCase().trim();
+    const items = this.querySelectorAll("ds-command-item");
+    let visibleCount = 0;
+    items.forEach((item) => {
+      const text = item.textContent?.toLowerCase() || "";
+      const value = item.getAttribute("value")?.toLowerCase() || "";
+      const keywords = item.getAttribute("keywords")?.toLowerCase() || "";
+      const matches = normalizedQuery === "" || this._fuzzyMatch(normalizedQuery, text) || this._fuzzyMatch(normalizedQuery, value) || this._fuzzyMatch(normalizedQuery, keywords);
+      if (matches) {
+        item.removeAttribute("data-filtered");
+        visibleCount++;
+      } else {
+        item.setAttribute("data-filtered", "true");
+      }
+    });
+    this._visibleCount = visibleCount;
+    this._updateGroupVisibility();
+    this._updateEmptyState();
+  }
+  _fuzzyMatch(query, text) {
+    if (!query) return true;
+    if (!text) return false;
+    let queryIndex = 0;
+    for (let i = 0; i < text.length && queryIndex < query.length; i++) {
+      if (text[i] === query[queryIndex]) {
+        queryIndex++;
+      }
+    }
+    return queryIndex === query.length;
+  }
+  _updateGroupVisibility() {
+    const groups = this.querySelectorAll("ds-command-group");
+    groups.forEach((group) => {
+      const visibleItems = group.querySelectorAll("ds-command-item:not([data-filtered])");
+      if (visibleItems.length === 0) {
+        group.setAttribute("data-empty", "true");
+      } else {
+        group.removeAttribute("data-empty");
+      }
+    });
+  }
+  _updateEmptyState() {
+    const emptyEl = this.querySelector("ds-command-empty");
+    if (emptyEl) {
+      if (this._visibleCount === 0 && this.value) {
+        emptyEl.removeAttribute("hidden");
+      } else {
+        emptyEl.setAttribute("hidden", "");
+      }
+    }
+  }
+  /**
+   * Programmatically set the search value.
+   */
+  setValue(value) {
+    this.value = value;
+    const input = this.querySelector("ds-command-input");
+    if (input) {
+      input.value = value;
+    }
+    if (this.filter) {
+      this._filterItems(value);
+    }
+  }
+  /**
+   * Clear the search value.
+   */
+  clear() {
+    this.setValue("");
+  }
+};
+__decorateClass([
+  property22({ type: String })
+], DsCommand.prototype, "value", 2);
+__decorateClass([
+  property22({ type: Boolean, reflect: true })
+], DsCommand.prototype, "loading", 2);
+__decorateClass([
+  property22({ type: Boolean, attribute: "filter" })
+], DsCommand.prototype, "filter", 2);
+__decorateClass([
+  property22({ type: String })
+], DsCommand.prototype, "label", 2);
+__decorateClass([
+  state10()
+], DsCommand.prototype, "_visibleCount", 2);
+
+// src/components/command/command-input.ts
+import { property as property23 } from "lit/decorators.js";
+var DsCommandInput = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.placeholder = "Type a command or search...";
+    this.disabled = false;
+    this._input = null;
+    this._handleInput = (event) => {
+      const target = event.target;
+      this.value = target.value;
+      emitEvent(this, "command-input", {
+        detail: { value: this.value }
+      });
+    };
+    this._handleKeyDown = (event) => {
+      const command = this.closest("ds-command");
+      const list = command?.querySelector("ds-command-list");
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          list?.focus();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (list && "focusLast" in list && typeof list.focusLast === "function") {
+            list.focusLast();
+          }
+          break;
+        case "Enter": {
+          event.preventDefault();
+          const activeItem = command?.querySelector(
+            "ds-command-item[data-active]"
+          );
+          if (activeItem) {
+            activeItem.click();
+          }
+          break;
+        }
+        case "Escape":
+          event.preventDefault();
+          emitEvent(this, "command-escape", { detail: {} });
+          break;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._createInput();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._input) {
+      this._input.removeEventListener("input", this._handleInput);
+      this._input.removeEventListener("keydown", this._handleKeyDown);
+    }
+  }
+  _createInput() {
+    let input = this.querySelector("input");
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "text";
+      input.className = "ds-command-input__field";
+      this.appendChild(input);
+    }
+    this._input = input;
+    this._input.placeholder = this.placeholder;
+    this._input.disabled = this.disabled;
+    this._input.value = this.value;
+    this._input.setAttribute("role", "combobox");
+    this._input.setAttribute("aria-expanded", "true");
+    this._input.setAttribute("aria-controls", "");
+    this._input.setAttribute("aria-autocomplete", "list");
+    this._input.setAttribute("autocomplete", "off");
+    this._input.setAttribute("autocorrect", "off");
+    this._input.setAttribute("spellcheck", "false");
+    this._input.addEventListener("input", this._handleInput);
+    this._input.addEventListener("keydown", this._handleKeyDown);
+  }
+  /**
+   * Focus the input.
+   */
+  focus() {
+    this._input?.focus();
+  }
+  /**
+   * Blur the input.
+   */
+  blur() {
+    this._input?.blur();
+  }
+};
+__decorateClass([
+  property23({ type: String })
+], DsCommandInput.prototype, "value", 2);
+__decorateClass([
+  property23({ type: String })
+], DsCommandInput.prototype, "placeholder", 2);
+__decorateClass([
+  property23({ type: Boolean, reflect: true })
+], DsCommandInput.prototype, "disabled", 2);
+
+// src/components/command/command-list.ts
+import { createRovingFocus as createRovingFocus3 } from "@hypoth-ui/primitives-dom";
+var DsCommandList = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this._rovingFocus = null;
+    this._observer = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listbox");
+    this.tabIndex = -1;
+    this._setupRovingFocus();
+    this._setupMutationObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._rovingFocus?.destroy();
+    this._observer?.disconnect();
+  }
+  _setupMutationObserver() {
+    this._observer = new MutationObserver(() => {
+      this._rovingFocus?.destroy();
+      this._setupRovingFocus();
+    });
+    this._observer.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-filtered", "disabled"]
+    });
+  }
+  _setupRovingFocus() {
+    const items = this._getVisibleItems();
+    if (items.length === 0) return;
+    this._rovingFocus = createRovingFocus3({
+      container: this,
+      selector: "ds-command-item:not([data-filtered]):not([disabled])",
+      direction: "vertical",
+      loop: true,
+      onFocus: (item) => {
+        this._getVisibleItems().forEach((i) => i.removeAttribute("data-active"));
+        item.setAttribute("data-active", "true");
+      }
+    });
+  }
+  _getVisibleItems() {
+    return Array.from(
+      this.querySelectorAll("ds-command-item:not([data-filtered]):not([disabled])")
+    );
+  }
+  /**
+   * Focus the first visible item.
+   */
+  focus() {
+    const items = this._getVisibleItems();
+    if (items.length > 0) {
+      const firstItem = items[0];
+      if (firstItem) {
+        firstItem.focus();
+        firstItem.setAttribute("data-active", "true");
+      }
+    }
+  }
+  /**
+   * Focus the last visible item.
+   */
+  focusLast() {
+    const items = this._getVisibleItems();
+    if (items.length > 0) {
+      const lastItem = items[items.length - 1];
+      if (lastItem) {
+        lastItem.focus();
+        lastItem.setAttribute("data-active", "true");
+      }
+    }
+  }
+};
+
+// src/components/command/command-item.ts
+import { property as property24 } from "lit/decorators.js";
+var DsCommandItem = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.keywords = "";
+    this.disabled = false;
+    this._handleClick = () => {
+      if (this.disabled) return;
+      this._select();
+    };
+    this._handleKeyDown = (event) => {
+      if (this.disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this._select();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.tabIndex = -1;
+    if (this.disabled) {
+      this.setAttribute("aria-disabled", "true");
+    }
+    this.addEventListener("click", this._handleClick);
+    this.addEventListener("keydown", this._handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleClick);
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+  _select() {
+    emitEvent(this, "command-select", {
+      detail: { value: this.value || this.textContent?.trim() || "" }
+    });
+  }
+};
+__decorateClass([
+  property24({ type: String })
+], DsCommandItem.prototype, "value", 2);
+__decorateClass([
+  property24({ type: String })
+], DsCommandItem.prototype, "keywords", 2);
+__decorateClass([
+  property24({ type: Boolean, reflect: true })
+], DsCommandItem.prototype, "disabled", 2);
+
+// src/components/command/command-group.ts
+import { property as property25 } from "lit/decorators.js";
+var DsCommandGroup = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+    this._headingEl = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "group");
+    if (this.heading) {
+      this._createHeading();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("heading")) {
+      if (this.heading) {
+        this._createHeading();
+      } else if (this._headingEl) {
+        this._headingEl.remove();
+        this._headingEl = null;
+        this.removeAttribute("aria-labelledby");
+      }
+    }
+  }
+  _createHeading() {
+    if (!this._headingEl) {
+      this._headingEl = document.createElement("div");
+      this._headingEl.className = "ds-command-group__heading";
+      this._headingEl.id = `ds-command-group-${Math.random().toString(36).slice(2, 9)}`;
+      this._headingEl.setAttribute("aria-hidden", "true");
+      this.prepend(this._headingEl);
+      this.setAttribute("aria-labelledby", this._headingEl.id);
+    }
+    this._headingEl.textContent = this.heading;
+  }
+};
+__decorateClass([
+  property25({ type: String })
+], DsCommandGroup.prototype, "heading", 2);
+
+// src/components/command/command-separator.ts
+var DsCommandSeparator = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+    this.setAttribute("aria-orientation", "horizontal");
+  }
+};
+
+// src/components/command/command-empty.ts
+var DsCommandEmpty = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("hidden", "");
+  }
+};
+
+// src/components/command/command-loading.ts
+var DsCommandLoading = class extends DSElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-label", "Loading");
+  }
+};
+
+export {
+  DsCollapsibleContent,
+  DsCollapsibleTrigger,
+  DsCollapsible,
+  DsTabsList,
+  DsTabsTrigger,
+  DsTabsContent,
+  DsTabs,
+  DsAccordionItem,
+  DsAccordionTrigger,
+  DsAccordionContent,
+  DsAccordion,
+  DsNavigationMenuList,
+  DsNavigationMenuItem,
+  DsNavigationMenuTrigger,
+  DsNavigationMenuContent,
+  DsNavigationMenuLink,
+  DsNavigationMenuIndicator,
+  DsNavigationMenuViewport,
+  DsNavigationMenu,
+  DsScrollAreaViewport,
+  DsScrollAreaScrollbar,
+  DsScrollAreaThumb,
+  DsScrollArea,
+  DsBreadcrumbList,
+  DsBreadcrumbItem,
+  DsBreadcrumbLink,
+  DsBreadcrumbPage,
+  DsBreadcrumbSeparator,
+  DsBreadcrumb,
+  DsPaginationContent,
+  DsPaginationItem,
+  DsPaginationLink,
+  DsPaginationPrevious,
+  DsPaginationNext,
+  DsPaginationEllipsis,
+  DsPagination,
+  DsStepperItem,
+  DsStepperTrigger,
+  DsStepperIndicator,
+  DsStepperTitle,
+  DsStepperDescription,
+  DsStepperSeparator,
+  DsStepperContent,
+  DsStepper,
+  DsCommand,
+  DsCommandInput,
+  DsCommandList,
+  DsCommandItem,
+  DsCommandGroup,
+  DsCommandSeparator,
+  DsCommandEmpty,
+  DsCommandLoading
+};
+//# sourceMappingURL=chunk-WQ5BEP3E.js.map