npm - @helixui/library - Versions diffs - 3.1.0-next.71 → 3.1.0-next.72 - Mend

@helixui/library 3.1.0-next.71 → 3.1.0-next.72

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 (522) hide show

package/dist/shared/{hx-dialog-BW-jetzN.js → hx-dialog-eIS8tcDm.js} RENAMED Viewed

@@ -1,9 +1,10 @@
 import { css as x, nothing as d, html as c } from "lit";
-import { query as y, state as m, property as h, customElement as k } from "lit/decorators.js";
-import { l as E, u as v } from "./body-scroll-lock-VBa5TFP-.js";
-import { H as w } from "./helix-element-BNEYeiys.js";
+import { query as y, state as _, property as h, customElement as k } from "lit/decorators.js";
+import { l as E, u as m } from "./body-scroll-lock-VBa5TFP-.js";
+import { a as w } from "./forced-colors-CTEDFRGa.js";
+import { H as C } from "./helix-element-BNEYeiys.js";
 import { c as F } from "./id-counter-DuX8vsui.js";
-const C = x`
+const T = x`
   :host {
     display: contents;
   }
@@ -29,10 +30,10 @@ const C = x`
     display: flex;
     flex-direction: column;
     position: relative;
-    background-color: var(--hx-dialog-bg, var(--hx-color-surface-default));
-    color: var(--hx-dialog-color, var(--hx-color-text-primary));
-    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
-    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
+    background-color: var(--hx-dialog-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-dialog-color, var(--hx-color-text-primary, #0d1825));
+    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
     width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
     max-width: calc(100vw - var(--hx-space-8, 2rem));
     max-height: calc(100vh - var(--hx-space-8, 2rem));
@@ -65,7 +66,10 @@ const C = x`
   /* ─── Native backdrop (modal mode) ─── */
   dialog::backdrop {
-    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
+    background-color: var(
+      --hx-dialog-backdrop-color,
+      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
+    );
     opacity: 0;
     transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
   }
@@ -85,7 +89,10 @@ const C = x`
   .dialog-backdrop {
     position: fixed;
     inset: 0;
-    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-surface-overlay));
+    background-color: var(
+      --hx-dialog-backdrop-color,
+      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))
+    );
     opacity: var(--hx-dialog-backdrop-opacity, 0.5);
     /* D5 — backdrop z-index must be lower than the dialog element's z-index */
     z-index: var(--hx-z-index-modal, 1400);
@@ -97,20 +104,20 @@ const C = x`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
-    border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-dialog-header-border-color, var(--hx-color-border-default));
-    gap: var(--hx-space-4);
+    padding: var(--hx-dialog-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-dialog-header-border-color, var(--hx-color-border-default, #d6dbd5));
+    gap: var(--hx-space-4, 1rem);
     flex-shrink: 0;
   }
   .dialog__heading {
     margin: 0;
-    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans));
-    font-size: var(--hx-font-size-lg);
-    font-weight: var(--hx-font-weight-semibold);
-    line-height: var(--hx-line-height-tight);
-    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary));
+    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary, #0d1825));
     flex: 1 1 auto;
   }
@@ -132,7 +139,7 @@ const C = x`
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-text-muted, #64748b);
+    color: var(--hx-dialog-close-btn-color, var(--hx-color-text-muted, #4a5362));
     font-size: var(--hx-font-size-xl, 1.25rem);
     line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
     transition:
@@ -145,15 +152,15 @@ const C = x`
   }
   .dialog__close-btn:hover {
-    color: var(--hx-color-text-primary);
-    background-color: var(--hx-color-surface-sunken);
+    color: var(--hx-dialog-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
+    background-color: var(--hx-dialog-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
   }
   .dialog__close-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-dialog-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -162,7 +169,7 @@ const C = x`
   .dialog__body {
     flex: 1 1 auto;
-    padding: var(--hx-dialog-body-padding, var(--hx-space-6));
+    padding: var(--hx-dialog-body-padding, var(--hx-space-6, 1.5rem));
     overflow-y: auto;
     overscroll-behavior: contain;
   }
@@ -173,10 +180,10 @@ const C = x`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--hx-space-3);
-    padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
-    border-top: var(--hx-border-width-thin) solid
-      var(--hx-dialog-footer-border-color, var(--hx-color-border-default));
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-dialog-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-dialog-footer-border-color, var(--hx-color-border-default, #d6dbd5));
     flex-shrink: 0;
   }
@@ -195,6 +202,7 @@ const C = x`
   }
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
   @media (forced-colors: active) {
     .dialog {
@@ -215,12 +223,12 @@ const C = x`
     }
   }
 `;
-var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
+var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
   for (var a = s > 1 ? void 0 : s ? D(t, o) : t, i = e.length - 1, l; i >= 0; i--)
     (l = e[i]) && (a = (s ? l(t, o, a) : l(a)) || a);
-  return s && a && T(t, o, a), a;
+  return s && a && S(t, o, a), a;
 };
-const S = F("hx-dialog"), f = [
+const $ = F("hx-dialog"), v = [
   "a[href]",
   "area[href]",
   "button:not([disabled])",
@@ -230,9 +238,9 @@ const S = F("hx-dialog"), f = [
   '[tabindex]:not([tabindex="-1"])',
   "details > summary"
 ].join(",");
-let r = class extends w {
+let r = class extends C {
   constructor() {
-    super(...arguments), this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._cachedFocusableElements = [], this._isTransitioning = !1, this._transitionFallbackTimer = null, this._triggerElement = null, this._pendingReturnValue = void 0, this._dialogId = S(), this._headingId = `${this._dialogId}-heading`, this._descriptionId = `${this._dialogId}-description`, this.open = !1, this.modal = !1, this.closeOnBackdrop = !0, this.heading = "", this.variant = "dialog", this.description = "", this.labelClose = "Close dialog", this._handleKeyDown = (e) => {
+    super(...arguments), this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._cachedFocusableElements = [], this._isTransitioning = !1, this._transitionFallbackTimer = null, this._triggerElement = null, this._pendingReturnValue = void 0, this._dialogId = $(), this._headingId = `${this._dialogId}-heading`, this._descriptionId = `${this._dialogId}-description`, this.open = !1, this.modal = !1, this.closeOnBackdrop = !0, this.heading = "", this.variant = "dialog", this.description = "", this.labelClose = "Close dialog", this._handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.preventDefault(), this._cancel();
         return;
@@ -268,7 +276,7 @@ let r = class extends w {
     !this.heading.trim() && this._hasHeaderSlot;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._clearTransitionFallback(), this._isTransitioning = !1, this._removeGlobalListeners(), this.modal && this.open && v();
+    super.disconnectedCallback(), this._clearTransitionFallback(), this._isTransitioning = !1, this._removeGlobalListeners(), this.modal && this.open && m();
   }
   updated(e) {
     super.updated(e), e.has("open") && (this.open ? this._openDialog() : this._closeDialog());
@@ -321,7 +329,7 @@ let r = class extends w {
         this._clearTransitionFallback(), this._isTransitioning = !1;
         return;
       }
-      this._clearTransitionFallback(), this._isTransitioning = !1, this._pendingReturnValue !== void 0 ? (e.close(this._pendingReturnValue), this._pendingReturnValue = void 0) : e.close(), this.modal && v(), this._removeGlobalListeners(), this._cachedFocusableElements = [], (t = this._triggerElement) == null || t.focus(), this._triggerElement = null, this.dispatchEvent(
+      this._clearTransitionFallback(), this._isTransitioning = !1, this._pendingReturnValue !== void 0 ? (e.close(this._pendingReturnValue), this._pendingReturnValue = void 0) : e.close(), this.modal && m(), this._removeGlobalListeners(), this._cachedFocusableElements = [], (t = this._triggerElement) == null || t.focus(), this._triggerElement = null, this.dispatchEvent(
         new CustomEvent("hx-close", {
           bubbles: !0,
           composed: !0
@@ -347,7 +355,7 @@ let r = class extends w {
     const e = ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll("slot")) ?? [], t = [];
     e.forEach((i) => {
       i.assignedElements({ flatten: !0 }).forEach((l) => {
-        l instanceof HTMLElement && (l.matches(f) && t.push(l), l.querySelectorAll(f).forEach((g) => {
+        l instanceof HTMLElement && (l.matches(v) && t.push(l), l.querySelectorAll(v).forEach((g) => {
           t.push(g);
         }));
       });
@@ -363,7 +371,7 @@ let r = class extends w {
   }
   /** @internal */
   _trapFocus(e) {
-    var b, _;
+    var b, f;
     const t = this._cachedFocusableElements.length > 0 ? this._cachedFocusableElements : this._getFocusableElements();
     if (t.length === 0) {
       e.preventDefault();
@@ -371,7 +379,7 @@ let r = class extends w {
     }
     const [o, ...s] = t, a = s.length > 0 ? s[s.length - 1] : o;
     if (!o || !a) return;
-    const i = document.activeElement, l = (b = this.shadowRoot) == null ? void 0 : b.activeElement, g = l ?? i, p = g instanceof HTMLElement ? g : null, u = (_ = this.shadowRoot) == null ? void 0 : _.querySelector(".dialog__close-btn");
+    const i = document.activeElement, l = (b = this.shadowRoot) == null ? void 0 : b.activeElement, g = l ?? i, p = g instanceof HTMLElement ? g : null, u = (f = this.shadowRoot) == null ? void 0 : f.querySelector(".dialog__close-btn");
     e.shiftKey ? (p === o || u !== null && l === u && o === u) && (e.preventDefault(), a.focus()) : p === a && (e.preventDefault(), o.focus());
   }
   // ─── Cancel logic ───
@@ -462,15 +470,15 @@ let r = class extends w {
     `;
   }
 };
-r.styles = [C];
+r.styles = [T, w];
 n([
   y("dialog")
 ], r.prototype, "_dialogEl", 2);
 n([
-  m()
+  _()
 ], r.prototype, "_hasHeaderSlot", 2);
 n([
-  m()
+  _()
 ], r.prototype, "_hasFooterSlot", 2);
 n([
   h({ type: Boolean, reflect: !0 })
@@ -506,4 +514,4 @@ r = n([
 export {
   r as H
 };
-//# sourceMappingURL=hx-dialog-BW-jetzN.js.map
+//# sourceMappingURL=hx-dialog-eIS8tcDm.js.map

package/dist/shared/hx-dialog-eIS8tcDm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-dialog-eIS8tcDm.js","sources":["../../src/components/hx-dialog/hx-dialog.styles.ts","../../src/components/hx-dialog/hx-dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-dialog styles.\n *\n * Component-tier tokens with two-level var() fallback:\n * var(--hx-dialog-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * neutral-0 = #FFFFFF, neutral-100 = #EBEEE9, neutral-200 = #D6DBD5,\n * neutral-500 = #66787B, neutral-800 = #202B39, neutral-900 = #0D1825,\n * primary-500 = #429797.\n */\nexport const helixDialogStyles = css`\n :host {\n display: contents;\n }\n\n /* ─── Native dialog reset ─── */\n\n dialog {\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n max-width: 100%;\n max-height: 100%;\n overflow: visible;\n /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */\n position: relative;\n z-index: calc(var(--hx-z-index-modal, 1400) + 1);\n }\n\n /* ─── Dialog container ─── */\n\n .dialog {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--hx-dialog-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-dialog-color, var(--hx-color-text-primary, #0d1825));\n border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg, 0.5rem));\n box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));\n width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));\n max-width: calc(100vw - var(--hx-space-8, 2rem));\n max-height: calc(100vh - var(--hx-space-8, 2rem));\n overflow: hidden;\n outline: none;\n\n /* Open/close animation */\n opacity: 0;\n transform: translateY(var(--hx-space-4, 1rem)) scale(0.97);\n transition:\n opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out),\n transform var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);\n }\n\n dialog[open] .dialog {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .dialog {\n transition: none;\n }\n\n .dialog__close-btn {\n transition: none;\n }\n }\n\n /* ─── Native backdrop (modal mode) ─── */\n\n dialog::backdrop {\n background-color: var(\n --hx-dialog-backdrop-color,\n var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))\n );\n opacity: 0;\n transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);\n }\n\n dialog[open]::backdrop {\n opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog::backdrop {\n transition: none;\n }\n }\n\n /* ─── Non-modal backdrop overlay ─── */\n\n .dialog-backdrop {\n position: fixed;\n inset: 0;\n background-color: var(\n --hx-dialog-backdrop-color,\n var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))\n );\n opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n /* D5 — backdrop z-index must be lower than the dialog element's z-index */\n z-index: var(--hx-z-index-modal, 1400);\n }\n\n /* ─── Header ─── */\n\n .dialog__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--hx-dialog-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-dialog-header-border-color, var(--hx-color-border-default, #d6dbd5));\n gap: var(--hx-space-4, 1rem);\n flex-shrink: 0;\n }\n\n .dialog__heading {\n margin: 0;\n font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-lg, 1.125rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: var(--hx-line-height-tight, 1.25);\n color: var(--hx-dialog-heading-color, var(--hx-color-text-primary, #0d1825));\n flex: 1 1 auto;\n }\n\n /* ─── Built-in close button (D17) ─── */\n\n .dialog__close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n width: var(--hx-touch-target-min, 2.75rem);\n height: var(--hx-touch-target-min, 2.75rem);\n padding: 0;\n margin-inline-start: auto;\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n color: var(--hx-dialog-close-btn-color, var(--hx-color-text-muted, #4a5362));\n font-size: var(--hx-font-size-xl, 1.25rem);\n line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */\n transition:\n color var(--hx-duration-fast, 100ms) ease,\n background-color var(--hx-duration-fast, 100ms) ease;\n }\n\n .dialog__close-btn::before {\n content: '×';\n }\n\n .dialog__close-btn:hover {\n color: var(--hx-dialog-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));\n background-color: var(--hx-dialog-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n }\n\n .dialog__close-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-dialog-close-btn-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Body ─── */\n\n .dialog__body {\n flex: 1 1 auto;\n padding: var(--hx-dialog-body-padding, var(--hx-space-6, 1.5rem));\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n /* ─── Footer ─── */\n\n .dialog__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-dialog-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-dialog-footer-border-color, var(--hx-color-border-default, #d6dbd5));\n flex-shrink: 0;\n }\n\n /* ─── Visually-hidden description (D8) ─── */\n\n .dialog__description {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n @media (forced-colors: active) {\n .dialog {\n border: 1px solid CanvasText;\n }\n\n .dialog__header {\n border-bottom-color: CanvasText;\n }\n\n .dialog__footer {\n border-top-color: CanvasText;\n }\n\n .dialog__close-btn {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { lockBodyScroll, unlockBodyScroll } from '../../utils/body-scroll-lock.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixDialogStyles } from './hx-dialog.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextDialogId = createIdCounter('hx-dialog');\n\n// Module-level constant avoids rebuilding the selector string on every _getFocusableElements call.\n// Pattern matches hx-drawer's FOCUSABLE_SELECTORS constant at module scope.\nconst FOCUSABLE_SELECTORS = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n 'details > summary',\n].join(',');\n\n/**\n * A modal and non-modal dialog component built on the native HTML `<dialog>` element.\n * Provides focus trapping, backdrop interaction, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Accessible dialog overlay for confirmations, forms, and detailed content.\n *\n * @tag hx-dialog\n *\n * @slot - Default slot for the dialog body content.\n * @slot header - Slot for custom header content. When provided, replaces the built-in heading.\n * @slot footer - Slot for action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-open - Fired when the dialog opens.\n * @fires {CustomEvent<void>} hx-close - Fired when the dialog closes for any reason.\n * @fires {CustomEvent<void>} hx-cancel - Fired when the dialog is dismissed via Escape key or cancel action.\n *\n * **Event naming rationale:** hx-dialog intentionally uses `hx-open`/`hx-close`/`hx-cancel`\n * instead of the `hx-show`/`hx-hide`/`hx-after-show`/`hx-after-hide` pattern used by overlay\n * components (hx-drawer, hx-popover, hx-tooltip). This aligns with the native `<dialog>`\n * element's `close` and `cancel` events and communicates that the dialog is a stateful container\n * (open/closed) rather than a transient visibility toggle (show/hide).\n *\n * @csspart dialog - The inner container div that holds the dialog content.\n * @csspart backdrop - The non-modal backdrop overlay element.\n * @csspart header - The header region containing the heading and header slot.\n * @csspart close-button - The built-in close button in the dialog header.\n * @csspart body - The scrollable body region containing the default slot.\n * @csspart footer - The footer region containing the footer slot.\n *\n * @cssprop [--hx-dialog-bg=var(--hx-color-neutral-0)] - Dialog background color.\n * @cssprop [--hx-dialog-color=var(--hx-color-neutral-900)] - Dialog text color.\n * @cssprop [--hx-dialog-border-radius=var(--hx-border-radius-lg)] - Dialog corner radius.\n * @cssprop [--hx-dialog-shadow=var(--hx-shadow-xl)] - Dialog box shadow.\n * @cssprop [--hx-dialog-width=32rem] - Dialog width.\n * @cssprop [--hx-dialog-backdrop-color=var(--hx-color-neutral-900)] - Backdrop overlay color.\n * @cssprop [--hx-dialog-backdrop-opacity=0.5] - Backdrop overlay opacity (set to 0 to hide; note\n * that opacity:0 makes the backdrop invisible but still present in the layout — use pointer-events\n * carefully if you need a fully non-blocking backdrop).\n * @cssprop [--hx-dialog-header-padding] - Padding inside the dialog header.\n * @cssprop [--hx-dialog-header-border-color=var(--hx-color-neutral-200)] - Header bottom border color.\n * @cssprop [--hx-dialog-heading-color=var(--hx-color-neutral-900)] - Heading text color.\n * @cssprop [--hx-dialog-body-padding] - Padding inside the dialog body.\n * @cssprop [--hx-dialog-footer-padding] - Padding inside the dialog footer.\n * @cssprop [--hx-dialog-footer-border-color=var(--hx-color-neutral-200)] - Footer top border color.\n *\n * @remarks\n * **Browser support for `::backdrop`:** The `dialog::backdrop` pseudo-element inside Shadow DOM\n * is well-supported in Chrome/Chromium and Firefox 122+. For Firefox < 122, modal backdrop\n * animation will silently fall back to no animation. A non-modal backdrop fallback is rendered\n * for non-modal dialogs.\n *\n * **Drupal integration:** This component is Twig-renderable via attributes (`heading`, `open`,\n * `modal`, `close-on-backdrop`). For trigger-button wiring in Drupal behaviors:\n * ```js\n * Drupal.behaviors.hxDialog = {\n * attach(context) {\n * context.querySelectorAll('[data-hx-dialog-trigger]').forEach((btn) => {\n * btn.addEventListener('click', () => {\n * const id = btn.getAttribute('data-hx-dialog-trigger');\n * document.getElementById(id)?.showModal();\n * });\n * });\n * },\n * };\n * ```\n * Focus restoration to the trigger element is handled automatically by the component.\n * @cssprop [--hx-z-index-modal] - Z-index layer.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-shadow-xl] - Box shadow.\n * @cssprop [--hx-container-narrow] - CSS custom property.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-duration-normal] - Animation duration.\n * @cssprop [--hx-easing-out] - CSS custom property.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-dialog-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-duration-fast] - Animation duration.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-dialog-close-btn-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-space-3] - Spacing token.\n */\n@customElement('hx-dialog')\nexport class HelixDialog extends HelixElement {\n static override styles = [helixDialogStyles, forcedColorsSurface];\n\n // D10 — observe aria-label attribute without shadowing ARIAMixin.ariaLabel\n static override get observedAttributes(): string[] {\n return [...super.observedAttributes, 'aria-label'];\n }\n\n // ─── Queries ───\n\n /** @internal */\n @query('dialog')\n private _dialogEl: HTMLDialogElement | null | undefined;\n\n // ─── Internal state ───\n\n /** Tracks whether a header slot has been assigned content. * @internal\n */\n @state()\n private _hasHeaderSlot = false;\n\n /** Tracks whether a footer slot has been assigned content. * @internal\n */\n @state()\n private _hasFooterSlot = false;\n\n /** Cached focusable elements — populated on open, cleared on close. */\n /** @internal */\n private _cachedFocusableElements: HTMLElement[] = [];\n\n /**\n * Guards against re-entrant open/close calls within a single async open cycle.\n *\n * STATE MANAGEMENT CONTRACT\n * ─────────────────────────\n * `this.open` (the Lit property) is the single source of truth for dialog open state.\n * All native `<dialog>` state changes (`showModal()`, `show()`, `close()`) flow exclusively\n * from `updated()` → `_openDialog()` / `_closeDialog()`. External callers MUST only set\n * `this.open`; they must never call native dialog methods directly.\n *\n * `_isTransitioning` is set to `true` at the start of `_openDialog()` to prevent a second\n * open call from running concurrently while the first is awaiting `updateComplete`. It is\n * cleared synchronously after the async tail completes. A 200 ms fallback timeout ensures\n * the flag is always released even if `updateComplete` never resolves (e.g. detached DOM).\n *\n * `_closeDialog()` does NOT use `_isTransitioning` as a guard — it always runs immediately\n * to honour a `this.open = false` that arrives during the open async tail. The open async\n * tail checks `this.open` before touching focus so it can abort cleanly.\n */\n /** @internal */\n private _isTransitioning = false;\n\n /** Fallback timer that releases `_isTransitioning` if the open async tail never fires. */\n /** @internal */\n private _transitionFallbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n /** The element that had focus when the dialog opened — restored on close (D1). */\n /** @internal */\n private _triggerElement: HTMLElement | null = null;\n\n /** Pending returnValue to pass to native dialog.close() (D11). */\n /** @internal */\n private _pendingReturnValue: string | undefined = undefined;\n\n // ─── Unique IDs for aria-labelledby / aria-describedby ───\n\n /** @internal */\n private readonly _dialogId = _nextDialogId();\n /** @internal */\n private readonly _headingId = `${this._dialogId}-heading`;\n /** @internal */\n private readonly _descriptionId = `${this._dialogId}-description`;\n\n // ─── Public Properties ───\n\n /**\n * Controls whether the dialog is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * When true, dialog renders as a modal with backdrop and focus trap using the native\n * `showModal()` API. When false (default), dialog renders as a non-modal overlay using\n * the native `show()` API. Defaults to false, consistent with HTML boolean attribute\n * semantics (absent = false, present = true).\n * @attr modal\n */\n @property({ type: Boolean, reflect: true })\n modal = false;\n\n /**\n * When true, clicking the backdrop closes the dialog.\n * @attr close-on-backdrop\n */\n @property({\n attribute: 'close-on-backdrop',\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => value !== 'false',\n toAttribute: (value: boolean) => String(value),\n },\n })\n closeOnBackdrop = true;\n\n /**\n * Text content for the dialog heading. Used as the accessible label via aria-labelledby.\n * @attr heading\n */\n @property({ type: String, reflect: true })\n heading = '';\n\n /**\n * ARIA role variant. Use `'alertdialog'` for urgent dialogs requiring immediate attention\n * (e.g., drug interaction warnings, critical lab alerts). Defaults to `'dialog'`.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'dialog' | 'alertdialog' = 'dialog';\n\n /**\n * Optional description text linked to the dialog via `aria-describedby`.\n * When provided, screen readers will announce this text when the dialog receives focus.\n * Recommended for dialogs that surface critical clinical information.\n * @attr description\n */\n @property({ type: String })\n description = '';\n\n /** Accessible label for the close button. Override for localized text. */\n @property({ type: String, attribute: 'label-close' })\n labelClose = 'Close dialog';\n\n /**\n * Returns the dialog's return value — the string passed to `close(returnValue)`.\n * Mirrors `HTMLDialogElement.returnValue`.\n */\n get returnValue(): string {\n return this._dialogEl?.returnValue ?? '';\n }\n\n // ─── Lifecycle ───\n\n // D10 — re-render when aria-label attribute changes (without declaring a shadowing property)\n override attributeChangedCallback(\n name: string,\n oldVal: string | null,\n newVal: string | null,\n ): void {\n super.attributeChangedCallback(name, oldVal, newVal);\n if (name === 'aria-label' && oldVal !== newVal) {\n this.requestUpdate('aria-label', oldVal);\n }\n }\n\n override firstUpdated(): void {\n // Warn when no accessible heading is available.\n // _hasHeaderSlot is maintained by the slotchange handler; check it here\n // on first paint so a missing heading triggers the dev warning immediately.\n if (!this.heading.trim() && !this._hasHeaderSlot) {\n devWarn(\n 'hx-dialog',\n 'No heading or header slot provided. Dialog will use a fallback aria-label. Provide a `heading` attribute or populate the `header` slot for a descriptive accessible name.',\n );\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearTransitionFallback();\n this._isTransitioning = false;\n this._removeGlobalListeners();\n // Restore body scroll if disconnected while open\n if (this.modal && this.open) {\n unlockBodyScroll();\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this._openDialog();\n } else {\n this._closeDialog();\n }\n }\n }\n\n // ─── Public Methods ───\n\n /** Opens the dialog in the mode determined by the `modal` property. */\n show(): void {\n this.open = true;\n }\n\n /** Opens the dialog as a modal regardless of the `modal` property setting. */\n showModal(): void {\n this.modal = true;\n this.open = true;\n }\n\n /**\n * Closes the dialog.\n * @param returnValue - Optional return value string stored as `dialog.returnValue`.\n */\n close(returnValue?: string): void {\n if (returnValue !== undefined) {\n this._pendingReturnValue = returnValue;\n }\n this.open = false;\n }\n\n // ─── Private: Open / Close ───\n\n /** Clears the fallback timer that releases `_isTransitioning`. @internal */\n private _clearTransitionFallback(): void {\n if (this._transitionFallbackTimer !== null) {\n clearTimeout(this._transitionFallbackTimer);\n this._transitionFallbackTimer = null;\n }\n }\n\n /** @internal */\n private _openDialog(): void {\n const dialog = this._dialogEl;\n if (!dialog) return;\n\n // Guard: already open in the native dialog — nothing to do.\n if (dialog.open) return;\n\n // Guard: re-entrant call during our own async open tail — skip.\n if (this._isTransitioning) return;\n\n this._isTransitioning = true;\n\n // 200 ms fallback — releases the transitioning flag if updateComplete never\n // resolves (e.g. component detached mid-cycle or in a test environment that\n // does not flush promises). Prevents the dialog from getting permanently stuck.\n this._clearTransitionFallback();\n this._transitionFallbackTimer = setTimeout(() => {\n this._transitionFallbackTimer = null;\n this._isTransitioning = false;\n }, 200);\n\n // D1 — store the element that triggered the dialog open for focus restoration on close\n const active = document.activeElement;\n this._triggerElement = active instanceof HTMLElement ? active : null;\n\n if (this.modal) {\n // showModal() throws if the dialog is already in the DOM as open — guard above\n // ensures dialog.open is false before reaching here.\n dialog.showModal();\n // D4 — lock body scroll when modal dialog is open. Uses a shared reference-counted\n // lock so that simultaneous hx-dialog / hx-drawer instances don't clobber each other\n // when one closes before the other (see utils/body-scroll-lock.ts).\n lockBodyScroll();\n } else {\n dialog.show();\n }\n\n this._addGlobalListeners();\n\n // Cache focusable elements after the dialog is open in the DOM.\n void this.updateComplete.then(() => {\n // Cancel if `this.open` was set to false during this async tail — `_closeDialog`\n // already ran synchronously and we must not clobber its state.\n this._clearTransitionFallback();\n this._isTransitioning = false;\n if (!this.open) return;\n\n this._cachedFocusableElements = this._getFocusableElements();\n // D3 — explicitly move initial focus to the first focusable element inside the dialog\n // (browser's built-in focus delegation cannot reach slotted light DOM through Shadow DOM)\n this._cachedFocusableElements[0]?.focus();\n });\n\n this.dispatchEvent(\n new CustomEvent<void>('hx-open', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private _closeDialog(): void {\n const dialog = this._dialogEl;\n if (!dialog) return;\n\n // Guard: already closed in the native dialog — nothing to do, but still\n // release any stuck transitioning state so the next open can proceed.\n if (!dialog.open) {\n // Release transitioning lock in case we are in the open async tail.\n this._clearTransitionFallback();\n this._isTransitioning = false;\n return;\n }\n\n // Close always wins over a concurrent open async tail. We clear the\n // transitioning flag and cancel the fallback so the open tail's own\n // early-return check (`if (!this.open) return`) fires correctly.\n this._clearTransitionFallback();\n this._isTransitioning = false;\n\n // D11 — forward returnValue to native dialog.close() if provided\n if (this._pendingReturnValue !== undefined) {\n dialog.close(this._pendingReturnValue);\n this._pendingReturnValue = undefined;\n } else {\n dialog.close();\n }\n\n // D4 — release body scroll lock only when this dialog was opened as modal.\n // Non-modal dialogs never call lockBodyScroll(), so the unlock must be symmetric.\n if (this.modal) {\n unlockBodyScroll();\n }\n\n this._removeGlobalListeners();\n this._cachedFocusableElements = [];\n\n // D1 — restore focus to the element that opened the dialog (WCAG 2.4.3)\n this._triggerElement?.focus();\n this._triggerElement = null;\n\n this.dispatchEvent(\n new CustomEvent<void>('hx-close', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // ─── Event Listeners ───\n\n /** @internal */\n private _addGlobalListeners(): void {\n this._dialogEl?.addEventListener('keydown', this._handleKeyDown);\n this._dialogEl?.addEventListener('click', this._handleDialogClick);\n this._dialogEl?.addEventListener('cancel', this._handleNativeCancel);\n }\n\n /** @internal */\n private _removeGlobalListeners(): void {\n this._dialogEl?.removeEventListener('keydown', this._handleKeyDown);\n this._dialogEl?.removeEventListener('click', this._handleDialogClick);\n this._dialogEl?.removeEventListener('cancel', this._handleNativeCancel);\n }\n\n // ─── Keyboard Handler ───\n\n /** @internal */\n private _handleKeyDown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') {\n // Native dialog fires a 'cancel' event before close when Escape is pressed.\n // We prevent default here and handle it ourselves so we fire hx-cancel\n // before setting open = false (which triggers hx-close).\n e.preventDefault();\n this._cancel();\n return;\n }\n\n if (e.key === 'Tab' && this.modal) {\n this._trapFocus(e);\n }\n };\n\n // ─── Focus Trap ───\n\n /** @internal */\n private _getFocusableElements(): HTMLElement[] {\n // Collect focusable elements from slotted light DOM content only.\n // Shadow DOM elements (e.g., the built-in close button) remain accessible via\n // the native <dialog> tab order — including them here would cause focus to land\n // on shadow DOM elements whose document.activeElement resolves to the host,\n // breaking the test assertions and D7 initial focus behavior.\n const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n const lightFocusable: HTMLElement[] = [];\n\n slots.forEach((slot) => {\n slot.assignedElements({ flatten: true }).forEach((el) => {\n if (el instanceof HTMLElement) {\n if (el.matches(FOCUSABLE_SELECTORS)) {\n lightFocusable.push(el);\n }\n el.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS).forEach((child) => {\n lightFocusable.push(child);\n });\n }\n });\n });\n\n const filtered = lightFocusable.filter(\n (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n );\n\n // WCAG 2.4.3: if no light DOM focusable elements exist, fall back to the shadow\n // close button so the dialog always has at least one reachable focus target.\n if (filtered.length === 0) {\n const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.dialog__close-btn');\n if (closeBtn) filtered.push(closeBtn);\n }\n\n return filtered;\n }\n\n /** @internal */\n private _trapFocus(e: KeyboardEvent): void {\n const focusable =\n this._cachedFocusableElements.length > 0\n ? this._cachedFocusableElements\n : this._getFocusableElements();\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n\n const [first, ...rest] = focusable;\n const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n if (!first || !last) return;\n\n const active = document.activeElement;\n // Also check shadow root active element\n const shadowActive = this.shadowRoot?.activeElement;\n const currentActiveEl = shadowActive ?? active;\n const currentActive = currentActiveEl instanceof HTMLElement ? currentActiveEl : null;\n\n // The shadow close button may be the first focusable element when no light DOM\n // content exists (WCAG 2.1.2). Check both the element reference and shadow root\n // active element so Shift+Tab wraps correctly across the shadow boundary.\n const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.dialog__close-btn');\n\n if (e.shiftKey) {\n // Shift+Tab: if focus is on first, wrap to last\n const isOnFirst =\n currentActive === first ||\n (closeBtn !== null && shadowActive === closeBtn && first === closeBtn);\n if (isOnFirst) {\n e.preventDefault();\n last.focus();\n }\n } else {\n // Tab: if focus is on last, wrap to first\n if (currentActive === last) {\n e.preventDefault();\n first.focus();\n }\n }\n }\n\n // ─── Backdrop Click ───\n\n /** @internal */\n private _handleDialogClick = (e: MouseEvent): void => {\n if (!this.closeOnBackdrop) return;\n\n // The native dialog element fills only the content area in showModal().\n // Clicks on the backdrop reach the <dialog> element itself.\n // We detect this by checking whether the click target is the dialog element.\n const target = e.target as HTMLElement;\n if (target === this._dialogEl) {\n this._cancel();\n }\n };\n\n // ─── Non-modal backdrop click ───\n\n /** @internal */\n private _handleBackdropClick = (): void => {\n if (!this.closeOnBackdrop) return;\n this._cancel();\n };\n\n // ─── Native cancel (Escape via browser, before our handler runs) ───\n\n /** @internal */\n private _handleNativeCancel = (e: Event): void => {\n // We always prevent the native cancel so we can manage close state ourselves.\n e.preventDefault();\n };\n\n // ─── Cancel logic ───\n\n /** @internal */\n private _cancel(): void {\n this.dispatchEvent(\n new CustomEvent<void>('hx-cancel', {\n bubbles: true,\n composed: true,\n }),\n );\n\n this.open = false;\n // hx-close is dispatched by _closeDialog() which is called via the open property setter\n }\n\n // ─── Slot change handlers ───\n\n /** @internal */\n private _handleHeaderSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHeaderSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _handleFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderHeader() {\n const hasHeading = this.heading.trim().length > 0;\n\n // Always render header to include the built-in close button (D17)\n return html`\n <div part=\"header\" class=\"dialog__header\">\n ${hasHeading\n ? html`<h2 id=${this._headingId} class=\"dialog__heading\">${this.heading}</h2>`\n : nothing}\n <slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n <button\n part=\"close-button\"\n class=\"dialog__close-btn\"\n type=\"button\"\n aria-label=${this.labelClose}\n @click=${() => this.close()}\n ></button>\n </div>\n `;\n }\n\n /** @internal */\n private _renderFooter() {\n return html`\n <div part=\"footer\" class=\"dialog__footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n </div>\n `;\n }\n\n /** @internal */\n private _renderNonModalBackdrop() {\n if (this.modal || !this.open) return nothing;\n return html`\n <div\n part=\"backdrop\"\n class=\"dialog-backdrop\"\n @click=${this._handleBackdropClick}\n aria-hidden=\"true\"\n ></div>\n `;\n }\n\n // D8 — render visually-hidden description for aria-describedby\n /** @internal */\n private _renderDescription() {\n if (!this.description) return nothing;\n return html`<span id=${this._descriptionId} class=\"dialog__description\"\n >${this.description}</span\n >`;\n }\n\n // ─── Render ───\n\n override render() {\n const hasHeading = this.heading.trim().length > 0;\n // D10 — read aria-label via getAttribute to avoid shadowing ARIAMixin.ariaLabel\n const ariaLabel = this.getAttribute('aria-label');\n\n return html`\n ${this._renderNonModalBackdrop()}\n <dialog\n role=${this.variant !== 'dialog' ? this.variant : nothing}\n aria-labelledby=${hasHeading ? this._headingId : nothing}\n aria-label=${!hasHeading ? (ariaLabel ?? 'Dialog') : nothing}\n aria-describedby=${this.description ? this._descriptionId : nothing}\n aria-modal=${this.modal ? 'true' : nothing}\n >\n <div part=\"dialog\" class=\"dialog\">\n ${this._renderHeader()} ${this._renderDescription()}\n <div part=\"body\" class=\"dialog__body\">\n <slot></slot>\n </div>\n ${this._renderFooter()}\n </div>\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-dialog': HelixDialog;\n }\n interface HTMLElementEventMap {\n 'hx-open': CustomEvent<void>;\n 'hx-close': CustomEvent<void>;\n 'hx-cancel': CustomEvent<void>;\n }\n}\n"],"names":["helixDialogStyles","css","_nextDialogId","createIdCounter","FOCUSABLE_SELECTORS","HelixDialog","HelixElement","_a","name","oldVal","newVal","unlockBodyScroll","changedProperties","returnValue","dialog","active","lockBodyScroll","_b","_c","slots","lightFocusable","slot","el","child","filtered","closeBtn","focusable","first","rest","last","shadowActive","currentActiveEl","currentActive","hasHeading","html","nothing","ariaLabel","forcedColorsSurface","__decorateClass","query","state","property","value","customElement"],"mappings":"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"}

package/dist/shared/{hx-divider-CvyUVcp-.js → hx-divider-CYfcUjcr.js} RENAMED Viewed

@@ -1,12 +1,13 @@
 import { css as v, nothing as c, html as s } from "lit";
 import { property as n, state as p, customElement as _ } from "lit/decorators.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-const b = v`
+import { a as g } from "./forced-colors-CTEDFRGa.js";
+import { H as b } from "./helix-element-BNEYeiys.js";
+const f = v`
   :host {
     display: block;
-    --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #e2e8f0));
+    --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #d6dbd5));
     --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
-    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #64748b));
+    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #66787b));
     --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
     --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
   }
@@ -97,12 +98,12 @@ const b = v`
     }
   }
 `;
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (e, i, t, l) => {
-  for (var a = l > 1 ? void 0 : l ? m(i, t) : i, d = e.length - 1, h; d >= 0; d--)
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, i, t, l) => {
+  for (var a = l > 1 ? void 0 : l ? x(i, t) : i, d = e.length - 1, h; d >= 0; d--)
     (h = e[d]) && (a = (l ? h(i, t, a) : h(a)) || a);
-  return l && a && f(i, t, a), a;
+  return l && a && m(i, t, a), a;
 };
-let r = class extends g {
+let r = class extends b {
   constructor() {
     super(...arguments), this.orientation = "horizontal", this.spacing = "md", this.decorative = !1, this._hasLabel = !1, this._slotChangeHandler = (e) => {
       this._checkSlot(e.target);
@@ -141,7 +142,7 @@ let r = class extends g {
     `;
   }
 };
-r.styles = [b];
+r.styles = [f, g];
 o([
   n({ type: String, reflect: !0 })
 ], r.prototype, "orientation", 2);
@@ -163,4 +164,4 @@ r = o([
 export {
   r as H
 };
-//# sourceMappingURL=hx-divider-CvyUVcp-.js.map
+//# sourceMappingURL=hx-divider-CYfcUjcr.js.map

package/dist/shared/hx-divider-CYfcUjcr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-divider-CYfcUjcr.js","sources":["../../src/components/hx-divider/hx-divider.styles.ts","../../src/components/hx-divider/hx-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDividerStyles = css`\n :host {\n display: block;\n --_divider-color: var(--hx-divider-color, var(--hx-color-border-default, #d6dbd5));\n --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));\n --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-text-muted, #66787b));\n --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));\n --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Spacing Variants ─── */\n\n :host([spacing='none']) {\n --_spacing: 0;\n }\n\n :host([spacing='sm']) {\n --_spacing: var(--hx-space-2, 0.5rem);\n }\n\n :host,\n :host([spacing='md']) {\n --_spacing: var(--hx-space-4, 1rem);\n }\n\n :host([spacing='lg']) {\n --_spacing: var(--hx-space-6, 1.5rem);\n }\n\n /* ─── Horizontal (default) ─── */\n\n :host([orientation='horizontal']) {\n margin-block: var(--_spacing);\n }\n\n /* ─── Vertical ─── */\n\n :host([orientation='vertical']) {\n display: inline-flex;\n align-self: stretch;\n margin-inline: var(--_spacing);\n }\n\n /* ─── Base (hr) — horizontal ─── */\n\n .divider {\n display: flex;\n align-items: center;\n gap: var(--_divider-label-gap);\n border: none;\n margin: 0;\n padding: 0;\n }\n\n /* ─── Base — vertical ─── */\n\n :host([orientation='vertical']) .divider {\n flex-direction: column;\n height: 100%;\n }\n\n /* ─── Lines flanking label ─── */\n\n .divider__line {\n flex: 1;\n background-color: var(--_divider-color);\n }\n\n :host(:not([orientation='vertical'])) .divider__line {\n height: var(--_divider-width);\n }\n\n :host([orientation='vertical']) .divider__line {\n width: var(--_divider-width);\n height: auto;\n min-height: 0;\n }\n\n /* ─── Label ─── */\n\n .divider__label {\n flex-shrink: 0;\n color: var(--_divider-label-color);\n font-size: var(--_divider-label-size);\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .divider__line {\n background-color: CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixDividerStyles } from './hx-divider.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * A visual separator element for dividing content sections. Supports\n * horizontal and vertical orientations, configurable spacing, and an optional\n * centered label rendered between two lines.\n *\n * @summary Horizontal or vertical separator line with optional label.\n *\n * @tag hx-divider\n *\n * @slot - Optional label text rendered centered between two lines.\n *\n * @csspart base - The root divider element.\n * @csspart label - The optional centered label wrapper.\n *\n * @cssprop [--hx-divider-color=var(--hx-color-neutral-200)] - Line color.\n * @cssprop [--hx-divider-width=var(--hx-border-width-thin)] - Line thickness.\n * @cssprop [--hx-divider-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-divider-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-divider-label-gap=var(--hx-space-3)] - Gap between lines and label.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-line-height-tight] - Line height.\n */\n@customElement('hx-divider')\nexport class HelixDivider extends HelixElement {\n static override styles = [helixDividerStyles, forcedColorsSurface];\n\n /**\n * Orientation of the divider.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Spacing applied to the block axis (horizontal) or inline axis (vertical).\n * @attr spacing\n */\n @property({ type: String, reflect: true })\n spacing: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * When true, renders the divider as decorative only (role=\"presentation\").\n * Screen readers will not announce decorative dividers.\n * @attr decorative\n */\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /**\n * Optional text label rendered centered between the divider lines.\n * Also sets aria-label on the separator for assistive technologies.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label?: string;\n\n /** @internal */\n @state()\n private _hasLabel = false;\n\n /** @internal */\n private _checkSlot(slot: HTMLSlotElement): void {\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasLabel = nodes.some((node) =>\n node.nodeType === Node.TEXT_NODE\n ? (node.textContent ?? '').trim().length > 0\n : node.nodeType === Node.ELEMENT_NODE,\n );\n }\n\n /** @internal */\n private _slotChangeHandler = (e: Event): void => {\n this._checkSlot(e.target as HTMLSlotElement);\n };\n\n override firstUpdated(_changedProperties: PropertyValues<this>): void {\n super.firstUpdated(_changedProperties);\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) this._checkSlot(slot);\n if (!this.decorative && !this.label && !this._hasLabel) {\n devWarn(\n 'hx-divider',\n 'Non-decorative separator has no accessible name. Provide a `label` attribute or slot content, or set `decorative` to suppress this warning (WCAG 4.1.2).',\n );\n }\n }\n\n override render() {\n const isDecorative = this.decorative;\n const showLabel = this._hasLabel || !!this.label;\n\n return html`\n <div\n part=\"base\"\n class=\"divider${showLabel ? ' divider--labeled' : ''}\"\n role=\"${isDecorative ? 'presentation' : 'separator'}\"\n aria-orientation=\"${isDecorative ? nothing : this.orientation}\"\n aria-label=\"${!isDecorative && this.label ? this.label : nothing}\"\n >\n <span class=\"divider__line\"></span>\n ${showLabel\n ? html`<span part=\"label\" class=\"divider__label\">\n ${this.label ? html`${this.label}` : nothing}\n <slot @slotchange=${this._slotChangeHandler}></slot>\n </span>`\n : html`<slot @slotchange=${this._slotChangeHandler}></slot>`}\n <span class=\"divider__line\"></span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-divider': HelixDivider;\n }\n}\n\n/** Canonical type alias for the hx-divider component. */\nexport type HxDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","HelixElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACoC3B,IAAMC,IAAN,cAA2BC,EAAa;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAYb,KAAQ,YAAY,IAapB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA;AAAA,EAZQ,WAAWC,GAA6B;AAC9C,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM;AAAA,MAAK,CAACC,MAC3BA,EAAK,aAAa,KAAK,aAClBA,EAAK,eAAe,IAAI,OAAO,SAAS,IACzCA,EAAK,aAAa,KAAK;AAAA,IAAA;AAAA,EAE/B;AAAA,EAOS,aAAaC,GAAgD;;AACpE,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI,GAC1B,CAAC,KAAK,cAAc,CAAC,KAAK,SAAU,KAAK;AAAA,EAM/C;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA,wBAGaD,IAAY,sBAAsB,EAAE;AAAA,gBAC5CD,IAAe,iBAAiB,WAAW;AAAA,4BAC/BA,IAAeG,IAAU,KAAK,WAAW;AAAA,sBAC/C,CAACH,KAAgB,KAAK,QAAQ,KAAK,QAAQG,CAAO;AAAA;AAAA;AAAA,UAG9DF,IACEC;AAAA,gBACI,KAAK,QAAQA,IAAO,KAAK,KAAK,KAAKC,CAAO;AAAA,kCACxB,KAAK,kBAAkB;AAAA,uBAE7CD,sBAAyB,KAAK,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAvFaT,EACK,SAAS,CAACF,GAAoBa,CAAmB;AAOjEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bb,EAQX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bb,EAeX,WAAA,WAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAuBX,WAAA,cAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9Bb,EA+BX,WAAA,SAAA,CAAA;AAIQY,EAAA;AAAA,EADPE,EAAA;AAAM,GAlCId,EAmCH,WAAA,aAAA,CAAA;AAnCGA,IAANY,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdf,CAAA;"}

package/dist/shared/{hx-drawer-BT52I4tk.js → hx-drawer-DDhDz7RI.js} RENAMED Viewed

@@ -3,9 +3,10 @@ import { query as m, state as c, property as d, customElement as w } from "lit/d
 import { classMap as x } from "lit/directives/class-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import { l as y, u as _ } from "./body-scroll-lock-VBa5TFP-.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-import { c as E } from "./id-counter-DuX8vsui.js";
-const S = b`
+import { a as g } from "./forced-colors-CTEDFRGa.js";
+import { H as E } from "./helix-element-BNEYeiys.js";
+import { c as S } from "./id-counter-DuX8vsui.js";
+const k = b`
   /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
   [hidden] {
     display: none !important;
@@ -71,8 +72,8 @@ const S = b`
     display: flex;
     flex-direction: column;
     background-color: var(--hx-drawer-bg, var(--hx-color-surface-default, #ffffff));
-    color: var(--hx-drawer-color, var(--hx-color-text-primary, #0f172a));
-    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
+    color: var(--hx-drawer-color, var(--hx-color-text-primary, #0d1825));
+    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));
     overflow: hidden;
     outline: none;
     z-index: 1; /* local stacking context: panel above backdrop within overlay container */
@@ -169,18 +170,18 @@ const S = b`
     gap: var(--hx-space-4, 1rem);
     padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-drawer-header-border-color, var(--hx-color-border-default, #e2e8f0));
+      var(--hx-drawer-header-border-color, var(--hx-color-border-default, #d6dbd5));
     flex-shrink: 0;
   }
   .drawer-title {
     margin: 0;
     flex: 1 1 auto;
-    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
-    font-size: var(--hx-font-size-lg);
-    font-weight: var(--hx-font-weight-semibold);
-    line-height: var(--hx-line-height-tight);
-    color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0f172a));
+    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+    color: var(--hx-drawer-title-color, var(--hx-color-text-primary, #0d1825));
   }
   .drawer-header-actions {
@@ -203,22 +204,22 @@ const S = b`
     border: none;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-text-muted, #64748b);
+    color: var(--hx-drawer-close-btn-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
   }
   .drawer-close-button:hover {
-    background-color: var(--hx-color-surface-sunken, #f1f5f9);
-    color: var(--hx-color-text-primary, #0f172a);
+    background-color: var(--hx-drawer-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-drawer-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));
   }
   .drawer-close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-drawer-close-btn-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -267,7 +268,7 @@ const S = b`
     gap: var(--hx-space-3, 0.75rem);
     padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #e2e8f0));
+      var(--hx-drawer-footer-border-color, var(--hx-color-border-default, #d6dbd5));
     flex-shrink: 0;
   }
@@ -292,12 +293,12 @@ const S = b`
     }
   }
 `;
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? C(t, r) : t, n = e.length - 1, l; n >= 0; n--)
+var C = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? A(t, r) : t, n = e.length - 1, l; n >= 0; n--)
     (l = e[n]) && (s = (i ? l(t, r, s) : l(s)) || s);
-  return i && s && k(t, r, s), s;
+  return i && s && C(t, r, s), s;
 };
-const A = E("hx-drawer"), T = {
+const T = S("hx-drawer"), F = {
   sm: "20rem",
   md: "30rem",
   lg: "40rem",
@@ -312,9 +313,9 @@ const A = E("hx-drawer"), T = {
   '[tabindex]:not([tabindex="-1"])',
   "details > summary"
 ].join(",");
-let o = class extends g {
+let o = class extends E {
   constructor() {
-    super(...arguments), this._isOpen = !1, this._hasHeaderActionsSlot = !1, this._hasFooterSlot = !1, this._hasLabelSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._animationTimeout = null, this._hasScrollLock = !1, this._siblingAriaHiddenElements = [], this._titleId = `${A()}-title`, this.open = !1, this.placement = "end", this.size = "md", this.contained = !1, this.noHeader = !1, this.noFooter = !1, this.label = "", this.labelClose = "Close drawer", this._handleKeyDown = (e) => {
+    super(...arguments), this._isOpen = !1, this._hasHeaderActionsSlot = !1, this._hasFooterSlot = !1, this._hasLabelSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._animationTimeout = null, this._hasScrollLock = !1, this._siblingAriaHiddenElements = [], this._titleId = `${T()}-title`, this.open = !1, this.placement = "end", this.size = "md", this.contained = !1, this.noHeader = !1, this.noFooter = !1, this.label = "", this.labelClose = "Close drawer", this._handleKeyDown = (e) => {
       if (this._isOpen) {
         if (e.key === "Escape") {
           e.preventDefault(), this.open = !1;
@@ -351,7 +352,7 @@ let o = class extends g {
   // ─── Private: Size CSS variable ───
   /** @internal */
   _applySizeVar() {
-    const e = T[this.size] ?? this.size;
+    const e = F[this.size] ?? this.size;
     this.style.setProperty("--_drawer-size", e);
   }
   // ─── Private: Open / Close ───
@@ -578,7 +579,7 @@ let o = class extends g {
     `;
   }
 };
-o.styles = [S];
+o.styles = [k, g];
 a([
   m(".drawer-overlay")
 ], o.prototype, "_overlayEl", 2);
@@ -627,4 +628,4 @@ o = a([
 export {
   o as H
 };
-//# sourceMappingURL=hx-drawer-BT52I4tk.js.map
+//# sourceMappingURL=hx-drawer-DDhDz7RI.js.map