@helixui/library 3.3.1-next.118 → 3.4.0

package/dist/shared/hx-overflow-menu-DCLsdIBy.js

@@ -1,374 +0,0 @@
-import { css as p, html as h, nothing as d } from "lit";
-import { property as l, state as f, query as u, customElement as g } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { f as x } from "./forced-colors-CTEDFRGa.js";
-import { H as b } from "./helix-element-BNEYeiys.js";
-import { c as w } from "./id-counter-DuX8vsui.js";
-const y = p`
-  :host {
-    display: inline-block;
-    position: relative;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.5);
-  }
-
-  /* ─── Trigger Button ─── */
-
-  .trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: var(--hx-border-width-thin, 1px) solid transparent;
-    border-radius: var(--hx-border-radius-md, 0.375rem);
-    background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #313e4b));
-    cursor: pointer;
-    transition:
-      background-color var(--hx-transition-fast, 150ms ease),
-      color var(--hx-transition-fast, 150ms ease);
-    flex-shrink: 0;
-    padding: 0;
-    line-height: 1;
-  }
-
-  .trigger:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
-    outline-offset: var(--hx-focus-ring-offset, 2px);
-  }
-
-  .trigger:hover:not([disabled]) {
-    background-color: var(
-      --hx-overflow-menu-trigger-hover-bg,
-      var(--hx-color-surface-sunken, #ebeee9)
-    );
-  }
-
-  .trigger--open {
-    background-color: var(
-      --hx-overflow-menu-trigger-open-bg,
-      var(--hx-color-surface-sunken, #ebeee9)
-    );
-  }
-
-  /* ─── Size Variants ─── */
-
-  .trigger--sm {
-    width: var(--hx-size-8, 2rem);
-    height: var(--hx-size-8, 2rem);
-    min-width: var(--hx-size-touch-target, 2.75rem);
-    min-height: var(--hx-size-touch-target, 2.75rem);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-  }
-
-  .trigger--md {
-    width: var(--hx-size-10, 2.5rem);
-    height: var(--hx-size-10, 2.5rem);
-    min-width: var(--hx-size-touch-target, 2.75rem);
-    min-height: var(--hx-size-touch-target, 2.75rem);
-    font-size: var(--hx-font-size-md, 1rem);
-  }
-
-  .trigger--lg {
-    width: var(--hx-size-12, 3rem);
-    height: var(--hx-size-12, 3rem);
-    font-size: var(--hx-font-size-lg, 1.125rem);
-  }
-
-  /* ─── Panel ─── */
-
-  .panel {
-    position: fixed;
-    z-index: var(--hx-overflow-menu-panel-z-index, 1000);
-    min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #d6dbd5));
-    border-radius: var(
-      --hx-overflow-menu-panel-border-radius,
-      var(--hx-border-radius-md, 0.375rem)
-    );
-    box-shadow: var(
-      --hx-overflow-menu-panel-shadow,
-      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))
-    );
-    padding: var(--hx-space-1, 0.25rem) 0;
-    outline: none;
-  }
-
-  /* ─── Slot: menu items ─── */
-
-  ::slotted([role='menuitem']),
-  ::slotted([role='menuitemcheckbox']),
-  ::slotted([role='menuitemradio']) {
-    display: block;
-    width: 100%;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    background: none;
-    border: none;
-    text-align: start;
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));
-    cursor: pointer;
-    white-space: nowrap;
-    box-sizing: border-box;
-  }
-
-  ::slotted([role='menuitem']:hover),
-  ::slotted([role='menuitemcheckbox']:hover),
-  ::slotted([role='menuitemradio']:hover) {
-    background-color: var(
-      --hx-overflow-menu-item-hover-bg,
-      var(--hx-color-surface-raised, #f5f8f3)
-    );
-  }
-
-  ::slotted([role='menuitem']:focus-visible),
-  ::slotted([role='menuitemcheckbox']:focus-visible),
-  ::slotted([role='menuitemradio']:focus-visible) {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
-    outline-offset: 0;
-  }
-
-  /* ─── Reduced Motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    .trigger {
-      transition: none;
-    }
-  }
-
-  /* ─── High Contrast Mode (forced-colors) ─── */
-
-  @media (forced-colors: active) {
-    .trigger {
-      forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
-    }
-
-    .trigger:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
-    }
-
-    .trigger[disabled] {
-      color: GrayText;
-      border-color: GrayText;
-      opacity: 1;
-    }
-
-    :host([disabled]) {
-      opacity: 1;
-    }
-
-    .panel {
-      background-color: Canvas;
-      border: 2px solid CanvasText;
-    }
-  }
-`;
-var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? k(r, t) : r, s = e.length - 1, c; s >= 0; s--)
-    (c = e[s]) && (o = (i ? c(r, t, o) : c(o)) || o);
-  return i && o && _(r, t, o), o;
-};
-const z = w("hx-overflow-menu");
-let n = class extends b {
-  constructor() {
-    super(...arguments), this.placement = "bottom-end", this.size = "md", this.disabled = !1, this.icon = "vertical", this.label = "More actions", this.labelMenu = "Actions", this._open = !1, this._panelId = `${z()}-panel`, this._handleTriggerClick = (e) => {
-      e.stopPropagation(), this._toggle();
-    }, this._handleDocumentClick = (e) => {
-      if (!this._open) return;
-      e.composedPath().includes(this) || this._hide();
-    }, this._handleKeydown = (e) => {
-      var r, t;
-      if (this._open) {
-        if (e.key === "Escape") {
-          e.stopPropagation(), this._hide(), (r = this._buttonEl) == null || r.focus();
-          return;
-        }
-        if (e.key === "Tab") {
-          this._hide();
-          return;
-        }
-        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
-          e.preventDefault(), e.stopPropagation();
-          const i = this._getMenuItems();
-          if (i.length === 0) return;
-          const o = i.indexOf(document.activeElement);
-          let s;
-          e.key === "ArrowDown" ? s = o < 0 || o >= i.length - 1 ? 0 : o + 1 : e.key === "ArrowUp" ? s = o <= 0 ? i.length - 1 : o - 1 : e.key === "Home" ? s = 0 : s = i.length - 1, (t = i[s]) == null || t.focus();
-        }
-      }
-    }, this._handleSlotClick = (e) => {
-      var o;
-      const t = e.target.closest(
-        '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]'
-      );
-      if (!t || t.hasAttribute("disabled") || t.disabled) return;
-      const i = t.getAttribute("data-value") ?? ((o = t.textContent) == null ? void 0 : o.trim()) ?? "";
-      this.dispatchEvent(
-        new CustomEvent("hx-select", {
-          bubbles: !0,
-          composed: !0,
-          detail: { value: i }
-        })
-      ), this._hide();
-    };
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleDocumentClick, !0), this.addEventListener("keydown", this._handleKeydown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick, !0), this.removeEventListener("keydown", this._handleKeydown);
-  }
-  // ─── Open / Close ───
-  /** @internal */
-  async _show() {
-    this._open || this.disabled || (this._open = !0, await this.updateComplete, await this._updatePosition(), this._focusFirstItem(), this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })));
-  }
-  /** @internal */
-  _hide() {
-    this._open && (this._open = !1, this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })));
-  }
-  /** @internal */
-  _toggle() {
-    this._open ? this._hide() : this._show();
-  }
-  // ─── Positioning (Floating UI) ───
-  /** @internal */
-  async _updatePosition() {
-    const e = this._buttonEl, r = this._panelEl;
-    if (!e || !r) return;
-    const { computePosition: t, flip: i, shift: o, offset: s } = await import("@floating-ui/dom"), { x: c, y: m } = await t(e, r, {
-      placement: this.placement,
-      strategy: "fixed",
-      middleware: [s(4), i(), o({ padding: 8 })]
-    });
-    Object.assign(r.style, {
-      left: `${c}px`,
-      top: `${m}px`
-    });
-  }
-  // ─── Focus management ───
-  /** @internal */
-  _focusFirstItem() {
-    var r;
-    (r = this._getMenuItems()[0]) == null || r.focus();
-  }
-  /** @internal */
-  _getMenuItems() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
-    return (e == null ? void 0 : e.assignedElements({ flatten: !0 }).filter(
-      (t) => t instanceof HTMLElement && !t.hasAttribute("disabled") && !t.disabled && (t.getAttribute("role") === "menuitem" || t.getAttribute("role") === "menuitemcheckbox" || t.getAttribute("role") === "menuitemradio" || t.tagName.toLowerCase().startsWith("hx-"))
-    )) ?? [];
-  }
-  // ─── SVG Icons ───
-  /** @internal */
-  _renderIcon() {
-    return this.icon === "horizontal" ? h`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <circle cx="5" cy="12" r="2" />
-          <circle cx="12" cy="12" r="2" />
-          <circle cx="19" cy="12" r="2" />
-        </svg>
-      ` : h`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <circle cx="12" cy="5" r="2" />
-        <circle cx="12" cy="12" r="2" />
-        <circle cx="12" cy="19" r="2" />
-      </svg>
-    `;
-  }
-  // ─── Render ───
-  render() {
-    const e = {
-      trigger: !0,
-      [`trigger--${this.size}`]: !0,
-      "trigger--open": this._open
-    };
-    return h`
-      <button
-        part="button trigger"
-        class=${v(e)}
-        type="button"
-        aria-label=${this.label}
-        aria-haspopup="menu"
-        aria-expanded=${String(this._open)}
-        aria-controls=${this._open ? this._panelId : d}
-        ?disabled=${this.disabled}
-        @click=${this._handleTriggerClick}
-      >
-        ${this._renderIcon()}
-      </button>
-      ${this._open ? h`
-            <div
-              id=${this._panelId}
-              part="panel menu"
-              role="menu"
-              aria-label=${this.labelMenu}
-              class="panel"
-              @click=${this._handleSlotClick}
-            >
-              <slot></slot>
-            </div>
-          ` : d}
-    `;
-  }
-};
-n.styles = [y, x];
-a([
-  l({ type: String, reflect: !0 })
-], n.prototype, "placement", 2);
-a([
-  l({ type: String, reflect: !0, attribute: "hx-size" })
-], n.prototype, "size", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled", 2);
-a([
-  l({ type: String, reflect: !0 })
-], n.prototype, "icon", 2);
-a([
-  l({ type: String, reflect: !0 })
-], n.prototype, "label", 2);
-a([
-  l({ type: String, reflect: !0, attribute: "label-menu" })
-], n.prototype, "labelMenu", 2);
-a([
-  f()
-], n.prototype, "_open", 2);
-a([
-  u('[part~="button"]')
-], n.prototype, "_buttonEl", 2);
-a([
-  u('[part~="panel"]')
-], n.prototype, "_panelEl", 2);
-n = a([
-  g("hx-overflow-menu")
-], n);
-export {
-  n as H
-};
-//# sourceMappingURL=hx-overflow-menu-DCLsdIBy.js.map

package/dist/shared/hx-overflow-menu-DCLsdIBy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-overflow-menu-DCLsdIBy.js","sources":["../../src/components/hx-overflow-menu/hx-overflow-menu.styles.ts","../../src/components/hx-overflow-menu/hx-overflow-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixOverflowMenuStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin, 1px) solid transparent;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: transparent;\n    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #313e4b));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease);\n    flex-shrink: 0;\n    padding: 0;\n    line-height: 1;\n  }\n\n  .trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .trigger:hover:not([disabled]) {\n    background-color: var(\n      --hx-overflow-menu-trigger-hover-bg,\n      var(--hx-color-surface-sunken, #ebeee9)\n    );\n  }\n\n  .trigger--open {\n    background-color: var(\n      --hx-overflow-menu-trigger-open-bg,\n      var(--hx-color-surface-sunken, #ebeee9)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  .trigger--sm {\n    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\n    min-width: var(--hx-size-touch-target, 2.75rem);\n    min-height: var(--hx-size-touch-target, 2.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .trigger--md {\n    width: var(--hx-size-10, 2.5rem);\n    height: var(--hx-size-10, 2.5rem);\n    min-width: var(--hx-size-touch-target, 2.75rem);\n    min-height: var(--hx-size-touch-target, 2.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .trigger--lg {\n    width: var(--hx-size-12, 3rem);\n    height: var(--hx-size-12, 3rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Panel ─── */\n\n  .panel {\n    position: fixed;\n    z-index: var(--hx-overflow-menu-panel-z-index, 1000);\n    min-width: var(--hx-overflow-menu-panel-min-width, 160px);\n    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));\n    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #d6dbd5));\n    border-radius: var(\n      --hx-overflow-menu-panel-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\n    box-shadow: var(\n      --hx-overflow-menu-panel-shadow,\n      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n    );\n    padding: var(--hx-space-1, 0.25rem) 0;\n    outline: none;\n  }\n\n  /* ─── Slot: menu items ─── */\n\n  ::slotted([role='menuitem']),\n  ::slotted([role='menuitemcheckbox']),\n  ::slotted([role='menuitemradio']) {\n    display: block;\n    width: 100%;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    background: none;\n    border: none;\n    text-align: start;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));\n    cursor: pointer;\n    white-space: nowrap;\n    box-sizing: border-box;\n  }\n\n  ::slotted([role='menuitem']:hover),\n  ::slotted([role='menuitemcheckbox']:hover),\n  ::slotted([role='menuitemradio']:hover) {\n    background-color: var(\n      --hx-overflow-menu-item-hover-bg,\n      var(--hx-color-surface-raised, #f5f8f3)\n    );\n  }\n\n  ::slotted([role='menuitem']:focus-visible),\n  ::slotted([role='menuitemcheckbox']:focus-visible),\n  ::slotted([role='menuitemradio']:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .trigger {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .trigger:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .trigger[disabled] {\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .panel {\n      background-color: Canvas;\n      border: 2px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\n\nconst _nextOverflowMenuId = createIdCounter('hx-overflow-menu');\n\n/**\n * An overflow menu (kebab/meatball menu) that reveals hidden actions via a\n * floating panel. Composed from a trigger button and a slotted menu panel.\n *\n * @summary \"...\" or kebab icon button that reveals hidden actions.\n *\n * @tag hx-overflow-menu\n *\n * @slot - Menu items (e.g. `<button role=\"menuitem\">` or `<hx-menu-item>` elements).\n *\n * @fires {CustomEvent<{value: string}>} hx-select - Dispatched when a menu item is selected.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the panel opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the panel closes.\n *\n * @csspart button - The trigger icon button element.\n * @csspart trigger - Alias for button — the trigger icon button element.\n * @csspart panel - The floating menu panel container.\n * @csspart menu - Alias for panel — the floating menu panel container.\n *\n * @cssprop [--hx-overflow-menu-panel-bg=var(--hx-color-neutral-0,#fff)] - Panel background color.\n * @cssprop [--hx-overflow-menu-panel-border=1px solid var(--hx-color-neutral-200,#e5e7eb)] - Panel border.\n * @cssprop [--hx-overflow-menu-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-overflow-menu-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-overflow-menu-panel-min-width=160px] - Minimum panel width.\n * @cssprop [--hx-overflow-menu-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-overflow-menu-button-color=var(--hx-color-neutral-600)] - Trigger icon color.\n *\n * @example\n * ```html\n * <hx-overflow-menu>\n *   <button role=\"menuitem\">Edit</button>\n *   <button role=\"menuitem\">Delete</button>\n * </hx-overflow-menu>\n * ```\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-overflow-menu-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-touch-target] - Size token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-overlay-black-12] - Overlay color.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n */\n@customElement('hx-overflow-menu')\nexport class HelixOverflowMenu extends HelixElement {\n  static override styles = [helixOverflowMenuStyles, forcedColorsInteractive];\n\n  /**\n   * Preferred placement of the floating panel relative to the trigger.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end' = 'bottom-end';\n\n  /**\n   * Size of the trigger button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the trigger button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon orientation: vertical (kebab ⋮) or horizontal (meatball ···).\n   * @attr icon\n   */\n  @property({ type: String, reflect: true })\n  icon: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Accessible label for the trigger button.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'More actions';\n\n  /**\n   * Accessible label for the menu panel. Reflected as `label-menu`.\n   * @attr label-menu\n   */\n  @property({ type: String, reflect: true, attribute: 'label-menu' })\n  labelMenu = 'Actions';\n\n  /**\n   * Tracks whether the overflow menu panel is currently open and visible.\n   * @internal\n   */\n  @state() private _open = false;\n\n  /**\n   * Unique ID for the floating panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _panelId = `${_nextOverflowMenuId()}-panel`;\n\n  /** @internal */\n  @query('[part~=\"button\"]') private _buttonEl!: HTMLButtonElement | null;\n\n  /** @internal */\n  @query('[part~=\"panel\"]') private _panelEl!: HTMLElement | null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleDocumentClick, true);\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleDocumentClick, true);\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Open / Close ───\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    if (this._open || this.disabled) return;\n    this._open = true;\n    await this.updateComplete;\n    await this._updatePosition();\n    this._focusFirstItem();\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _hide(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _toggle(): void {\n    if (this._open) {\n      this._hide();\n    } else {\n      void this._show();\n    }\n  }\n\n  // ─── Positioning (Floating UI) ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const trigger = this._buttonEl as HTMLElement | null;\n    const panel = this._panelEl;\n    if (!trigger || !panel) return;\n\n    const { computePosition, flip, shift, offset } = await import('@floating-ui/dom');\n    const { x, y } = await computePosition(trigger, panel, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(4), flip(), shift({ padding: 8 })],\n    });\n\n    Object.assign(panel.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  // ─── Focus management ───\n\n  /** @internal */\n  private _focusFirstItem(): void {\n    const items = this._getMenuItems();\n    items[0]?.focus();\n  }\n\n  /** @internal */\n  private _getMenuItems(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n    return (\n      (slot\n        ?.assignedElements({ flatten: true })\n        .filter(\n          (el) =>\n            el instanceof HTMLElement &&\n            !el.hasAttribute('disabled') &&\n            !(el as HTMLButtonElement).disabled &&\n            (el.getAttribute('role') === 'menuitem' ||\n              el.getAttribute('role') === 'menuitemcheckbox' ||\n              el.getAttribute('role') === 'menuitemradio' ||\n              el.tagName.toLowerCase().startsWith('hx-')),\n        ) as HTMLElement[]) ?? []\n    );\n  }\n\n  // ─── Event Handlers (arrow function class fields — stable reference, no bind needed) ───\n\n  /** @internal */\n  private readonly _handleTriggerClick = (e: MouseEvent): void => {\n    e.stopPropagation();\n    this._toggle();\n  };\n\n  /** @internal */\n  private readonly _handleDocumentClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._hide();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      this._hide();\n      this._buttonEl?.focus();\n      return;\n    }\n    if (e.key === 'Tab') {\n      this._hide();\n      return;\n    }\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n      e.preventDefault();\n      e.stopPropagation();\n      const items = this._getMenuItems();\n      if (items.length === 0) return;\n      const focused = items.indexOf(document.activeElement as HTMLElement);\n      let next: number;\n      if (e.key === 'ArrowDown') {\n        next = focused < 0 || focused >= items.length - 1 ? 0 : focused + 1;\n      } else if (e.key === 'ArrowUp') {\n        next = focused <= 0 ? items.length - 1 : focused - 1;\n      } else if (e.key === 'Home') {\n        next = 0;\n      } else {\n        next = items.length - 1;\n      }\n      items[next]?.focus();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleSlotClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const menuItem = target.closest(\n      '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]',\n    ) as HTMLElement | null;\n    if (!menuItem) return;\n    if (menuItem.hasAttribute('disabled') || (menuItem as HTMLButtonElement).disabled) return;\n    const value = menuItem.getAttribute('data-value') ?? menuItem.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value },\n      }),\n    );\n    this._hide();\n  };\n\n  // ─── SVG Icons ───\n\n  /** @internal */\n  private _renderIcon() {\n    if (this.icon === 'horizontal') {\n      return html`\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"5\" cy=\"12\" r=\"2\" />\n          <circle cx=\"12\" cy=\"12\" r=\"2\" />\n          <circle cx=\"19\" cy=\"12\" r=\"2\" />\n        </svg>\n      `;\n    }\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"5\" r=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n        <circle cx=\"12\" cy=\"19\" r=\"2\" />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const btnClasses = {\n      trigger: true,\n      [`trigger--${this.size}`]: true,\n      'trigger--open': this._open,\n    };\n\n    return html`\n      <button\n        part=\"button trigger\"\n        class=${classMap(btnClasses)}\n        type=\"button\"\n        aria-label=${this.label}\n        aria-haspopup=\"menu\"\n        aria-expanded=${String(this._open)}\n        aria-controls=${this._open ? this._panelId : nothing}\n        ?disabled=${this.disabled}\n        @click=${this._handleTriggerClick}\n      >\n        ${this._renderIcon()}\n      </button>\n      ${this._open\n        ? html`\n            <div\n              id=${this._panelId}\n              part=\"panel menu\"\n              role=\"menu\"\n              aria-label=${this.labelMenu}\n              class=\"panel\"\n              @click=${this._handleSlotClick}\n            >\n              <slot></slot>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-overflow-menu': HelixOverflowMenu;\n  }\n}\n"],"names":["helixOverflowMenuStyles","css","_nextOverflowMenuId","createIdCounter","HelixOverflowMenu","HelixElement","_a","items","focused","next","_b","menuItem","value","trigger","panel","computePosition","flip","shift","offset","x","y","slot","el","html","btnClasses","classMap","nothing","forcedColorsInteractive","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAA0BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOvC,MAAMC,IAAsBC,EAAgB,kBAAkB;AAgEvD,IAAMC,IAAN,cAAgCC,EAAa;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAYkB,cAOlB,KAAA,OAA2B,MAO3B,KAAA,WAAW,IAOX,KAAA,OAAkC,YAOlC,KAAA,QAAQ,gBAOR,KAAA,YAAY,WAMH,KAAQ,QAAQ,IAMzB,KAAiB,WAAW,GAAGH,EAAA,CAAqB,UAqGpD,KAAiB,sBAAsB,CAAC,MAAwB;AAC9D,QAAE,gBAAA,GACF,KAAK,QAAA;AAAA,IACP,GAGA,KAAiB,uBAAuB,CAAC,MAAwB;AAC/D,UAAI,CAAC,KAAK,MAAO;AAEjB,MADa,EAAE,aAAA,EACL,SAAS,IAAI,KACrB,KAAK,MAAA;AAAA,IAET,GAGA,KAAiB,iBAAiB,CAAC,MAA2B;;AAC5D,UAAK,KAAK,OACV;AAAA,YAAI,EAAE,QAAQ,UAAU;AACtB,YAAE,gBAAA,GACF,KAAK,MAAA,IACLI,IAAA,KAAK,cAAL,QAAAA,EAAgB;AAChB;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,OAAO;AACnB,eAAK,MAAA;AACL;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,OAAO;AACvF,YAAE,eAAA,GACF,EAAE,gBAAA;AACF,gBAAMC,IAAQ,KAAK,cAAA;AACnB,cAAIA,EAAM,WAAW,EAAG;AACxB,gBAAMC,IAAUD,EAAM,QAAQ,SAAS,aAA4B;AACnE,cAAIE;AACJ,UAAI,EAAE,QAAQ,cACZA,IAAOD,IAAU,KAAKA,KAAWD,EAAM,SAAS,IAAI,IAAIC,IAAU,IACzD,EAAE,QAAQ,YACnBC,IAAOD,KAAW,IAAID,EAAM,SAAS,IAAIC,IAAU,IAC1C,EAAE,QAAQ,SACnBC,IAAO,IAEPA,IAAOF,EAAM,SAAS,IAExBG,IAAAH,EAAME,CAAI,MAAV,QAAAC,EAAa;AAAA,QACf;AAAA;AAAA,IACF,GAGA,KAAiB,mBAAmB,CAAC,MAAmB;;AAEtD,YAAMC,IADS,EAAE,OACO;AAAA,QACtB;AAAA,MAAA;AAGF,UADI,CAACA,KACDA,EAAS,aAAa,UAAU,KAAMA,EAA+B,SAAU;AACnF,YAAMC,IAAQD,EAAS,aAAa,YAAY,OAAKL,IAAAK,EAAS,gBAAT,gBAAAL,EAAsB,WAAU;AACrF,WAAK;AAAA,QACH,IAAI,YAA+B,aAAa;AAAA,UAC9C,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,OAAAM,EAAA;AAAA,QAAM,CACjB;AAAA,MAAA,GAEH,KAAK,MAAA;AAAA,IACP;AAAA,EAAA;AAAA;AAAA,EA3JS,oBAA0B;AACjC,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,sBAAsB,EAAI,GAClE,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,sBAAsB,EAAI,GACrE,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA;AAAA;AAAA,EAKA,MAAc,QAAuB;AACnC,IAAI,KAAK,SAAS,KAAK,aACvB,KAAK,QAAQ,IACb,MAAM,KAAK,gBACX,MAAM,KAAK,gBAAA,GACX,KAAK,gBAAA,GACL,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,QAAc;AACpB,IAAK,KAAK,UACV,KAAK,QAAQ,IACb,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,UAAgB;AACtB,IAAI,KAAK,QACP,KAAK,MAAA,IAEA,KAAK,MAAA;AAAA,EAEd;AAAA;AAAA;AAAA,EAKA,MAAc,kBAAiC;AAC7C,UAAMC,IAAU,KAAK,WACfC,IAAQ,KAAK;AACnB,QAAI,CAACD,KAAW,CAACC,EAAO;AAExB,UAAM,EAAE,iBAAAC,GAAiB,MAAAC,GAAM,OAAAC,GAAO,QAAAC,MAAW,MAAM,OAAO,kBAAkB,GAC1E,EAAE,GAAAC,GAAG,GAAAC,EAAA,IAAM,MAAML,EAAgBF,GAASC,GAAO;AAAA,MACrD,WAAW,KAAK;AAAA,MAChB,UAAU;AAAA,MACV,YAAY,CAACI,EAAO,CAAC,GAAGF,EAAA,GAAQC,EAAM,EAAE,SAAS,GAAG,CAAC;AAAA,IAAA,CACtD;AAED,WAAO,OAAOH,EAAM,OAAO;AAAA,MACzB,MAAM,GAAGK,CAAC;AAAA,MACV,KAAK,GAAGC,CAAC;AAAA,IAAA,CACV;AAAA,EACH;AAAA;AAAA;AAAA,EAKQ,kBAAwB;;AAE9B,KAAAd,IADc,KAAK,cAAA,EACb,CAAC,MAAP,QAAAA,EAAU;AAAA,EACZ;AAAA;AAAA,EAGQ,gBAA+B;;AACrC,UAAMe,KAAOf,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC5C,YACGe,KAAA,gBAAAA,EACG,iBAAiB,EAAE,SAAS,GAAA,GAC7B;AAAA,MACC,CAACC,MACCA,aAAc,eACd,CAACA,EAAG,aAAa,UAAU,KAC3B,CAAEA,EAAyB,aAC1BA,EAAG,aAAa,MAAM,MAAM,cAC3BA,EAAG,aAAa,MAAM,MAAM,sBAC5BA,EAAG,aAAa,MAAM,MAAM,mBAC5BA,EAAG,QAAQ,YAAA,EAAc,WAAW,KAAK;AAAA,UACxB,CAAA;AAAA,EAE7B;AAAA;AAAA;AAAA,EA0EQ,cAAc;AACpB,WAAI,KAAK,SAAS,eACTC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAeFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAa;AAAA,MACjB,SAAS;AAAA,MACT,CAAC,YAAY,KAAK,IAAI,EAAE,GAAG;AAAA,MAC3B,iBAAiB,KAAK;AAAA,IAAA;AAGxB,WAAOD;AAAA;AAAA;AAAA,gBAGKE,EAASD,CAAU,CAAC;AAAA;AAAA,qBAEf,KAAK,KAAK;AAAA;AAAA,wBAEP,OAAO,KAAK,KAAK,CAAC;AAAA,wBAClB,KAAK,QAAQ,KAAK,WAAWE,CAAO;AAAA,oBACxC,KAAK,QAAQ;AAAA,iBAChB,KAAK,mBAAmB;AAAA;AAAA,UAE/B,KAAK,aAAa;AAAA;AAAA,QAEpB,KAAK,QACHH;AAAA;AAAA,mBAES,KAAK,QAAQ;AAAA;AAAA;AAAA,2BAGL,KAAK,SAAS;AAAA;AAAA,uBAElB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,cAKlCG,CAAO;AAAA;AAAA,EAEf;AACF;AArTatB,EACK,SAAS,CAACJ,GAAyB2B,CAAuB;AAO1EC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BzB,EAQX,WAAA,aAAA,CAAA;AAmBAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA1BpDzB,EA2BX,WAAA,QAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjC/BzB,EAkCX,WAAA,YAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxC9BzB,EAyCX,WAAA,QAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/C9BzB,EAgDX,WAAA,SAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,cAAc;AAAA,GAtDvDzB,EAuDX,WAAA,aAAA,CAAA;AAMiBwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7DI1B,EA6DM,WAAA,SAAA,CAAA;AASkBwB,EAAA;AAAA,EAAlCG,EAAM,kBAAkB;AAAA,GAtEd3B,EAsEwB,WAAA,aAAA,CAAA;AAGDwB,EAAA;AAAA,EAAjCG,EAAM,iBAAiB;AAAA,GAzEb3B,EAyEuB,WAAA,YAAA,CAAA;AAzEvBA,IAANwB,EAAA;AAAA,EADNI,EAAc,kBAAkB;AAAA,GACpB5B,CAAA;"}

package/dist/shared/hx-progress-bar-Bn3JEPUf.js

@@ -1,258 +0,0 @@
-import { css as m, nothing as b, html as p } from "lit";
-import { property as o, state as g, customElement as u } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { a as f } from "./forced-colors-CTEDFRGa.js";
-import { H as _ } from "./helix-element-BNEYeiys.js";
-import { c as x } from "./id-counter-DuX8vsui.js";
-const y = m`
-  :host {
-    display: block;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .progress-bar {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-1, 0.25rem);
-  }
-
-  .progress-bar__label {
-    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
-    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
-    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-progress-bar-label-color, var(--hx-color-text-strong, #202b39));
-    line-height: var(--hx-line-height-tight, 1.25);
-  }
-
-  .progress-bar__track {
-    position: relative;
-    overflow: hidden;
-    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
-    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-surface-sunken, #ebeee9));
-    width: 100%;
-  }
-
-  /* ─── Size Variants ─── */
-
-  .progress-bar--sm .progress-bar__track {
-    height: var(--hx-progress-bar-height-sm, var(--hx-space-1, 0.25rem));
-  }
-
-  .progress-bar--md .progress-bar__track {
-    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));
-  }
-
-  .progress-bar--lg .progress-bar__track {
-    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));
-  }
-
-  .progress-bar__fill {
-    height: 100%;
-    width: 100%;
-    border-radius: inherit;
-    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500, #429797));
-    transform-origin: left center;
-    transform: scaleX(var(--_value-ratio, 0));
-    transition: transform var(--hx-transition-fast, 150ms ease);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .progress-bar__fill {
-      transition: none;
-    }
-  }
-
-  /* ─── Variant Colors ─── */
-
-  .progress-bar--default .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500, #429797);
-  }
-
-  .progress-bar--success .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-success-700, #146831);
-  }
-
-  .progress-bar--warning .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500, #c2711c);
-  }
-
-  .progress-bar--danger .progress-bar__fill {
-    --hx-progress-bar-indicator-bg: var(--hx-color-error-500, #e5493e);
-  }
-
-  /* ─── Indeterminate Animation ─── */
-
-  @keyframes hx-progress-indeterminate {
-    0% {
-      transform: translateX(-100%) scaleX(0.4);
-    }
-    50% {
-      transform: translateX(50%) scaleX(0.6);
-    }
-    100% {
-      transform: translateX(250%) scaleX(0.4);
-    }
-  }
-
-  .progress-bar--indeterminate .progress-bar__fill {
-    transform: translateX(-100%) scaleX(0.4);
-    transform-origin: left center;
-    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)
-      ease-in-out infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .progress-bar__fill {
-      transition: none;
-    }
-
-    .progress-bar--indeterminate .progress-bar__fill {
-      animation: none;
-      transform: scaleX(1);
-      opacity: var(--hx-opacity-disabled, 0.5);
-    }
-  }
-
-  /* ─── High Contrast Mode ─── */
-
-  @media (forced-colors: active) {
-    .progress-bar__track {
-      border: 1px solid ButtonText;
-      background-color: Canvas;
-    }
-
-    .progress-bar__fill {
-      background-color: Highlight;
-      forced-color-adjust: none;
-    }
-  }
-`;
-var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (r, t, n, l) => {
-  for (var s = l > 1 ? void 0 : l ? w(t, n) : t, i = r.length - 1, h; i >= 0; i--)
-    (h = r[i]) && (s = (l ? h(t, n, s) : h(s)) || s);
-  return l && s && $(t, n, s), s;
-};
-const C = x("hx-progress-bar");
-let e = class extends _ {
-  constructor() {
-    super(...arguments), this.value = null, this.min = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.description = "", this.size = "md", this.variant = "default", this._liveMessage = "", this._hasLabelSlotContent = !1, this._warnedAboutLabel = !1, this._uid = C();
-  }
-  /** @internal */
-  get _isIndeterminate() {
-    return this.indeterminate || this.value === null;
-  }
-  /** @internal */
-  get _percentage() {
-    if (this._isIndeterminate || this.value !== null && isNaN(this.value))
-      return 0;
-    const r = this.max - this.min;
-    return r <= 0 ? 0 : (Math.max(this.min, Math.min(this.value ?? this.min, this.max)) - this.min) / r * 100;
-  }
-  /** @internal */
-  get _isComplete() {
-    return !this._isIndeterminate && this.value !== null && this.value >= this.max;
-  }
-  updated(r) {
-    if (super.updated(r), (r.has("value") || r.has("max")) && this._isComplete ? (this._liveMessage = "Complete", this.dispatchEvent(new CustomEvent("hx-complete", { bubbles: !0, composed: !0 }))) : r.has("value") && !this._isComplete && (this._liveMessage = ""), r.has("value") || r.has("min") || r.has("max") || r.has("indeterminate")) {
-      const t = this._isIndeterminate ? 0 : this._percentage / 100;
-      this.style.setProperty("--_value-ratio", String(Math.max(0, Math.min(1, t))));
-    }
-    !this.label && !this._warnedAboutLabel && (this._warnedAboutLabel = !0);
-  }
-  /** @internal */
-  _onLabelSlotChange(r) {
-    const t = r.target;
-    this._hasLabelSlotContent = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  /** @internal */
-  get _variantLabel() {
-    return e._VARIANT_LABELS[this.variant] ?? "";
-  }
-  render() {
-    const r = `${this._uid}-label`, t = this.description ? `${this._uid}-desc` : void 0, n = this._hasLabelSlotContent, l = {
-      "progress-bar": !0,
-      [`progress-bar--${this.size}`]: !0,
-      [`progress-bar--${this.variant}`]: !0,
-      "progress-bar--indeterminate": this._isIndeterminate
-    }, s = this._isIndeterminate ? void 0 : this.value ?? this.min, i = this._variantLabel, h = this._isIndeterminate ? "In progress" : `${Math.round(this._percentage)}%`, d = i ? `${h} — ${i}` : h;
-    return p`
-      <div class=${v(l)}>
-        ${n || this.label ? p`<span id=${r} part="label" class="progress-bar__label">
-              <slot name="label" @slotchange=${this._onLabelSlotChange}></slot>
-            </span>` : p`<slot name="label" @slotchange=${this._onLabelSlotChange} hidden></slot>`}
-        ${this.description ? p`<span id=${t} class="sr-only">${this.description}</span>` : b}
-        <div
-          part="track"
-          class="progress-bar__track"
-          role="progressbar"
-          aria-valuenow=${c(s)}
-          aria-valuemin=${this.min}
-          aria-valuemax=${this.max}
-          aria-valuetext=${d}
-          aria-label=${c(!n && this.label ? this.label : void 0)}
-          aria-labelledby=${c(n ? r : void 0)}
-          aria-describedby=${c(t)}
-        >
-          <div part="fill" class="progress-bar__fill"></div>
-        </div>
-        ${i ? p`<span class="sr-only progress-bar__variant-label">${i}</span>` : b}
-        <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveMessage}</div>
-      </div>
-    `;
-  }
-};
-e.styles = [y, f];
-e._VARIANT_LABELS = {
-  success: "Success",
-  warning: "Warning",
-  danger: "Danger"
-};
-a([
-  o({ type: Number, reflect: !0 })
-], e.prototype, "value", 2);
-a([
-  o({ type: Number, reflect: !0 })
-], e.prototype, "min", 2);
-a([
-  o({ type: Number, reflect: !0 })
-], e.prototype, "max", 2);
-a([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "indeterminate", 2);
-a([
-  o({ type: String, reflect: !0 })
-], e.prototype, "label", 2);
-a([
-  o({ type: String, reflect: !0 })
-], e.prototype, "description", 2);
-a([
-  o({ type: String, reflect: !0, attribute: "hx-size" })
-], e.prototype, "size", 2);
-a([
-  o({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
-a([
-  g()
-], e.prototype, "_liveMessage", 2);
-a([
-  g()
-], e.prototype, "_hasLabelSlotContent", 2);
-e = a([
-  u("hx-progress-bar")
-], e);
-export {
-  e as H
-};
-//# sourceMappingURL=hx-progress-bar-Bn3JEPUf.js.map