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

package/dist/shared/hx-style-scope-TDnR8H4O.js

@@ -0,0 +1,251 @@
+import { css as C, html as E } from "lit";
+import { property as m, customElement as w } from "lit/decorators.js";
+import { H as _ } from "./helix-element-BNEYeiys.js";
+const v = C`
+  :host {
+    display: contents;
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-style-scope is a transparent layout wrapper (display: contents).
+     It has no visual output of its own. forced-color-adjust: auto (default)
+     is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
+`, y = /* @__PURE__ */ new Map();
+function j(t) {
+  return y.has(t);
+}
+function $(t, i) {
+  y.set(t, i);
+}
+function A(t, i) {
+  const e = `[data-hx-styled="${t}"]`;
+  return g(i, e);
+}
+function u(t, i) {
+  return t[i] ?? "";
+}
+function g(t, i) {
+  const e = [];
+  let n = 0;
+  const r = t.length;
+  for (; n < r; ) {
+    for (; n < r && /\s/.test(u(t, n)); )
+      e.push(u(t, n)), n++;
+    if (n >= r) break;
+    if (u(t, n) === "@") {
+      const d = L(t, n);
+      e.push(P(d.text, i)), n = d.end;
+      continue;
+    }
+    const o = t.indexOf("{", n);
+    if (o === -1) break;
+    const c = t.slice(n, o), s = o + 1, f = b(t, o);
+    if (f === -1) break;
+    const l = t.slice(s, f), x = O(c, i);
+    e.push(`${x}{${l}}`), n = f + 1;
+  }
+  return e.join("");
+}
+function O(t, i) {
+  return t.split(",").map((e) => {
+    const n = e.trim();
+    if (n.startsWith("::slotted(") && n.endsWith(")")) {
+      const r = n.slice(10, -1).trim();
+      return `${i} ${r}`;
+    }
+    return n === ":host" || n.startsWith(":host(") || n.startsWith(":host ") ? n.replace(/^:host(\([^)]*\))?/, i) : `${i} ${n}`;
+  }).join(", ");
+}
+function P(t, i) {
+  const e = /^@(media|supports|layer|container|document)\b/, n = t.indexOf("{");
+  if (n === -1 || !e.test(t.trim()))
+    return t;
+  const r = t.slice(0, n + 1), o = t.lastIndexOf("}"), c = t.slice(n + 1, o), s = t.slice(o);
+  return `${r}${g(c, i)}${s}`;
+}
+function L(t, i) {
+  let e = i;
+  for (; e < t.length && u(t, e) !== "{" && u(t, e) !== ";"; )
+    e++;
+  if (e >= t.length)
+    return { text: t.slice(i), end: t.length };
+  if (u(t, e) === ";")
+    return { text: t.slice(i, e + 1), end: e + 1 };
+  const n = b(t, e);
+  return n === -1 ? { text: t.slice(i), end: t.length } : { text: t.slice(i, n + 1), end: n + 1 };
+}
+function b(t, i) {
+  let e = 0;
+  for (let n = i; n < t.length; n++) {
+    const r = u(t, n);
+    if (r === "{") e++;
+    else if (r === "}" && (e--, e === 0))
+      return n;
+  }
+  return -1;
+}
+const W = [
+  { pattern: /expression\s*\(/i, label: "CSS expression()" },
+  { pattern: /-moz-binding\s*:/i, label: "-moz-binding (XBL injection)" },
+  { pattern: /behavior\s*:/i, label: "behavior: (HTC injection)" },
+  { pattern: /@import\b/i, label: "@import rule" }
+], p = /url\(\s*(['"]?)(.*?)\1\s*\)/gis, B = [
+  "data:",
+  "blob:",
+  "#"
+  // fragment references (e.g. SVG filters)
+];
+function S(t) {
+  let i = "", e = 0;
+  const n = t.length;
+  for (; e < n; ) {
+    const r = t[e];
+    if (r !== "\\") {
+      i += r, e++;
+      continue;
+    }
+    if (e + 1 >= n) {
+      i += r, e++;
+      continue;
+    }
+    const o = t[e + 1];
+    if (o === `
+` || o === "\f") {
+      e += 2;
+      continue;
+    }
+    if (o === "\r") {
+      t[e + 2] === `
+` ? e += 3 : e += 2;
+      continue;
+    }
+    if (o !== void 0 && /[0-9a-fA-F]/.test(o)) {
+      let c = "", s = e + 1;
+      for (; s < n && c.length < 6; ) {
+        const l = t[s];
+        if (l === void 0 || !/[0-9a-fA-F]/.test(l)) break;
+        c += l, s++;
+      }
+      if (s < n) {
+        const l = t[s];
+        l === "\r" && t[s + 1] === `
+` ? s += 2 : (l === " " || l === "	" || l === `
+` || l === "\r" || l === "\f") && s++;
+      }
+      const f = parseInt(c, 16);
+      !Number.isFinite(f) || f === 0 || f >= 55296 && f <= 57343 || f > 1114111 ? i += "�" : i += String.fromCodePoint(f), e = s;
+      continue;
+    }
+    i += o, e += 2;
+  }
+  return i;
+}
+function H(t) {
+  const i = t.trim();
+  if (i === "") return !0;
+  const e = S(i).trim();
+  if (e === "") return !0;
+  if (e.startsWith("//")) return !1;
+  for (const n of B)
+    if (e.startsWith(n)) return !0;
+  return !/^[a-z][a-z0-9+\-.]*:/i.test(e);
+}
+function I(t) {
+  let i = 0, e = null, n = !1;
+  for (let r = 0; r < t.length; r++) {
+    const o = t[r];
+    if (n) {
+      o === "*" && t[r + 1] === "/" && (n = !1, r++);
+      continue;
+    }
+    if (e !== null) {
+      if (o === "\\") {
+        r++;
+        continue;
+      }
+      o === e && (e = null);
+      continue;
+    }
+    if (o === "/" && t[r + 1] === "*") {
+      n = !0, r++;
+      continue;
+    }
+    if (o === '"' || o === "'") {
+      e = o;
+      continue;
+    }
+    if (o === "{")
+      i++;
+    else if (o === "}" && (i--, i < 0))
+      return !1;
+  }
+  return i === 0;
+}
+function R(t, i) {
+  if (!I(t))
+    return null;
+  const e = S(t);
+  for (const { pattern: r, label: o } of W)
+    if (r.test(e))
+      return null;
+  let n;
+  for (p.lastIndex = 0; (n = p.exec(e)) !== null; ) {
+    const r = n[2] ?? "";
+    if (!H(r))
+      return null;
+  }
+  return t;
+}
+function z(t, i) {
+  if (typeof document > "u" || j(t)) return;
+  const e = R(i);
+  if (e === null) return;
+  const n = A(t, e), r = document.createElement("style");
+  r.setAttribute("data-hx-light-styles", t), r.textContent = n, document.head.appendChild(r), $(t, r);
+}
+var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, h = (t, i, e, n) => {
+  for (var r = n > 1 ? void 0 : n ? F(i, e) : i, o = t.length - 1, c; o >= 0; o--)
+    (c = t[o]) && (r = (n ? c(i, e, r) : c(r)) || r);
+  return n && r && D(i, e, r), r;
+};
+let a = class extends _ {
+  constructor() {
+    super(...arguments), this.component = "", this.lightCss = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._applyScope();
+  }
+  updated(t) {
+    (t.has("component") || t.has("lightCss")) && this._applyScope();
+  }
+  /**
+   * Applies the `data-hx-styled` attribute and triggers style injection.
+   * Called on connect and whenever `component` or `lightCss` changes.
+   */
+  _applyScope() {
+    this.component && (this.setAttribute("data-hx-styled", this.component), this.lightCss && z(this.component, this.lightCss));
+  }
+  render() {
+    return E`<slot></slot>`;
+  }
+};
+a.styles = [v];
+h([
+  m({ type: String, reflect: !0 })
+], a.prototype, "component", 2);
+h([
+  m({ type: String, attribute: "light-css" })
+], a.prototype, "lightCss", 2);
+a = h([
+  w("hx-style-scope")
+], a);
+export {
+  a as H
+};
+//# sourceMappingURL=hx-style-scope-TDnR8H4O.js.map

package/dist/shared/hx-style-scope-TDnR8H4O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-style-scope-TDnR8H4O.js","sources":["../../src/components/hx-style-scope/hx-style-scope.styles.ts","../../src/utilities/lightStyleRegistry.ts","../../src/utilities/generateScopedSelectors.ts","../../src/utilities/sanitizeCss.ts","../../src/utilities/injectLightStyles.ts","../../src/components/hx-style-scope/hx-style-scope.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Styles for hx-style-scope.\n *\n * The element acts as a transparent wrapper — `display: contents` removes it\n * from the layout box model so slotted children lay out as if the wrapper\n * were absent. This prevents hx-style-scope from introducing unexpected\n * layout shifts or block-formatting-context changes.\n */\nexport const hxStyleScopeStyles = css`\n  :host {\n    display: contents;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  /* hx-style-scope is a transparent layout wrapper (display: contents).\n     It has no visual output of its own. forced-color-adjust: auto (default)\n     is sufficient. */\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: auto;\n    }\n  }\n`;\n","/**\n * @module lightStyleRegistry\n *\n * A Map-based registry that tracks which component stylesheets have been\n * injected into the document's light DOM. Used by injectLightStyles to\n * deduplicate style injection — each component type is injected at most once\n * per page load.\n *\n * @example\n * ```ts\n * import { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\n *\n * if (!isStyleRegistered('hx-card')) {\n *   const el = document.createElement('style');\n *   el.textContent = css;\n *   document.head.appendChild(el);\n *   registerStyle('hx-card', el);\n * }\n * ```\n */\n\n/**\n * Primary registry mapping component names to their injected HTMLStyleElement.\n * Keyed by component tag name (e.g. `'hx-card'`).\n */\nexport const lightStyleRegistry: Map<string, HTMLStyleElement> = new Map();\n\n/**\n * Returns true if a stylesheet for the given component has already been\n * injected into the document.\n *\n * @param componentName - The component tag name (e.g. `'hx-card'`).\n */\nexport function isStyleRegistered(componentName: string): boolean {\n  return lightStyleRegistry.has(componentName);\n}\n\n/**\n * Records a stylesheet element in the registry for the given component.\n * Called after the element has been appended to the document.\n *\n * @param componentName - The component tag name (e.g. `'hx-card'`).\n * @param el - The HTMLStyleElement that was injected.\n */\nexport function registerStyle(componentName: string, el: HTMLStyleElement): void {\n  lightStyleRegistry.set(componentName, el);\n}\n","/**\n * @module generateScopedSelectors\n *\n * Generates CSS with all selectors scoped under a `[data-hx-styled=\"componentName\"]`\n * attribute selector. This ensures injected light DOM styles only apply to content\n * wrapped in `<hx-style-scope component=\"...\">` and do not leak to the rest of the page.\n *\n * @example\n * ```ts\n * import { generateScopedSelectors } from './generateScopedSelectors.js';\n *\n * const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');\n * // '[data-hx-styled=\"hx-card\"] p { color: red; }'\n * ```\n */\n\n/**\n * Wraps all CSS selectors to be scoped under `[data-hx-styled=\"componentName\"]`.\n *\n * Handles:\n * - Standard selectors: `p { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - `::slotted(*)` patterns: `::slotted(p) { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped\n * - `:host` selectors are replaced with the scope attribute selector\n *\n * @param componentName - The component tag name used as the scope identifier.\n * @param css - The CSS string to transform.\n * @returns The transformed CSS with all selectors scoped.\n */\nexport function generateScopedSelectors(componentName: string, css: string): string {\n  const scopeAttr = `[data-hx-styled=\"${componentName}\"]`;\n  return transformCss(css, scopeAttr);\n}\n\n/**\n * Returns the character at position `i` in `str`, or an empty string if out of bounds.\n * Avoids the `string | undefined` issue from `noUncheckedIndexedAccess`.\n */\nfunction charAt(str: string, i: number): string {\n  return str[i] ?? '';\n}\n\n/**\n * Recursively transforms CSS text, scoping all selectors under the given\n * attribute selector prefix.\n *\n * @param css - The CSS text to transform.\n * @param scopeAttr - The attribute selector to prepend (e.g. `[data-hx-styled=\"hx-card\"]`).\n * @returns The scoped CSS string.\n */\nfunction transformCss(css: string, scopeAttr: string): string {\n  const result: string[] = [];\n  let i = 0;\n  const len = css.length;\n\n  while (i < len) {\n    // Skip whitespace\n    while (i < len && /\\s/.test(charAt(css, i))) {\n      result.push(charAt(css, i));\n      i++;\n    }\n\n    if (i >= len) break;\n\n    // Check for at-rule (e.g. @media, @supports, @keyframes)\n    if (charAt(css, i) === '@') {\n      const atBlock = extractAtRule(css, i);\n      result.push(transformAtRule(atBlock.text, scopeAttr));\n      i = atBlock.end;\n      continue;\n    }\n\n    // Extract a selector block up to the opening brace\n    const selectorEnd = css.indexOf('{', i);\n    if (selectorEnd === -1) break;\n\n    const selectorRaw = css.slice(i, selectorEnd);\n    const bodyStart = selectorEnd + 1;\n    const bodyEnd = findMatchingBrace(css, selectorEnd);\n\n    if (bodyEnd === -1) break;\n\n    const body = css.slice(bodyStart, bodyEnd);\n    const scopedSelector = scopeSelector(selectorRaw, scopeAttr);\n    result.push(`${scopedSelector}{${body}}`);\n    i = bodyEnd + 1;\n  }\n\n  return result.join('');\n}\n\n/**\n * Scopes a raw selector string under the given attribute selector.\n * Handles comma-separated selectors, `::slotted()`, and `:host`.\n *\n * @param selectorRaw - The raw selector string (may be comma-separated).\n * @param scopeAttr - The attribute selector prefix.\n * @returns The scoped selector string.\n */\nfunction scopeSelector(selectorRaw: string, scopeAttr: string): string {\n  return selectorRaw\n    .split(',')\n    .map((part) => {\n      const trimmed = part.trim();\n\n      // Replace ::slotted(*) with a direct descendant selector\n      if (trimmed.startsWith('::slotted(') && trimmed.endsWith(')')) {\n        const inner = trimmed.slice('::slotted('.length, -1).trim();\n        return `${scopeAttr} ${inner}`;\n      }\n\n      // Replace :host with the scope attribute selector\n      if (trimmed === ':host' || trimmed.startsWith(':host(') || trimmed.startsWith(':host ')) {\n        return trimmed.replace(/^:host(\\([^)]*\\))?/, scopeAttr);\n      }\n\n      // Standard selector — prepend scope\n      return `${scopeAttr} ${trimmed}`;\n    })\n    .join(', ');\n}\n\n/**\n * Handles transformation of an at-rule block. For container at-rules\n * (`@media`, `@supports`, `@layer`, `@container`) the inner rules are scoped.\n * Non-container at-rules (e.g. `@keyframes`, `@charset`) are passed through unchanged.\n *\n * @param atRuleText - The full at-rule text including its block.\n * @param scopeAttr - The attribute selector prefix.\n * @returns The transformed at-rule text.\n */\nfunction transformAtRule(atRuleText: string, scopeAttr: string): string {\n  const containerAtRules = /^@(media|supports|layer|container|document)\\b/;\n  const braceIndex = atRuleText.indexOf('{');\n\n  if (braceIndex === -1 || !containerAtRules.test(atRuleText.trim())) {\n    return atRuleText;\n  }\n\n  const head = atRuleText.slice(0, braceIndex + 1);\n  const innerEnd = atRuleText.lastIndexOf('}');\n  const inner = atRuleText.slice(braceIndex + 1, innerEnd);\n  const tail = atRuleText.slice(innerEnd);\n\n  return `${head}${transformCss(inner, scopeAttr)}${tail}`;\n}\n\n/**\n * Extracts a complete at-rule (potentially with a block) starting at index `start`.\n * Returns the text and the end index.\n */\nfunction extractAtRule(css: string, start: number): { text: string; end: number } {\n  // Find either ';' (simple at-rule) or the matching '{...}' (block at-rule)\n  let i = start;\n  while (i < css.length && charAt(css, i) !== '{' && charAt(css, i) !== ';') {\n    i++;\n  }\n\n  if (i >= css.length) {\n    return { text: css.slice(start), end: css.length };\n  }\n\n  if (charAt(css, i) === ';') {\n    return { text: css.slice(start, i + 1), end: i + 1 };\n  }\n\n  // Block at-rule — find matching closing brace\n  const end = findMatchingBrace(css, i);\n  if (end === -1) {\n    return { text: css.slice(start), end: css.length };\n  }\n\n  return { text: css.slice(start, end + 1), end: end + 1 };\n}\n\n/**\n * Finds the index of the closing `}` that matches the `{` at `openIndex`.\n * Returns -1 if no matching brace is found.\n */\nfunction findMatchingBrace(css: string, openIndex: number): number {\n  let depth = 0;\n  for (let i = openIndex; i < css.length; i++) {\n    const ch = charAt(css, i);\n    if (ch === '{') depth++;\n    else if (ch === '}') {\n      depth--;\n      if (depth === 0) return i;\n    }\n  }\n  return -1;\n}\n","/**\n * @module sanitizeCss\n *\n * Validates and sanitizes a CSS string before injection into the document.\n * Prevents CSS injection attacks including scope escape via unbalanced braces,\n * external resource loading via `url()` / `@import`, and legacy browser\n * exploits (`expression()`, `-moz-binding`, `behavior:`).\n *\n * Returns the CSS string unchanged if it passes all checks, or `null` if\n * the input is rejected. Callers should treat a `null` return as a hard\n * rejection — the CSS must NOT be injected.\n */\n\nimport { devWarn } from '../utils/dev-warn.js';\n\n/** Patterns that are never allowed in injected CSS. */\nconst BLOCKED_PATTERNS: ReadonlyArray<{ pattern: RegExp; label: string }> = [\n  { pattern: /expression\\s*\\(/i, label: 'CSS expression()' },\n  { pattern: /-moz-binding\\s*:/i, label: '-moz-binding (XBL injection)' },\n  { pattern: /behavior\\s*:/i, label: 'behavior: (HTC injection)' },\n  { pattern: /@import\\b/i, label: '@import rule' },\n];\n\n/**\n * Matches `url(...)` values. Captures the content inside the parens.\n * Handles both quoted and unquoted forms. The `s` (dotAll) flag allows the\n * content to span newlines so CSS line-continuation escapes (`\\<LF>`) inside\n * `url()` do not slip past the matcher entirely — those continuations are\n * part of the url payload the CSS parser will still evaluate.\n */\nconst URL_PATTERN = /url\\(\\s*(['\"]?)(.*?)\\1\\s*\\)/gis;\n\n/**\n * Allowed URI schemes inside `url()`. Relative paths (no scheme) are also\n * allowed — only explicit external schemes are blocked.\n */\nconst ALLOWED_URL_PREFIXES: ReadonlyArray<string> = [\n  'data:',\n  'blob:',\n  '#', // fragment references (e.g. SVG filters)\n];\n\n/**\n * Decodes CSS escape sequences found inside `url()` payloads to defeat\n * encoding-based bypasses of the scheme check.\n *\n * Three escape forms per CSS Syntax Level 3 are handled:\n *\n * 1. Hex escape: `\\` followed by 1-6 hex digits, optionally terminated by a\n *    single whitespace character. Decodes to the codepoint\n *    (e.g. `\\3a` → `:`, `\\2f\\2f` → `//`, `\\68\\74\\74\\70\\3a` → `http:`).\n * 2. Line continuation: `\\` followed by a newline (`\\n`, `\\r\\n`, `\\r`, or\n *    `\\f`). Decodes to the empty string — the browser strips these and the\n *    remaining characters are concatenated, so `http\\<LF>:xyz` becomes\n *    `http:xyz`.\n * 3. Identity escape: `\\` followed by any other character. Decodes to the\n *    literal character (e.g. `\\:` → `:`).\n *\n * This intentionally implements only the subset of CSS escape handling that\n * the parser applies to `url()` token contents. It is not a full CSS lexer.\n */\nfunction decodeCssEscapes(input: string): string {\n  let out = '';\n  let i = 0;\n  const len = input.length;\n\n  while (i < len) {\n    const ch = input[i];\n\n    if (ch !== '\\\\') {\n      out += ch;\n      i++;\n      continue;\n    }\n\n    // Trailing lone backslash — keep it literal.\n    if (i + 1 >= len) {\n      out += ch;\n      i++;\n      continue;\n    }\n\n    const next = input[i + 1];\n\n    // Line continuation: \\\\r\\n, \\\\n, \\\\r, \\\\f all decode to empty string.\n    if (next === '\\n' || next === '\\f') {\n      i += 2;\n      continue;\n    }\n    if (next === '\\r') {\n      // Handle CRLF as a single continuation.\n      if (input[i + 2] === '\\n') {\n        i += 3;\n      } else {\n        i += 2;\n      }\n      continue;\n    }\n\n    // Hex escape: up to 6 hex digits, optional single whitespace terminator.\n    if (next !== undefined && /[0-9a-fA-F]/.test(next)) {\n      let hex = '';\n      let j = i + 1;\n      while (j < len && hex.length < 6) {\n        const hexCh = input[j];\n        if (hexCh === undefined || !/[0-9a-fA-F]/.test(hexCh)) break;\n        hex += hexCh;\n        j++;\n      }\n      // Consume a single optional whitespace terminator per CSS spec.\n      // CRLF is treated as one whitespace token.\n      if (j < len) {\n        const term = input[j];\n        if (term === '\\r' && input[j + 1] === '\\n') {\n          j += 2;\n        } else if (\n          term === ' ' ||\n          term === '\\t' ||\n          term === '\\n' ||\n          term === '\\r' ||\n          term === '\\f'\n        ) {\n          j++;\n        }\n      }\n      const codepoint = parseInt(hex, 16);\n      // Spec: a codepoint of 0 or a surrogate or above max Unicode is replaced\n      // with U+FFFD. We replicate that defensively.\n      if (\n        !Number.isFinite(codepoint) ||\n        codepoint === 0 ||\n        (codepoint >= 0xd800 && codepoint <= 0xdfff) ||\n        codepoint > 0x10ffff\n      ) {\n        out += '\\uFFFD';\n      } else {\n        out += String.fromCodePoint(codepoint);\n      }\n      i = j;\n      continue;\n    }\n\n    // Identity escape: \\X decodes to literal X (for any non-hex, non-newline X).\n    out += next;\n    i += 2;\n  }\n\n  return out;\n}\n\n/**\n * Returns true if a `url()` value is safe for injection.\n * Safe values are: relative paths, data: URIs, blob: URIs, and fragment refs.\n * Anything with an explicit protocol scheme (http:, https:, ftp:, etc.) is blocked.\n *\n * The payload is CSS-escape-decoded before any scheme / prefix check is\n * applied. `sanitizeCss` pre-decodes the full stylesheet so this decode is\n * normally idempotent, but the defense is retained here so `isUrlSafe` remains\n * correct in isolation and survives any future caller that passes raw payloads.\n */\nfunction isUrlSafe(urlValue: string): boolean {\n  const trimmedRaw = urlValue.trim();\n\n  // Empty url() is harmless. Check this on the raw (pre-decode) value so a\n  // string consisting only of whitespace escapes still short-circuits cleanly\n  // after decoding — see below.\n  if (trimmedRaw === '') return true;\n\n  // Decode CSS escapes first so the scheme / prefix checks run against the\n  // same string the browser's CSS parser will materialize.\n  const decoded = decodeCssEscapes(trimmedRaw).trim();\n\n  // A url() that decodes to empty (e.g. only line-continuations) is harmless.\n  if (decoded === '') return true;\n\n  // Protocol-relative URLs (//host/path) resolve against the page's current\n  // protocol and load from an external host — same risk as explicit http://.\n  // Must reject before the allow-prefix / scheme checks, since they have no colon.\n  if (decoded.startsWith('//')) return false;\n\n  // Allow explicitly safe prefixes\n  for (const prefix of ALLOWED_URL_PREFIXES) {\n    if (decoded.startsWith(prefix)) return true;\n  }\n\n  // Block any value containing a protocol scheme (e.g. http://, https://, ftp://)\n  if (/^[a-z][a-z0-9+\\-.]*:/i.test(decoded)) {\n    return false;\n  }\n\n  // No scheme — treat as relative path, which is safe\n  return true;\n}\n\n/**\n * Checks whether braces in the CSS string are balanced.\n * Unbalanced braces can be used to escape scoped selectors and inject global\n * styles into the document. Braces inside strings (`\"...\"`, `'...'`) and block\n * comments are ignored so legitimate content like `content: \"}\"` or SVG data\n * URIs (`url(\"data:image/svg+xml,<svg>{...}</svg>\")`) does not trigger a false\n * rejection.\n */\nfunction areBracesBalanced(css: string): boolean {\n  let depth = 0;\n  let quote: '\"' | \"'\" | null = null;\n  let inComment = false;\n\n  for (let i = 0; i < css.length; i++) {\n    const ch = css[i];\n\n    if (inComment) {\n      if (ch === '*' && css[i + 1] === '/') {\n        inComment = false;\n        i++;\n      }\n      continue;\n    }\n\n    if (quote !== null) {\n      if (ch === '\\\\') {\n        // Skip the escaped character (including an escaped quote).\n        i++;\n        continue;\n      }\n      if (ch === quote) {\n        quote = null;\n      }\n      continue;\n    }\n\n    if (ch === '/' && css[i + 1] === '*') {\n      inComment = true;\n      i++;\n      continue;\n    }\n\n    if (ch === '\"' || ch === \"'\") {\n      quote = ch;\n      continue;\n    }\n\n    if (ch === '{') {\n      depth++;\n    } else if (ch === '}') {\n      depth--;\n      // A negative depth means a closing brace appeared before its opener,\n      // which is a clear scope-escape attempt.\n      if (depth < 0) return false;\n    }\n  }\n  return depth === 0;\n}\n\n/**\n * Sanitizes a CSS string for safe injection into `document.head`.\n *\n * Rejects CSS that contains:\n * - Unbalanced braces (scope escape)\n * - `url()` values pointing to external domains\n * - `@import` rules\n * - `expression()` (IE CSS expressions)\n * - `-moz-binding` (XBL injection)\n * - `behavior:` (HTC injection)\n *\n * ## Decode asymmetry\n *\n * Brace balance runs on the raw input (its scanner is string / escape aware).\n * `BLOCKED_PATTERNS` and `URL_PATTERN` run on a post-decode copy so that\n * escape-encoded idents (`@\\69mport`, `u\\72l(...)`) cannot smuggle a token\n * past a literal-byte regex. The decode is deliberately context-blind — the\n * tradeoff is a narrow false-positive surface: legitimate CSS that\n * hex-escapes one of the blocked sequences inside a string or comment\n * (e.g. `content: \"\\40 import notes\"` decodes to `content: \"@import notes\"`)\n * will be rejected even though the browser's tokenizer would never promote\n * it to an at-rule. This is intentional and accepted — the security gain\n * from closing the ident-escape bypass vastly outweighs the cost of a\n * vanishingly rare user-authored escape-encoded blocked string.\n *\n * @param css - The raw CSS string to validate.\n * @param componentName - The component name, used in dev warnings.\n * @returns The original CSS if safe, or `null` if rejected.\n */\nexport function sanitizeCss(css: string, componentName: string): string | null {\n  // Check brace balance on the raw input — the balance scanner already tracks\n  // string quoting and backslash escapes, so it does not need pre-decoded CSS\n  // and is safer run against the source bytes.\n  if (!areBracesBalanced(css)) {\n    devWarn(\n      componentName,\n      'light-css rejected: unbalanced braces detected. ' +\n        'This may indicate a CSS injection attempt.',\n    );\n    return null;\n  }\n\n  // Decode CSS escape sequences before the token-level checks.\n  // The CSS tokenizer decodes escapes inside <ident-token>, <at-keyword-token>,\n  // and <url-token> before comparing against rule/function names (CSS Syntax\n  // Level 3 §4.3.3–§4.3.7). So `@\\69mport` tokenizes as `@import` and\n  // `u\\72l(http://evil/x)` tokenizes as `url(http://evil/x)` — both would slip\n  // past regex checks that match only the literal bytes. Decoding first forces\n  // our patterns to see what the browser will actually tokenize.\n  const decoded = decodeCssEscapes(css);\n\n  // Check for blocked patterns against the decoded CSS.\n  for (const { pattern, label } of BLOCKED_PATTERNS) {\n    if (pattern.test(decoded)) {\n      devWarn(componentName, `light-css rejected: ${label} is not allowed in injected styles.`);\n      return null;\n    }\n  }\n\n  // Validate all url() values on the decoded CSS — block external domains.\n  let urlMatch: RegExpExecArray | null;\n  URL_PATTERN.lastIndex = 0;\n  while ((urlMatch = URL_PATTERN.exec(decoded)) !== null) {\n    const urlValue = urlMatch[2] ?? '';\n    if (!isUrlSafe(urlValue)) {\n      devWarn(\n        componentName,\n        'light-css rejected: url() with external domain detected. ' +\n          'Only relative paths, data:, and blob: URIs are allowed.',\n      );\n      return null;\n    }\n  }\n\n  return css;\n}\n","/**\n * @module injectLightStyles\n *\n * Core utility for injecting scoped `<style>` elements into `document.head`\n * to style light DOM slotted content in HELiX components. Uses the\n * `lightStyleRegistry` to deduplicate — each component type is injected at\n * most once per page lifetime.\n *\n * This is the primary mechanism for ensuring Drupal-slotted content inherits\n * proper typography and spacing when rendered into HELiX components.\n *\n * @example\n * ```ts\n * import { injectLightStyles } from '../../utilities/injectLightStyles.js';\n *\n * // In connectedCallback:\n * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');\n * ```\n */\n\nimport { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\nimport { generateScopedSelectors } from './generateScopedSelectors.js';\nimport { sanitizeCss } from './sanitizeCss.js';\n\n/**\n * Injects a scoped `<style>` element into `document.head` for light DOM content\n * belonging to `componentName`. The CSS is automatically scoped via\n * `generateScopedSelectors` so styles only apply inside\n * `[data-hx-styled=\"componentName\"]` wrappers.\n *\n * Safe to call multiple times — subsequent calls for the same `componentName`\n * are no-ops (deduplication via `lightStyleRegistry`).\n *\n * No-op in SSR environments where `document` is not defined.\n *\n * @param componentName - The component tag name used as the scope identifier\n *   (e.g. `'hx-card'`). Must be unique per component type.\n * @param css - The raw CSS to scope and inject. Selectors will be prefixed with\n *   `[data-hx-styled=\"componentName\"]`.\n */\nexport function injectLightStyles(componentName: string, css: string): void {\n  if (typeof document === 'undefined') return;\n\n  if (isStyleRegistered(componentName)) return;\n\n  const safeCss = sanitizeCss(css, componentName);\n  if (safeCss === null) return;\n\n  const scopedCss = generateScopedSelectors(componentName, safeCss);\n\n  const styleEl = document.createElement('style');\n  styleEl.setAttribute('data-hx-light-styles', componentName);\n  styleEl.textContent = scopedCss;\n\n  document.head.appendChild(styleEl);\n  registerStyle(componentName, styleEl);\n}\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { hxStyleScopeStyles } from './hx-style-scope.styles.js';\nimport { injectLightStyles } from '../../utilities/injectLightStyles.js';\n\n/**\n * A transparent wrapper component that injects scoped light DOM styles for its\n * slotted children. Designed for use in Drupal Twig templates where slotted\n * content lives in the light DOM and cannot inherit Shadow DOM styles.\n *\n * On connection, the component:\n * 1. Sets `data-hx-styled` on itself so scoped CSS selectors resolve correctly.\n * 2. Calls `injectLightStyles` to inject a `<style>` into `document.head` — once\n *    per component type, deduplicated via `lightStyleRegistry`.\n *\n * The element renders as `display: contents` so it does not affect layout.\n *\n * @summary Scoped light DOM style injection wrapper for Drupal-slotted content.\n *\n * @tag hx-style-scope\n *\n * @slot - Default slot for any light DOM content that should receive scoped styles.\n *\n * @example\n * ```html\n * <hx-style-scope component=\"hx-card\">\n *   <p>This paragraph will receive hx-card light DOM styles.</p>\n * </hx-style-scope>\n * ```\n *\n * @example Drupal Twig usage via macro\n * ```twig\n * {% import '@helix/hx-style-scope.macro.twig' as hx %}\n * {{ hx.scope('hx-card', content) }}\n * ```\n */\n@customElement('hx-style-scope')\nexport class HxStyleScope extends HelixElement {\n  static override styles = [hxStyleScopeStyles];\n\n  /**\n   * The component tag name whose light DOM styles should be injected.\n   * Must match a registered component name (e.g. `'hx-card'`).\n   *\n   * When set, the element also applies `data-hx-styled` to itself so that\n   * scoped CSS selectors generated by `generateScopedSelectors` resolve\n   * correctly against slotted child elements.\n   *\n   * @attr component\n   */\n  @property({ type: String, reflect: true })\n  component: string = '';\n\n  /**\n   * The CSS to inject as scoped light DOM styles. When provided alongside\n   * `component`, this CSS will be scoped under `[data-hx-styled=\"component\"]`\n   * and injected into `document.head` (once per component type).\n   *\n   * If omitted, `injectLightStyles` is still called but with an empty string,\n   * which is a no-op for actual style injection.\n   *\n   * @attr light-css\n   */\n  @property({ type: String, attribute: 'light-css' })\n  lightCss: string = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._applyScope();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('component') || changed.has('lightCss')) {\n      this._applyScope();\n    }\n  }\n\n  /**\n   * Applies the `data-hx-styled` attribute and triggers style injection.\n   * Called on connect and whenever `component` or `lightCss` changes.\n   */\n  private _applyScope(): void {\n    if (!this.component) return;\n\n    // Set the scoping attribute so CSS selectors from generateScopedSelectors work.\n    this.setAttribute('data-hx-styled', this.component);\n\n    if (this.lightCss) {\n      injectLightStyles(this.component, this.lightCss);\n    }\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-style-scope': HxStyleScope;\n  }\n}\n"],"names":["hxStyleScopeStyles","css","lightStyleRegistry","isStyleRegistered","componentName","registerStyle","el","generateScopedSelectors","scopeAttr","transformCss","charAt","str","result","i","len","atBlock","extractAtRule","transformAtRule","selectorEnd","selectorRaw","bodyStart","bodyEnd","findMatchingBrace","body","scopedSelector","scopeSelector","part","trimmed","inner","atRuleText","containerAtRules","braceIndex","head","innerEnd","tail","start","end","openIndex","depth","ch","BLOCKED_PATTERNS","URL_PATTERN","ALLOWED_URL_PREFIXES","decodeCssEscapes","input","out","next","hex","j","hexCh","term","codepoint","isUrlSafe","urlValue","trimmedRaw","decoded","prefix","areBracesBalanced","quote","inComment","sanitizeCss","pattern","label","urlMatch","injectLightStyles","safeCss","scopedCss","styleEl","HxStyleScope","HelixElement","changed","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-switch-BdxKN9WM.js → hx-switch-DqOD9JR7.js}

@@ -1,11 +1,11 @@
-import { css as x, nothing as l, html as c } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as s, query as _, state as m, customElement as p } from "lit/decorators.js";
-import { classMap as w } from "lit/directives/class-map.js";
+import { css as x, nothing as c, html as l } from "lit";
+import { property as i, query as _, state as m, customElement as w } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { H as b } from "./helix-element-BJh1Ffvi.js";
-import { c as v } from "./id-counter-PTgF-zcG.js";
-const f = x`
+import { F as b } from "./FormMixin-B8PXk5RQ.js";
+import { H as f } from "./helix-element-BNEYeiys.js";
+import { c as v } from "./id-counter-DuX8vsui.js";
+const g = x`
   :host {
     display: block;
   }
@@ -25,7 +25,7 @@ const f = x`
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-switch-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height.
@@ -48,7 +48,7 @@ const f = x`
     border: none;
     padding: 0;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -144,7 +144,7 @@ const f = x`
   .switch__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -160,7 +160,7 @@ const f = x`
 
   .switch__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -237,37 +237,21 @@ const f = x`
     }
   }
 `;
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (t, r, o, a) => {
-  for (var h = a > 1 ? void 0 : a ? k(r, o) : r, n = t.length - 1, d; n >= 0; n--)
+var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (t, r, o, a) => {
+  for (var h = a > 1 ? void 0 : a ? y(r, o) : r, n = t.length - 1, d; n >= 0; n--)
     (d = t[n]) && (h = (a ? d(r, o, h) : d(h)) || h);
-  return a && h && g(r, o, h), h;
+  return a && h && k(r, o, h), h;
 };
-const y = v("hx-switch");
-let e = class extends b {
+const z = v("hx-switch");
+let e = class extends b(f) {
   constructor() {
-    super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.size = "md", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this._hasErrorSlot = !1, this._hasDefaultSlot = !1, this._switchId = y(), this._labelId = `${this._switchId}-label`, this._helpTextId = `${this._switchId}-help`, this._errorId = `${this._switchId}-error`;
+    super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.size = "md", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this._hasErrorSlot = !1, this._hasDefaultSlot = !1, this._switchId = z(), this._labelId = `${this._switchId}-label`, this._helpTextId = `${this._switchId}-help`, this._errorId = `${this._switchId}-error`;
   }
   // ─── Lifecycle ───
   updated(t) {
-    super.updated(t), (t.has("checked") || t.has("value")) && (this._internals.setFormValue(this.checked ? this.value : null), this._updateValidity()), t.has("required") && this._updateValidity();
+    super.updated(t), (t.has("checked") || t.has("value")) && this._internals.setFormValue(this.checked ? this.value : null);
   }
   // ─── Form Integration ───
-  /** Returns the validation message. */
-  get validationMessage() {
-    return this._internals.validationMessage;
-  }
-  /** Returns the ValidityState object. */
-  get validity() {
-    return this._internals.validity;
-  }
-  /** Checks whether the switch satisfies its constraints. */
-  checkValidity() {
-    return this._internals.checkValidity();
-  }
-  /** Reports validity and shows the browser's constraint validation UI. */
-  reportValidity() {
-    return this._internals.reportValidity();
-  }
   /** Recalculates and sets the validity state based on required and checked. */
   /** @internal */
   _updateValidity() {
@@ -278,7 +262,7 @@ let e = class extends b {
     ) : this._internals.setValidity({});
   }
   _onFormReset() {
-    this.checked = !1, this._internals.setFormValue(null);
+    this.checked = !1, this._internals.setFormValue(null), this._resetInteractionState();
   }
   _onFormStateRestore(t, r) {
     typeof t == "string" && (this.checked = t === this.value);
@@ -303,7 +287,7 @@ let e = class extends b {
   /** Toggles checked state and dispatches hx-change event. */
   /** @internal */
   _toggle() {
-    this.disabled || (this.checked = !this.checked, this.dispatchEvent(
+    this.disabled || (this.checked = !this.checked, this._handleInteractionInput(), this.dispatchEvent(
       new CustomEvent("hx-change", {
         bubbles: !0,
         composed: !0,
@@ -339,8 +323,8 @@ let e = class extends b {
       t || this._hasErrorSlot ? this._errorId : null,
       this.helpText && !t ? this._helpTextId : null
     ].filter(Boolean).join(" ") || void 0;
-    return c`
-      <div part="switch" class=${w(o)}>
+    return l`
+      <div part="switch" class=${p(o)}>
         <div class="switch__control-row">
           <button
             part="track"
@@ -351,8 +335,8 @@ let e = class extends b {
             aria-checked=${this.checked ? "true" : "false"}
             aria-labelledby=${u(r ? this._labelId : void 0)}
             aria-describedby=${u(a)}
-            aria-invalid=${t ? "true" : l}
-            aria-required=${this.required ? "true" : l}
+            aria-invalid=${t ? "true" : c}
+            aria-required=${this.required ? "true" : c}
             ?disabled=${this.disabled}
             @click=${this._handleClick}
             @keydown=${this._handleKeyDown}
@@ -361,70 +345,70 @@ let e = class extends b {
           </button>
 
           <label part="label" class="switch__label" id=${this._labelId} for=${this._switchId}>
-            <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required ? c`<span class="switch__required-marker" aria-hidden="true">*</span>` : l}
+            <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required ? l`<span class="switch__required-marker" aria-hidden="true">*</span>` : c}
           </label>
         </div>
 
         <slot name="error" @slotchange=${this._handleErrorSlotChange}>
-          ${t ? c`<div part="error" class="switch__error" id=${this._errorId} role="alert">
+          ${t ? l`<div part="error" class="switch__error" id=${this._errorId} role="alert">
                 ${this.error}
-              </div>` : l}
+              </div>` : c}
         </slot>
 
-        ${this.helpText && !t ? c`
+        ${this.helpText && !t ? l`
               <div part="help-text" class="switch__help-text" id=${this._helpTextId}>
                 <slot name="help-text">${this.helpText}</slot>
               </div>
-            ` : l}
+            ` : c}
       </div>
     `;
   }
 };
-e.styles = [f];
+e.styles = [g];
 e.formAssociated = !0;
-i([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "checked", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "required", 2);
-i([
-  s({ type: String, reflect: !0 })
+s([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "name", 2);
-i([
-  s({ type: String, reflect: !0 })
+s([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "value", 2);
-i([
-  s({ type: String })
+s([
+  i({ type: String })
 ], e.prototype, "label", 2);
-i([
-  s({ type: String, reflect: !0, attribute: "hx-size" })
+s([
+  i({ type: String, reflect: !0, attribute: "hx-size" })
 ], e.prototype, "size", 2);
-i([
-  s({ type: String })
+s([
+  i({ type: String })
 ], e.prototype, "error", 2);
-i([
-  s({ type: String, attribute: "help-text" })
+s([
+  i({ type: String, attribute: "help-text" })
 ], e.prototype, "helpText", 2);
-i([
-  s({ attribute: "required-message" })
+s([
+  i({ attribute: "required-message" })
 ], e.prototype, "requiredMessage", 2);
-i([
+s([
   _(".switch__track")
 ], e.prototype, "_trackEl", 2);
-i([
+s([
   m()
 ], e.prototype, "_hasErrorSlot", 2);
-i([
+s([
   m()
 ], e.prototype, "_hasDefaultSlot", 2);
-e = i([
-  p("hx-switch")
+e = s([
+  w("hx-switch")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-BdxKN9WM.js.map
+//# sourceMappingURL=hx-switch-DqOD9JR7.js.map

package/dist/shared/hx-switch-DqOD9JR7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-switch-DqOD9JR7.js","sources":["../../src/components/hx-switch/hx-switch.styles.ts","../../src/components/hx-switch/hx-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSwitchStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* --- Layout --- */\n\n  .switch {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-switch-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height.\n     The track itself is smaller visually, but the row must meet the\n     interactive touch target threshold for all size variants. */\n  .switch__control-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  /* --- Track --- */\n\n  .switch__track {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    border: none;\n    padding: 0;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    outline: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .switch__track:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-switch-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .switch--checked .switch__track {\n    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* --- Thumb --- */\n\n  .switch__thumb {\n    position: absolute;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\n    box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* --- Size: sm (track 32x18, thumb 14px) --- */\n\n  .switch--sm .switch__track {\n    width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\n    height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\n  }\n\n  .switch--sm .switch__thumb {\n    width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n    height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--sm.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\n  }\n\n  /* --- Size: md (track 40x22, thumb 18px) --- */\n\n  .switch--md .switch__track {\n    width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\n    height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\n  }\n\n  .switch--md .switch__thumb {\n    width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n    height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--md.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\n  }\n\n  /* --- Size: lg (track 48x26, thumb 22px) --- */\n\n  .switch--lg .switch__track {\n    width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\n    height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\n  }\n\n  .switch--lg .switch__thumb {\n    width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n    height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--lg.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\n  }\n\n  /* --- Label --- */\n\n  .switch__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .switch__required-marker {\n    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* --- Help Text & Error --- */\n\n  .switch__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .switch__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* --- Reduced Motion --- */\n\n  @media (prefers-reduced-motion: reduce) {\n    .switch__track,\n    .switch__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .switch__track {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      border: 2px solid ButtonText;\n    }\n\n    .switch__track:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .switch__thumb {\n      background-color: ButtonText;\n      box-shadow: none;\n    }\n\n    .switch--checked .switch__track {\n      background-color: Highlight;\n      border-color: Highlight;\n    }\n\n    .switch--checked .switch__thumb {\n      background-color: HighlightText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .switch__track {\n      border-color: GrayText;\n      background-color: ButtonFace;\n    }\n\n    :host([disabled]) .switch__thumb {\n      background-color: GrayText;\n    }\n\n    :host([disabled]) .switch__label {\n      color: GrayText;\n    }\n\n    .switch__label {\n      color: CanvasText;\n    }\n\n    .switch__help-text {\n      color: GrayText;\n    }\n\n    .switch__error {\n      color: LinkText;\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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixSwitchStyles } from './hx-switch.styles.js';\n\nconst _nextSwitchId = createIdCounter('hx-switch');\n\n/** Detail for the hx-change event dispatched by hx-switch. */\nexport interface HxSwitchChangeDetail {\n  checked: boolean;\n  value: string;\n}\n\n/**\n * A toggle switch component for on/off states.\n *\n * Uses `role=\"switch\"` with `aria-checked` to convey toggle state.\n * Supports keyboard activation via Space key (per ARIA APG switch pattern).\n * Label association is handled through `aria-labelledby`, and\n * error/help text are linked via `aria-describedby`.\n *\n * @summary Form-associated toggle switch with label, error, and help text.\n *\n * @tag hx-switch\n *\n * @slot - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the switch is toggled. Boolean-selection controls (`hx-switch`, `hx-checkbox`) include both `checked` (boolean state) and `value` (form value) in the detail; text-value controls (`hx-text-input`, `hx-combobox`, `hx-select`) emit only `{value}`.\n *\n * @csspart switch - The switch container (track + thumb wrapper).\n * @csspart track - The track background element.\n * @csspart thumb - The sliding thumb element.\n * @csspart label - The label text element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-switch-track-bg=var(--hx-color-neutral-300)] - Track background color.\n * @cssprop [--hx-switch-track-checked-bg=var(--hx-color-primary-500)] - Track background when checked.\n * @cssprop [--hx-switch-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-switch-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-switch-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-switch-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-switch-error-color=var(--hx-color-error-500)] - Error message color.\n * @cssprop [--hx-switch-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-switch')\nexport class HelixSwitch extends FormMixin(HelixElement) {\n  static override styles = [helixSwitchStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * Whether the switch is toggled on.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the switch is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the switch is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the switch, used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The value submitted when the switch is checked.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = 'on';\n\n  /**\n   * The visible label text for the switch.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Size variant of the switch.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Error message to display. When set, the switch enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the switch for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Recalculates and sets the validity state based on required and checked. */\n  /** @internal */\n  override _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._trackEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  protected override _onFormReset(): void {\n    this.checked = false;\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.checked = state === this.value;\n    }\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** Reference to the native button element acting as the switch track.  * @internal\n   */\n  @query('.switch__track')\n  private _trackEl: HTMLButtonElement | null | undefined;\n\n  /** Whether the error slot has assigned content. */\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n\n  /** Whether the default slot has assigned content (slotted label). */\n  /** @internal */\n  @state() private _hasDefaultSlot = false;\n\n  // ─── Slot Handlers ───\n\n  /** Updates _hasErrorSlot when error slot content changes. */\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** Updates _hasDefaultSlot when default slot content changes. */\n  /** @internal */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasDefaultSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** Toggles checked state and dispatches hx-change event. */\n  /** @internal */\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this._handleInteractionInput();\n\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  /** Handles click events on the track. */\n  /** @internal */\n  private _handleClick(): void {\n    this._toggle();\n  }\n\n  /** Handles keydown events — Space toggles the switch per ARIA APG. */\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the switch track element. */\n  override focus(options?: FocusOptions): void {\n    this._trackEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  /** Unique ID for this switch instance, used for ARIA associations. */\n  /** @internal */\n  private _switchId = _nextSwitchId();\n  /** ID for the label element, referenced by aria-labelledby. */\n  /** @internal */\n  private _labelId = `${this._switchId}-label`;\n  /** ID for the help text element, referenced by aria-describedby. */\n  /** @internal */\n  private _helpTextId = `${this._switchId}-help`;\n  /** ID for the error element, referenced by aria-describedby. */\n  /** @internal */\n  private _errorId = `${this._switchId}-error`;\n\n  override render() {\n    const hasError = !!this.error;\n    const hasLabel = !!this.label || this._hasDefaultSlot;\n\n    const containerClasses = {\n      switch: true,\n      'switch--checked': this.checked,\n      'switch--disabled': this.disabled,\n      'switch--required': this.required,\n      'switch--error': hasError,\n      [`switch--${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError || this._hasErrorSlot ? this._errorId : null,\n        this.helpText && !hasError ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"switch\" class=${classMap(containerClasses)}>\n        <div class=\"switch__control-row\">\n          <button\n            part=\"track\"\n            class=\"switch__track\"\n            id=${this._switchId}\n            type=\"button\"\n            role=\"switch\"\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-required=${this.required ? 'true' : nothing}\n            ?disabled=${this.disabled}\n            @click=${this._handleClick}\n            @keydown=${this._handleKeyDown}\n          >\n            <span part=\"thumb\" class=\"switch__thumb\"></span>\n          </button>\n\n          <label part=\"label\" class=\"switch__label\" id=${this._labelId} for=${this._switchId}>\n            <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required\n              ? html`<span class=\"switch__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </label>\n        </div>\n\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${hasError\n            ? html`<div part=\"error\" class=\"switch__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>`\n            : nothing}\n        </slot>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"switch__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/**\n * Per-component event map for type-safe addEventListener on hx-switch.\n * The `hx-change` detail always includes both `checked` and `value` for this component.\n */\nexport interface HxSwitchEventMap {\n  'hx-change': CustomEvent<{ checked: boolean; value: string }>;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-switch': HelixSwitch;\n  }\n}\n\nexport type HxSwitch = HelixSwitch;\n"],"names":["helixSwitchStyles","css","_nextSwitchId","createIdCounter","HelixSwitch","FormMixin","HelixElement","changedProperties","state","_mode","disabled","e","slot","options","_a","hasError","hasLabel","containerClasses","describedBy","html","classMap","ifDefined","nothing","__decorateClass","property","query","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOjC,MAAMC,IAA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"}