npm - @helixui/library - Versions diffs - 2.1.2-next.53 → 2.1.2-next.54 - Mend

@helixui/library 2.1.2-next.53 → 2.1.2-next.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (753) hide show

package/dist/shared/{hx-split-button-Dk-zMDDo.js → hx-split-button-CGcJMmCG.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { css as m, LitElement as v, nothing as x, html as c } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { query as d, state as g, property as l, customElement as f } from "lit/decorators.js";
+import { css as m, nothing as v, html as c } from "lit";
+import { query as d, state as x, property as l, customElement as g } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
-import { c as _ } from "./id-counter-PTgF-zcG.js";
+import { H as f } from "./helix-element-BNEYeiys.js";
+import { c as _ } from "./id-counter-DuX8vsui.js";
 const y = m`
   :host {
     display: inline-block;
@@ -83,7 +83,7 @@ const y = m`
     flex-shrink: 0;
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #3b82f6));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #60a5fa));
     border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
     background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
@@ -177,7 +177,7 @@ const y = m`
     --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
     --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-400, #3b82f6);
+    --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
   }
   /* ─── Variant: secondary ─── */
@@ -354,9 +354,9 @@ var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, r, e
   return s && o && w(r, e, o), o;
 };
 const M = _("hx-split-button");
-let i = class extends v {
+let i = class extends f {
   constructor() {
-    super(...arguments), this._open = !1, this.variant = "primary", this.size = "md", this.disabled = !1, this.label = void 0, this.ariaLabel = "", this.labelTrigger = "More actions", this.labelMenu = "Secondary actions", this._menuId = `${M()}-menu`, this._handleOutsideClick = (t) => {
+    super(...arguments), this._open = !1, this.variant = "primary", this.size = "md", this.disabled = !1, this.label = void 0, this.accessibleLabel = "", this.labelTrigger = "More actions", this.labelMenu = "Secondary actions", this._menuId = `${M()}-menu`, this._handleOutsideClick = (t) => {
       if (!this._open) return;
       const r = t.target;
       !this.contains(r) && r !== this && this._closeMenu();
@@ -505,7 +505,7 @@ let i = class extends v {
           class="split-button__primary"
           ?disabled=${this.disabled}
           type="button"
-          aria-label=${this.ariaLabel ?? (this.label || x)}
+          aria-label=${this.accessibleLabel ?? (this.label || v)}
           @click=${this._handlePrimaryClick}
           @keydown=${this._handlePrimaryKeydown}
         >
@@ -568,7 +568,7 @@ n([
   d(".split-button__trigger")
 ], i.prototype, "_triggerButton", 2);
 n([
-  g()
+  x()
 ], i.prototype, "_open", 2);
 n([
   l({ type: String, reflect: !0 })
@@ -583,8 +583,8 @@ n([
   l({ type: String })
 ], i.prototype, "label", 2);
 n([
-  l({ type: String, attribute: "aria-label" })
-], i.prototype, "ariaLabel", 2);
+  l({ type: String, attribute: "accessible-label" })
+], i.prototype, "accessibleLabel", 2);
 n([
   l({ type: String, attribute: "label-trigger" })
 ], i.prototype, "labelTrigger", 2);
@@ -592,9 +592,9 @@ n([
   l({ type: String, attribute: "label-menu" })
 ], i.prototype, "labelMenu", 2);
 i = n([
-  f("hx-split-button")
+  g("hx-split-button")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-split-button-Dk-zMDDo.js.map
+//# sourceMappingURL=hx-split-button-CGcJMmCG.js.map

package/dist/shared/hx-split-button-CGcJMmCG.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-split-button-CGcJMmCG.js","sources":["../../src/components/hx-split-button/hx-split-button.styles.ts","../../src/components/hx-split-button/hx-split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitButtonStyles = 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 /* ─── Container ─── */\n\n .split-button {\n display: inline-flex;\n align-items: stretch;\n position: relative;\n }\n\n /* ─── Primary Button ─── */\n\n .split-button__primary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n border-inline-end: none;\n border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0\n var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n flex: 1 1 auto;\n }\n\n .split-button__primary:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-split-button-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n z-index: 1;\n position: relative;\n }\n\n .split-button__primary:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .split-button__primary:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n .split-button__primary[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Trigger Button ─── */\n\n .split-button__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n border-inline-start: var(--hx-border-width-thin, 1px) solid\n var(--hx-split-button-divider-color, var(--hx-color-primary-400, #60a5fa));\n border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))\n var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .split-button__trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-split-button-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n z-index: 1;\n position: relative;\n }\n\n .split-button__trigger:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .split-button__trigger:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n .split-button__trigger[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Trigger Icon ─── */\n\n .split-button__chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n .split-button__chevron--open {\n transform: rotate(180deg);\n }\n\n /* ─── Size Variants ─── */\n\n /* sm */\n .split-button--sm .split-button__primary {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-size-8, 2rem);\n }\n\n .split-button--sm .split-button__trigger {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n min-height: var(--hx-size-8, 2rem);\n }\n\n /* md */\n .split-button--md .split-button__primary {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .split-button--md .split-button__trigger {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n /* lg */\n .split-button--lg .split-button__primary {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n .split-button--lg .split-button__trigger {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Variant: primary ─── */\n\n .split-button--primary .split-button__primary,\n .split-button--primary .split-button__trigger {\n --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);\n --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n --hx-split-button-border-color: transparent;\n --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);\n }\n\n /* ─── Variant: secondary ─── */\n\n .split-button--secondary .split-button__primary,\n .split-button--secondary .split-button__trigger {\n --hx-split-button-bg: transparent;\n --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);\n --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);\n }\n\n .split-button--secondary .split-button__primary:hover,\n .split-button--secondary .split-button__trigger:hover {\n --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);\n filter: none;\n }\n\n /* ─── Variant: tertiary ─── */\n\n .split-button--tertiary .split-button__primary,\n .split-button--tertiary .split-button__trigger {\n --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n --hx-split-button-border-color: transparent;\n --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n }\n\n .split-button--tertiary .split-button__primary:hover,\n .split-button--tertiary .split-button__trigger:hover {\n --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n filter: none;\n }\n\n /* ─── Variant: danger ─── */\n\n .split-button--danger .split-button__primary,\n .split-button--danger .split-button__trigger {\n --hx-split-button-bg: var(--hx-color-error-500, #dc2626);\n --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n --hx-split-button-border-color: transparent;\n --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);\n }\n\n .split-button--danger .split-button__primary:hover,\n .split-button--danger .split-button__trigger:hover {\n --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);\n filter: none;\n }\n\n /* ─── Variant: ghost ─── */\n\n .split-button--ghost .split-button__primary,\n .split-button--ghost .split-button__trigger {\n --hx-split-button-bg: transparent;\n --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n --hx-split-button-border-color: transparent;\n --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);\n }\n\n .split-button--ghost .split-button__primary:hover,\n .split-button--ghost .split-button__trigger:hover {\n --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n filter: none;\n }\n\n /* ─── Variant: outline ─── */\n\n .split-button--outline .split-button__primary,\n .split-button--outline .split-button__trigger {\n --hx-split-button-bg: transparent;\n --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n }\n\n .split-button--outline .split-button__primary:hover,\n .split-button--outline .split-button__trigger:hover {\n --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);\n filter: none;\n }\n\n /* ─── Dropdown Menu Panel ─── */\n\n @keyframes hx-split-button-menu-open {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .split-button__menu {\n display: none;\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n inset-inline-end: 0;\n min-width: 100%;\n max-height: var(--hx-split-button-menu-max-height, 18rem);\n overflow-y: auto;\n background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-split-button-menu-shadow,\n 0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n 0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n );\n padding: var(--hx-space-1, 0.25rem);\n z-index: var(--hx-z-index-dropdown, 1000);\n }\n\n .split-button__menu--open {\n display: block;\n animation: hx-split-button-menu-open var(--hx-transition-fast, 150ms ease);\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .split-button__primary,\n .split-button__trigger,\n .split-button__chevron {\n transition: none;\n }\n\n .split-button__menu--open {\n animation: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .split-button__primary,\n .split-button__trigger {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .split-button__primary:focus-visible,\n .split-button__trigger:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .split-button__primary[disabled],\n .split-button__trigger[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .split-button__menu {\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, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixSplitButtonStyles } from './hx-split-button.styles.js';\nimport type { HelixMenuItem } from '../hx-menu/hx-menu-item.js';\n\nconst _nextSplitButtonId = createIdCounter('hx-split-button');\n\n/**\n * A split button combining a primary action button with an attached dropdown\n * menu for secondary actions. Implements the ARIA menu button pattern for\n * full keyboard and screen reader support.\n *\n * @summary Primary action button with attached dropdown menu for secondary actions.\n *\n * @tag hx-split-button\n *\n * @slot - Primary button label text.\n * @slot menu - `hx-menu-item` children rendered in the dropdown panel.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the primary button is clicked and is not disabled.\n * @fires {CustomEvent<{value: string; label: string}>} hx-select - Dispatched when\n * a menu item is selected from the dropdown.\n *\n * @csspart button - The primary action button element.\n * @csspart trigger - The dropdown trigger button element.\n * @csspart menu - The dropdown menu panel.\n *\n * @cssprop [--hx-split-button-menu-max-height=18rem] - Maximum height of the dropdown menu panel before scrolling.\n * @cssprop [--hx-split-button-bg=var(--hx-color-primary-500)] - Background color for both buttons.\n * @cssprop [--hx-split-button-color=var(--hx-color-neutral-0)] - Text/icon color for both buttons.\n * @cssprop [--hx-split-button-border-color=transparent] - Border color.\n * @cssprop [--hx-split-button-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-split-button-divider-color=var(--hx-color-primary-400)] - Color of the divider between primary and trigger.\n * @cssprop [--hx-split-button-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-split-button-font-weight=var(--hx-font-weight-semibold)] - Font weight.\n * @cssprop [--hx-split-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-split-button-menu-bg=var(--hx-color-neutral-0)] - Dropdown menu background.\n * @cssprop [--hx-split-button-menu-border-color=var(--hx-color-neutral-200)] - Dropdown menu border color.\n * @cssprop [--hx-split-button-menu-border-radius=var(--hx-border-radius-md)] - Dropdown menu border radius.\n * @cssprop [--hx-split-button-menu-shadow] - Dropdown menu box shadow.\n */\n@customElement('hx-split-button')\nexport class HelixSplitButton extends HelixElement {\n static override styles = [helixSplitButtonStyles];\n\n // ─── Internal References ───\n\n /**\n * Reference to the dropdown menu panel element, used for positioning and focus management.\n * @internal\n */\n @query('.split-button__menu')\n private _menuPanel: HTMLElement | undefined;\n\n /**\n * Reference to the dropdown trigger button element, used to return focus after menu closes.\n * @internal\n */\n @query('.split-button__trigger')\n private _triggerButton: HTMLButtonElement | undefined;\n\n // ─── Internal State ───\n\n /**\n * Tracks whether the dropdown menu is currently open.\n * @internal\n */\n @state() private _open = false;\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant of the split button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n /**\n * Size of the split 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 split button is disabled. Both the primary button and the\n * trigger are disabled when this is true.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Primary button label text. When set, overrides the default slot content.\n * @attr label\n */\n @property({ type: String })\n label: string | undefined = undefined;\n\n /**\n * Accessible label for the primary action button. Required for icon-only usage\n * or when the button label alone is insufficient context.\n * Uses `accessible-label` attribute instead of `aria-label` to avoid\n * ARIAMixin shadowing on the host element.\n *\n * Note: `mixinDelegatesAria` is not applied to this component because the\n * `accessible-label` attribute approach avoids the ARIAMixin property conflict\n * without requiring mixin overhead.\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel = '';\n\n /**\n * Accessible label for the dropdown trigger button. Override for localization.\n * @attr label-trigger\n */\n @property({ type: String, attribute: 'label-trigger' })\n labelTrigger = 'More actions';\n\n /**\n * Accessible label for the dropdown menu panel. Override for localization.\n * @attr label-menu\n */\n @property({ type: String, attribute: 'label-menu' })\n labelMenu = 'Secondary actions';\n\n // ─── Unique IDs ───\n\n /**\n * Stable unique ID for the dropdown menu panel element, used to wire aria-controls on the trigger button.\n * @internal\n */\n private readonly _menuId = `${_nextSplitButtonId()}-menu`;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._handleOutsideClick);\n document.addEventListener('keydown', this._handleDocumentKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleOutsideClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n }\n\n // ─── Outside-click / document keydown ───\n\n /** @internal */\n private readonly _handleOutsideClick = (e: MouseEvent): void => {\n if (!this._open) return;\n const target = e.target as Node;\n if (!this.contains(target) && target !== this) {\n this._closeMenu();\n }\n };\n\n /** @internal */\n private readonly _handleDocumentKeydown = (e: KeyboardEvent): void => {\n if (!this._open) return;\n if (e.key === 'Tab') {\n this._closeMenu();\n }\n };\n\n // ─── Primary Button Handlers ───\n\n /** @internal */\n private _handlePrimaryClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the primary button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n }\n\n /** @internal */\n private _handlePrimaryKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n this._openMenu();\n }\n }\n\n // ─── Trigger Button Handlers ───\n\n /** @internal */\n private _handleTriggerClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n // Stop propagation so _handleOutsideClick does not immediately close.\n e.stopPropagation();\n this._toggleMenu();\n }\n\n /** @internal */\n private _handleTriggerKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n this._openMenu();\n }\n }\n\n // ─── Menu Key Navigation ───\n\n /** @internal */\n private _handleMenuKeydown(e: KeyboardEvent): void {\n const items = this._getMenuItems();\n if (items.length === 0) return;\n\n // document.activeElement returns the hx-menu-item host element when its\n // inner shadow DOM element has focus, which matches items[] directly.\n const currentIndex = items.findIndex((item) => item === document.activeElement);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[next]?.focus();\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prev]?.focus();\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this._closeMenu();\n this._triggerButton?.focus();\n break;\n }\n case 'Home': {\n e.preventDefault();\n items[0]?.focus();\n break;\n }\n case 'End': {\n e.preventDefault();\n items[items.length - 1]?.focus();\n break;\n }\n }\n }\n\n // ─── Menu Item Selection ───\n\n /** @internal */\n private _handleMenuItemSelect(e: Event): void {\n if (!(e instanceof CustomEvent)) return;\n const custom = e as CustomEvent<{ item: HelixMenuItem; value: string }>;\n this._closeMenu();\n this._triggerButton?.focus();\n\n const item = custom.detail.item;\n const label = item?.textContent?.trim() ?? '';\n\n /**\n * Dispatched when a menu item is selected.\n * @event hx-select\n */\n this.dispatchEvent(\n new CustomEvent<{ value: string; label: string }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { value: custom.detail.value, label },\n }),\n );\n }\n\n // ─── Menu Helpers ───\n\n /** @internal */\n private _openMenu(): void {\n if (this._open) return;\n this._open = true;\n // Focus the first enabled menu item after the panel renders\n void this.updateComplete\n .then(() => {\n const items = this._getMenuItems();\n items[0]?.focus();\n })\n .catch(() => undefined);\n }\n\n /** @internal */\n private _closeMenu(): void {\n this._open = false;\n }\n\n /** @internal */\n private _toggleMenu(): void {\n if (this._open) {\n this._closeMenu();\n } else {\n this._openMenu();\n }\n }\n\n /**\n * Returns the enabled hx-menu-item host elements assigned to the `menu` slot.\n * HelixMenuItem overrides focus() to delegate to its inner element, so calling\n * .focus() on hosts works correctly. document.activeElement returns the host\n * element when the inner shadow element has focus, enabling correct index tracking.\n */\n /** @internal */\n private _getMenuItems(): HelixMenuItem[] {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n if (!slot) return [];\n\n return slot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HelixMenuItem =>\n el.tagName.toLowerCase() === 'hx-menu-item' && !(el as HelixMenuItem).disabled,\n );\n }\n\n // ─── Render ───\n\n override render() {\n const containerClasses = {\n 'split-button': true,\n [`split-button--${this.variant}`]: true,\n [`split-button--${this.size}`]: true,\n };\n\n const menuClasses = {\n 'split-button__menu': true,\n 'split-button__menu--open': this._open,\n };\n\n const chevronClasses = {\n 'split-button__chevron': true,\n 'split-button__chevron--open': this._open,\n };\n\n return html`\n <div class=${classMap(containerClasses)}>\n \n <button\n part=\"button\"\n class=\"split-button__primary\"\n ?disabled=${this.disabled}\n type=\"button\"\n aria-label=${this.accessibleLabel ?? (this.label || nothing)}\n @click=${this._handlePrimaryClick}\n @keydown=${this._handlePrimaryKeydown}\n >\n ${this.label !== undefined ? this.label : html`<slot></slot>`}\n </button>\n\n \n <button\n part=\"trigger\"\n class=\"split-button__trigger\"\n ?disabled=${this.disabled}\n aria-haspopup=\"menu\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-controls=${this._menuId}\n aria-label=${this.labelTrigger}\n type=\"button\"\n @click=${this._handleTriggerClick}\n @keydown=${this._handleTriggerKeydown}\n >\n <span class=${classMap(chevronClasses)} aria-hidden=\"true\">\n <svg\n width=\"12\"\n height=\"8\"\n viewBox=\"0 0 12 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 1.5L6 6.5L11 1.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n\n \n <div\n part=\"menu\"\n id=${this._menuId}\n class=${classMap(menuClasses)}\n role=\"menu\"\n aria-label=${this.labelMenu}\n @keydown=${this._handleMenuKeydown}\n @hx-item-select=${this._handleMenuItemSelect}\n >\n <slot name=\"menu\"></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-split-button': HelixSplitButton;\n }\n}\n"],"names":["helixSplitButtonStyles","css","_nextSplitButtonId","createIdCounter","HelixSplitButton","HelixElement","e","target","items","currentIndex","item","next","_a","prev","_b","_c","_d","_e","custom","label","slot","el","containerClasses","menuClasses","chevronClasses","html","classMap","nothing","__decorateClass","query","state","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAyBC;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;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;AA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"}

package/dist/shared/{hx-split-panel-Kdp4BiLz.js → hx-split-panel-C-1R10Mc.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { css as d, LitElement as u, nothing as c, html as p } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as r, customElement as v } from "lit/decorators.js";
+import { css as c, nothing as p, html as d } from "lit";
+import { property as r, state as v, customElement as u } from "lit/decorators.js";
 import { styleMap as f } from "lit/directives/style-map.js";
-const b = d`
+import { H as _ } from "./helix-element-BNEYeiys.js";
+const b = c`
   :host {
     display: flex;
     --_divider-size: var(--hx-split-panel-divider-size, 4px);
@@ -185,22 +185,22 @@ const b = d`
     }
   }
 `;
-var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, i, n, a) => {
-  for (var s = a > 1 ? void 0 : a ? x(i, n) : i, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (s = (a ? h(i, n, s) : h(s)) || s);
-  return a && s && m(i, n, s), s;
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (t, i, o, a) => {
+  for (var n = a > 1 ? void 0 : a ? x(i, o) : i, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (n = (a ? h(i, o, n) : h(n)) || n);
+  return a && n && m(i, o, n), n;
 };
-let e = class extends u {
+let e = class extends _ {
   constructor() {
-    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
+    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._resolvedPosition = 50, this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
       if (this.disabled) return;
-      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
+      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this._resolvedPosition, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
     }, this._onPointerMove = (t) => {
       if (!this._dragging) return;
-      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, a = this.orientation === "horizontal" ? this._cachedContainerWidth : this._cachedContainerHeight;
+      const o = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, a = this.orientation === "horizontal" ? this._cachedContainerWidth : this._cachedContainerHeight;
       if (a === 0) return;
-      const s = n / a * 100;
-      this._setPosition(this._positionAtDragStart + s);
+      const n = o / a * 100;
+      this._setPosition(this._positionAtDragStart + n);
     }, this._onPointerUp = () => {
       this._dragging = !1, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0;
     }, this._onKeyDown = (t) => {
@@ -208,17 +208,17 @@ let e = class extends u {
         switch (t.key) {
           case "ArrowLeft":
           case "ArrowUp":
-            t.preventDefault(), this._setPosition(this.position - 1);
+            t.preventDefault(), this._setPosition(this._resolvedPosition - 1);
             break;
           case "ArrowRight":
           case "ArrowDown":
-            t.preventDefault(), this._setPosition(this.position + 1);
+            t.preventDefault(), this._setPosition(this._resolvedPosition + 1);
             break;
           case "PageUp":
-            t.preventDefault(), this._setPosition(this.position + 10);
+            t.preventDefault(), this._setPosition(this._resolvedPosition + 10);
             break;
           case "PageDown":
-            t.preventDefault(), this._setPosition(this.position - 10);
+            t.preventDefault(), this._setPosition(this._resolvedPosition - 10);
             break;
           case "Home":
             t.preventDefault(), this._setPosition(this.min);
@@ -243,16 +243,16 @@ let e = class extends u {
   _snapToPoint(t) {
     if (!this.snap.length) return t;
     const i = 5;
-    for (const n of this.snap)
-      if (Math.abs(t - n) <= i) return n;
+    for (const o of this.snap)
+      if (Math.abs(t - o) <= i) return o;
     return t;
   }
   /** @internal */
   _setPosition(t) {
     const i = this._clamp(this._snapToPoint(t));
-    i !== this.position && (this.position = i, this.dispatchEvent(
+    i !== this._resolvedPosition && (this._resolvedPosition = i, this.position = i, this.dispatchEvent(
       new CustomEvent("hx-reposition", {
-        detail: { position: this.position },
+        detail: { position: this._resolvedPosition },
         bubbles: !0,
         composed: !0
       })
@@ -263,9 +263,16 @@ let e = class extends u {
     return this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
   }
   willUpdate(t) {
-    if (super.willUpdate(t), !t.has("collapsed")) return;
-    const i = t.get("collapsed");
-    this.collapsed === "start" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.min)) : this.collapsed === "end" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.max)) : this.collapsed === null && i !== null && i !== void 0 && this._setPosition(this._positionBeforeCollapse);
+    super.willUpdate(t);
+    let i = !1;
+    if (t.has("collapsed")) {
+      const o = t.get("collapsed");
+      this.collapsed === "start" ? (o == null && (this._positionBeforeCollapse = this._resolvedPosition), this._resolvedPosition = this._clamp(this._snapToPoint(this.min)), i = !0) : this.collapsed === "end" ? (o == null && (this._positionBeforeCollapse = this._resolvedPosition), this._resolvedPosition = this._clamp(this._snapToPoint(this.max)), i = !0) : this.collapsed === null && o !== null && o !== void 0 && (this._resolvedPosition = this._clamp(this._snapToPoint(this._positionBeforeCollapse)), i = !0);
+    }
+    !i && (t.has("position") || t.has("min") || t.has("max") || t.has("snap")) && (this._resolvedPosition = this._clamp(this._snapToPoint(this.position)));
+  }
+  updated(t) {
+    super.updated(t), this.position !== this._resolvedPosition && (this.position = this._resolvedPosition);
   }
   connectedCallback() {
     super.connectedCallback(), this.positionInPixels !== void 0 && typeof requestAnimationFrame < "u" && requestAnimationFrame(() => {
@@ -277,10 +284,10 @@ let e = class extends u {
   }
   /** @internal */
   _startPanelStyleMap() {
-    return this.orientation === "horizontal" ? { width: `${this.position}%` } : { height: `${this.position}%` };
+    return this.orientation === "horizontal" ? { width: `${this._resolvedPosition}%` } : { height: `${this._resolvedPosition}%` };
   }
   render() {
-    return p`
+    return d`
       <div part="start" class="panel panel--start" style=${f(this._startPanelStyleMap())}>
         <slot name="start"></slot>
       </div>
@@ -291,17 +298,17 @@ let e = class extends u {
           role="separator"
           aria-label=${this.resizeLabel}
           aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
-          aria-valuenow=${this.position}
+          aria-valuenow=${this._resolvedPosition}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
-          aria-disabled=${this.disabled ? "true" : c}
+          aria-disabled=${this.disabled ? "true" : p}
           tabindex=${this.disabled ? "-1" : "0"}
           @pointerdown=${this._onPointerDown}
           @pointermove=${this._onPointerMove}
           @pointerup=${this._onPointerUp}
           @keydown=${this._onKeyDown}
         ></div>
-        ${this.collapsible ? this.collapsed ? p`<div class="collapse-controls">
+        ${this.collapsible ? this.collapsed ? d`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
@@ -310,7 +317,7 @@ let e = class extends u {
                 >
                   ${this.collapsed === "start" ? "▶" : "◀"}
                 </button>
-              </div>` : p`<div class="collapse-controls">
+              </div>` : d`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
@@ -327,7 +334,7 @@ let e = class extends u {
                 >
                   ▶
                 </button>
-              </div>` : c}
+              </div>` : p}
       </div>
       <div part="end" class="panel panel--end">
         <slot name="end"></slot>
@@ -336,22 +343,22 @@ let e = class extends u {
   }
 };
 e.styles = [b];
-o([
+s([
   r({ type: Number, reflect: !0 })
 ], e.prototype, "position", 2);
-o([
+s([
   r({ type: Number, attribute: "position-in-pixels" })
 ], e.prototype, "positionInPixels", 2);
-o([
+s([
   r({ type: String, reflect: !0 })
 ], e.prototype, "orientation", 2);
-o([
+s([
   r({ type: Number, reflect: !0 })
 ], e.prototype, "min", 2);
-o([
+s([
   r({ type: Number, reflect: !0 })
 ], e.prototype, "max", 2);
-o([
+s([
   r({
     attribute: "snap",
     converter: {
@@ -370,28 +377,31 @@ o([
     }
   })
 ], e.prototype, "snap", 2);
-o([
+s([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-o([
+s([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "collapsible", 2);
-o([
+s([
   r({ type: String, reflect: !0 })
 ], e.prototype, "collapsed", 2);
-o([
+s([
   r({ attribute: "resize-label" })
 ], e.prototype, "resizeLabel", 2);
-o([
+s([
   r({ attribute: "collapse-start-label" })
 ], e.prototype, "collapseStartLabel", 2);
-o([
+s([
   r({ attribute: "collapse-end-label" })
 ], e.prototype, "collapseEndLabel", 2);
-e = o([
-  v("hx-split-panel")
+s([
+  v()
+], e.prototype, "_resolvedPosition", 2);
+e = s([
+  u("hx-split-panel")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-split-panel-Kdp4BiLz.js.map
+//# sourceMappingURL=hx-split-panel-C-1R10Mc.js.map

package/dist/shared/hx-split-panel-C-1R10Mc.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-split-panel-C-1R10Mc.js","sources":["../../src/components/hx-split-panel/hx-split-panel.styles.ts","../../src/components/hx-split-panel/hx-split-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitPanelStyles = css`\n :host {\n display: flex;\n --_divider-size: var(--hx-split-panel-divider-size, 4px);\n --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));\n --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));\n overflow: hidden;\n }\n\n :host([orientation='horizontal']) {\n flex-direction: row;\n width: 100%;\n height: 100%;\n }\n\n :host([orientation='vertical']) {\n flex-direction: column;\n width: 100%;\n height: 100%;\n }\n\n .panel {\n overflow: auto;\n min-width: 0;\n min-height: 0;\n }\n\n .panel--start {\n flex-shrink: 0;\n }\n\n .panel--end {\n flex: 1;\n }\n\n :host([orientation='horizontal']) .panel--start {\n height: 100%;\n }\n\n :host([orientation='vertical']) .panel--start {\n width: 100%;\n }\n\n /* ─── Divider Track (flex child wrapper) ─── */\n\n .divider-track {\n flex-shrink: 0;\n position: relative;\n overflow: visible;\n display: flex;\n align-items: stretch;\n }\n\n :host([orientation='horizontal']) .divider-track {\n width: var(--_divider-size);\n height: 100%;\n }\n\n :host([orientation='vertical']) .divider-track {\n width: 100%;\n height: var(--_divider-size);\n }\n\n /* ─── Divider (separator role — no interactive children) ─── */\n\n .divider {\n flex: 1;\n background-color: var(--_divider-color);\n cursor: col-resize;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n touch-action: none;\n user-select: none;\n -webkit-user-select: none;\n outline: none;\n }\n\n :host([orientation='horizontal']) .divider {\n cursor: col-resize;\n }\n\n :host([orientation='vertical']) .divider {\n cursor: row-resize;\n }\n\n .divider:hover,\n .divider:focus-visible {\n background-color: var(--_divider-hover-color);\n }\n\n .divider:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-split-panel-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);\n }\n\n :host([disabled]) .divider {\n cursor: default;\n pointer-events: none;\n }\n\n :host([disabled]) .divider:hover,\n :host([disabled]) .divider:focus-visible {\n background-color: var(--_divider-color);\n outline: none;\n box-shadow: none;\n }\n\n /* ─── Collapse Controls (siblings of separator, not children) ─── */\n\n .collapse-controls {\n position: absolute;\n top: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n z-index: 2;\n pointer-events: auto;\n }\n\n :host([orientation='vertical']) .collapse-controls {\n flex-direction: row;\n }\n\n .collapse-btn {\n background: var(--_divider-hover-color);\n border: 2px solid var(--hx-color-neutral-0);\n color: var(--hx-color-neutral-0);\n width: var(--hx-size-5, 1.25rem);\n height: var(--hx-size-5, 1.25rem);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--hx-split-panel-btn-icon-size, 0.5rem);\n padding: 0;\n line-height: 1;\n flex-shrink: 0;\n /* WCAG 2.5.5: minimum 44×44px touch target via transparent hit-area */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n }\n\n .collapse-btn:hover {\n filter: brightness(1.1);\n }\n\n .collapse-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-split-panel-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .divider {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .divider {\n background-color: CanvasText;\n }\n\n .collapse-btn {\n border-color: ButtonText;\n color: ButtonText;\n background: Canvas;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixSplitPanelStyles } from './hx-split-panel.styles.js';\n\n/**\n * A resizable two-pane layout with a draggable divider.\n *\n * @summary Resizable split panel with start and end panes.\n *\n * @tag hx-split-panel\n *\n * @slot start - The first (start) panel content.\n * @slot end - The second (end) panel content.\n *\n * @csspart start - The start panel container.\n * @csspart divider - The draggable divider element.\n * @csspart end - The end panel container.\n *\n * @fires hx-reposition - Fired when the divider is moved. Detail: `{ position: number }`.\n *\n * @cssprop [--hx-split-panel-divider-size=4px] - Width (horizontal) or height (vertical) of the divider.\n * @cssprop [--hx-split-panel-divider-color=var(--hx-color-neutral-200)] - Default divider color.\n * @cssprop [--hx-split-panel-divider-hover-color=var(--hx-color-primary-500)] - Divider color on hover/focus.\n *\n * @example Drupal Twig usage:\n * ```twig\n * <hx-split-panel\n * position=\"50\"\n * orientation=\"horizontal\"\n * min=\"10\"\n * max=\"90\"\n * collapsible\n * >\n * <div slot=\"start\">{{ start_content }}</div>\n * <div slot=\"end\">{{ end_content }}</div>\n * </hx-split-panel>\n *\n * Attribute-settable: position, position-in-pixels, orientation, disabled, min, max, collapsible, collapsed\n * JS-only (complex types): snap (use .snap=${[25, 50, 75]} in Lit templates,\n * or snap=\"[25,50,75]\" as JSON string in Twig)\n * ```\n */\n@customElement('hx-split-panel')\nexport class HelixSplitPanel extends HelixElement {\n static override styles = [helixSplitPanelStyles];\n\n /**\n * Position of the divider as a percentage (0–100) of the start panel.\n * @attr position\n */\n @property({ type: Number, reflect: true })\n position = 50;\n\n /**\n * Position of the divider in pixels (alternative to `position`).\n * When set, takes precedence over `position` until the host is measured.\n * @attr position-in-pixels\n */\n @property({ type: Number, attribute: 'position-in-pixels' })\n positionInPixels: number | undefined;\n\n /**\n * Orientation of the split.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Minimum position as a percentage (0–100). Prevents full collapse of start panel.\n * @attr min\n */\n @property({ type: Number, reflect: true })\n min = 0;\n\n /**\n * Maximum position as a percentage (0–100). Prevents full expansion of start panel.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 100;\n\n /**\n * Snap points as an array of percentages. The divider snaps to the\n * nearest point within a 5% threshold.\n * Accepts JSON array string in HTML: snap=\"[25, 50, 75]\"\n * @attr snap\n */\n @property({\n attribute: 'snap',\n converter: {\n fromAttribute(value: string | null): number[] {\n if (!value) return [];\n try {\n const parsed = JSON.parse(value) as unknown;\n if (Array.isArray(parsed)) return (parsed as unknown[]).map(Number);\n return [];\n } catch {\n return value\n .split(',')\n .map((s) => Number(s.trim()))\n .filter((n) => !isNaN(n));\n }\n },\n toAttribute(value: number[]): string {\n return JSON.stringify(value);\n },\n },\n })\n snap: number[] = [];\n\n /**\n * When true, the divider cannot be dragged.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * When true, collapse/expand buttons appear on the divider.\n * @attr collapsible\n */\n @property({ type: Boolean, reflect: true })\n collapsible = false;\n\n /**\n * Which panel is collapsed: 'start', 'end', or null (not collapsed).\n * @attr collapsed\n */\n @property({ type: String, reflect: true })\n collapsed: 'start' | 'end' | null = null;\n\n /**\n * Accessible label for the divider separator element.\n * @attr resize-label\n */\n @property({ attribute: 'resize-label' })\n resizeLabel = 'Resize panels';\n\n /**\n * Accessible label for the button that collapses the start panel.\n * @attr collapse-start-label\n */\n @property({ attribute: 'collapse-start-label' })\n collapseStartLabel = 'Collapse start panel';\n\n /**\n * Accessible label for the button that collapses the end panel.\n * @attr collapse-end-label\n */\n @property({ attribute: 'collapse-end-label' })\n collapseEndLabel = 'Collapse end panel';\n\n /**\n * The resolved (clamped + snapped) position used for rendering and ARIA.\n * Derived from `position` in `willUpdate` to avoid mutating a reflected\n * `@property` inside the update lifecycle (which would trigger a re-entrant\n * update cycle).\n * @internal\n */\n @state() private _resolvedPosition = 50;\n\n /**\n * Whether the user is currently dragging the divider.\n * @internal\n */\n private _dragging = false;\n /**\n * The pointer coordinate (clientX or clientY) at the start of a drag gesture.\n * @internal\n */\n private _dragStart = 0;\n /**\n * The divider position percentage at the moment a drag gesture begins, used to compute deltas.\n * @internal\n */\n private _positionAtDragStart = 0;\n /**\n * The position saved before a collapse occurs, restored when the panel is expanded.\n * @internal\n */\n private _positionBeforeCollapse = 50;\n /**\n * Cached container width measured once at drag start to avoid layout thrash on every pointermove.\n * @internal\n */\n private _cachedContainerWidth = 0;\n /**\n * Cached container height measured once at drag start to avoid layout thrash on every pointermove.\n * @internal\n */\n private _cachedContainerHeight = 0;\n\n /** @internal */\n private _clamp(value: number): number {\n return Math.min(this.max, Math.max(this.min, value));\n }\n\n /** @internal */\n private _snapToPoint(value: number): number {\n if (!this.snap.length) return value;\n const threshold = 5;\n for (const point of this.snap) {\n if (Math.abs(value - point) <= threshold) return point;\n }\n return value;\n }\n\n /** @internal */\n private _setPosition(percent: number): void {\n const clamped = this._clamp(this._snapToPoint(percent));\n if (clamped === this._resolvedPosition) return;\n this._resolvedPosition = clamped;\n this.position = clamped;\n this.dispatchEvent(\n new CustomEvent<{ position: number }>('hx-reposition', {\n detail: { position: this._resolvedPosition },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private _getHostSize(): number {\n if (this.orientation === 'horizontal') {\n return this.offsetWidth;\n }\n return this.offsetHeight;\n }\n\n /**\n * Initiates a drag gesture when the divider receives a pointerdown event.\n * @internal\n */\n private _onPointerDown = (e: PointerEvent): void => {\n if (this.disabled) return;\n const divider = e.currentTarget as HTMLElement;\n divider.setPointerCapture(e.pointerId);\n this._dragging = true;\n this._dragStart = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n this._positionAtDragStart = this._resolvedPosition;\n // Cache container dimensions once at drag start to avoid forced layout on every pointermove\n this._cachedContainerWidth = this.offsetWidth;\n this._cachedContainerHeight = this.offsetHeight;\n e.preventDefault();\n };\n\n /**\n * Updates the divider position during an active drag gesture.\n * @internal\n */\n private _onPointerMove = (e: PointerEvent): void => {\n if (!this._dragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const delta = current - this._dragStart;\n const hostSize =\n this.orientation === 'horizontal' ? this._cachedContainerWidth : this._cachedContainerHeight;\n if (hostSize === 0) return;\n const deltaPercent = (delta / hostSize) * 100;\n this._setPosition(this._positionAtDragStart + deltaPercent);\n };\n\n /**\n * Ends the drag gesture when the pointer is released.\n * @internal\n */\n private _onPointerUp = (): void => {\n this._dragging = false;\n this._cachedContainerWidth = 0;\n this._cachedContainerHeight = 0;\n };\n\n /**\n * Handles keyboard navigation on the divider — arrow keys adjust position, Home/End jump to min/max.\n * @internal\n */\n private _onKeyDown = (e: KeyboardEvent): void => {\n if (this.disabled) return;\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n e.preventDefault();\n this._setPosition(this._resolvedPosition - 1);\n break;\n case 'ArrowRight':\n case 'ArrowDown':\n e.preventDefault();\n this._setPosition(this._resolvedPosition + 1);\n break;\n case 'PageUp':\n e.preventDefault();\n this._setPosition(this._resolvedPosition + 10);\n break;\n case 'PageDown':\n e.preventDefault();\n this._setPosition(this._resolvedPosition - 10);\n break;\n case 'Home':\n e.preventDefault();\n this._setPosition(this.min);\n break;\n case 'End':\n e.preventDefault();\n this._setPosition(this.max);\n break;\n }\n };\n\n /**\n * Collapses the start panel by setting `collapsed` to `'start'`.\n * @internal\n */\n private _collapseStart = (): void => {\n this.collapsed = 'start';\n };\n\n /**\n * Collapses the end panel by setting `collapsed` to `'end'`.\n * @internal\n */\n private _collapseEnd = (): void => {\n this.collapsed = 'end';\n };\n\n /**\n * Expands a collapsed panel by resetting `collapsed` to null.\n * @internal\n */\n private _expand = (): void => {\n this.collapsed = null;\n };\n\n protected override willUpdate(changedProperties: PropertyValues<this>): void {\n super.willUpdate(changedProperties);\n\n let handled = false;\n\n if (changedProperties.has('collapsed')) {\n const prev = changedProperties.get('collapsed');\n\n if (this.collapsed === 'start') {\n if (prev === null || prev === undefined)\n this._positionBeforeCollapse = this._resolvedPosition;\n this._resolvedPosition = this._clamp(this._snapToPoint(this.min));\n handled = true;\n } else if (this.collapsed === 'end') {\n if (prev === null || prev === undefined)\n this._positionBeforeCollapse = this._resolvedPosition;\n this._resolvedPosition = this._clamp(this._snapToPoint(this.max));\n handled = true;\n } else if (this.collapsed === null && prev !== null && prev !== undefined) {\n this._resolvedPosition = this._clamp(this._snapToPoint(this._positionBeforeCollapse));\n handled = true;\n }\n }\n\n if (\n !handled &&\n (changedProperties.has('position') ||\n changedProperties.has('min') ||\n changedProperties.has('max') ||\n changedProperties.has('snap'))\n ) {\n this._resolvedPosition = this._clamp(this._snapToPoint(this.position));\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (this.position !== this._resolvedPosition) {\n this.position = this._resolvedPosition;\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.positionInPixels !== undefined) {\n // Convert pixel position to percentage after first paint\n if (typeof requestAnimationFrame !== 'undefined') {\n requestAnimationFrame(() => {\n if (this.positionInPixels !== undefined) {\n const hostSize = this._getHostSize();\n if (hostSize > 0) {\n this._setPosition((this.positionInPixels / hostSize) * 100);\n }\n }\n });\n }\n }\n }\n\n /** @internal */\n private _startPanelStyleMap(): Record<string, string> {\n if (this.orientation === 'horizontal') {\n return { width: `${this._resolvedPosition}%` };\n }\n return { height: `${this._resolvedPosition}%` };\n }\n\n override render() {\n return html`\n <div part=\"start\" class=\"panel panel--start\" style=${styleMap(this._startPanelStyleMap())}>\n <slot name=\"start\"></slot>\n </div>\n <div class=\"divider-track\">\n <div\n part=\"divider\"\n class=\"divider\"\n role=\"separator\"\n aria-label=${this.resizeLabel}\n aria-orientation=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n aria-valuenow=${this._resolvedPosition}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @pointerdown=${this._onPointerDown}\n @pointermove=${this._onPointerMove}\n @pointerup=${this._onPointerUp}\n @keydown=${this._onKeyDown}\n ></div>\n ${this.collapsible\n ? this.collapsed\n ? html`<div class=\"collapse-controls\">\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${`Expand ${this.collapsed} panel`}\n @click=${this._expand}\n >\n ${this.collapsed === 'start' ? '▶' : '◀'}\n </button>\n </div>`\n : html`<div class=\"collapse-controls\">\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${this.collapseStartLabel}\n @click=${this._collapseStart}\n >\n ◀\n </button>\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${this.collapseEndLabel}\n @click=${this._collapseEnd}\n >\n ▶\n </button>\n </div>`\n : nothing}\n </div>\n <div part=\"end\" class=\"panel panel--end\">\n <slot name=\"end\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-split-panel': HelixSplitPanel;\n }\n}\n"],"names":["helixSplitPanelStyles","css","HelixSplitPanel","HelixElement","e","delta","hostSize","deltaPercent","value","threshold","point","percent","clamped","changedProperties","handled","prev","html","styleMap","nothing","__decorateClass","property","parsed","s","n","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-stack-B76_1O6g.js → hx-stack-DGfcOfWJ.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { css as c, LitElement as h, html as f } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as s, customElement as u } from "lit/decorators.js";
+import { css as c, html as h } from "lit";
+import { property as s, customElement as f } from "lit/decorators.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
 const y = c`
   :host {
     display: block;
@@ -105,13 +105,23 @@ const y = c`
   :host([gap='xl']) [part='base'] {
     gap: var(--hx-space-8, 2rem);
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  /* hx-stack is a layout wrapper with no state communicated via color.
+     forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 `;
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (l, r, p, i) => {
-  for (var e = i > 1 ? void 0 : i ? g(r, p) : r, n = l.length - 1, o; n >= 0; n--)
-    (o = l[n]) && (e = (i ? o(r, p, e) : o(e)) || e);
-  return i && e && b(r, p, e), e;
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (l, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? b(r, i) : r, p = l.length - 1, n; p >= 0; p--)
+    (n = l[p]) && (e = (o ? n(r, i, e) : n(e)) || e);
+  return o && e && g(r, i, e), e;
 };
-let t = class extends h {
+let t = class extends u {
   constructor() {
     super(...arguments), this.direction = "vertical", this.gap = "md", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
   }
@@ -139,7 +149,7 @@ let t = class extends h {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "presentation");
   }
   render() {
-    return f`
+    return h`
       <div part="base">
         <slot></slot>
       </div>
@@ -166,9 +176,9 @@ a([
   s({ type: Boolean, reflect: !0 })
 ], t.prototype, "inline", 2);
 t = a([
-  u("hx-stack")
+  f("hx-stack")
 ], t);
 export {
   t as H
 };
-//# sourceMappingURL=hx-stack-B76_1O6g.js.map
+//# sourceMappingURL=hx-stack-DGfcOfWJ.js.map

package/dist/shared/hx-stack-DGfcOfWJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-stack-DGfcOfWJ.js","sources":["../../src/components/hx-stack/hx-stack.styles.ts","../../src/components/hx-stack/hx-stack.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStackStyles = css`\n :host {\n display: block;\n }\n\n :host([inline]) {\n display: inline-block;\n }\n\n [part='base'] {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-4, 1rem);\n }\n\n /* ─── Direction ─── */\n\n :host([direction='horizontal']) [part='base'] {\n flex-direction: row;\n }\n\n :host([direction='vertical']) [part='base'] {\n flex-direction: column;\n }\n\n /* ─── Wrap ─── */\n\n :host([wrap]) [part='base'] {\n flex-wrap: wrap;\n }\n\n /* ─── Alignment ─── */\n\n :host([align='start']) [part='base'] {\n align-items: flex-start;\n }\n\n :host([align='center']) [part='base'] {\n align-items: center;\n }\n\n :host([align='end']) [part='base'] {\n align-items: flex-end;\n }\n\n :host([align='stretch']) [part='base'] {\n align-items: stretch;\n }\n\n :host([align='baseline']) [part='base'] {\n align-items: baseline;\n }\n\n /* ─── Justify ─── */\n\n :host([justify='start']) [part='base'] {\n justify-content: flex-start;\n }\n\n :host([justify='center']) [part='base'] {\n justify-content: center;\n }\n\n :host([justify='end']) [part='base'] {\n justify-content: flex-end;\n }\n\n :host([justify='between']) [part='base'] {\n justify-content: space-between;\n }\n\n :host([justify='around']) [part='base'] {\n justify-content: space-around;\n }\n\n :host([justify='evenly']) [part='base'] {\n justify-content: space-evenly;\n }\n\n /* ─── Gap ─── */\n\n :host([gap='none']) [part='base'] {\n gap: 0;\n }\n\n :host([gap='xs']) [part='base'] {\n gap: var(--hx-space-1, 0.25rem);\n }\n\n :host([gap='sm']) [part='base'] {\n gap: var(--hx-space-2, 0.5rem);\n }\n\n :host([gap='md']) [part='base'] {\n gap: var(--hx-space-4, 1rem);\n }\n\n :host([gap='lg']) [part='base'] {\n gap: var(--hx-space-6, 1.5rem);\n }\n\n :host([gap='xl']) [part='base'] {\n gap: var(--hx-space-8, 2rem);\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n /* hx-stack is a layout wrapper with no state communicated via color.\n forced-color-adjust: auto (default) is sufficient. */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStackStyles } from './hx-stack.styles.js';\n\n/**\n * A flexbox layout wrapper for consistent vertical/horizontal spacing between children.\n *\n * @summary Flexbox stack layout utility for arranging children with consistent spacing.\n *\n * @tag hx-stack\n *\n * @slot - Default slot for any child content.\n *\n * @csspart base - The inner flex container.\n */\n@customElement('hx-stack')\nexport class HelixStack extends HelixElement {\n static override styles = [helixStackStyles];\n\n /**\n * Direction of the stack layout.\n * @attr direction\n */\n @property({ type: String, reflect: true })\n direction: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Gap between children using design tokens.\n * @attr gap\n */\n @property({ type: String, reflect: true })\n gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Align-items value for cross-axis alignment.\n * @attr align\n */\n @property({ type: String, reflect: true })\n align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n /**\n * Justify-content value for main-axis distribution.\n * @attr justify\n */\n @property({ type: String, reflect: true })\n justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n /**\n * When true, children wrap onto multiple lines.\n * @attr wrap\n */\n @property({ type: Boolean, reflect: true })\n wrap = false;\n\n /**\n * When true, the component renders as `display: inline-flex`.\n * @attr inline\n */\n @property({ type: Boolean, reflect: true })\n inline = false;\n\n /**\n * Sets `role=\"presentation\"` on connect so assistive technologies treat this\n * element as a purely visual layout wrapper with no semantic meaning. This\n * suppresses any implicit ARIA role that a custom element might otherwise\n * inherit, preventing screen readers from announcing \"group\" or \"region\"\n * for what is purely a spacing/alignment container.\n *\n * **Consumer override:** If you need a semantic grouping role (e.g. for a\n * form fieldset equivalent), set `role=\"group\"` or any other ARIA role\n * directly on the element — the guard `!this.hasAttribute('role')` ensures\n * the component will not overwrite it.\n *\n * @example\n * \n * <hx-stack gap=\"md\">...</hx-stack>\n *\n * @example\n * \n * <hx-stack role=\"group\" aria-labelledby=\"form-heading\" gap=\"md\">...</hx-stack>\n */\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'presentation');\n }\n }\n\n override render() {\n return html`\n <div part=\"base\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-stack': HelixStack;\n }\n}\n"],"names":["helixStackStyles","css","HelixStack","HelixElement","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAmBC;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;;;;;;ACgBzB,IAAMC,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAAuC,YAOvC,KAAA,MAAiD,MAOjD,KAAA,QAA6D,WAO7D,KAAA,UAAwE,SAOxE,KAAA,OAAO,IAOP,KAAA,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,oBAA0B;AACjC,UAAM,kBAAA,GACD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,cAAc;AAAA,EAE5C;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA/EaF,EACK,SAAS,CAACF,CAAgB;AAO1CK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BJ,EAQX,WAAA,aAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BJ,EAeX,WAAA,OAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BJ,EAsBX,WAAA,SAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5B9BJ,EA6BX,WAAA,WAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnC/BJ,EAoCX,WAAA,QAAA,CAAA;AAOAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BJ,EA2CX,WAAA,UAAA,CAAA;AA3CWA,IAANG,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZL,CAAA;"}

package/dist/shared/{hx-stat-DKlyBL_K.js → hx-stat-BTpykQAt.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { css as v, LitElement as p, html as h, nothing as c } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as i, state as u, customElement as x } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
+import { css as v, html as h, nothing as c } from "lit";
+import { property as i, state as p, customElement as u } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { H as f } from "./helix-element-BNEYeiys.js";
 const _ = v`
   :host {
     display: block;
@@ -12,7 +12,7 @@ const _ = v`
     flex-direction: column;
     gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
     font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
-    color: var(--hx-stat-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));
   }
   /* ─── Size Variants ─── */
@@ -56,13 +56,13 @@ const _ = v`
   }
   .stat__value {
-    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));
   }
   /* ─── Label ─── */
   .stat__label {
-    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));
     font-weight: var(--hx-font-weight-normal, 400);
   }
@@ -88,12 +88,12 @@ const _ = v`
   }
   .stat__trend--up {
-    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #15803d));
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));
     background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
   }
   .stat__trend--down {
-    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #b91c1c));
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));
     background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
   }
@@ -161,7 +161,7 @@ var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (t, e, o
     (d = t[n]) && (r = (a ? d(e, o, r) : d(r)) || r);
   return a && r && g(e, o, r), r;
 };
-let s = class extends p {
+let s = class extends f {
   constructor() {
     super(...arguments), this.label = "", this.value = "", this.trend = "neutral", this.size = "md", this.labelTrend = "Trend", this._hasWarnedUnnamed = !1, this._hasIcon = !1;
   }
@@ -229,7 +229,7 @@ let s = class extends p {
     return h`
       <div
         part="container"
-        class=${f(t)}
+        class=${x(t)}
         role="group"
         aria-label=${o}
       >
@@ -272,12 +272,12 @@ l([
   i({ attribute: "label-trend" })
 ], s.prototype, "labelTrend", 2);
 l([
-  u()
+  p()
 ], s.prototype, "_hasIcon", 2);
 s = l([
-  x("hx-stat")
+  u("hx-stat")
 ], s);
 export {
   s as H
 };
-//# sourceMappingURL=hx-stat-DKlyBL_K.js.map
+//# sourceMappingURL=hx-stat-BTpykQAt.js.map