@helixui/library 0.1.0

package/dist/shared/hx-help-text-C3WCP11-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-help-text-C3WCP11-.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #b45309);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #15803d);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixHelpTextStyles } from './hx-help-text.styles.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    d=\"M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends LitElement {\n  static override styles = [tokenStyles, helixHelpTextStyles];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\nexport type WcHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","LitElement","classes","icon","role","ariaLive","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACMnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AA6BO,IAAMG,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACQ,GAAahB,CAAmB;AAQ1DiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}

package/dist/shared/hx-icon-CxOk7jZe.js

@@ -0,0 +1,235 @@
+import { css as _, LitElement as S, nothing as n, html as m } from "lit";
+import { property as f, state as u, customElement as x } from "lit/decorators.js";
+import { unsafeHTML as y } from "lit/directives/unsafe-html.js";
+import { t as b } from "./lit-Dpo7RLp4.js";
+const w = _`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* vertical-align: middle ensures the icon aligns to the visual centre of
+       adjacent inline text rather than the text baseline. */
+    vertical-align: middle;
+    /* overflow: hidden prevents malformed or oversized icons from painting
+       outside the component boundary. The inner SVG may still set
+       overflow: visible for its own viewBox content. */
+    overflow: hidden;
+    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
+    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
+    color: var(--hx-icon-color, currentColor);
+    flex-shrink: 0;
+  }
+
+  /* ─── Size Variants ───
+     Fallback pixel values mirror the design token values at time of writing.
+     If token values are updated the fallbacks should be updated to match. */
+
+  :host([hx-size='xs']) {
+    --hx-icon-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([hx-size='sm']) {
+    --hx-icon-size: var(--hx-size-5, 1.25rem);
+  }
+
+  :host([hx-size='md']) {
+    --hx-icon-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([hx-size='lg']) {
+    --hx-icon-size: var(--hx-size-8, 2rem);
+  }
+
+  :host([hx-size='xl']) {
+    --hx-icon-size: var(--hx-size-10, 2.5rem);
+  }
+
+  /* ─── SVG (sprite mode) ───
+     In sprite mode [part="svg"] is an actual <svg> element. The selector
+     targets it specifically. In inline mode the part is applied to a <span>
+     wrapper — see .icon__inline below. */
+
+  svg[part='svg'] {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    display: block;
+    overflow: visible;
+  }
+
+  /* ─── Inline SVG wrapper ───
+     In inline mode [part="svg"] is a <span> that wraps the fetched SVG.
+     The inner <svg> is sized to fill the wrapper. */
+
+  .icon__inline {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon__inline svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    display: block;
+  }
+`;
+var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, h = (e, i, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? $(i, r) : i, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (t = (o ? c(i, r, t) : c(t)) || t);
+  return o && t && z(i, r, t), t;
+};
+let s = class extends S {
+  constructor() {
+    super(...arguments), this.name = "", this.src = void 0, this.spriteUrl = void 0, this.size = "md", this.label = "", this._inlineSvg = "", this._fetchedSrc = void 0, this._fetchSeq = 0;
+  }
+  // ─── Lifecycle ───
+  updated(e) {
+    e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
+  }
+  // ─── Inline SVG Fetch ───
+  async _fetchInlineSvg(e) {
+    const i = ++this._fetchSeq;
+    if (!e) {
+      this._inlineSvg = "", this._fetchedSrc = void 0;
+      return;
+    }
+    try {
+      let r = v.get(e);
+      r || (r = fetch(e).then(async (a) => a.ok ? a.text() : (v.delete(e), "")), v.set(e, r));
+      const o = await r;
+      if (i !== this._fetchSeq) return;
+      if (!o) {
+        this._inlineSvg = "", this._fetchedSrc = void 0;
+        return;
+      }
+      const t = this._sanitizeSvg(o);
+      this._inlineSvg = t, this._fetchedSrc = e;
+    } catch {
+      if (i !== this._fetchSeq) return;
+      v.delete(e), this._inlineSvg = "", this._fetchedSrc = void 0;
+    }
+  }
+  /**
+   * Parses the raw SVG text, strips dangerous content (script elements,
+   * foreignObject, on* event-handler attributes, javascript:/data: URIs,
+   * and style attributes that could carry CSS injection payloads), and
+   * returns the outer SVG markup safe for rendering via `unsafeHTML`.
+   *
+   * Additionally injects `focusable="false"` on the root SVG element to
+   * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips
+   * any ARIA attributes from the inner SVG to prevent conflicts with the
+   * wrapper's own ARIA semantics.
+   */
+  _sanitizeSvg(e) {
+    const r = new DOMParser().parseFromString(e, "image/svg+xml");
+    if (r.querySelector("parsererror"))
+      return "";
+    const t = r.querySelector("svg");
+    if (!t)
+      return "";
+    t.querySelectorAll("script, foreignObject").forEach((l) => {
+      l.remove();
+    });
+    const a = /* @__PURE__ */ new Set(["href", "xlink:href", "src", "action", "formaction"]), c = /* @__PURE__ */ new Set(["role", "aria-label", "aria-labelledby", "aria-hidden"]);
+    return [t, ...Array.from(t.querySelectorAll("*"))].forEach((l) => {
+      Array.from(l.attributes).forEach((p) => {
+        const d = p.name.toLowerCase();
+        if (d.startsWith("on")) {
+          l.removeAttribute(p.name);
+          return;
+        }
+        if (d === "style") {
+          l.removeAttribute(p.name);
+          return;
+        }
+        if (a.has(d)) {
+          const g = p.value.replace(/\s/g, "").toLowerCase();
+          (g.startsWith("javascript:") || g.startsWith("data:")) && l.removeAttribute(p.name);
+        }
+      });
+    }), c.forEach((l) => t.removeAttribute(l)), t.setAttribute("focusable", "false"), t.outerHTML;
+  }
+  // ─── Render Helpers ───
+  /**
+   * Returns the href used in the `<use>` element for sprite mode.
+   * If `name` already begins with `#` it is treated as an inline reference.
+   */
+  _spriteHref() {
+    const e = this.name;
+    if (e.startsWith("#"))
+      return e;
+    const i = this.spriteUrl ?? "";
+    return i ? `${i}#${e}` : `#${e}`;
+  }
+  _renderSprite() {
+    const e = !this.label.trim();
+    return m`
+      <svg
+        part="svg"
+        class="icon__svg"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        role=${e ? n : "img"}
+        aria-label=${e ? n : this.label}
+        aria-hidden=${e ? "true" : n}
+        focusable="false"
+      >
+        ${e ? n : m`<title>${this.label}</title>`}
+        <use href=${this._spriteHref()}></use>
+      </svg>
+    `;
+  }
+  _renderInline() {
+    if (!this._inlineSvg)
+      return n;
+    const e = !this.label.trim();
+    return m`
+      <span
+        part="svg"
+        class="icon__inline"
+        role=${e ? n : "img"}
+        aria-label=${e ? n : this.label}
+        aria-hidden=${e ? "true" : n}
+      >
+        ${y(this._inlineSvg)}
+      </span>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    return typeof this.src == "string" && this.src.trim().length > 0 ? this._renderInline() : this.name ? this._renderSprite() : n;
+  }
+};
+s.styles = [b, w];
+h([
+  f({ type: String })
+], s.prototype, "name", 2);
+h([
+  f({ type: String })
+], s.prototype, "src", 2);
+h([
+  f({ type: String, attribute: "sprite-url" })
+], s.prototype, "spriteUrl", 2);
+h([
+  f({ type: String, reflect: !0, attribute: "hx-size" })
+], s.prototype, "size", 2);
+h([
+  f({ type: String })
+], s.prototype, "label", 2);
+h([
+  u()
+], s.prototype, "_inlineSvg", 2);
+h([
+  u()
+], s.prototype, "_fetchedSrc", 2);
+s = h([
+  x("hx-icon")
+], s);
+const v = /* @__PURE__ */ new Map();
+export {
+  s as H
+};
+//# sourceMappingURL=hx-icon-CxOk7jZe.js.map

package/dist/shared/hx-icon-CxOk7jZe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-CxOk7jZe.js","sources":["../../src/components/hx-icon/hx-icon.styles.ts","../../src/components/hx-icon/hx-icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* vertical-align: middle ensures the icon aligns to the visual centre of\n       adjacent inline text rather than the text baseline. */\n    vertical-align: middle;\n    /* overflow: hidden prevents malformed or oversized icons from painting\n       outside the component boundary. The inner SVG may still set\n       overflow: visible for its own viewBox content. */\n    overflow: hidden;\n    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n    color: var(--hx-icon-color, currentColor);\n    flex-shrink: 0;\n  }\n\n  /* ─── Size Variants ───\n     Fallback pixel values mirror the design token values at time of writing.\n     If token values are updated the fallbacks should be updated to match. */\n\n  :host([hx-size='xs']) {\n    --hx-icon-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) {\n    --hx-icon-size: var(--hx-size-5, 1.25rem);\n  }\n\n  :host([hx-size='md']) {\n    --hx-icon-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) {\n    --hx-icon-size: var(--hx-size-8, 2rem);\n  }\n\n  :host([hx-size='xl']) {\n    --hx-icon-size: var(--hx-size-10, 2.5rem);\n  }\n\n  /* ─── SVG (sprite mode) ───\n     In sprite mode [part=\"svg\"] is an actual <svg> element. The selector\n     targets it specifically. In inline mode the part is applied to a <span>\n     wrapper — see .icon__inline below. */\n\n  svg[part='svg'] {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n    display: block;\n    overflow: visible;\n  }\n\n  /* ─── Inline SVG wrapper ───\n     In inline mode [part=\"svg\"] is a <span> that wraps the fetched SVG.\n     The inner <svg> is sized to fill the wrapper. */\n\n  .icon__inline {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon__inline svg {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n    display: block;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconStyles } from './hx-icon.styles.js';\n\n/**\n * An icon component that supports inline SVG fetching and SVG sprite sheet references.\n * Decorative icons are automatically hidden from assistive technology.\n * When a label is provided the icon is announced as an image with that label.\n *\n * **Render modes:**\n * - **Sprite mode** (recommended for Drupal/SSR): Set `name` and optionally `sprite-url`.\n *   Renders an `<svg><use href=\"...#name\">` — works server-side without JavaScript.\n * - **Inline mode**: Set `src` to a URL of a standalone SVG file. The component fetches,\n *   sanitizes, and embeds the SVG markup. Requires JavaScript; not server-side renderable.\n *   For Drupal/Twig templates use sprite mode to avoid content shift before hydration.\n *\n * @summary SVG icon with sprite and inline fetch modes for healthcare applications.\n *\n * @tag hx-icon\n *\n * @csspart svg - The SVG element rendered in sprite mode, or the inline SVG container\n *   in inline mode. In sprite mode this is an `<svg>` element; in inline mode it is a\n *   `<span>` element wrapping the fetched SVG. Both expose the same `part` name for\n *   consistent external styling via `::part(svg)`.\n *\n * @cssprop [--hx-icon-size=var(--hx-size-6,1.5rem)] - Width and height of the icon.\n * @cssprop [--hx-icon-color=currentColor] - Icon color.\n */\n@customElement('hx-icon')\nexport class HelixIcon extends LitElement {\n  static override styles = [tokenStyles, helixIconStyles];\n\n  /**\n   * Icon name used as the fragment identifier when referencing a sprite sheet.\n   * For sprite mode provide the bare symbol id (e.g. `check`). The component\n   * will build the full href as `${spriteUrl}#${name}`. If `name` already\n   * starts with `#` it is used as-is (inline sprite reference without a base\n   * URL).\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * URL of a standalone SVG file to fetch and render inline. Takes precedence\n   * over sprite mode when both `src` and `spriteUrl`/`name` are set.\n   *\n   * **Note:** Inline mode requires browser JavaScript (`fetch` + `DOMParser`).\n   * It is not server-side renderable. For Drupal/Twig use sprite mode instead.\n   * @attr src\n   */\n  @property({ type: String })\n  src: string | undefined = undefined;\n\n  /**\n   * Base URL of the SVG sprite sheet. Used together with `name` to construct\n   * the `<use>` href: `${spriteUrl}#${name}`.\n   * @attr sprite-url\n   */\n  @property({ type: String, attribute: 'sprite-url' })\n  spriteUrl: string | undefined = undefined;\n\n  /**\n   * Size variant of the icon.\n   *\n   * Set via the `hx-size` HTML attribute (e.g. `hx-size=\"lg\"`) or via the\n   * `size` JavaScript property (e.g. `el.size = 'lg'`). Both are equivalent —\n   * the `attribute: 'hx-size'` mapping is used to avoid colliding with the\n   * native `<input>` `size` attribute in Drupal attribute-passthrough scenarios.\n   * The CEM exposes both the JS property name (`size`) and the HTML attribute\n   * name (`hx-size`).\n   *\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Accessible label for the icon. When non-empty, `role=\"img\"` and\n   * `aria-label` are applied so assistive technology announces the icon.\n   * When empty the icon is treated as decorative and `aria-hidden=\"true\"` is\n   * applied.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Stores the sanitized inner markup of an externally fetched SVG.\n   */\n  @state()\n  private _inlineSvg = '';\n\n  /**\n   * Tracks the `src` URL that was last successfully fetched so that we only\n   * refetch when it genuinely changes.\n   */\n  @state()\n  private _fetchedSrc: string | undefined = undefined;\n\n  /**\n   * Monotonically-increasing sequence number. Incremented before each fetch so\n   * that stale out-of-order responses can be discarded.\n   */\n  private _fetchSeq = 0;\n\n  // ─── Lifecycle ───\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('src') && this.src !== this._fetchedSrc) {\n      void this._fetchInlineSvg(this.src);\n    }\n  }\n\n  // ─── Inline SVG Fetch ───\n\n  private async _fetchInlineSvg(url: string | undefined): Promise<void> {\n    const seq = ++this._fetchSeq;\n\n    if (!url) {\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n      return;\n    }\n\n    // Use module-level cache to avoid duplicate network requests for the same URL.\n    // Multiple hx-icon instances sharing the same src will share one in-flight fetch.\n    try {\n      let pending = _svgCache.get(url);\n      if (!pending) {\n        pending = fetch(url).then(async (response) => {\n          if (!response.ok) {\n            _svgCache.delete(url);\n            return '';\n          }\n          return response.text();\n        });\n        _svgCache.set(url, pending);\n      }\n\n      const text = await pending;\n      if (seq !== this._fetchSeq) return;\n\n      if (!text) {\n        this._inlineSvg = '';\n        this._fetchedSrc = undefined;\n        return;\n      }\n\n      const sanitized = this._sanitizeSvg(text);\n      this._inlineSvg = sanitized;\n      this._fetchedSrc = url;\n    } catch {\n      if (seq !== this._fetchSeq) return;\n      _svgCache.delete(url);\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n    }\n  }\n\n  /**\n   * Parses the raw SVG text, strips dangerous content (script elements,\n   * foreignObject, on* event-handler attributes, javascript:/data: URIs,\n   * and style attributes that could carry CSS injection payloads), and\n   * returns the outer SVG markup safe for rendering via `unsafeHTML`.\n   *\n   * Additionally injects `focusable=\"false\"` on the root SVG element to\n   * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips\n   * any ARIA attributes from the inner SVG to prevent conflicts with the\n   * wrapper's own ARIA semantics.\n   */\n  private _sanitizeSvg(raw: string): string {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(raw, 'image/svg+xml');\n\n    const parseError = doc.querySelector('parsererror');\n    if (parseError) {\n      return '';\n    }\n\n    const svgEl = doc.querySelector('svg');\n    if (!svgEl) {\n      return '';\n    }\n\n    // Remove dangerous embedded elements.\n    svgEl.querySelectorAll('script, foreignObject').forEach((s) => {\n      s.remove();\n    });\n\n    // URL-bearing attributes that can carry javascript:/data: payloads.\n    const urlAttrs = new Set(['href', 'xlink:href', 'src', 'action', 'formaction']);\n\n    // ARIA attributes that may conflict with the wrapper element's own semantics.\n    // The wrapper <span part=\"svg\"> owns role/aria-label/aria-hidden — the inner\n    // SVG must not duplicate or contradict these.\n    const ariaAttrs = new Set(['role', 'aria-label', 'aria-labelledby', 'aria-hidden']);\n\n    // Sanitize every element including the root svg.\n    const allElements: Element[] = [svgEl, ...Array.from(svgEl.querySelectorAll('*'))];\n    allElements.forEach((el) => {\n      const attrs = Array.from(el.attributes);\n      attrs.forEach((attr) => {\n        const attrName = attr.name.toLowerCase();\n        // Strip event-handler attributes.\n        if (attrName.startsWith('on')) {\n          el.removeAttribute(attr.name);\n          return;\n        }\n        // Strip style attributes — CSS can carry injection payloads via\n        // url(javascript:...), expression(), or external filter/clip-path references.\n        if (attrName === 'style') {\n          el.removeAttribute(attr.name);\n          return;\n        }\n        // Strip javascript: and data: URIs from URL-bearing attributes.\n        if (urlAttrs.has(attrName)) {\n          const val = attr.value.replace(/\\s/g, '').toLowerCase();\n          if (val.startsWith('javascript:') || val.startsWith('data:')) {\n            el.removeAttribute(attr.name);\n          }\n        }\n      });\n    });\n\n    // Strip ARIA attributes from the root SVG only — they conflict with the\n    // wrapper element's ARIA. Child elements' ARIA is left intact.\n    ariaAttrs.forEach((a) => svgEl.removeAttribute(a));\n\n    // Inject focusable=\"false\" so IE11/old-Edge do not tab into the SVG.\n    svgEl.setAttribute('focusable', 'false');\n\n    return svgEl.outerHTML;\n  }\n\n  // ─── Render Helpers ───\n\n  /**\n   * Returns the href used in the `<use>` element for sprite mode.\n   * If `name` already begins with `#` it is treated as an inline reference.\n   */\n  private _spriteHref(): string {\n    const n = this.name;\n    if (n.startsWith('#')) {\n      return n;\n    }\n    const base = this.spriteUrl ?? '';\n    return base ? `${base}#${n}` : `#${n}`;\n  }\n\n  private _renderSprite() {\n    const isDecorative = !this.label.trim();\n\n    return html`\n      <svg\n        part=\"svg\"\n        class=\"icon__svg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=${isDecorative ? nothing : 'img'}\n        aria-label=${isDecorative ? nothing : this.label}\n        aria-hidden=${isDecorative ? 'true' : nothing}\n        focusable=\"false\"\n      >\n        ${isDecorative ? nothing : html`<title>${this.label}</title>`}\n        <use href=${this._spriteHref()}></use>\n      </svg>\n    `;\n  }\n\n  private _renderInline() {\n    if (!this._inlineSvg) {\n      return nothing;\n    }\n\n    const isDecorative = !this.label.trim();\n\n    // The fetched SVG is rendered inside a wrapper span that carries the\n    // csspart and ARIA semantics. The inner SVG from unsafeHTML fills the\n    // container via the `.icon__inline svg` CSS rule. ARIA attributes and\n    // focusable=\"false\" are injected into the inner SVG by _sanitizeSvg.\n    return html`\n      <span\n        part=\"svg\"\n        class=\"icon__inline\"\n        role=${isDecorative ? nothing : 'img'}\n        aria-label=${isDecorative ? nothing : this.label}\n        aria-hidden=${isDecorative ? 'true' : nothing}\n      >\n        ${unsafeHTML(this._inlineSvg)}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Inline fetch mode takes precedence when src is a non-empty string.\n    if (typeof this.src === 'string' && this.src.trim().length > 0) {\n      return this._renderInline();\n    }\n\n    // Sprite mode: requires at least a name.\n    if (this.name) {\n      return this._renderSprite();\n    }\n\n    return nothing;\n  }\n}\n\n/**\n * Module-level SVG fetch cache. Shared across all `hx-icon` instances so that\n * multiple icons sharing the same `src` URL issue only one network request.\n * The cache stores in-flight `Promise<string>` values — resolved entries remain\n * cached for the lifetime of the page to prevent redundant re-fetches.\n */\nconst _svgCache = new Map<string, Promise<string>>();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon': HelixIcon;\n  }\n}\n"],"names":["helixIconStyles","css","HelixIcon","LitElement","changed","url","seq","pending","_svgCache","response","text","sanitized","raw","doc","svgEl","s","urlAttrs","ariaAttrs","el","attr","attrName","val","a","n","base","isDecorative","html","nothing","unsafeHTML","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-image-CZPw1AiF.js

@@ -0,0 +1,175 @@
+import { css as g, LitElement as f, html as d, nothing as h } from "lit";
+import { property as r, state as p, customElement as m } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { t as v } from "./lit-Dpo7RLp4.js";
+const y = g`
+  :host {
+    display: block;
+  }
+
+  .image__container {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));
+    border-radius: var(--_radius, var(--hx-image-border-radius, 0));
+  }
+
+  .image__container--error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--hx-image-fallback-min-height, 3rem);
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    color: var(--hx-color-neutral-500, #6b7280);
+  }
+
+  .image__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--_fit, var(--hx-image-object-fit, cover));
+  }
+
+  .image__caption {
+    display: none;
+    padding: var(--hx-image-caption-padding, 0.5rem 0 0);
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));
+    font-size: var(--hx-image-caption-font-size, 0.875rem);
+  }
+
+  .image__caption--visible {
+    display: block;
+  }
+`;
+var b = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, o, a, l) => {
+  for (var i = l > 1 ? void 0 : l ? S(o, a) : o, n = s.length - 1, c; n >= 0; n--)
+    (c = s[n]) && (i = (l ? c(o, a, i) : c(i)) || i);
+  return l && i && b(o, a, i), i;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.src = "", this.alt = void 0, this.decorative = !1, this.width = void 0, this.height = void 0, this.loading = "lazy", this.fit = void 0, this.ratio = void 0, this.rounded = void 0, this.fallbackSrc = void 0, this.srcset = void 0, this.sizes = void 0, this._error = !1, this._usedFallbackSrc = !1, this._hasCaptionSlot = !1;
+  }
+  _handleLoad() {
+    this.dispatchEvent(new CustomEvent("hx-load", { bubbles: !0, composed: !0 }));
+  }
+  _handleError() {
+    if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {
+      this._usedFallbackSrc = !0;
+      return;
+    }
+    this._error = !0, this.dispatchEvent(new CustomEvent("hx-error", { bubbles: !0, composed: !0 }));
+  }
+  _onCaptionSlotChange(s) {
+    const o = s.target;
+    this._hasCaptionSlot = o.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _computeBorderRadius() {
+    if (this.rounded === !0 || this.rounded === "" || this.rounded === "true")
+      return "var(--hx-border-radius-md, 0.375rem)";
+    if (typeof this.rounded == "string" && this.rounded.length > 0 && this.rounded !== "false")
+      return this.rounded;
+  }
+  _currentSrc() {
+    return this._usedFallbackSrc && this.fallbackSrc ? this.fallbackSrc : this.src;
+  }
+  render() {
+    const s = this.decorative || this.alt === "", o = s ? "" : this.alt ?? "", a = this._computeBorderRadius(), l = this._hasCaptionSlot, i = {
+      ...this.ratio ? { "--_ratio": this.ratio } : {},
+      ...this.fit ? { "--_fit": this.fit } : {},
+      ...a ? { "--_radius": a } : {},
+      ...this.width != null ? { width: typeof this.width == "number" ? `${this.width}px` : this.width } : {},
+      ...this.height != null ? { height: typeof this.height == "number" ? `${this.height}px` : this.height } : {}
+    };
+    return this._error ? d`
+        <figure
+          class="image__container image__container--error"
+          style=${u(i)}
+          role="alert"
+          aria-live="polite"
+        >
+          <slot name="fallback"></slot>
+        </figure>
+      ` : d`
+      <figure class="image__container" style=${u(i)}>
+        <img
+          part="base"
+          class="image__img"
+          src=${this._currentSrc() || h}
+          alt=${o}
+          role=${s ? "presentation" : h}
+          loading=${this.loading}
+          width=${this.width != null ? this.width : h}
+          height=${this.height != null ? this.height : h}
+          srcset=${this.srcset ?? h}
+          sizes=${this.sizes ?? h}
+          @load=${this._handleLoad}
+          @error=${this._handleError}
+        />
+        <figcaption
+          part="caption"
+          class=${_({ image__caption: !0, "image__caption--visible": l })}
+        >
+          <slot name="caption" @slotchange=${this._onCaptionSlotChange}></slot>
+        </figcaption>
+      </figure>
+    `;
+  }
+};
+t.styles = [v, y];
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "src", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "alt", 2);
+e([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "decorative", 2);
+e([
+  r({ reflect: !0 })
+], t.prototype, "width", 2);
+e([
+  r({ reflect: !0 })
+], t.prototype, "height", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "loading", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "fit", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "ratio", 2);
+e([
+  r({ reflect: !0 })
+], t.prototype, "rounded", 2);
+e([
+  r({ type: String, attribute: "fallback-src", reflect: !0 })
+], t.prototype, "fallbackSrc", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "srcset", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "sizes", 2);
+e([
+  p()
+], t.prototype, "_error", 2);
+e([
+  p()
+], t.prototype, "_usedFallbackSrc", 2);
+e([
+  p()
+], t.prototype, "_hasCaptionSlot", 2);
+t = e([
+  m("hx-image")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-image-CZPw1AiF.js.map

package/dist/shared/hx-image-CZPw1AiF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-image-CZPw1AiF.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n  :host {\n    display: block;\n  }\n\n  .image__container {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    margin: 0;\n    padding: 0;\n    aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n    border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n  }\n\n  .image__container--error {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--hx-image-fallback-min-height, 3rem);\n    background-color: var(--hx-color-neutral-100, #f3f4f6);\n    color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  .image__img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n  }\n\n  .image__caption {\n    display: none;\n    padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));\n    font-size: var(--hx-image-caption-font-size, 0.875rem);\n  }\n\n  .image__caption--visible {\n    display: block;\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 { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixImageStyles } from './hx-image.styles.js';\n\n/**\n * An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n *\n * @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n *\n * @tag hx-image\n *\n * @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n *\n * @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n *\n * @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n *\n * @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n */\n@customElement('hx-image')\nexport class HelixImage extends LitElement {\n  static override styles = [tokenStyles, helixImageStyles];\n\n  /**\n   * The URL of the image to display.\n   * @attr src\n   */\n  @property({ type: String, reflect: true })\n  src = '';\n\n  /**\n   * Accessible text description of the image.\n   * Required for informative images. Use the `decorative` prop for decorative images\n   * instead of setting this to an empty string — explicit decorative intent is preferred.\n   * @attr alt\n   */\n  @property({ type: String, reflect: true })\n  alt: string | undefined = undefined;\n\n  /**\n   * Marks the image as decorative (hidden from screen readers).\n   * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n   * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  /**\n   * Width of the image element.\n   * @attr width\n   */\n  @property({ reflect: true })\n  width: number | string | undefined = undefined;\n\n  /**\n   * Height of the image element.\n   * @attr height\n   */\n  @property({ reflect: true })\n  height: number | string | undefined = undefined;\n\n  /**\n   * Loading strategy for the image.\n   * @attr loading\n   */\n  @property({ type: String, reflect: true })\n  loading: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * How the image should be resized to fit its container.\n   * Maps to CSS object-fit.\n   * @attr fit\n   */\n  @property({ type: String, reflect: true })\n  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | undefined = undefined;\n\n  /**\n   * CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n   * When set, the container maintains this ratio.\n   * @attr ratio\n   */\n  @property({ type: String, reflect: true })\n  ratio: string | undefined = undefined;\n\n  /**\n   * Border radius for the image.\n   * Boolean attribute (or `true`) applies the theme's medium radius token.\n   * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n   *\n   * Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n   * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n   * a boolean. Both forms apply the theme radius token.\n   *\n   * @attr rounded\n   */\n  @property({ reflect: true })\n  rounded: boolean | string | undefined = undefined;\n\n  /**\n   * Fallback image URL shown when the primary src fails to load.\n   * @attr fallback-src\n   */\n  @property({ type: String, attribute: 'fallback-src', reflect: true })\n  fallbackSrc: string | undefined = undefined;\n\n  /**\n   * A comma-separated list of image candidates for responsive images.\n   * Passed directly to the inner img's srcset attribute.\n   * Enables Drupal responsive image styles and browser-native image selection.\n   * @attr srcset\n   */\n  @property({ type: String, reflect: true })\n  srcset: string | undefined = undefined;\n\n  /**\n   * Media conditions indicating which image size to use alongside srcset.\n   * Works in conjunction with the `srcset` attribute.\n   * @attr sizes\n   */\n  @property({ type: String, reflect: true })\n  sizes: string | undefined = undefined;\n\n  @state()\n  private _error = false;\n\n  @state()\n  private _usedFallbackSrc = false;\n\n  @state()\n  private _hasCaptionSlot = false;\n\n  private _handleLoad(): void {\n    this.dispatchEvent(new CustomEvent('hx-load', { bubbles: true, composed: true }));\n  }\n\n  private _handleError(): void {\n    if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n      // Try the fallback-src before showing the fallback slot\n      this._usedFallbackSrc = true;\n      return;\n    }\n    this._error = true;\n    this.dispatchEvent(new CustomEvent('hx-error', { bubbles: true, composed: true }));\n  }\n\n  private _onCaptionSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _computeBorderRadius(): string | undefined {\n    if (this.rounded === true || this.rounded === '' || this.rounded === 'true') {\n      return 'var(--hx-border-radius-md, 0.375rem)';\n    }\n    if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n      return this.rounded;\n    }\n    return undefined;\n  }\n\n  private _currentSrc(): string {\n    if (this._usedFallbackSrc && this.fallbackSrc) {\n      return this.fallbackSrc;\n    }\n    return this.src;\n  }\n\n  override render() {\n    const isDecorative = this.decorative || this.alt === '';\n    const altText = isDecorative ? '' : (this.alt ?? '');\n    const borderRadius = this._computeBorderRadius();\n    const showCaption = this._hasCaptionSlot;\n\n    const containerStyles = {\n      ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n      ...(this.fit ? { '--_fit': this.fit } : {}),\n      ...(borderRadius ? { '--_radius': borderRadius } : {}),\n      ...(this.width != null\n        ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n        : {}),\n      ...(this.height != null\n        ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n        : {}),\n    };\n\n    if (this._error) {\n      return html`\n        <figure\n          class=\"image__container image__container--error\"\n          style=${styleMap(containerStyles)}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <slot name=\"fallback\"></slot>\n        </figure>\n      `;\n    }\n\n    return html`\n      <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n        <img\n          part=\"base\"\n          class=\"image__img\"\n          src=${this._currentSrc() || nothing}\n          alt=${altText}\n          role=${isDecorative ? 'presentation' : nothing}\n          loading=${this.loading}\n          width=${this.width != null ? this.width : nothing}\n          height=${this.height != null ? this.height : nothing}\n          srcset=${this.srcset ?? nothing}\n          sizes=${this.sizes ?? nothing}\n          @load=${this._handleLoad}\n          @error=${this._handleError}\n        />\n        <figcaption\n          part=\"caption\"\n          class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n        >\n          <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n        </figcaption>\n      </figure>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-image': HelixImage;\n  }\n}\n"],"names":["helixImageStyles","css","HelixImage","LitElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}