@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/shared/{hx-text-DTXjiviE.js → hx-text-DxyBxz25.js}

@@ -1,11 +1,11 @@
-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 { css as c, LitElement as g } from "lit";
+import "./document-token-adoption-Dym9ALA4.js";
+import { unsafeStatic as f, html as m } from "lit/static-html.js";
+import { property as a, customElement as p } 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 { tokenStyles as d } from "@helixui/tokens/lit";
-const y = g`
+import { ifDefined as d } from "lit/directives/if-defined.js";
+const u = c`
   :host {
     display: inline;
   }
@@ -28,21 +28,21 @@ const y = g`
 
   .text--body {
     --hx-text-font-size: var(--hx-font-size-md, 1rem);
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 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-font-weight: var(--hx-font-weight-normal, 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-font-weight: var(--hx-font-weight-normal, 400);
     --hx-text-line-height: var(--hx-line-height-normal, 1.5);
     --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
   }
@@ -63,14 +63,14 @@ const y = g`
 
   .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-font-weight: var(--hx-font-weight-normal, 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-font-weight: var(--hx-font-weight-normal, 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);
@@ -117,7 +117,7 @@ const y = g`
   /* ─── Weight Overrides ─── */
 
   .text--weight-regular {
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
   }
 
   .text--weight-medium {
@@ -155,12 +155,12 @@ const y = g`
     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;
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (r, i, o, n) => {
+  for (var t = n > 1 ? void 0 : n ? b(i, o) : i, l = r.length - 1, x; l >= 0; l--)
+    (x = r[l]) && (t = (n ? x(i, o, t) : x(t)) || t);
+  return n && t && y(i, o, t), t;
 };
-let e = class extends c {
+let e = class extends g {
   constructor() {
     super(...arguments), this.variant = "body", this.weight = void 0, this.color = "default", this.truncate = !1, this.lines = 0, this.as = "span";
   }
@@ -171,27 +171,27 @@ let e = class extends c {
   }
   render() {
     var s;
-    const r = Math.max(0, this.lines), i = this.truncate && r === 0, o = r > 0, x = {
+    const r = Math.max(0, this.lines), i = this.truncate && r === 0, o = r > 0, n = {
       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}
+    }, t = o ? { "-webkit-line-clamp": String(r) } : {}, l = i || o ? (s = this.textContent) == null ? void 0 : s.trim() : void 0, x = f(this._safeTag);
+    return m`
+      <${x}
         part="base"
-        class=${v(x)}
+        class=${v(n)}
         style=${w(t)}
-        title=${u(l || void 0)}
+        title=${d(l || void 0)}
       >
         <slot></slot>
-      </${n}>
+      </${x}>
     `;
   }
 };
-e.styles = [d, y];
+e.styles = [u];
 h([
   a({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
@@ -211,9 +211,9 @@ h([
   a({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
 e = h([
-  m("hx-text")
+  p("hx-text")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-text-DTXjiviE.js.map
+//# sourceMappingURL=hx-text-DxyBxz25.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-text-DxyBxz25.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-normal, 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-normal, 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-normal, 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-normal, 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-normal, 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-normal, 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 '../../utilities/document-token-adoption.js';\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 { 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 = [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  /** @internal */\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\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","__decorateClass","property","customElement"],"mappings":"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"}