@helixui/library 0.1.0

package/dist/shared/hx-tag-BP7HJ6_0.js

@@ -0,0 +1,243 @@
+import { css as d, LitElement as p, nothing as c, html as x } from "lit";
+import { property as l, state as g, customElement as u } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { t as v } from "./lit-Dpo7RLp4.js";
+const m = d`
+  :host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    /* cursor: not-allowed is intentionally omitted — pointer-events: none prevents cursor display */
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #374151));
+    font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid var(--hx-tag-border-color, var(--hx-color-neutral-200, #e5e7eb));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .tag--sm {
+    font-size: var(--hx-tag-font-size, var(--hx-font-size-xs, 0.75rem));
+    padding: var(--hx-tag-padding-y, var(--hx-space-0-5, 0.125rem))
+      var(--hx-tag-padding-x, var(--hx-space-1-5, 0.375rem));
+  }
+
+  .tag--md {
+    font-size: var(--hx-tag-font-size, var(--hx-font-size-sm, 0.875rem));
+    padding: var(--hx-tag-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-tag-padding-x, var(--hx-space-2, 0.5rem));
+  }
+
+  .tag--lg {
+    font-size: var(--hx-tag-font-size, var(--hx-font-size-base, 1rem));
+    padding: var(--hx-tag-padding-y, var(--hx-space-1-5, 0.375rem))
+      var(--hx-tag-padding-x, var(--hx-space-3, 0.75rem));
+  }
+
+  /* ─── Color Variants ─── */
+
+  .tag--default {
+    --hx-tag-bg: var(--hx-color-neutral-100, #f3f4f6);
+    --hx-tag-color: var(--hx-color-neutral-700, #374151);
+    --hx-tag-border-color: var(--hx-color-neutral-200, #e5e7eb);
+  }
+
+  .tag--primary {
+    --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-tag-color: var(--hx-color-primary-700, #1d4ed8);
+    --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
+  }
+
+  .tag--success {
+    --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
+    --hx-tag-color: var(--hx-color-success-700, #15803d);
+    --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
+  }
+
+  .tag--warning {
+    --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-tag-color: var(--hx-color-warning-700, #b45309);
+    --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
+  }
+
+  .tag--danger {
+    --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-tag-color: var(--hx-color-error-700, #b91c1c);
+    --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
+  }
+
+  /* ─── Pill Mode ─── */
+
+  /* Uses --hx-tag-border-radius-pill (separate from --hx-tag-border-radius) so consumer
+     overrides to --hx-tag-border-radius don't break pill shape. */
+  .tag--pill {
+    border-radius: var(--hx-tag-border-radius-pill, var(--hx-border-radius-full, 9999px));
+  }
+
+  /* ─── Prefix / Suffix slots ─── */
+
+  .tag__prefix,
+  .tag__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Hide wrappers when slots have no assigned content */
+  .tag__prefix--hidden,
+  .tag__suffix--hidden {
+    display: none;
+  }
+
+  /* ─── Remove Button ─── */
+
+  .tag__remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    /* WCAG 2.5.8 (Level AA): minimum 24×24 CSS pixel touch target */
+    min-width: 24px;
+    min-height: 24px;
+    padding: 0;
+    margin-inline-start: var(--hx-space-1, 0.25rem);
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    line-height: 0;
+  }
+
+  .tag__remove-button:hover {
+    opacity: 1;
+  }
+
+  .tag__remove-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
+    outline-offset: var(--hx-focus-ring-offset, 1px);
+  }
+`;
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (r, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? _(e, s) : e, n = r.length - 1, h; n >= 0; n--)
+    (h = r[n]) && (i = (o ? h(e, s, i) : h(i)) || i);
+  return o && i && b(e, s, i), i;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "default", this.size = "md", this.pill = !1, this.removable = !1, this.disabled = !1, this._defaultSlotText = "", this._hasPrefix = !1, this._hasSuffix = !1;
+  }
+  // ─── Event Handling ───
+  /** @internal */
+  _handleRemove() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("hx-remove", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** @internal Updates _defaultSlotText from only the default slot's text nodes. */
+  _onDefaultSlotChange(r) {
+    const s = r.target.assignedNodes({ flatten: !0 });
+    this._defaultSlotText = s.filter((o) => o.nodeType === Node.TEXT_NODE).map((o) => o.textContent ?? "").join("").trim();
+  }
+  /** @internal */
+  _onPrefixSlotChange(r) {
+    const e = r.target;
+    this._hasPrefix = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  /** @internal */
+  _onSuffixSlotChange(r) {
+    const e = r.target;
+    this._hasSuffix = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Render ───
+  render() {
+    const r = {
+      tag: !0,
+      [`tag--${this.variant}`]: !0,
+      [`tag--${this.size}`]: !0,
+      "tag--pill": this.pill
+    }, e = {
+      tag__prefix: !0,
+      "tag__prefix--hidden": !this._hasPrefix
+    }, s = {
+      tag__suffix: !0,
+      "tag__suffix--hidden": !this._hasSuffix
+    };
+    return x`
+      <span part="base" class=${f(r)}>
+        <span part="prefix" class=${f(e)}>
+          <slot name="prefix" @slotchange=${this._onPrefixSlotChange}></slot>
+        </span>
+        <span part="label" class="tag__label">
+          <slot @slotchange=${this._onDefaultSlotChange}></slot>
+        </span>
+        <span part="suffix" class=${f(s)}>
+          <slot name="suffix" @slotchange=${this._onSuffixSlotChange}></slot>
+        </span>
+        ${this.removable ? x`<button
+              part="remove-button"
+              class="tag__remove-button"
+              aria-label=${`Remove ${this._defaultSlotText}`}
+              ?disabled=${this.disabled}
+              @click=${this._handleRemove}
+            >
+              <svg viewBox="0 0 12 12" aria-hidden="true" width="10" height="10">
+                <path
+                  d="M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>` : c}
+      </span>
+    `;
+  }
+};
+t.styles = [v, m];
+a([
+  l({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+a([
+  l({ type: String, reflect: !0, attribute: "hx-size" })
+], t.prototype, "size", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "pill", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "removable", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+a([
+  g()
+], t.prototype, "_defaultSlotText", 2);
+a([
+  g()
+], t.prototype, "_hasPrefix", 2);
+a([
+  g()
+], t.prototype, "_hasSuffix", 2);
+t = a([
+  u("hx-tag")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-tag-BP7HJ6_0.js.map

package/dist/shared/hx-tag-BP7HJ6_0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tag-BP7HJ6_0.js","sources":["../../src/components/hx-tag/hx-tag.styles.ts","../../src/components/hx-tag/hx-tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTagStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n    pointer-events: none;\n    /* cursor: not-allowed is intentionally omitted — pointer-events: none prevents cursor display */\n  }\n\n  .tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f3f4f6));\n    color: var(--hx-tag-color, var(--hx-color-neutral-700, #374151));\n    font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n    vertical-align: middle;\n    border: 1px solid var(--hx-tag-border-color, var(--hx-color-neutral-200, #e5e7eb));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .tag--sm {\n    font-size: var(--hx-tag-font-size, var(--hx-font-size-xs, 0.75rem));\n    padding: var(--hx-tag-padding-y, var(--hx-space-0-5, 0.125rem))\n      var(--hx-tag-padding-x, var(--hx-space-1-5, 0.375rem));\n  }\n\n  .tag--md {\n    font-size: var(--hx-tag-font-size, var(--hx-font-size-sm, 0.875rem));\n    padding: var(--hx-tag-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-tag-padding-x, var(--hx-space-2, 0.5rem));\n  }\n\n  .tag--lg {\n    font-size: var(--hx-tag-font-size, var(--hx-font-size-base, 1rem));\n    padding: var(--hx-tag-padding-y, var(--hx-space-1-5, 0.375rem))\n      var(--hx-tag-padding-x, var(--hx-space-3, 0.75rem));\n  }\n\n  /* ─── Color Variants ─── */\n\n  .tag--default {\n    --hx-tag-bg: var(--hx-color-neutral-100, #f3f4f6);\n    --hx-tag-color: var(--hx-color-neutral-700, #374151);\n    --hx-tag-border-color: var(--hx-color-neutral-200, #e5e7eb);\n  }\n\n  .tag--primary {\n    --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);\n    --hx-tag-color: var(--hx-color-primary-700, #1d4ed8);\n    --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);\n  }\n\n  .tag--success {\n    --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);\n    --hx-tag-color: var(--hx-color-success-700, #15803d);\n    --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);\n  }\n\n  .tag--warning {\n    --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-tag-color: var(--hx-color-warning-700, #b45309);\n    --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);\n  }\n\n  .tag--danger {\n    --hx-tag-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-tag-color: var(--hx-color-error-700, #b91c1c);\n    --hx-tag-border-color: var(--hx-color-error-200, #fecaca);\n  }\n\n  /* ─── Pill Mode ─── */\n\n  /* Uses --hx-tag-border-radius-pill (separate from --hx-tag-border-radius) so consumer\n     overrides to --hx-tag-border-radius don't break pill shape. */\n  .tag--pill {\n    border-radius: var(--hx-tag-border-radius-pill, var(--hx-border-radius-full, 9999px));\n  }\n\n  /* ─── Prefix / Suffix slots ─── */\n\n  .tag__prefix,\n  .tag__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* Hide wrappers when slots have no assigned content */\n  .tag__prefix--hidden,\n  .tag__suffix--hidden {\n    display: none;\n  }\n\n  /* ─── Remove Button ─── */\n\n  .tag__remove-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    /* WCAG 2.5.8 (Level AA): minimum 24×24 CSS pixel touch target */\n    min-width: 24px;\n    min-height: 24px;\n    padding: 0;\n    margin-inline-start: var(--hx-space-1, 0.25rem);\n    cursor: pointer;\n    color: inherit;\n    opacity: 0.7;\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n    line-height: 0;\n  }\n\n  .tag__remove-button:hover {\n    opacity: 1;\n  }\n\n  .tag__remove-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n    outline-offset: var(--hx-focus-ring-offset, 1px);\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 { helixTagStyles } from './hx-tag.styles.js';\n\n/**\n * A compact label for categorization, filtering, and selection.\n *\n * @summary Compact tag/chip for categorization, filtering, and selection.\n *\n * @tag hx-tag\n *\n * @slot - Default slot for tag label text.\n * @slot prefix - Icon or avatar rendered before the label.\n * @slot suffix - Content rendered after the label.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart base - The root tag element.\n * @csspart prefix - The prefix slot wrapper.\n * @csspart label - The label slot wrapper.\n * @csspart suffix - The suffix slot wrapper.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-tag-bg=var(--hx-color-neutral-100)] - Tag background color.\n * @cssprop [--hx-tag-color=var(--hx-color-neutral-700)] - Tag text color.\n * @cssprop [--hx-tag-border-color=var(--hx-color-neutral-200)] - Tag border color.\n * @cssprop [--hx-tag-font-size] - Tag font size (set per size variant).\n * @cssprop [--hx-tag-font-weight=var(--hx-font-weight-medium)] - Tag font weight.\n * @cssprop [--hx-tag-font-family=var(--hx-font-family-sans)] - Tag font family.\n * @cssprop [--hx-tag-border-radius=var(--hx-border-radius-sm)] - Tag border radius (non-pill mode).\n * @cssprop [--hx-tag-border-radius-pill=var(--hx-border-radius-full)] - Border radius in pill mode. Independent of --hx-tag-border-radius so consumer overrides don't break pill shape.\n * @cssprop [--hx-tag-padding-x] - Tag horizontal padding (set per size variant).\n * @cssprop [--hx-tag-padding-y] - Tag vertical padding (set per size variant).\n *\n * @note Visual style variants (filled/outlined/ghost) are not supported. This component\n * intentionally provides only filled-style tags with color variation via the `variant` prop.\n *\n * @note aria-live removal announcements are the consuming application's responsibility.\n * When a tag is removed from the DOM, applications should announce the change via their\n * own aria-live region to inform screen reader users of clinical data filter changes.\n */\n@customElement('hx-tag')\nexport class HelixTag extends LitElement {\n  static override styles = [tokenStyles, helixTagStyles];\n\n  /**\n   * Visual style variant of the tag.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Size of the tag.\n   * @attr hx-size\n   * @note The attribute name is `hx-size` (not `size`) to avoid conflict with the native\n   * `size` attribute. Storybook autodocs controls bind to the property name `size`; when\n   * writing HTML or Drupal Twig templates always use the `hx-size` attribute name.\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the tag uses fully rounded (pill) styling.\n   * @attr pill\n   */\n  @property({ type: Boolean, reflect: true })\n  pill = false;\n\n  /**\n   * Whether the tag renders a dismiss button.\n   * @attr removable\n   */\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  /**\n   * Whether the tag is disabled. When disabled, interactions are suppressed.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal State ───\n\n  /**\n   * Text from the default slot only (excludes prefix/suffix slotted content).\n   * Used to build the remove button's aria-label without polluting it with icon text.\n   * @internal\n   */\n  @state() private _defaultSlotText = '';\n\n  /** @internal Whether the prefix slot has assigned content. */\n  @state() private _hasPrefix = false;\n\n  /** @internal Whether the suffix slot has assigned content. */\n  @state() private _hasSuffix = false;\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleRemove(): void {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('hx-remove', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal Updates _defaultSlotText from only the default slot's text nodes. */\n  private _onDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._defaultSlotText = nodes\n      .filter((n): n is Text => n.nodeType === Node.TEXT_NODE)\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  /** @internal */\n  private _onPrefixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefix = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _onSuffixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffix = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      tag: true,\n      [`tag--${this.variant}`]: true,\n      [`tag--${this.size}`]: true,\n      'tag--pill': this.pill,\n    };\n\n    const prefixClasses = {\n      tag__prefix: true,\n      'tag__prefix--hidden': !this._hasPrefix,\n    };\n\n    const suffixClasses = {\n      tag__suffix: true,\n      'tag__suffix--hidden': !this._hasSuffix,\n    };\n\n    return html`\n      <span part=\"base\" class=${classMap(classes)}>\n        <span part=\"prefix\" class=${classMap(prefixClasses)}>\n          <slot name=\"prefix\" @slotchange=${this._onPrefixSlotChange}></slot>\n        </span>\n        <span part=\"label\" class=\"tag__label\">\n          <slot @slotchange=${this._onDefaultSlotChange}></slot>\n        </span>\n        <span part=\"suffix\" class=${classMap(suffixClasses)}>\n          <slot name=\"suffix\" @slotchange=${this._onSuffixSlotChange}></slot>\n        </span>\n        ${this.removable\n          ? html`<button\n              part=\"remove-button\"\n              class=\"tag__remove-button\"\n              aria-label=${`Remove ${this._defaultSlotText}`}\n              ?disabled=${this.disabled}\n              @click=${this._handleRemove}\n            >\n              <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n                <path\n                  d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </button>`\n          : nothing}\n      </span>\n    `;\n  }\n}\n\nexport type HxTag = HelixTag;\n\n/** @deprecated Use {@link HxTag} instead. The `Wc` prefix was a legacy alias. */\nexport type WcTag = HelixTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tag': HelixTag;\n  }\n}\n"],"names":["helixTagStyles","css","HelixTag","LitElement","e","nodes","n","slot","classes","prefixClasses","suffixClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-text-DDSH1alC.js

@@ -0,0 +1,218 @@
+import { css as g, LitElement as c } from "lit";
+import { unsafeStatic as f, html as p } from "lit/static-html.js";
+import { property as a, customElement as m } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { styleMap as w } from "lit/directives/style-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { t as d } from "./lit-Dpo7RLp4.js";
+const y = g`
+  :host {
+    display: inline;
+  }
+
+  /* ─── Base ─── */
+
+  .text {
+    display: inline;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-text-font-size);
+    font-weight: var(--hx-text-font-weight);
+    line-height: var(--hx-text-line-height);
+    letter-spacing: var(--hx-text-letter-spacing);
+    color: var(--hx-text-color);
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ─── Variants ─── */
+
+  .text--body {
+    --hx-text-font-size: var(--hx-font-size-md, 1rem);
+    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--body-sm {
+    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--body-lg {
+    --hx-text-font-size: var(--hx-font-size-lg, 1.125rem);
+    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--label {
+    --hx-text-font-size: var(--hx-font-size-md, 1rem);
+    --hx-text-font-weight: var(--hx-font-weight-medium, 500);
+    --hx-text-line-height: var(--hx-line-height-tight, 1.25);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--label-sm {
+    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-text-font-weight: var(--hx-font-weight-medium, 500);
+    --hx-text-line-height: var(--hx-line-height-tight, 1.25);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--caption {
+    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+  }
+
+  .text--code {
+    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-line-height: var(--hx-line-height-normal, 1.5);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
+    font-family: var(--hx-font-family-mono, monospace);
+  }
+
+  .text--overline {
+    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);
+    --hx-text-line-height: var(--hx-line-height-tight, 1.25);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    text-transform: uppercase;
+  }
+
+  /* ─── Colors ─── */
+
+  .text--color-default {
+    --hx-text-color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  .text--color-subtle {
+    --hx-text-color: var(--hx-color-neutral-500, #64748b);
+  }
+
+  .text--color-disabled {
+    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);
+  }
+
+  .text--color-inverse {
+    --hx-text-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .text--color-danger {
+    --hx-text-color: var(--hx-color-error-600, #dc2626);
+  }
+
+  .text--color-success {
+    --hx-text-color: var(--hx-color-success-600, #16a34a);
+  }
+
+  .text--color-warning {
+    --hx-text-color: var(--hx-color-warning-600, #d97706);
+  }
+
+  /* ─── Weight Overrides ─── */
+
+  .text--weight-regular {
+    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+  }
+
+  .text--weight-medium {
+    --hx-text-font-weight: var(--hx-font-weight-medium, 500);
+  }
+
+  .text--weight-semibold {
+    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);
+  }
+
+  .text--weight-bold {
+    --hx-text-font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Truncation ─── */
+
+  .text--truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .text--clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  :host([truncate]) {
+    display: block;
+  }
+
+  :host([lines]:not([lines='0'])) {
+    display: block;
+  }
+`;
+var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (r, i, o, x) => {
+  for (var t = x > 1 ? void 0 : x ? z(i, o) : i, l = r.length - 1, n; l >= 0; l--)
+    (n = r[l]) && (t = (x ? n(i, o, t) : n(t)) || t);
+  return x && t && b(i, o, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "body", this.weight = void 0, this.color = "default", this.truncate = !1, this.lines = 0, this.as = "span";
+  }
+  /** Validates `as` against the allowed element list to prevent injection. */
+  get _safeTag() {
+    return (/* @__PURE__ */ new Set(["span", "p", "strong", "em", "div"])).has(this.as) ? this.as : "span";
+  }
+  render() {
+    var s;
+    const r = Math.max(0, this.lines), i = this.truncate && r === 0, o = r > 0, x = {
+      text: !0,
+      [`text--${this.variant}`]: !0,
+      [`text--color-${this.color}`]: !0,
+      [`text--weight-${this.weight}`]: this.weight !== void 0,
+      "text--truncate": i,
+      "text--clamp": o
+    }, t = o ? { "-webkit-line-clamp": String(r) } : {}, l = i || o ? (s = this.textContent) == null ? void 0 : s.trim() : void 0, n = f(this._safeTag);
+    return p`
+      <${n}
+        part="base"
+        class=${v(x)}
+        style=${w(t)}
+        title=${u(l || void 0)}
+      >
+        <slot></slot>
+      </${n}>
+    `;
+  }
+};
+e.styles = [d, y];
+h([
+  a({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+h([
+  a({ type: String, reflect: !0 })
+], e.prototype, "weight", 2);
+h([
+  a({ type: String, reflect: !0 })
+], e.prototype, "color", 2);
+h([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "truncate", 2);
+h([
+  a({ type: Number, reflect: !0 })
+], e.prototype, "lines", 2);
+h([
+  a({ type: String, reflect: !0 })
+], e.prototype, "as", 2);
+e = h([
+  m("hx-text")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-text-DDSH1alC.js.map

package/dist/shared/hx-text-DDSH1alC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-text-DDSH1alC.js","sources":["../../src/components/hx-text/hx-text.styles.ts","../../src/components/hx-text/hx-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextStyles = css`\n  :host {\n    display: inline;\n  }\n\n  /* ─── Base ─── */\n\n  .text {\n    display: inline;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-text-font-size);\n    font-weight: var(--hx-text-font-weight);\n    line-height: var(--hx-text-line-height);\n    letter-spacing: var(--hx-text-letter-spacing);\n    color: var(--hx-text-color);\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Variants ─── */\n\n  .text--body {\n    --hx-text-font-size: var(--hx-font-size-md, 1rem);\n    --hx-text-font-weight: var(--hx-font-weight-regular, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--body-sm {\n    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-text-font-weight: var(--hx-font-weight-regular, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--body-lg {\n    --hx-text-font-size: var(--hx-font-size-lg, 1.125rem);\n    --hx-text-font-weight: var(--hx-font-weight-regular, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--label {\n    --hx-text-font-size: var(--hx-font-size-md, 1rem);\n    --hx-text-font-weight: var(--hx-font-weight-medium, 500);\n    --hx-text-line-height: var(--hx-line-height-tight, 1.25);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--label-sm {\n    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-text-font-weight: var(--hx-font-weight-medium, 500);\n    --hx-text-line-height: var(--hx-line-height-tight, 1.25);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--caption {\n    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-text-font-weight: var(--hx-font-weight-regular, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--code {\n    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-text-font-weight: var(--hx-font-weight-regular, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n    font-family: var(--hx-font-family-mono, monospace);\n  }\n\n  .text--overline {\n    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);\n    --hx-text-line-height: var(--hx-line-height-tight, 1.25);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.05em);\n    text-transform: uppercase;\n  }\n\n  /* ─── Colors ─── */\n\n  .text--color-default {\n    --hx-text-color: var(--hx-color-neutral-900, #0f172a);\n  }\n\n  .text--color-subtle {\n    --hx-text-color: var(--hx-color-neutral-500, #64748b);\n  }\n\n  .text--color-disabled {\n    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);\n  }\n\n  .text--color-inverse {\n    --hx-text-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .text--color-danger {\n    --hx-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  .text--color-success {\n    --hx-text-color: var(--hx-color-success-600, #16a34a);\n  }\n\n  .text--color-warning {\n    --hx-text-color: var(--hx-color-warning-600, #d97706);\n  }\n\n  /* ─── Weight Overrides ─── */\n\n  .text--weight-regular {\n    --hx-text-font-weight: var(--hx-font-weight-regular, 400);\n  }\n\n  .text--weight-medium {\n    --hx-text-font-weight: var(--hx-font-weight-medium, 500);\n  }\n\n  .text--weight-semibold {\n    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);\n  }\n\n  .text--weight-bold {\n    --hx-text-font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Truncation ─── */\n\n  .text--truncate {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .text--clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  :host([truncate]) {\n    display: block;\n  }\n\n  :host([lines]:not([lines='0'])) {\n    display: block;\n  }\n`;\n","import { LitElement } from 'lit';\nimport { html as staticHtml, unsafeStatic } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextStyles } from './hx-text.styles.js';\n\n/**\n * A semantic typography wrapper that applies consistent text styles using design tokens.\n *\n * @summary Presentational text wrapper for consistent typography across variants, weights, and colors.\n *\n * @tag hx-text\n *\n * @slot - Default slot for text content.\n *\n * @csspart base - The inner element (tag determined by the `as` property).\n *\n * @cssprop [--hx-text-font-size] - Font size (set per variant).\n * @cssprop [--hx-text-font-weight] - Font weight (overridden by weight prop).\n * @cssprop [--hx-text-line-height] - Line height (set per variant).\n * @cssprop [--hx-text-letter-spacing] - Letter spacing (set per variant).\n * @cssprop [--hx-text-color] - Text color (set per color prop).\n *\n * @example\n * <!-- Drupal/Twig usage (CDN):\n *   <hx-text variant=\"body\" color=\"default\">Patient name here</hx-text>\n *   <hx-text variant=\"label\" weight=\"semibold\">Date of Birth</hx-text>\n *   <hx-text variant=\"caption\" color=\"subtle\">Last reviewed on 2026-03-05</hx-text>\n *   <!-- Truncate (boolean attr — omit to disable, include to enable): -->\n *   <hx-text truncate>Long patient note that gets clipped</hx-text>\n *   <!-- Multi-line clamp (numeric attr): -->\n *   <hx-text lines=\"3\">Paragraph of clinical notes...</hx-text>\n *   <!-- Semantic element override: -->\n *   <hx-text as=\"p\" variant=\"body\">Paragraph-level content.</hx-text>\n *   <hx-text as=\"strong\" variant=\"label\">Bold label</hx-text>\n * -->\n */\n@customElement('hx-text')\nexport class HelixText extends LitElement {\n  static override styles = [tokenStyles, helixTextStyles];\n\n  /**\n   * Typography variant controlling font size, line height, and letter spacing.\n   *\n   * Note: The public variant set (body / body-sm / body-lg / label / label-sm / caption / code /\n   * overline) intentionally extends the original audit spec (body / lead / small / caption /\n   * overline). `lead` and `small` were replaced with the more granular `body-lg`, `body-sm`,\n   * `label`, `label-sm`, and `code` variants to better serve healthcare UI density requirements.\n   * There are no `lead` or `small` variants — consumers must use `body-lg` and `body-sm`\n   * respectively.\n   *\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'body' | 'body-sm' | 'body-lg' | 'label' | 'label-sm' | 'caption' | 'code' | 'overline' =\n    'body';\n\n  /**\n   * Font weight override. When unset, the variant's default weight is used.\n   * @attr weight\n   */\n  @property({ type: String, reflect: true })\n  weight: 'regular' | 'medium' | 'semibold' | 'bold' | undefined = undefined;\n\n  /**\n   * Semantic color intent.\n   * @attr color\n   */\n  @property({ type: String, reflect: true })\n  color: 'default' | 'subtle' | 'disabled' | 'inverse' | 'danger' | 'success' | 'warning' =\n    'default';\n\n  /**\n   * When true, clips text to a single line with an ellipsis overflow.\n   * @attr truncate\n   */\n  @property({ type: Boolean, reflect: true })\n  truncate = false;\n\n  /**\n   * Maximum number of lines to display before clamping with ellipsis.\n   * When set, overrides `truncate`. Set to 0 to disable.\n   * @attr lines\n   */\n  @property({ type: Number, reflect: true })\n  lines = 0;\n\n  /**\n   * The HTML element to render as the inner base element.\n   * Use to produce semantically appropriate markup (e.g., `p`, `strong`, `em`).\n   * Defaults to `span` for inline usage.\n   *\n   * In Drupal Twig: `<hx-text as=\"p\" variant=\"body\">...</hx-text>`\n   *\n   * @attr as\n   */\n  @property({ type: String, reflect: true })\n  as: 'span' | 'p' | 'strong' | 'em' | 'div' = 'span';\n\n  /** Validates `as` against the allowed element list to prevent injection. */\n  private get _safeTag(): string {\n    const allowed = new Set(['span', 'p', 'strong', 'em', 'div']);\n    return allowed.has(this.as) ? this.as : 'span';\n  }\n\n  override render() {\n    const effectiveLines = Math.max(0, this.lines);\n    const isTruncated = this.truncate && effectiveLines === 0;\n    const isClamped = effectiveLines > 0;\n    const classes = {\n      text: true,\n      [`text--${this.variant}`]: true,\n      [`text--color-${this.color}`]: true,\n      [`text--weight-${this.weight}`]: this.weight !== undefined,\n      'text--truncate': isTruncated,\n      'text--clamp': isClamped,\n    };\n\n    const inlineStyles = isClamped ? { '-webkit-line-clamp': String(effectiveLines) } : {};\n\n    const titleText = isTruncated || isClamped ? this.textContent?.trim() : undefined;\n\n    const tag = unsafeStatic(this._safeTag);\n\n    return staticHtml`\n      <${tag}\n        part=\"base\"\n        class=${classMap(classes)}\n        style=${styleMap(inlineStyles)}\n        title=${ifDefined(titleText || undefined)}\n      >\n        <slot></slot>\n      </${tag}>\n    `;\n  }\n}\n\n/** @deprecated Use `HelixText` directly. Kept for backward compatibility. */\nexport type WcText = HelixText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-text': HelixText;\n  }\n}\n"],"names":["helixTextStyles","css","HelixText","LitElement","effectiveLines","isTruncated","isClamped","classes","inlineStyles","titleText","_a","tag","unsafeStatic","staticHtml","classMap","styleMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}