@helixui/library 2.1.2 → 3.0.0

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

@@ -1,8 +1,8 @@
-import { css as x, LitElement as m, html as p, nothing as h } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as r, state as d, customElement as f } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-const b = x`
+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 { classMap as x } from "lit/directives/class-map.js";
+import { H as f } from "./helix-element-BNEYeiys.js";
+const b = u`
   :host {
     display: block;
   }
@@ -67,7 +67,7 @@ const b = x`
     display: block;
     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.625);
+    line-height: var(--hx-line-height-relaxed, 1.75);
     color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
@@ -86,7 +86,7 @@ const b = x`
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background-color: var(--hx-color-neutral-800, #1e293b);
     color: var(--hx-color-neutral-200, #e2e8f0);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    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);
     line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */
@@ -128,7 +128,7 @@ const b = x`
     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);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    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;
@@ -168,6 +168,28 @@ const b = x`
     }
   }
 
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .code-snippet {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet--inline {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet__copy-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .code-snippet__expand-button {
+      border-top-color: CanvasText;
+      color: ButtonText;
+    }
+  }
+
   /* ─── Screen-reader only ─── */
 
   .sr-only {
@@ -187,7 +209,7 @@ var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (e, t, n
     (c = e[l]) && (s = (a ? c(t, n, s) : c(s)) || s);
   return a && s && v(t, n, s), s;
 };
-let o = class extends m {
+let o = class extends f {
   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;
   }
@@ -257,7 +279,7 @@ let o = class extends m {
           <slot @slotchange=${this._handleSlotChange}></slot>
         </code>
       `;
-    const e = this._getDisplayLines(), t = this._isTruncated(), n = this.language ? `Code snippet: ${this.language}` : "Code snippet", a = u({
+    const e = this._getDisplayLines(), t = this._isTruncated(), n = this.language ? `Code snippet: ${this.language}` : "Code snippet", a = x({
       "code-snippet__code": !0,
       [`language-${this.language}`]: !!this.language
     });
@@ -287,7 +309,7 @@ let o = class extends m {
         <pre
           role="region"
           aria-label=${n}
-          class=${u({
+          class=${x({
       "code-snippet__pre": !0,
       "code-snippet__pre--wrap": this.wrap
     })}
@@ -352,9 +374,9 @@ i([
   d()
 ], o.prototype, "_codeText", 2);
 o = i([
-  f("hx-code-snippet")
+  m("hx-code-snippet")
 ], o);
 export {
   o as H
 };
-//# sourceMappingURL=hx-code-snippet-CoLYvX1Z.js.map
+//# sourceMappingURL=hx-code-snippet-B7wUKzyb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hx-code-snippet-CoLYvX1Z.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-neutral-100, #f1f5f9));\n    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));\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-neutral-900, #0f172a));\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.625);\n    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));\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 var(--hx-color-neutral-600, #475569);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-200, #e2e8f0);\n    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    background-color: var(--hx-color-neutral-700, #334155);\n    border-color: var(--hx-color-neutral-500, #64748b);\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-400, #60a5fa));\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 var(--hx-color-neutral-700, #334155);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-300, #cbd5e1);\n    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: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .code-snippet__expand-button:hover {\n    background-color: var(--hx-color-neutral-700, #334155);\n    color: var(--hx-color-neutral-100, #f1f5f9);\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-400, #60a5fa));\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-neutral-500, #64748b));\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  /* ─── 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 { LitElement, html, nothing, TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.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';\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 */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends LitElement {\n  static override styles = [helixCodeSnippetStyles];\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","LitElement","text","_a","slot","nodes","n","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-code-snippet-B7wUKzyb.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-neutral-100, #f1f5f9));\n    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));\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-neutral-900, #0f172a));\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-neutral-100, #f1f5f9));\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 var(--hx-color-neutral-600, #475569);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-200, #e2e8f0);\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    background-color: var(--hx-color-neutral-700, #334155);\n    border-color: var(--hx-color-neutral-500, #64748b);\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-400, #60a5fa));\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 var(--hx-color-neutral-700, #334155);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-300, #cbd5e1);\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: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .code-snippet__expand-button:hover {\n    background-color: var(--hx-color-neutral-700, #334155);\n    color: var(--hx-color-neutral-100, #f1f5f9);\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-400, #60a5fa));\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-neutral-500, #64748b));\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';\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 */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends HelixElement {\n  static override styles = [helixCodeSnippetStyles];\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","__decorateClass","property","state","customElement"],"mappings":"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"}