@helixui/library 0.1.0

package/dist/shared/hx-checkbox-group-ClGxYUi0.js

@@ -0,0 +1,271 @@
+import { css as u, LitElement as _, nothing as d, html as h } from "lit";
+import { property as l, state as p, customElement as x } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+import { t as f } from "./lit-Dpo7RLp4.js";
+const b = u`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Fieldset ─── */
+
+  .fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2);
+    font-family: var(--hx-font-family-sans);
+  }
+
+  /* ─── Legend ─── */
+
+  .fieldset__legend {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1);
+    font-size: var(--hx-font-size-sm);
+    font-weight: var(--hx-font-weight-medium);
+    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal);
+    padding: 0;
+    margin-bottom: var(--hx-space-1);
+  }
+
+  .fieldset__required-marker {
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold);
+  }
+
+  /* ─── Items Container ─── */
+
+  .fieldset__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));
+  }
+
+  :host([orientation='horizontal']) .fieldset__items {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* ─── Error State ─── */
+
+  .fieldset--error .fieldset__legend {
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .fieldset__help-text {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-color-neutral-500);
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .fieldset__error {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal);
+  }
+`;
+var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? k(t, s) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (i = (o ? c(t, s, i) : c(i)) || i);
+  return o && i && m(t, s, i), i;
+};
+let y = 0, r = class extends _ {
+  constructor() {
+    super(), this.name = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.orientation = "vertical", this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._groupId = `hx-checkbox-group-${++y}`, this._helpTextId = `${this._groupId}-help`, this._errorId = `${this._groupId}-error`, this._handleCheckboxChange = (e) => {
+      if (e.target === this) return;
+      e.stopImmediatePropagation();
+      const t = this._getCheckedValues();
+      this._updateFormValue(t), this._updateValidity(t), this.dispatchEvent(
+        new CustomEvent("hx-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { values: t }
+        })
+      );
+    }, this._internals = this.attachInternals();
+  }
+  // ─── Slot Handlers ───
+  _handleErrorSlotChange(e) {
+    const t = e.target;
+    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _handleHelpSlotChange(e) {
+    const t = e.target;
+    this._hasHelpSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("hx-change", this._handleCheckboxChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("hx-change", this._handleCheckboxChange);
+  }
+  updated(e) {
+    super.updated(e), e.has("disabled") && this._syncCheckboxes(), e.has("name") && this._syncCheckboxNames(), e.has("required") && this._updateValidity();
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._syncCheckboxes(), this._syncCheckboxNames();
+    const t = this._getCheckedValues();
+    this._updateFormValue(t), this._updateValidity(t);
+  }
+  // ─── Checkbox Management ───
+  _getCheckboxes() {
+    return Array.from(this.children).filter((e) => e.tagName === "HX-CHECKBOX");
+  }
+  _getCheckedValues() {
+    return this._getCheckboxes().filter((e) => e.checked).map((e) => e.value);
+  }
+  _syncCheckboxes() {
+    this._getCheckboxes().forEach((t) => {
+      t.disabled = this.disabled;
+    });
+  }
+  _syncCheckboxNames() {
+    if (!this.name) return;
+    this._getCheckboxes().forEach((t) => {
+      t.name = this.name;
+    });
+  }
+  _handleSlotChange() {
+    this._syncCheckboxes(), this._syncCheckboxNames();
+    const e = this._getCheckedValues();
+    this._updateFormValue(e), this._updateValidity(e);
+  }
+  // ─── Form Integration ───
+  _updateFormValue(e) {
+    if (e.length === 0) {
+      this._internals.setFormValue(null);
+      return;
+    }
+    const t = new FormData();
+    e.forEach((s) => t.append(this.name, s)), this._internals.setFormValue(t);
+  }
+  _updateValidity(e) {
+    const t = e ?? this._getCheckedValues();
+    if (this.required && t.length === 0) {
+      const s = this._getCheckboxes()[0];
+      this._internals.setValidity(
+        { valueMissing: !0 },
+        this.error || "Please select at least one option.",
+        s
+      );
+    } else
+      this._internals.setValidity({});
+  }
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  /** Returns the validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Checks whether the group satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  /** Called by the form when it resets. */
+  formResetCallback() {
+    this._getCheckboxes().forEach((t) => {
+      t.checked = !1;
+    }), this._internals.setFormValue(null), this._updateValidity([]);
+  }
+  /** Called when the form restores state (e.g., back/forward navigation). */
+  formStateRestoreCallback(e) {
+    if (!(e instanceof FormData)) return;
+    const t = e.getAll(this.name).map((o) => String(o));
+    this._getCheckboxes().forEach((o) => {
+      o.checked = t.includes(o.value);
+    }), this._updateFormValue(t), this._updateValidity(t);
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = {
+      fieldset: !0,
+      "fieldset--error": e,
+      "fieldset--disabled": this.disabled,
+      "fieldset--required": this.required
+    }, s = [e ? this._errorId : null, this._hasHelpSlot ? this._helpTextId : null].filter(Boolean).join(" ") || void 0;
+    return h`
+      <fieldset
+        part="group"
+        class=${g(t)}
+        aria-describedby=${s ?? d}
+      >
+        <legend part="label" class="fieldset__legend">
+          <slot name="label">${this.label}</slot>
+          ${this.required ? h`<span class="fieldset__required-marker" aria-hidden="true">*</span>` : d}
+        </legend>
+
+        <div class="fieldset__items">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+
+        ${e ? h`<div part="error-message" class="fieldset__error" id=${this._errorId} role="alert">
+              <slot name="error" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>
+            </div>` : h`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
+
+        <div part="help-text" class="fieldset__help-text" id=${this._helpTextId}>
+          <slot name="help" @slotchange=${this._handleHelpSlotChange}></slot>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+r.styles = [f, b];
+r.formAssociated = !0;
+a([
+  l({ type: String })
+], r.prototype, "name", 2);
+a([
+  l({ type: String })
+], r.prototype, "label", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+a([
+  l({ type: String })
+], r.prototype, "error", 2);
+a([
+  l({ type: String, reflect: !0 })
+], r.prototype, "orientation", 2);
+a([
+  p()
+], r.prototype, "_hasErrorSlot", 2);
+a([
+  p()
+], r.prototype, "_hasHelpSlot", 2);
+r = a([
+  x("hx-checkbox-group")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-checkbox-group-ClGxYUi0.js.map

package/dist/shared/hx-checkbox-group-ClGxYUi0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-checkbox-group-ClGxYUi0.js","sources":["../../src/components/hx-checkbox-group/hx-checkbox-group.styles.ts","../../src/components/hx-checkbox-group/hx-checkbox-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxGroupStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Fieldset ─── */\n\n  .fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2);\n    font-family: var(--hx-font-family-sans);\n  }\n\n  /* ─── Legend ─── */\n\n  .fieldset__legend {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1);\n    font-size: var(--hx-font-size-sm);\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-checkbox-group-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-normal);\n    padding: 0;\n    margin-bottom: var(--hx-space-1);\n  }\n\n  .fieldset__required-marker {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold);\n  }\n\n  /* ─── Items Container ─── */\n\n  .fieldset__items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-checkbox-group-gap, var(--hx-space-3));\n  }\n\n  :host([orientation='horizontal']) .fieldset__items {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Error State ─── */\n\n  .fieldset--error .fieldset__legend {\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .fieldset__help-text {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-color-neutral-500);\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .fieldset__error {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-checkbox-group-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCheckboxGroupStyles } from './hx-checkbox-group.styles.js';\nimport type { HelixCheckbox } from '../hx-checkbox/hx-checkbox.js';\n\n/** Monotonic counter for stable, SSR-safe IDs. */\nlet _uid = 0;\n\n/**\n * A form-associated checkbox group that manages a set of `<hx-checkbox>` children.\n *\n * @summary Form-associated checkbox group with label, validation, help text, and multi-value form submission.\n *\n * @tag hx-checkbox-group\n *\n * @slot - `<hx-checkbox>` elements.\n * @slot label - Rich HTML group label (overrides the label property when used).\n * @slot error - Custom error content (overrides the error property).\n * @slot help - Group-level help text.\n *\n * @fires {CustomEvent<{values: string[]}>} hx-change - Dispatched when any child checkbox changes.\n *\n * @csspart group - The fieldset wrapper.\n * @csspart label - The legend/label.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n *\n * @cssprop [--hx-checkbox-group-gap=var(--hx-space-3, 0.75rem)] - Gap between checkbox items.\n * @cssprop [--hx-checkbox-group-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-checkbox-group-error-color=var(--hx-color-error-500, #dc3545)] - Error message color.\n *\n * @drupal\n * Form-associated; render via Twig:\n * ```twig\n * <hx-checkbox-group name=\"{{ field_name }}\" label=\"{{ label }}\"{{ required ? ' required' : '' }}>\n *   {% for option in options %}\n *     <hx-checkbox value=\"{{ option.value }}\" label=\"{{ option.label }}\"></hx-checkbox>\n *   {% endfor %}\n * </hx-checkbox-group>\n * ```\n * The `name` attribute propagates automatically to child checkboxes — no Drupal behavior required.\n */\n@customElement('hx-checkbox-group')\nexport class HelixCheckboxGroup extends LitElement {\n  static override styles = [tokenStyles, helixCheckboxGroupStyles];\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The name used for form submission. Passed to child `hx-checkbox` elements.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The fieldset legend/label text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether at least one checkbox must be checked for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the entire group is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the group enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Layout orientation of the checkbox items.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  @state() private _hasErrorSlot = false;\n  @state() private _hasHelpSlot = false;\n\n  // ─── Internal IDs ───\n\n  private _groupId = `hx-checkbox-group-${++_uid}`;\n  private _helpTextId = `${this._groupId}-help`;\n  private _errorId = `${this._groupId}-error`;\n\n  // ─── Slot Handlers ───\n\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  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-change', this._handleCheckboxChange as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-change', this._handleCheckboxChange as EventListener);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this._syncCheckboxes();\n    }\n    if (changedProperties.has('name')) {\n      this._syncCheckboxNames();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>): void {\n    super.firstUpdated(changedProperties);\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Checkbox Management ───\n\n  private _getCheckboxes(): HelixCheckbox[] {\n    return Array.from(this.children).filter((c): c is HelixCheckbox => c.tagName === 'HX-CHECKBOX');\n  }\n\n  private _getCheckedValues(): string[] {\n    return this._getCheckboxes()\n      .filter((cb) => cb.checked)\n      .map((cb) => cb.value);\n  }\n\n  private _syncCheckboxes(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.disabled = this.disabled;\n    });\n  }\n\n  private _syncCheckboxNames(): void {\n    if (!this.name) return;\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.name = this.name;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  private _handleCheckboxChange = (e: CustomEvent<{ checked: boolean; value: string }>): void => {\n    // Only intercept events from direct hx-checkbox children — do not re-intercept\n    // the hx-change we dispatch ourselves from this element.\n    if (e.target === this) return;\n\n    e.stopImmediatePropagation();\n\n    const values = this._getCheckedValues();\n    this._updateFormValue(values);\n    this._updateValidity(values);\n\n    /**\n     * Dispatched when any child checkbox changes.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { values },\n      }),\n    );\n  };\n\n  private _handleSlotChange(): void {\n    this._syncCheckboxes();\n    this._syncCheckboxNames();\n    const checkedValues = this._getCheckedValues();\n    this._updateFormValue(checkedValues);\n    this._updateValidity(checkedValues);\n  }\n\n  // ─── Form Integration ───\n\n  private _updateFormValue(values: string[]): void {\n    if (values.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n    const formData = new FormData();\n    values.forEach((v) => formData.append(this.name, v));\n    this._internals.setFormValue(formData);\n  }\n\n  private _updateValidity(values?: string[]): void {\n    const checkedValues = values ?? this._getCheckedValues();\n    if (this.required && checkedValues.length === 0) {\n      const firstCheckbox = this._getCheckboxes()[0];\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'Please select at least one option.',\n        firstCheckbox,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the group satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = false;\n    });\n    this._internals.setFormValue(null);\n    this._updateValidity([]);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\n  formStateRestoreCallback(state: string | File | FormData): void {\n    if (!(state instanceof FormData)) return;\n    const restoredValues = state.getAll(this.name).map((v) => String(v));\n    const checkboxes = this._getCheckboxes();\n    checkboxes.forEach((cb) => {\n      cb.checked = restoredValues.includes(cb.value);\n    });\n    this._updateFormValue(restoredValues);\n    this._updateValidity(restoredValues);\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldsetClasses = {\n      fieldset: true,\n      'fieldset--error': hasError,\n      'fieldset--disabled': this.disabled,\n      'fieldset--required': this.required,\n    };\n\n    const describedBy =\n      [hasError ? this._errorId : null, this._hasHelpSlot ? this._helpTextId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <fieldset\n        part=\"group\"\n        class=${classMap(fieldsetClasses)}\n        aria-describedby=${describedBy ?? nothing}\n      >\n        <legend part=\"label\" class=\"fieldset__legend\">\n          <slot name=\"label\">${this.label}</slot>\n          ${this.required\n            ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n            : nothing}\n        </legend>\n\n        <div class=\"fieldset__items\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        ${hasError\n          ? html`<div part=\"error-message\" class=\"fieldset__error\" id=${this._errorId} role=\"alert\">\n              <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n            </div>`\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n\n        <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n          <slot name=\"help\" @slotchange=${this._handleHelpSlotChange}></slot>\n        </div>\n      </fieldset>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox-group': HelixCheckboxGroup;\n  }\n}\n"],"names":["helixCheckboxGroupStyles","css","_uid","HelixCheckboxGroup","LitElement","values","slot","changedProperties","checkedValues","c","cb","formData","v","firstCheckbox","state","restoredValues","hasError","fieldsetClasses","describedBy","html","classMap","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-code-snippet-CoFaSyuB.js

@@ -0,0 +1,322 @@
+import { css as u, LitElement as f, html as s, nothing as h } from "lit";
+import { property as p, state as c, customElement as m } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { t as v } from "./lit-Dpo7RLp4.js";
+const b = u`
+  :host {
+    display: block;
+  }
+
+  :host([inline]) {
+    display: inline;
+  }
+
+  /* ─── Inline Mode ─── */
+
+  .code-snippet--inline {
+    display: inline;
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
+    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));
+    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));
+    padding: var(--hx-code-snippet-inline-padding-y, 0.125em)
+      var(--hx-code-snippet-inline-padding-x, 0.375em);
+    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));
+  }
+
+  /* ─── Block Mode Container ─── */
+
+  .code-snippet {
+    position: relative;
+    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));
+    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));
+    overflow: hidden;
+  }
+
+  /* ─── Hidden Slot ─── */
+
+  .code-snippet__slot {
+    display: none;
+  }
+
+  /* ─── Header ─── */
+
+  .code-snippet__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;
+    min-height: var(--hx-space-8, 2rem);
+  }
+
+  /* ─── Pre / Code ─── */
+
+  .code-snippet__pre {
+    margin: 0;
+    padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));
+    overflow-x: auto;
+    white-space: pre;
+  }
+
+  .code-snippet__pre--wrap {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .code-snippet__code {
+    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);
+    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
+    tab-size: var(--hx-code-snippet-tab-size, 2);
+  }
+
+  /* ─── Copy Button ─── */
+
+  .code-snippet__copy-button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);
+    border-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-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-none, 1);
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease);
+    white-space: nowrap;
+    z-index: var(--hx-z-index-raised, 1);
+  }
+
+  .code-snippet__copy-button:hover {
+    background-color: var(--hx-color-neutral-700, #334155);
+    border-color: var(--hx-color-neutral-500, #64748b);
+  }
+
+  .code-snippet__copy-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .code-snippet__copy-button:active {
+    /* Non-standard token — fallback 0.8 applies if token is absent */
+    filter: brightness(var(--hx-filter-brightness-active, 0.8));
+  }
+
+  /* ─── Expand Button ─── */
+
+  .code-snippet__expand-button {
+    display: block;
+    width: 100%;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    border: none;
+    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
+    background-color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-neutral-300, #cbd5e1);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .code-snippet__expand-button:hover {
+    background-color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-neutral-100, #f1f5f9);
+  }
+
+  .code-snippet__expand-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Line Numbers ─── */
+
+  .code-snippet__line-number {
+    display: inline-block;
+    min-width: var(--hx-space-8, 2rem);
+    padding-right: var(--hx-space-3, 0.75rem);
+    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));
+    user-select: none;
+    text-align: right;
+  }
+
+  /* ─── Screen-reader only ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (e, t, r, n) => {
+  for (var a = n > 1 ? void 0 : n ? g(t, r) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (a = (n ? d(t, r, a) : d(a)) || a);
+  return n && a && _(t, r, a), a;
+};
+let o = class extends f {
+  constructor() {
+    super(...arguments), this.language = "", this.inline = !1, this.wrap = !1, this.copyable = !0, this.maxLines = 0, this.lineNumbers = !1, this._copied = !1, this._expanded = !1, this._codeText = "", this._copyTimer = null;
+  }
+  // ─── Lifecycle ───
+  firstUpdated() {
+    var e;
+    if (!this._codeText) {
+      const t = ((e = this.textContent) == null ? void 0 : e.trim()) ?? "";
+      t && (this._codeText = t);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._copyTimer !== null && (clearTimeout(this._copyTimer), this._copyTimer = null);
+  }
+  // ─── Event Handlers ───
+  _handleSlotChange(e) {
+    const t = e.target;
+    if (!t) return;
+    const r = t.assignedNodes({ flatten: !0 });
+    this._codeText = r.map((n) => n.textContent ?? "").join("");
+  }
+  _handleCopy() {
+    const e = this._codeText;
+    navigator.clipboard.writeText(e).catch(() => {
+    }), this.dispatchEvent(
+      new CustomEvent("hx-copy", {
+        bubbles: !0,
+        composed: !0,
+        detail: { text: e }
+      })
+    ), this._copied = !0, this._copyTimer !== null && clearTimeout(this._copyTimer), this._copyTimer = setTimeout(() => {
+      this._copied = !1;
+    }, 2e3);
+  }
+  _handleExpand() {
+    this._expanded = !this._expanded;
+  }
+  // ─── Helpers ───
+  _getDisplayLines() {
+    const e = this._codeText.split(`
+`);
+    return !this.maxLines || this.maxLines <= 0 || this._expanded || e.length <= this.maxLines ? e : e.slice(0, this.maxLines);
+  }
+  _isTruncated() {
+    return !this.maxLines || this.maxLines <= 0 ? !1 : this._codeText.split(`
+`).length > this.maxLines;
+  }
+  _renderLines(e) {
+    return this.lineNumbers ? s`${e.map(
+      (t, r) => s`<span aria-hidden="true" class="code-snippet__line-number">${r + 1}</span>${t} `
+    )}` : s`${e.join(`
+`)}`;
+  }
+  // ─── Render ───
+  render() {
+    if (this.inline)
+      return s`
+        <code part="base code" class="code-snippet code-snippet--inline">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </code>
+      `;
+    const e = this._getDisplayLines(), t = this._isTruncated(), r = this.language ? `Code snippet: ${this.language}` : "Code snippet", n = x({
+      "code-snippet__code": !0,
+      [`language-${this.language}`]: !!this.language
+    });
+    return s`
+      <div part="base" class="code-snippet">
+        <div part="header" class="code-snippet__header">
+          ${this.copyable ? s`
+                <button
+                  part="copy-button"
+                  class="code-snippet__copy-button"
+                  type="button"
+                  aria-label=${this._copied ? "Copied!" : "Copy code"}
+                  @click=${this._handleCopy}
+                >
+                  ${this._copied ? "Copied!" : "Copy"}
+                </button>
+              ` : h}
+        </div>
+
+        <!-- Visually-hidden live region announces copy confirmation to assistive technology -->
+        <span
+          aria-live="polite"
+          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;"
+          >${this._copied ? "Copied!" : ""}</span
+        >
+
+        <pre
+          role="region"
+          aria-label=${r}
+          class=${x({
+      "code-snippet__pre": !0,
+      "code-snippet__pre--wrap": this.wrap
+    })}
+        ><code part="code" class=${n}>${this._renderLines(e)}</code></pre>
+
+        <!-- Hidden slot to capture text content for display and copy -->
+        <slot class="code-snippet__slot" @slotchange=${this._handleSlotChange}></slot>
+
+        ${t ? s`
+              <button
+                part="expand-button"
+                class="code-snippet__expand-button"
+                type="button"
+                aria-expanded=${this._expanded ? "true" : "false"}
+                @click=${this._handleExpand}
+              >
+                ${this._expanded ? "Show less" : "Show more"}
+              </button>
+            ` : h}
+      </div>
+    `;
+  }
+};
+o.styles = [v, b];
+i([
+  p({ type: String, reflect: !0 })
+], o.prototype, "language", 2);
+i([
+  p({ type: Boolean, reflect: !0 })
+], o.prototype, "inline", 2);
+i([
+  p({ type: Boolean, reflect: !0 })
+], o.prototype, "wrap", 2);
+i([
+  p({ type: Boolean, reflect: !0 })
+], o.prototype, "copyable", 2);
+i([
+  p({ type: Number, attribute: "max-lines", reflect: !0 })
+], o.prototype, "maxLines", 2);
+i([
+  p({ type: Boolean, attribute: "line-numbers", reflect: !0 })
+], o.prototype, "lineNumbers", 2);
+i([
+  c()
+], o.prototype, "_copied", 2);
+i([
+  c()
+], o.prototype, "_expanded", 2);
+i([
+  c()
+], o.prototype, "_codeText", 2);
+o = i([
+  m("hx-code-snippet")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-code-snippet-CoFaSyuB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-code-snippet-CoFaSyuB.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    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: var(--hx-line-height-none, 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: var(--hx-z-index-raised, 1);\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 var(--hx-focus-ring-color, #2563eb);\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    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 var(--hx-focus-ring-color, #2563eb);\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-right: 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: right;\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 { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 = [tokenStyles, 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.\n   * @attr copyable\n   *\n   * IMPORTANT: This is a standard boolean attribute. Setting `copyable=\"false\"` in HTML\n   * will NOT disable the copy button — the attribute presence alone signals `true`.\n   * To disable programmatically, set `el.copyable = false` via JavaScript.\n   * In Lit/HTML templates, use `?copyable=${false}` (Lit boolean binding) to remove the attribute.\n   */\n  @property({ type: Boolean, reflect: true })\n  copyable: boolean = true;\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  // ─── Internal State ───\n\n  @state() private _copied: boolean = false;\n  @state() private _expanded: boolean = false;\n  @state() private _codeText: string = '';\n\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  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  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('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  private _handleExpand(): void {\n    this._expanded = !this._expanded;\n  }\n\n  // ─── Helpers ───\n\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  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  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  // ─── 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 ? 'Copied!' : 'Copy code'}\n                  @click=${this._handleCopy}\n                >\n                  ${this._copied ? 'Copied!' : 'Copy'}\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 ? 'Copied!' : ''}</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 ? 'Show less' : 'Show more'}\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","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}