@helixui/library 3.1.0 → 3.2.0-next.100

package/dist/shared/{hx-code-snippet-B7wUKzyb.js → hx-code-snippet-B26RM1_C.js}

@@ -1,8 +1,9 @@
 import { css as u, html as p, nothing as h } from "lit";
-import { property as r, state as d, customElement as m } from "lit/decorators.js";
+import { property as r, state as c, customElement as f } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
-import { H as f } from "./helix-element-BNEYeiys.js";
-const b = u`
+import { a as m } from "./forced-colors-CTEDFRGa.js";
+import { H as b } from "./helix-element-BNEYeiys.js";
+const v = u`
   :host {
     display: block;
   }
@@ -17,8 +18,8 @@ const b = u`
     display: inline;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
-    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
-    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #ebeee9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0d1825));
     padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
       var(--hx-code-snippet-inline-padding-x, 0.375em);
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -28,7 +29,7 @@ const b = u`
 
   .code-snippet {
     position: relative;
-    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0d1825));
     border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
@@ -68,7 +69,7 @@ const b = u`
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-relaxed, 1.75);
-    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
 
@@ -82,10 +83,12 @@ const b = u`
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-200, #e2e8f0);
+    /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
@@ -100,13 +103,14 @@ const b = u`
   }
 
   .code-snippet__copy-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    border-color: var(--hx-color-neutral-500, #64748b);
+    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    border-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .code-snippet__copy-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -125,25 +129,30 @@ const b = u`
     min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     border: none;
-    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
-    background-color: var(--hx-color-neutral-800, #1e293b);
-    color: var(--hx-color-neutral-300, #cbd5e1);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));
+    /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */
+    background-color: var(--hx-color-surface-inverse, #0d1825);
+    color: var(--hx-color-text-inverse, #ffffff);
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
     text-align: center;
     cursor: pointer;
-    transition: background-color var(--hx-transition-fast, 150ms ease);
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      filter var(--hx-transition-fast, 150ms ease);
   }
 
   .code-snippet__expand-button:hover {
-    background-color: var(--hx-color-neutral-700, #334155);
-    color: var(--hx-color-neutral-100, #f1f5f9);
+    /* Hover on inverse terminal surface — lift the top border to border-default and brighten the background; matches the copy-button hover affordance pattern. */
+    border-top-color: var(--hx-color-border-default, #e2e8f0);
+    filter: brightness(var(--hx-filter-brightness-hover, 1.15));
   }
 
   .code-snippet__expand-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -153,7 +162,7 @@ const b = u`
     display: inline-block;
     min-width: var(--hx-space-8, 2rem);
     padding-inline-end: var(--hx-space-3, 0.75rem);
-    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #4a5362));
     user-select: none;
     text-align: end;
   }
@@ -204,12 +213,12 @@ const b = u`
     border: 0;
   }
 `;
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (e, t, n, a) => {
-  for (var s = a > 1 ? void 0 : a ? _(t, n) : t, l = e.length - 1, c; l >= 0; l--)
-    (c = e[l]) && (s = (a ? c(t, n, s) : c(s)) || s);
-  return a && s && v(t, n, s), s;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, t, n, a) => {
+  for (var s = a > 1 ? void 0 : a ? y(t, n) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (s = (a ? d(t, n, s) : d(s)) || s);
+  return a && s && g(t, n, s), s;
 };
-let o = class extends f {
+let o = class extends b {
   constructor() {
     super(...arguments), this.language = "", this.inline = !1, this.wrap = !1, this.copyable = !1, this.maxLines = 0, this.lineNumbers = !1, this.labelCopy = "Copy code", this.labelCopied = "Copied!", this.labelShowMore = "Show more", this.labelShowLess = "Show less", this._copied = !1, this._expanded = !1, this._codeText = "", this._copyTimer = null;
   }
@@ -333,7 +342,7 @@ let o = class extends f {
     `;
   }
 };
-o.styles = [b];
+o.styles = [v, m];
 i([
   r({ type: String, reflect: !0 })
 ], o.prototype, "language", 2);
@@ -365,18 +374,18 @@ i([
   r({ type: String, attribute: "label-show-less" })
 ], o.prototype, "labelShowLess", 2);
 i([
-  d()
+  c()
 ], o.prototype, "_copied", 2);
 i([
-  d()
+  c()
 ], o.prototype, "_expanded", 2);
 i([
-  d()
+  c()
 ], o.prototype, "_codeText", 2);
 o = i([
-  m("hx-code-snippet")
+  f("hx-code-snippet")
 ], o);
 export {
   o as H
 };
-//# sourceMappingURL=hx-code-snippet-B7wUKzyb.js.map
+//# sourceMappingURL=hx-code-snippet-B26RM1_C.js.map

package/dist/shared/hx-code-snippet-B26RM1_C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-code-snippet-B26RM1_C.js","sources":["../../src/components/hx-code-snippet/hx-code-snippet.styles.ts","../../src/components/hx-code-snippet/hx-code-snippet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCodeSnippetStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([inline]) {\n    display: inline;\n  }\n\n  /* ─── Inline Mode ─── */\n\n  .code-snippet--inline {\n    display: inline;\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));\n    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-surface-sunken, #ebeee9));\n    color: var(--hx-code-snippet-inline-color, var(--hx-color-text-primary, #0d1825));\n    padding: var(--hx-code-snippet-inline-padding-y, 0.125em)\n      var(--hx-code-snippet-inline-padding-x, 0.375em);\n    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));\n  }\n\n  /* ─── Block Mode Container ─── */\n\n  .code-snippet {\n    position: relative;\n    background-color: var(--hx-code-snippet-bg, var(--hx-color-surface-inverse, #0d1825));\n    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));\n    overflow: hidden;\n  }\n\n  /* ─── Hidden Slot ─── */\n\n  .code-snippet__slot {\n    display: none;\n  }\n\n  /* ─── Header ─── */\n\n  .code-snippet__header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;\n    min-height: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── Pre / Code ─── */\n\n  .code-snippet__pre {\n    margin: 0;\n    padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));\n    overflow-x: auto;\n    white-space: pre;\n  }\n\n  .code-snippet__pre--wrap {\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .code-snippet__code {\n    display: block;\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-relaxed, 1.75);\n    color: var(--hx-code-snippet-color, var(--hx-color-text-inverse, #ffffff));\n    tab-size: var(--hx-code-snippet-tab-size, 2);\n  }\n\n  /* ─── Copy Button ─── */\n\n  .code-snippet__copy-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    /* Copy button sits on the always-dark block snippet surface; uses inverse family for contrast on the terminal background. */\n    background-color: var(--hx-color-surface-inverse, #0d1825);\n    color: var(--hx-color-text-inverse, #ffffff);\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */\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    white-space: nowrap;\n    z-index: 1; /* @audit-exception: local stacking context within shadow root */\n  }\n\n  .code-snippet__copy-button:hover {\n    /* Hover on inverse terminal surface — keep semantic inverse family; border lifts via border-default in inverse context. */\n    background-color: var(--hx-color-surface-inverse, #0d1825);\n    border-color: var(--hx-color-border-default, #d6dbd5);\n  }\n\n  .code-snippet__copy-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .code-snippet__copy-button:active {\n    /* Non-standard token — fallback 0.8 applies if token is absent */\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Expand Button ─── */\n\n  .code-snippet__expand-button {\n    display: block;\n    width: 100%;\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    border: none;\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n    /* Expand button is attached to the always-dark block snippet — inverse family maintains the terminal aesthetic. */\n    background-color: var(--hx-color-surface-inverse, #0d1825);\n    color: var(--hx-color-text-inverse, #ffffff);\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      filter var(--hx-transition-fast, 150ms ease);\n  }\n\n  .code-snippet__expand-button:hover {\n    /* Hover on inverse terminal surface — lift the top border to border-default and brighten the background; matches the copy-button hover affordance pattern. */\n    border-top-color: var(--hx-color-border-default, #e2e8f0);\n    filter: brightness(var(--hx-filter-brightness-hover, 1.15));\n  }\n\n  .code-snippet__expand-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Line Numbers ─── */\n\n  .code-snippet__line-number {\n    display: inline-block;\n    min-width: var(--hx-space-8, 2rem);\n    padding-inline-end: var(--hx-space-3, 0.75rem);\n    color: var(--hx-code-snippet-line-number-color, var(--hx-color-text-muted, #4a5362));\n    user-select: none;\n    text-align: end;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .code-snippet__copy-button {\n      transition: none;\n    }\n\n    .code-snippet__expand-button {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .code-snippet {\n      border: 1px solid CanvasText;\n    }\n\n    .code-snippet--inline {\n      border: 1px solid CanvasText;\n    }\n\n    .code-snippet__copy-button {\n      border-color: ButtonText;\n      color: ButtonText;\n    }\n\n    .code-snippet__expand-button {\n      border-top-color: CanvasText;\n      color: ButtonText;\n    }\n  }\n\n  /* ─── Screen-reader only ─── */\n\n  .sr-only {\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","import { html, nothing, TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCodeSnippetStyles } from './hx-code-snippet.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * A styled code block with optional copy button and max-lines truncation.\n * Supports block (`<pre><code>`) and inline (`<code>`) rendering modes.\n * No external syntax highlighting dependency — use the `language` attribute\n * as a hint for consumers integrating their own highlighter via slotted content.\n *\n * @summary Styled code display component with copy-to-clipboard and expand/collapse.\n *\n * @tag hx-code-snippet\n *\n * @slot - Code content as plain text. Note: HTML markup in slot content will be\n *   stripped — only text content is extracted. Pre-highlighted HTML is not supported.\n *\n * @fires {CustomEvent<{text: string}>} hx-copy - Dispatched when the copy button is clicked.\n *\n * @csspart base - The outermost container (block: `<div>`, inline: `<code>`).\n * @csspart header - The header bar containing the copy button (block mode only).\n * @csspart code - The `<code>` element containing the content.\n * @csspart copy-button - The copy-to-clipboard button.\n * @csspart expand-button - The \"Show more / Show less\" button.\n *\n * @cssprop [--hx-code-snippet-bg=var(--hx-color-neutral-900,#0f172a)] - Background color.\n * @cssprop [--hx-code-snippet-color=var(--hx-color-neutral-100,#f1f5f9)] - Text color.\n * @cssprop [--hx-code-snippet-font-family=var(--hx-font-family-mono,monospace)] - Font family.\n * @cssprop [--hx-code-snippet-font-size=var(--hx-font-size-sm,0.875rem)] - Font size.\n * @cssprop [--hx-code-snippet-border-radius=var(--hx-border-radius-md,0.375rem)] - Border radius.\n * @cssprop [--hx-code-snippet-padding=var(--hx-space-4,1rem)] - Inner padding (block mode).\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-code-snippet-inline-bg=var(--hx-color-neutral-100)] - Background color.\n * @cssprop [--hx-code-snippet-inline-color=var(--hx-color-neutral-900)] - Color.\n * @cssprop [--hx-code-snippet-inline-padding-x=0.375em] - Padding.\n * @cssprop [--hx-code-snippet-inline-padding-y=0.125em] - Padding.\n * @cssprop [--hx-code-snippet-line-number-color=var(--hx-color-neutral-500)] - Color.\n * @cssprop [--hx-code-snippet-tab-size=2] - Number of spaces per tab character.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-mono] - Font family.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-relaxed] - Line height.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends HelixElement {\n  static override styles = [helixCodeSnippetStyles, forcedColorsSurface];\n\n  // ─── Public Properties ───\n\n  /**\n   * Language hint for consumers to apply syntax highlighting.\n   * Does not affect rendering directly; it is applied as a `language-*` class\n   * on the `<code>` element so external highlighters can target it.\n   * @attr language\n   */\n  @property({ type: String, reflect: true })\n  language: string = '';\n\n  /**\n   * When true, renders as an inline `<code>` element instead of a `<pre><code>` block.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline: boolean = false;\n\n  /**\n   * When true, enables word-wrap in block mode.\n   * @attr wrap\n   */\n  @property({ type: Boolean, reflect: true })\n  wrap: boolean = false;\n\n  /**\n   * When true, shows a copy-to-clipboard button. Add the `copyable` attribute to enable it.\n   * @attr copyable\n   */\n  @property({ type: Boolean, reflect: true })\n  copyable: boolean = false;\n\n  /**\n   * Maximum number of lines to display before showing a \"Show more\" button.\n   * Set to 0 (default) to disable truncation.\n   * @attr max-lines\n   */\n  @property({ type: Number, attribute: 'max-lines', reflect: true })\n  maxLines: number = 0;\n\n  /**\n   * When true, prepends line numbers to each displayed line in block mode.\n   * Line numbers are rendered as `aria-hidden` spans so screen readers skip them.\n   * @attr line-numbers\n   */\n  @property({ type: Boolean, attribute: 'line-numbers', reflect: true })\n  lineNumbers: boolean = false;\n\n  /**\n   * Label for the copy button in idle state.\n   * @attr label-copy\n   */\n  @property({ type: String, attribute: 'label-copy' })\n  labelCopy = 'Copy code';\n\n  /**\n   * Label for the copy button after successful copy.\n   * @attr label-copied\n   */\n  @property({ type: String, attribute: 'label-copied' })\n  labelCopied = 'Copied!';\n\n  /**\n   * Label for the expand button when content is collapsed.\n   * @attr label-show-more\n   */\n  @property({ type: String, attribute: 'label-show-more' })\n  labelShowMore = 'Show more';\n\n  /**\n   * Label for the expand button when content is expanded.\n   * @attr label-show-less\n   */\n  @property({ type: String, attribute: 'label-show-less' })\n  labelShowLess = 'Show less';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _copied: boolean = false;\n  /** @internal */\n  @state() private _expanded: boolean = false;\n  /** @internal */\n  @state() private _codeText: string = '';\n\n  /** @internal */\n  private _copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    // Prevent flash of empty <code> before slotchange fires by eagerly reading\n    // text content from host children that are already present on first render.\n    if (!this._codeText) {\n      const text = this.textContent?.trim() ?? '';\n      if (text) {\n        this._codeText = text;\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._copyTimer !== null) {\n      clearTimeout(this._copyTimer);\n      this._copyTimer = null;\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement | null;\n    if (!slot) return;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._codeText = nodes.map((n) => n.textContent ?? '').join('');\n  }\n\n  /** @internal */\n  private _handleCopy(): void {\n    const text = this._codeText;\n\n    navigator?.clipboard?.writeText(text).catch(() => {\n      // Clipboard API unavailable (non-HTTPS environments such as Drupal staging) — emit event only.\n      // Note: navigator.clipboard requires a secure context (HTTPS or localhost).\n      // On HTTP, the copy event still fires but the clipboard is not populated.\n    });\n\n    this.dispatchEvent(\n      new CustomEvent<{ text: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { text },\n      }),\n    );\n\n    this._copied = true;\n    if (this._copyTimer !== null) clearTimeout(this._copyTimer);\n    this._copyTimer = setTimeout(() => {\n      this._copied = false;\n    }, 2000);\n  }\n\n  /** @internal */\n  private _handleExpand(): void {\n    this._expanded = !this._expanded;\n  }\n\n  // ─── Helpers ───\n\n  /** @internal */\n  private _getDisplayLines(): string[] {\n    const lines = this._codeText.split('\\n');\n    if (!this.maxLines || this.maxLines <= 0 || this._expanded) {\n      return lines;\n    }\n    if (lines.length <= this.maxLines) {\n      return lines;\n    }\n    return lines.slice(0, this.maxLines);\n  }\n\n  /** @internal */\n  private _isTruncated(): boolean {\n    if (!this.maxLines || this.maxLines <= 0) return false;\n    const lines = this._codeText.split('\\n');\n    return lines.length > this.maxLines;\n  }\n\n  /** @internal */\n  private _renderLines(lines: string[]): TemplateResult {\n    if (!this.lineNumbers) {\n      return html`${lines.join('\\n')}`;\n    }\n    return html`${lines.map(\n      (line, i) =>\n        html`<span aria-hidden=\"true\" class=\"code-snippet__line-number\">${i + 1}</span>${line +\n          '\\n'}`,\n    )}`;\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult | typeof nothing {\n    if (this.inline) {\n      return html`\n        <code part=\"base code\" class=\"code-snippet code-snippet--inline\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </code>\n      `;\n    }\n\n    const displayLines = this._getDisplayLines();\n    const truncated = this._isTruncated();\n    const preLabel = this.language ? `Code snippet: ${this.language}` : 'Code snippet';\n    const codeClasses = classMap({\n      'code-snippet__code': true,\n      [`language-${this.language}`]: Boolean(this.language),\n    });\n\n    return html`\n      <div part=\"base\" class=\"code-snippet\">\n        <div part=\"header\" class=\"code-snippet__header\">\n          ${this.copyable\n            ? html`\n                <button\n                  part=\"copy-button\"\n                  class=\"code-snippet__copy-button\"\n                  type=\"button\"\n                  aria-label=${this._copied ? this.labelCopied : this.labelCopy}\n                  @click=${this._handleCopy}\n                >\n                  ${this._copied ? this.labelCopied : this.labelCopy}\n                </button>\n              `\n            : nothing}\n        </div>\n\n        <!-- Visually-hidden live region announces copy confirmation to assistive technology -->\n        <span\n          aria-live=\"polite\"\n          style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;\"\n          >${this._copied ? this.labelCopied : ''}</span\n        >\n\n        <pre\n          role=\"region\"\n          aria-label=${preLabel}\n          class=${classMap({\n            'code-snippet__pre': true,\n            'code-snippet__pre--wrap': this.wrap,\n          })}\n        ><code part=\"code\" class=${codeClasses}>${this._renderLines(displayLines)}</code></pre>\n\n        <!-- Hidden slot to capture text content for display and copy -->\n        <slot class=\"code-snippet__slot\" @slotchange=${this._handleSlotChange}></slot>\n\n        ${truncated\n          ? html`\n              <button\n                part=\"expand-button\"\n                class=\"code-snippet__expand-button\"\n                type=\"button\"\n                aria-expanded=${this._expanded ? 'true' : 'false'}\n                @click=${this._handleExpand}\n              >\n                ${this._expanded ? this.labelShowLess : this.labelShowMore}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-code-snippet': HelixCodeSnippet;\n  }\n}\n"],"names":["helixCodeSnippetStyles","css","HelixCodeSnippet","HelixElement","text","_a","slot","nodes","n","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","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;;;;;;ACsE/B,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAYL,KAAA,WAAmB,IAOnB,KAAA,SAAkB,IAOlB,KAAA,OAAgB,IAOhB,KAAA,WAAoB,IAQpB,KAAA,WAAmB,GAQnB,KAAA,cAAuB,IAOvB,KAAA,YAAY,aAOZ,KAAA,cAAc,WAOd,KAAA,gBAAgB,aAOhB,KAAA,gBAAgB,aAKP,KAAQ,UAAmB,IAE3B,KAAQ,YAAqB,IAE7B,KAAQ,YAAoB,IAGrC,KAAQ,aAAmD;AAAA,EAAA;AAAA;AAAA,EAIlD,eAAqB;;AAG5B,QAAI,CAAC,KAAK,WAAW;AACnB,YAAMC,MAAOC,IAAA,KAAK,gBAAL,gBAAAA,EAAkB,WAAU;AACzC,MAAID,MACF,KAAK,YAAYA;AAAA,IAErB;AAAA,EACF;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACF,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa;AAAA,EAEtB;AAAA;AAAA;AAAA,EAKQ,kBAAkB,GAAgB;AACxC,UAAME,IAAO,EAAE;AACf,QAAI,CAACA,EAAM;AACX,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM,IAAI,CAACC,MAAMA,EAAE,eAAe,EAAE,EAAE,KAAK,EAAE;AAAA,EAChE;AAAA;AAAA,EAGQ,cAAoB;;AAC1B,UAAMJ,IAAO,KAAK;AAElB,KAAAC,IAAA,uCAAW,cAAX,QAAAA,EAAsB,UAAUD,GAAM,MAAM,MAAM;AAAA,IAIlD,IAEA,KAAK;AAAA,MACH,IAAI,YAA8B,WAAW;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAAA,EAAA;AAAA,MAAK,CAChB;AAAA,IAAA,GAGH,KAAK,UAAU,IACX,KAAK,eAAe,QAAM,aAAa,KAAK,UAAU,GAC1D,KAAK,aAAa,WAAW,MAAM;AACjC,WAAK,UAAU;AAAA,IACjB,GAAG,GAAI;AAAA,EACT;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,SAAK,YAAY,CAAC,KAAK;AAAA,EACzB;AAAA;AAAA;AAAA,EAKQ,mBAA6B;AACnC,UAAMK,IAAQ,KAAK,UAAU,MAAM;AAAA,CAAI;AAIvC,WAHI,CAAC,KAAK,YAAY,KAAK,YAAY,KAAK,KAAK,aAG7CA,EAAM,UAAU,KAAK,WAChBA,IAEFA,EAAM,MAAM,GAAG,KAAK,QAAQ;AAAA,EACrC;AAAA;AAAA,EAGQ,eAAwB;AAC9B,WAAI,CAAC,KAAK,YAAY,KAAK,YAAY,IAAU,KACnC,KAAK,UAAU,MAAM;AAAA,CAAI,EAC1B,SAAS,KAAK;AAAA,EAC7B;AAAA;AAAA,EAGQ,aAAaA,GAAiC;AACpD,WAAK,KAAK,cAGHC,IAAOD,EAAM;AAAA,MAClB,CAACE,GAAMC,MACLF,+DAAkEE,IAAI,CAAC,UAAUD,IAC/E;AAAA,CAAI;AAAA,IAAA,CACT,KANQD,IAAOD,EAAM,KAAK;AAAA,CAAI,CAAC;AAAA,EAOlC;AAAA;AAAA,EAIS,SAA0C;AACjD,QAAI,KAAK;AACP,aAAOC;AAAA;AAAA,8BAEiB,KAAK,iBAAiB;AAAA;AAAA;AAKhD,UAAMG,IAAe,KAAK,iBAAA,GACpBC,IAAY,KAAK,aAAA,GACjBC,IAAW,KAAK,WAAW,iBAAiB,KAAK,QAAQ,KAAK,gBAC9DC,IAAcC,EAAS;AAAA,MAC3B,sBAAsB;AAAA,MACtB,CAAC,YAAY,KAAK,QAAQ,EAAE,GAAG,EAAQ,KAAK;AAAA,IAAQ,CACrD;AAED,WAAOP;AAAA;AAAA;AAAA,YAGC,KAAK,WACHA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKiB,KAAK,UAAU,KAAK,cAAc,KAAK,SAAS;AAAA,2BACpD,KAAK,WAAW;AAAA;AAAA,oBAEvB,KAAK,UAAU,KAAK,cAAc,KAAK,SAAS;AAAA;AAAA,kBAGtDQ,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOR,KAAK,UAAU,KAAK,cAAc,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK1BH,CAAQ;AAAA,kBACbE,EAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,2BAA2B,KAAK;AAAA,IAAA,CACjC,CAAC;AAAA,mCACuBD,CAAW,IAAI,KAAK,aAAaH,CAAY,CAAC;AAAA;AAAA;AAAA,uDAG1B,KAAK,iBAAiB;AAAA;AAAA,UAEnEC,IACEJ;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKoB,KAAK,YAAY,SAAS,OAAO;AAAA,yBACxC,KAAK,aAAa;AAAA;AAAA,kBAEzB,KAAK,YAAY,KAAK,gBAAgB,KAAK,aAAa;AAAA;AAAA,gBAG9DQ,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAjQahB,EACK,SAAS,CAACF,GAAwBmB,CAAmB;AAWrEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAX9BnB,EAYX,WAAA,YAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlB/BnB,EAmBX,WAAA,UAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB/BnB,EA0BX,WAAA,QAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhC/BnB,EAiCX,WAAA,YAAA,CAAA;AAQAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,SAAS,IAAM;AAAA,GAxCtDnB,EAyCX,WAAA,YAAA,CAAA;AAQAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB,SAAS,IAAM;AAAA,GAhD1DnB,EAiDX,WAAA,eAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAvDxCnB,EAwDX,WAAA,aAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GA9D1CnB,EA+DX,WAAA,eAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GArE7CnB,EAsEX,WAAA,iBAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GA5E7CnB,EA6EX,WAAA,iBAAA,CAAA;AAKiBkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAlFIpB,EAkFM,WAAA,WAAA,CAAA;AAEAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GApFIpB,EAoFM,WAAA,aAAA,CAAA;AAEAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtFIpB,EAsFM,WAAA,aAAA,CAAA;AAtFNA,IAANkB,EAAA;AAAA,EADNG,EAAc,iBAAiB;AAAA,GACnBrB,CAAA;"}

package/dist/shared/{hx-color-picker-DBaKTVLr.js → hx-color-picker-uRc865FJ.js}

@@ -2,8 +2,9 @@ import { css as D, html as f, nothing as k } from "lit";
 import { F as O } from "./FormMixin-B8PXk5RQ.js";
 import { property as c, state as H, query as E, customElement as R } from "lit/decorators.js";
 import { styleMap as g } from "lit/directives/style-map.js";
-import { H as T } from "./helix-element-BNEYeiys.js";
-const V = D`
+import { b as T } from "./forced-colors-CTEDFRGa.js";
+import { H as V } from "./helix-element-BNEYeiys.js";
+const B = D`
   :host {
     display: inline-block;
     position: relative;
@@ -19,18 +20,21 @@ const V = D`
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-1, 0.25rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: var(--hx-color-neutral-0, #ffffff);
     cursor: pointer;
     transition: border-color var(--hx-transition-fast, 150ms ease);
   }
   .trigger:hover:not([disabled]) {
-    border-color: var(--hx-color-primary-500, #2563eb);
+    border-color: var(
+      --hx-color-picker-trigger-hover-border-color,
+      var(--hx-color-primary-500, #429797)
+    );
   }
   :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500));
+      var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
   .trigger-swatch {
@@ -45,7 +49,7 @@ const V = D`
   }
   .trigger-label {
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-neutral-700, #313e4b);
     font-family: var(--hx-font-family-mono, monospace);
     white-space: nowrap;
   }
@@ -55,7 +59,7 @@ const V = D`
     top: calc(100% + 4px);
     left: 0;
     background: var(--hx-color-neutral-0, #ffffff);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
     border-radius: var(--hx-border-radius-lg, 0.5rem);
     box-shadow: 0 8px 24px
       var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
@@ -69,7 +73,7 @@ const V = D`
   :host([inline]) .panel {
     position: static;
     box-shadow: none;
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #d6dbd5);
     border-radius: var(--hx-border-radius-lg, 0.5rem);
   }
   .gradient-grid {
@@ -182,12 +186,12 @@ const V = D`
   .format-btn {
     flex-shrink: 0;
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    background: var(--hx-color-neutral-100, #f1f5f9);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    background: var(--hx-color-neutral-100, #ebeee9);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-neutral-600, #4a5362);
     text-transform: uppercase;
     font-weight: var(--hx-font-weight-semibold, 600);
     letter-spacing: 0.05em;
@@ -196,18 +200,22 @@ const V = D`
     flex: 1;
     min-width: 0;
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     font-family: var(--hx-font-family-mono, monospace);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0f172a);
+    color: var(--hx-color-neutral-900, #0d1825);
     background: var(--hx-color-neutral-0, #ffffff);
     outline: none;
   }
   .color-input:focus-visible {
-    border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    border-color: var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     box-shadow: 0 0 0 2px
-      color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
+      color-mix(
+        in srgb,
+        var(--hx-color-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 20%,
+        transparent
+      );
   }
   .input-preview {
     width: 24px;
@@ -281,10 +289,10 @@ const V = D`
     }
   }
 `;
-function b(t, e, r) {
+function v(t, e, r) {
   return Math.max(e, Math.min(r, t));
 }
-function B(t) {
+function G(t) {
   let e = t.trim().replace(/^#/, "");
   if (e.length === 3 && (e = e.replace(/(.)/g, "$1$1")), e.length === 4 && (e = e.replace(/(.)/g, "$1$1")), e.length === 6 && (e += "ff"), e.length !== 8) return null;
   const r = parseInt(e, 16);
@@ -296,9 +304,9 @@ function B(t) {
   };
 }
 function $(t) {
-  return Math.round(b(t, 0, 255)).toString(16).padStart(2, "0");
+  return Math.round(v(t, 0, 255)).toString(16).padStart(2, "0");
 }
-function G(t, e) {
+function U(t, e) {
   const r = `#${$(t.r)}${$(t.g)}${$(t.b)}`;
   return e && t.a < 1 ? r + $(t.a * 255) : r;
 }
@@ -309,30 +317,30 @@ function S(t) {
 }
 function F(t) {
   const e = t.h / 360, r = t.s / 100, i = t.v / 100, o = Math.floor(e * 6), h = e * 6 - o, s = i * (1 - r), d = i * (1 - h * r), u = i * (1 - (1 - h) * r);
-  let l = 0, p = 0, v = 0;
+  let l = 0, p = 0, b = 0;
   switch (o % 6) {
     case 0:
-      l = i, p = u, v = s;
+      l = i, p = u, b = s;
       break;
     case 1:
-      l = d, p = i, v = s;
+      l = d, p = i, b = s;
       break;
     case 2:
-      l = s, p = i, v = u;
+      l = s, p = i, b = u;
       break;
     case 3:
-      l = s, p = d, v = i;
+      l = s, p = d, b = i;
       break;
     case 4:
-      l = u, p = s, v = i;
+      l = u, p = s, b = i;
       break;
     case 5:
-      l = i, p = s, v = d;
+      l = i, p = s, b = d;
       break;
   }
-  return { r: Math.round(l * 255), g: Math.round(p * 255), b: Math.round(v * 255), a: t.a };
+  return { r: Math.round(l * 255), g: Math.round(p * 255), b: Math.round(b * 255), a: t.a };
 }
-function U(t) {
+function I(t) {
   const e = t.r / 255, r = t.g / 255, i = t.b / 255, o = Math.max(e, r, i), h = Math.min(e, r, i), s = (o + h) / 2;
   let d = 0, u = 0;
   if (o !== h) {
@@ -344,7 +352,7 @@ function U(t) {
 function P(t) {
   if (!t) return null;
   if (t.startsWith("#")) {
-    const o = B(t);
+    const o = G(t);
     return o ? S(o) : null;
   }
   const e = t.match(
@@ -363,13 +371,13 @@ function P(t) {
     /hsla?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)%(?:\s*,\s*|\s+)([\d.]+)%(?:\s*(?:\/|,)\s*([\d.]+))?\s*\)/
   );
   if (r) {
-    const [, o, h, s, d] = r, u = parseFloat(o ?? "0"), l = parseFloat(h ?? "0") / 100, p = parseFloat(s ?? "0") / 100, v = d !== void 0 ? parseFloat(d) : 1, m = (1 - Math.abs(2 * p - 1)) * l, _ = m * (1 - Math.abs(u / 60 % 2 - 1)), M = p - m / 2;
+    const [, o, h, s, d] = r, u = parseFloat(o ?? "0"), l = parseFloat(h ?? "0") / 100, p = parseFloat(s ?? "0") / 100, b = d !== void 0 ? parseFloat(d) : 1, m = (1 - Math.abs(2 * p - 1)) * l, _ = m * (1 - Math.abs(u / 60 % 2 - 1)), M = p - m / 2;
     let x = 0, y = 0, w = 0;
     return u < 60 ? (x = m, y = _) : u < 120 ? (x = _, y = m) : u < 180 ? (y = m, w = _) : u < 240 ? (y = _, w = m) : u < 300 ? (x = _, w = m) : (x = m, w = _), S({
       r: Math.round((x + M) * 255),
       g: Math.round((y + M) * 255),
       b: Math.round((w + M) * 255),
-      a: v
+      a: b
     });
   }
   const i = t.match(
@@ -390,23 +398,23 @@ function C(t, e, r) {
   const i = F(t);
   switch (e) {
     case "hex":
-      return G(i, r);
+      return U(i, r);
     case "rgb":
       return r && t.a < 1 ? `rgb(${i.r} ${i.g} ${i.b} / ${Math.round(t.a * 100) / 100})` : `rgb(${i.r} ${i.g} ${i.b})`;
     case "hsl": {
-      const o = U(i);
+      const o = I(i);
       return r && t.a < 1 ? `hsl(${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}% / ${Math.round(t.a * 100) / 100})` : `hsl(${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}%)`;
     }
     case "hsv":
       return r && t.a < 1 ? `hsva(${Math.round(t.h)}, ${Math.round(t.s)}%, ${Math.round(t.v)}%, ${Math.round(t.a * 100) / 100})` : `hsv(${Math.round(t.h)}, ${Math.round(t.s)}%, ${Math.round(t.v)}%)`;
   }
 }
-var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? L(e, r) : e, h = t.length - 1, s; h >= 0; h--)
+var L = Object.defineProperty, q = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? q(e, r) : e, h = t.length - 1, s; h >= 0; h--)
     (s = t[h]) && (o = (i ? s(e, r, o) : s(o)) || o);
-  return i && o && I(e, r, o), o;
+  return i && o && L(e, r, o), o;
 };
-let a = class extends O(T) {
+let a = class extends O(V) {
   constructor() {
     super(), this.value = "#000000", this.format = "hex", this.opacity = !1, this.swatches = [], this.swatchesOnly = !1, this.disabled = !1, this.name = "", this.inline = !1, this.required = !1, this.labelGradient = "Color gradient", this.labelHue = "Hue", this.labelOpacity = "Opacity", this.labelSwatches = "Preset colors", this.labelSwitchFormat = "Switch color format", this.labelColorValue = "Color value", this.labelPicker = "Color picker", this.labelTrigger = (t) => `Choose color: ${t}`, this._hsv = { h: 0, s: 0, v: 0, a: 1 }, this._open = !1, this._inputValue = "#000000", this._draggingGrid = !1, this._draggingHue = !1, this._draggingOpacity = !1, this._dragRect = null, this._boundPointerMove = this._handlePointerMove.bind(this), this._boundPointerUp = this._handlePointerUp.bind(this), this._boundDocumentClick = this._handleDocumentClick.bind(this);
   }
@@ -495,7 +503,7 @@ let a = class extends O(T) {
     var o;
     const e = this._dragRect ?? ((o = this._gridEl) == null ? void 0 : o.getBoundingClientRect());
     if (!e) return;
-    const r = b((t.clientX - e.left) / e.width, 0, 1), i = b((t.clientY - e.top) / e.height, 0, 1);
+    const r = v((t.clientX - e.left) / e.width, 0, 1), i = v((t.clientY - e.top) / e.height, 0, 1);
     this._hsv = { ...this._hsv, s: r * 100, v: (1 - i) * 100 }, this._commit("drag"), this.requestUpdate();
   }
   // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure
@@ -517,8 +525,8 @@ let a = class extends O(T) {
     }
     (e !== 0 || r !== 0) && (t.preventDefault(), this._hsv = {
       ...this._hsv,
-      s: b(this._hsv.s + e, 0, 100),
-      v: b(this._hsv.v + r, 0, 100)
+      s: v(this._hsv.s + e, 0, 100),
+      v: v(this._hsv.v + r, 0, 100)
     }, this._commit("change"));
   }
   // ─── Hue slider dragging ─────────────────────────────────────────────────
@@ -532,7 +540,7 @@ let a = class extends O(T) {
     var i;
     const e = this._dragRect ?? ((i = this._hueSliderEl) == null ? void 0 : i.getBoundingClientRect());
     if (!e) return;
-    const r = b((t.clientX - e.left) / e.width, 0, 1);
+    const r = v((t.clientX - e.left) / e.width, 0, 1);
     this._hsv = { ...this._hsv, h: r * 360 }, this._commit("drag"), this.requestUpdate();
   }
   // ─── Opacity slider dragging ──────────────────────────────────────────────
@@ -546,7 +554,7 @@ let a = class extends O(T) {
     var i;
     const e = this._dragRect ?? ((i = this._opacitySliderEl) == null ? void 0 : i.getBoundingClientRect());
     if (!e) return;
-    const r = b((t.clientX - e.left) / e.width, 0, 1);
+    const r = v((t.clientX - e.left) / e.width, 0, 1);
     this._hsv = { ...this._hsv, a: r }, this._commit("drag"), this.requestUpdate();
   }
   // ─── Document-level pointer handlers ─────────────────────────────────────
@@ -573,7 +581,7 @@ let a = class extends O(T) {
       this._hsv = { ...this._hsv, h: 360 }, this._commit("change");
       return;
     }
-    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, h: b(this._hsv.h + e, 0, 360) }, this._commit("change"));
+    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, h: v(this._hsv.h + e, 0, 360) }, this._commit("change"));
   }
   /** @internal */
   _handleOpacityKeydown(t) {
@@ -589,7 +597,7 @@ let a = class extends O(T) {
       this._hsv = { ...this._hsv, a: 1 }, this._commit("change");
       return;
     }
-    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, a: b(this._hsv.a + e, 0, 1) }, this._commit("change"));
+    e !== 0 && (t.preventDefault(), this._hsv = { ...this._hsv, a: v(this._hsv.a + e, 0, 1) }, this._commit("change"));
   }
   // ─── Input ───────────────────────────────────────────────────────────────
   // P1-7: Bound to @input (was @change) for real-time color preview while typing
@@ -794,7 +802,7 @@ let a = class extends O(T) {
     `;
   }
 };
-a.styles = [V];
+a.styles = [B, T];
 a.formAssociated = !0;
 n([
   c({ type: String, reflect: !0 })
@@ -871,4 +879,4 @@ a = n([
 export {
   a as H
 };
-//# sourceMappingURL=hx-color-picker-DBaKTVLr.js.map
+//# sourceMappingURL=hx-color-picker-uRc865FJ.js.map