@diwacopilot/components 1.2.0 → 1.2.2

package/dist-custom-elements/p-236fbbdd.js

@@ -1,321 +0,0 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
-import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { d as defineCustomElement$1 } from './p-473ec48f.js';
-
-/**
- * diwa-button-pure-styles.ts
- * ===========================
- * CSS-in-JS styles for <diwa-button-pure>.
- *
- * A minimal, transparent button: icon + label only, no background or border.
- * Mirrors the PDS p-button-pure aesthetic.
- *
- * Layout rules:
- *   alignLabel='end'   (default) → icon  label
- *   alignLabel='start'           → label icon  (via flex-direction: row-reverse)
- *   stretch=true                 → fills container width, gap between icon and label
- */
-const getComponentCss = (_size, _disabled, _loading, _underline, _active, _hideLabel, _alignLabel, _stretch) => `
-
-  /* ── Host ──────────────────────────────────────────────────────────── */
-
-  :host {
-    display: inline-flex;
-    position: relative;
-    font-family: var(--diwa-font-family-base);
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* Stretch: fill the parent's inline axis */
-  :host([stretch]) {
-    display: flex;
-    width: 100%;
-  }
-
-  /* ── Root element (<button> or <a>) ─────────────────────────────────── */
-
-  .root {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--diwa-space-2);
-    flex-direction: row; /* overridden by alignLabel=start below */
-
-    background: transparent;
-    border: none;
-    padding: var(--diwa-space-0-5) var(--diwa-space-1);
-    margin: 0;
-    cursor: pointer;
-
-    font-family: inherit;
-    font-size: var(--diwa-font-size-base);
-    font-weight: var(--diwa-font-weight-regular);
-    line-height: 1;
-    color: var(--diwa-text-primary);
-    text-decoration: none;
-    white-space: nowrap;
-
-    -webkit-appearance: none;
-    appearance: none;
-    -webkit-font-smoothing: antialiased;
-
-    border-radius: var(--diwa-radius-sm);
-  }
-
-  /* Stretch: push icon and label to opposite edges */
-  :host([stretch]) .root {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  /* ── Focus ring ─────────────────────────────────────────────────────── */
-
-  ${getFocusStyle('.root')}
-
-  /* ── Size ───────────────────────────────────────────────────────────── */
-
-  :host([size="sm"]) .root {
-    font-size: var(--diwa-font-size-sm);
-  }
-
-  :host([size="lg"]) .root {
-    font-size: var(--diwa-font-size-lg);
-  }
-
-  /* ── Hover / Active ─────────────────────────────────────────────────── */
-
-  .root:hover:not(:disabled) {
-    background-color: var(--diwa-bg-hover);
-  }
-
-  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */
-
-  :host([active]) .root,
-  .root:active:not(:disabled) {
-    background-color: var(--diwa-bg-active);
-  }
-
-  /* ── Disabled ───────────────────────────────────────────────────────── */
-
-  :host([disabled]) .root,
-  .root:disabled {
-    opacity: var(--diwa-opacity-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ── Loading ────────────────────────────────────────────────────────── */
-
-  :host([loading]) .root {
-    cursor: wait;
-    pointer-events: none;
-  }
-
-  /* ── alignLabel: start → label on left, icon on right ──────────────── */
-
-  :host([align-label="start"]) .root {
-    flex-direction: row-reverse;
-  }
-
-  /* ── Underline label text ───────────────────────────────────────────── */
-
-  :host([underline]) .label {
-    text-decoration: underline;
-  }
-
-  /* ── Icon wrapper ───────────────────────────────────────────────────── */
-
-  .icon {
-    display: contents;
-    flex-shrink: 0;
-    line-height: 0;
-  }
-
-  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */
-
-  .label--hidden {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /* ── Spinner ────────────────────────────────────────────────────────── */
-
-  .spinner {
-    /* Size relative to current font-size so it scales with the button size tier */
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    border: var(--diwa-border-width-base) solid currentColor;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: diwa-bp-spin var(--diwa-spinner-duration, 0.7s) linear infinite;
-  }
-
-  @keyframes diwa-bp-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  /* ── Reduced motion ─────────────────────────────────────────────────── */
-
-  ${getReducedMotionStyle('.root', '.spinner')}
-`;
-
-/**
- * diwa-button-pure-utils.ts
- * ==========================
- * ARIA helpers for <diwa-button-pure>.
- */
-const getButtonPureAriaAttributes = (disabled, loading, label, isLink) => {
-    const attrs = {};
-    if (label) {
-        attrs['aria-label'] = label;
-    }
-    if (loading) {
-        attrs['aria-busy'] = 'true';
-    }
-    if (isLink && (disabled || loading)) {
-        attrs['aria-disabled'] = 'true';
-    }
-    return attrs;
-};
-
-const DiwaButtonPure = /*@__PURE__*/ proxyCustomElement(class DiwaButtonPure extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Per-component theme override (light / dark). */
-        this.theme = "dark";
-        /** Text size tier. Controls both font-size and icon size. */
-        this.size = "md";
-        /**
-         * Lucide icon name in kebab-case (e.g. `"arrow-right"`, `"star"`), or `"none"`
-         * to render with no icon. Defaults to `"arrow-right"` — matching PDS.
-         */
-        this.icon = "arrow-right";
-        /** Disabled state. Blocks all pointer and keyboard interaction. */
-        this.disabled = false;
-        /**
-         * Loading state. Replaces the icon with a spinner, blocks interaction,
-         * and announces aria-busy to screen readers.
-         */
-        this.loading = false;
-        /**
-         * When `true`, the label slot is visually hidden (icon-only mode).
-         * Always pair with the `label` prop for screen-reader accessible name.
-         */
-        this.hideLabel = false;
-        /** Forces the button into its active/pressed visual state. */
-        this.active = false;
-        /** Adds an underline decoration to the label text. */
-        this.underline = false;
-        /**
-         * Controls which side the label appears on relative to the icon.
-         * - `"end"` (default): [icon] [label]
-         * - `"start"`:         [label] [icon]
-         */
-        this.alignLabel = "end";
-        /**
-         * When `true`, the button stretches to fill its container and the space
-         * between icon and label expands to fill remaining width.
-         */
-        this.stretch = false;
-        /** Native button type. Only applies when rendered as `<button>`. */
-        this.type = "button";
-        this.handleClick = (e) => {
-            if (!this.isInteractive) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Private helpers
-    // ──────────────────────────────────────────────────────────────
-    get isInteractive() {
-        return !this.disabled && !this.loading;
-    }
-    /** Icon pixel size scaled to the current size tier. */
-    get iconSize() {
-        return this.size === "sm" ? 14 : this.size === "lg" ? 20 : 16;
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        const isLink = !!this.href;
-        const Tag = isLink ? "a" : "button";
-        const ariaAttrs = getButtonPureAriaAttributes(this.disabled, this.loading, this.label, isLink);
-        const commonProps = Object.assign({ class: "root", onClick: this.handleClick }, ariaAttrs);
-        const buttonProps = isLink
-            ? {
-                href: this.href,
-                target: this.target,
-                rel: this.target === "_blank" ? "noopener noreferrer" : undefined,
-                tabIndex: this.disabled || this.loading ? -1 : undefined,
-            }
-            : {
-                type: this.type,
-                name: this.name,
-                value: this.value,
-                disabled: this.disabled || this.loading,
-            };
-        const hasIcon = this.icon !== "none";
-        return (h(Host, { key: 'c2973f6b92898d2f804ccc623ae5558b1a7a819c', "data-theme": this.theme }, h("style", { key: '09bdb4d13b2ccd3dcfedc19fab5335a353a8a12f', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: '9ca133bf89b66a3ee40c17012e1ace540717b5e9' }, commonProps, buttonProps, { part: "base" }), this.loading ? (h("span", { class: "spinner", "aria-hidden": "true", part: "spinner" })) : (hasIcon && (h("span", { class: "icon", "aria-hidden": "true" }, h("diwa-icon", { name: this.icon, size: this.iconSize })))), h("span", { key: '937f66a27ed22abca84415df5261808e306dea0f', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: 'a3e2ae2111fe1258e380de6fc7919b40bd562bb4' })))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return this; }
-}, [17, "diwa-button-pure", {
-        "theme": [513],
-        "size": [513],
-        "icon": [1],
-        "disabled": [516],
-        "loading": [516],
-        "hideLabel": [516, "hide-label"],
-        "active": [516],
-        "underline": [516],
-        "alignLabel": [513, "align-label"],
-        "stretch": [516],
-        "type": [1],
-        "name": [1],
-        "value": [1],
-        "href": [1],
-        "target": [1],
-        "label": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-button-pure", "diwa-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-button-pure":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaButtonPure);
-            }
-            break;
-        case "diwa-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { DiwaButtonPure as D, defineCustomElement as d };
-
-//# sourceMappingURL=p-236fbbdd.js.map

package/dist-custom-elements/p-236fbbdd.js.map

@@ -1 +0,0 @@
-{"file":"p-236fbbdd.js","mappings":"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","names":[],"sources":["src/components/diwa-button-pure/diwa-button-pure-styles.ts","src/components/diwa-button-pure/diwa-button-pure-utils.ts","src/components/diwa-button-pure/diwa-button-pure.tsx"],"sourcesContent":["/**\r\n * diwa-button-pure-styles.ts\r\n * ===========================\r\n * CSS-in-JS styles for <diwa-button-pure>.\r\n *\r\n * A minimal, transparent button: icon + label only, no background or border.\r\n * Mirrors the PDS p-button-pure aesthetic.\r\n *\r\n * Layout rules:\r\n *   alignLabel='end'   (default) → icon  label\r\n *   alignLabel='start'           → label icon  (via flex-direction: row-reverse)\r\n *   stretch=true                 → fills container width, gap between icon and label\r\n */\r\n\r\nimport type { ButtonPureSize, ButtonPureAlignLabel } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  _size: ButtonPureSize,\r\n  _disabled: boolean,\r\n  _loading: boolean,\r\n  _underline: boolean,\r\n  _active: boolean,\r\n  _hideLabel: boolean,\r\n  _alignLabel: ButtonPureAlignLabel,\r\n  _stretch: boolean,\r\n): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-flex;\r\n    position: relative;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* Stretch: fill the parent's inline axis */\r\n  :host([stretch]) {\r\n    display: flex;\r\n    width: 100%;\r\n  }\r\n\r\n  /* ── Root element (<button> or <a>) ─────────────────────────────────── */\r\n\r\n  .root {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    flex-direction: row; /* overridden by alignLabel=start below */\r\n\r\n    background: transparent;\r\n    border: none;\r\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\r\n    margin: 0;\r\n    cursor: pointer;\r\n\r\n    font-family: inherit;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-regular);\r\n    line-height: 1;\r\n    color: var(--diwa-text-primary);\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n    -webkit-font-smoothing: antialiased;\r\n\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  /* Stretch: push icon and label to opposite edges */\r\n  :host([stretch]) .root {\r\n    width: 100%;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.root')}\r\n\r\n  /* ── Size ───────────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .root {\r\n    font-size: var(--diwa-font-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) .root {\r\n    font-size: var(--diwa-font-size-lg);\r\n  }\r\n\r\n  /* ── Hover / Active ─────────────────────────────────────────────────── */\r\n\r\n  .root:hover:not(:disabled) {\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\r\n\r\n  :host([active]) .root,\r\n  .root:active:not(:disabled) {\r\n    background-color: var(--diwa-bg-active);\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .root,\r\n  .root:disabled {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Loading ────────────────────────────────────────────────────────── */\r\n\r\n  :host([loading]) .root {\r\n    cursor: wait;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── alignLabel: start → label on left, icon on right ──────────────── */\r\n\r\n  :host([align-label=\"start\"]) .root {\r\n    flex-direction: row-reverse;\r\n  }\r\n\r\n  /* ── Underline label text ───────────────────────────────────────────── */\r\n\r\n  :host([underline]) .label {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\r\n\r\n  .icon {\r\n    display: contents;\r\n    flex-shrink: 0;\r\n    line-height: 0;\r\n  }\r\n\r\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\r\n\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n  .spinner {\r\n    /* Size relative to current font-size so it scales with the button size tier */\r\n    width: 1em;\r\n    height: 1em;\r\n    flex-shrink: 0;\r\n    border: var(--diwa-border-width-base) solid currentColor;\r\n    border-top-color: transparent;\r\n    border-radius: 50%;\r\n    animation: diwa-bp-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n  }\r\n\r\n  @keyframes diwa-bp-spin {\r\n    to { transform: rotate(360deg); }\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.root', '.spinner')}\r\n`;\r\n","/**\r\n * diwa-button-pure-utils.ts\r\n * ==========================\r\n * ARIA helpers for <diwa-button-pure>.\r\n */\r\n\r\nexport interface ButtonPureAriaAttributes {\r\n  'aria-label'?: string;\r\n  'aria-busy'?: 'true';\r\n  'aria-disabled'?: 'true';\r\n}\r\n\r\nexport const getButtonPureAriaAttributes = (\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  label: string | undefined,\r\n  isLink: boolean,\r\n): ButtonPureAriaAttributes => {\r\n  const attrs: ButtonPureAriaAttributes = {};\r\n\r\n  if (label) {\r\n    attrs['aria-label'] = label;\r\n  }\r\n\r\n  if (loading) {\r\n    attrs['aria-busy'] = 'true';\r\n  }\r\n\r\n  if (isLink && (disabled || loading)) {\r\n    attrs['aria-disabled'] = 'true';\r\n  }\r\n\r\n  return attrs;\r\n};\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\nimport type { ButtonPureSize, ButtonPureAlignLabel, ButtonPureType } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-pure-styles\";\r\nimport { getButtonPureAriaAttributes } from \"./diwa-button-pure-utils\";\r\n\r\n/**\r\n * @component diwa-button-pure\r\n *\r\n * A transparent, text+icon action button — no background or border.\r\n * Mirrors the PDS `p-button-pure` component.\r\n *\r\n * Default layout: [icon] [label]  (alignLabel=\"end\")\r\n * Reversed layout: [label] [icon] (alignLabel=\"start\")\r\n * Stretched layout: [icon] ·····  [label] (stretch + alignLabel=\"end\")\r\n *\r\n * Usage:\r\n *   <diwa-button-pure>Read more</diwa-button-pure>\r\n *   <diwa-button-pure icon=\"arrow-left\" align-label=\"start\">Back</diwa-button-pure>\r\n *   <diwa-button-pure hide-label label=\"Close\" icon=\"x\" />\r\n *\r\n * @slot default — Button label text\r\n */\r\n@Component({\r\n  tag: \"diwa-button-pure\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButtonPure {\r\n  @Element() host!: HTMLDiwaButtonPureElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (light / dark). */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /** Text size tier. Controls both font-size and icon size. */\r\n  @Prop({ reflect: true }) size: ButtonPureSize = \"md\";\r\n\r\n  /**\r\n   * Lucide icon name in kebab-case (e.g. `\"arrow-right\"`, `\"star\"`), or `\"none\"`\r\n   * to render with no icon. Defaults to `\"arrow-right\"` — matching PDS.\r\n   */\r\n  @Prop() icon: string = \"arrow-right\";\r\n\r\n  /** Disabled state. Blocks all pointer and keyboard interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Loading state. Replaces the icon with a spinner, blocks interaction,\r\n   * and announces aria-busy to screen readers.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * When `true`, the label slot is visually hidden (icon-only mode).\r\n   * Always pair with the `label` prop for screen-reader accessible name.\r\n   */\r\n  @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n  /** Forces the button into its active/pressed visual state. */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  /** Adds an underline decoration to the label text. */\r\n  @Prop({ reflect: true }) underline: boolean = false;\r\n\r\n  /**\r\n   * Controls which side the label appears on relative to the icon.\r\n   * - `\"end\"` (default): [icon] [label]\r\n   * - `\"start\"`:         [label] [icon]\r\n   */\r\n  @Prop({ reflect: true }) alignLabel: ButtonPureAlignLabel = \"end\";\r\n\r\n  /**\r\n   * When `true`, the button stretches to fill its container and the space\r\n   * between icon and label expands to fill remaining width.\r\n   */\r\n  @Prop({ reflect: true }) stretch: boolean = false;\r\n\r\n  /** Native button type. Only applies when rendered as `<button>`. */\r\n  @Prop() type: ButtonPureType = \"button\";\r\n\r\n  /** Native button name — submitted with form data. */\r\n  @Prop() name?: string;\r\n\r\n  /** Native button value — submitted with form data. */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * When set, renders as an `<a>` element (link semantics).\r\n   * Pair with `target` for external links.\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /** Link target — only meaningful when `href` is set. */\r\n  @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n\r\n  /**\r\n   * Accessible label for icon-only buttons.\r\n   * Required when `hideLabel` is `true`.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get isInteractive(): boolean {\r\n    return !this.disabled && !this.loading;\r\n  }\r\n\r\n  /** Icon pixel size scaled to the current size tier. */\r\n  private get iconSize(): number {\r\n    return this.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\r\n  }\r\n\r\n  private readonly handleClick = (e: MouseEvent): void => {\r\n    if (!this.isInteractive) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const isLink = !!this.href;\r\n    const Tag = isLink ? \"a\" : \"button\";\r\n\r\n    const ariaAttrs = getButtonPureAriaAttributes(\r\n      this.disabled,\r\n      this.loading,\r\n      this.label,\r\n      isLink,\r\n    );\r\n\r\n    const commonProps = {\r\n      class: \"root\",\r\n      onClick: this.handleClick,\r\n      ...ariaAttrs,\r\n    };\r\n\r\n    const buttonProps = isLink\r\n      ? {\r\n          href: this.href,\r\n          target: this.target,\r\n          rel: this.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\r\n          tabIndex: this.disabled || this.loading ? -1 : undefined,\r\n        }\r\n      : {\r\n          type: this.type,\r\n          name: this.name,\r\n          value: this.value,\r\n          disabled: this.disabled || this.loading,\r\n        };\r\n\r\n    const hasIcon = this.icon !== \"none\";\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.size,\r\n            this.disabled,\r\n            this.loading,\r\n            this.underline,\r\n            this.active,\r\n            this.hideLabel,\r\n            this.alignLabel,\r\n            this.stretch,\r\n          )}\r\n        />\r\n\r\n        <Tag {...commonProps} {...buttonProps} part=\"base\">\r\n          {/* Spinner replaces the icon during loading */}\r\n          {this.loading ? (\r\n            <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n          ) : (\r\n            hasIcon && (\r\n              <span class=\"icon\" aria-hidden=\"true\">\r\n                <diwa-icon name={this.icon} size={this.iconSize} />\r\n              </span>\r\n            )\r\n          )}\r\n\r\n          {/* Label — visually hidden when hideLabel=true but kept for AT */}\r\n          <span\r\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\r\n            part=\"label\"\r\n          >\r\n            <slot />\r\n          </span>\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/p-332838f8.js.map

@@ -1 +0,0 @@
-{"file":"p-332838f8.js","mappings":"AAAA;;;;;AAMA;MACa,YAAY,GAAG,mOAAmO;AAE/P;;;;;;MAMa,iBAAiB,GAAG,MAC/B;;;;;;;;;;;;","names":[],"sources":["src/utils/checkbox-mark.ts"],"sourcesContent":["/**\r\n * Shared checkbox appearance helpers.\r\n * Used by diwa-checkbox and diwa-multi-select-option so both components\r\n * always render an identical checkbox box — single source of truth.\r\n */\r\n\r\n/** White checkmark: M2,6 L5,9 L10,3 on a 12×12 viewBox */\r\nexport const checkmarkSvg = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6 L5 9 L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\")`;\r\n\r\n/**\r\n * Returns the CSS visual declarations for the checkbox box element.\r\n * Does NOT include a selector or braces — inject inside a rule body.\r\n * Does NOT include `width`, `height`, `flex-shrink`, or `margin-top`\r\n * — callers set those because they differ between components.\r\n */\r\nexport const getCheckboxBoxCss = (): string =>\r\n  `border-radius: 3px;\r\n    border: 1.5px solid var(--diwa-border);\r\n    background-color: transparent;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-size: 100%;\r\n    box-sizing: border-box;\r\n    transition: border-color var(--diwa-transition-fast),\r\n                background-color var(--diwa-transition-fast);`;\r\n"],"version":3}

package/dist-custom-elements/p-35c7c864.js.map

@@ -1 +0,0 @@
-{"file":"p-35c7c864.js","mappings":";;AAGA;;;;;;;MAOa,WAAW,GAAG,CACzB,KAAsB,EACtB,SAAkB,EAClB,SAAkB,EAClB,OAAgB,EAChB,QAAiB,EACjB,MAAe,EACf,SAAkB;IAElB,MAAM,WAAW,GACf,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,0BAA0B,CAAC;IAEnC,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,4BAA4B,CAAC;IAErC,MAAM,WAAW,GAAG,OAAO;UACvB,iDAAiD;UACjD,mEAAmE,CAAC;IACxE,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,mCAAmC,CAAC;IAC3E,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,SAAS,IAAI,KAAK,GAAG,mCAAmC,CAAC;IAEzF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiDK,WAAW;;kDAEyB,WAAW;;;;;;;IAOzD,oBAAoB,CACpB,qEAAqE,EACrE,iBAAiB,KAAK,KAAK,MAAM,GAAG,0BAA0B,GAAG,WAAW,GAAG,CAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8Cc,YAAY,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkD7B,OAAO,GAAG,iDAAiD,GAAG,yCAAyC;;;;;;;;;;;IAWpH,oBAAoB,CAAC,aAAa,EAAE,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;aAoB9D,YAAY;;;;;IAKrB,qBAAqB,CAAC,gBAAgB,EAAE,aAAa,CAAC;CACzD,CAAC;AACF;;;;","names":[],"sources":["src/components/diwa-input/input-styles.ts"],"sourcesContent":["import type { InputFieldState } from './types';\nimport { getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\n/**\n * Returns the shared Shadow DOM CSS for all diwa-input-* components.\n *\n * NOTE: Border and background live on .input-wrapper so start/end slot content\n * shares the same bordered box as the native input. This also prevents Tailwind\n * v4 preflight from stripping padding set directly on :host.\n */\nexport const getInputCss = (\n  state: InputFieldState,\n  _disabled: boolean,\n  _readonly: boolean,\n  compact: boolean,\n  hasStart: boolean,\n  hasEnd: boolean,\n  hasSuffix: boolean,\n): string => {\n  const borderColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-input-border)';\n\n  const messageColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-text-secondary)';\n\n  const inputHeight = compact\n    ? 'var(--diwa-touch-target-min-size-compact, 32px)'\n    : 'var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px))';\n  const paddingLeft = hasStart ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n  const paddingRight = (hasEnd || hasSuffix) ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n\n  return `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root layout ────────────────────────────────────────────────────── */\n\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-2);\n  }\n\n  /* ── Label row ──────────────────────────────────────────────────────── */\n\n  .label-row {\n    display: flex;\n    align-items: baseline;\n    gap: var(--diwa-space-1);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n    cursor: default;\n  }\n\n  .required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n  }\n\n  /* ── Input wrapper (owns border + background) ───────────────────────── */\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: ${inputHeight};\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid ${borderColor};\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast), box-shadow var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle(\n    '.input-wrapper:not(:has(input:disabled)):not(:has(input[readonly]))',\n    `border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};`,\n  )}\n\n  /* Focus — border and ring become visible on keyboard navigation */\n  .input-wrapper:focus-within {\n    border-color: var(--diwa-border-focus);\n    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);\n  }\n\n  /* Disabled */\n  .input-wrapper:has(input:disabled) {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Read-only */\n  .input-wrapper:has(input[readonly]) {\n    background: var(--diwa-bg-surface);\n    border-style: dashed;\n    cursor: default;\n  }\n\n  /* ── Start / End slot containers ────────────────────────────────────── */\n\n  .slot-start {\n    display: flex;\n    align-items: center;\n    padding-left: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  .slot-end {\n    display: flex;\n    align-items: center;\n    padding-right: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  /* ── Native input ───────────────────────────────────────────────────── */\n\n  input.input {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0 ${paddingRight} 0 ${paddingLeft};\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    appearance: none;\n    -webkit-appearance: none;\n    outline: none;\n    margin: 0;\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  input.input::placeholder {\n    color: var(--diwa-text-disabled);\n    opacity: 1;\n  }\n\n  /* Number — hide native spinners */\n  input.input[type=\"number\"]::-webkit-inner-spin-button,\n  input.input[type=\"number\"]::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  input.input[type=\"number\"] { -moz-appearance: textfield; }\n\n  /* Search — hide browser-native clear button */\n  input.input[type=\"search\"]::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  /* Date / time — hide native picker icon in webkit */\n  input.input[type=\"date\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"time\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"month\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"week\"]::-webkit-calendar-picker-indicator {\n    opacity: 0.5;\n    cursor: pointer;\n  }\n\n  /* ── Suffix button (password toggle / search clear) ─────────────────── */\n\n  .suffix-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: 100%;\n    min-width: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n    padding: 0 var(--diwa-space-3);\n    background: none;\n    border: none;\n    margin: 0;\n    cursor: pointer;\n    color: var(--diwa-text-secondary);\n    line-height: 0;\n    transition: color var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle('.suffix-btn', 'color: var(--diwa-text-primary);')}\n\n  .suffix-btn:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  /* ── Description ────────────────────────────────────────────────── */\n\n  .description {\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Message (state-coloured) ───────────────────────────────────── */\n\n  .message {\n    font-size: var(--diwa-font-size-sm);\n    color: ${messageColor};\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  ${getReducedMotionStyle('.input-wrapper', '.suffix-btn')}\n`;\n};\n"],"version":3}

package/dist-custom-elements/p-3fce050e.js

@@ -1,117 +0,0 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
-import { a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { L as LoaderCircle } from './p-ac8e14be.js';
-
-const getComponentCss = () => `
-  :host {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    align-self: center;
-    width: var(--diwa-spinner-size-md);
-    height: var(--diwa-spinner-size-md);
-  }
-
-  :host([size="sm"]) {
-    width: var(--diwa-spinner-size-sm);
-    height: var(--diwa-spinner-size-sm);
-  }
-
-  :host([size="lg"]) {
-    width: var(--diwa-spinner-size-lg);
-    height: var(--diwa-spinner-size-lg);
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  .glyph {
-    display: block;
-    width: 100%;
-    height: 100%;
-    color: var(--diwa-spinner-color, currentColor);
-    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;
-    transform-origin: center;
-  }
-
-  @keyframes diwa-spinner-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  ${getReducedMotionStyle('.glyph')}
-`;
-
-var _a;
-function toInnerSvg(nodes) {
-    return nodes
-        .map(([tag, attrs]) => {
-        const attrStr = Object.entries(attrs)
-            .map(([k, v]) => `${k}="${v}"`)
-            .join(' ');
-        return `<${tag} ${attrStr}/>`;
-    })
-        .join('');
-}
-const loaderCircleSvg = toInnerSvg((_a = LoaderCircle) !== null && _a !== void 0 ? _a : []);
-const DiwaSpinner = /*@__PURE__*/ proxyCustomElement(class DiwaSpinner extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Size tier — controls diameter of the spinner ring. */
-        this.size = "md";
-        /** Per-component theme override. */
-        this.theme = "dark";
-        /**
-         * Accessible label announced by screen readers.
-         * Defaults to "Loading" when omitted.
-         */
-        this.label = "Loading";
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    componentDidRender() {
-        if (this.svgEl) {
-            this.svgEl.innerHTML = loaderCircleSvg;
-        }
-    }
-    render() {
-        return (
-        /**
-         * role="status" on the Host allows screen readers to announce
-         * when the spinner appears without stealing focus (live region,
-         * polite by default). aria-label provides the announcement text.
-         */
-        h(Host, { key: '5a130b11797c45cf6c3e9d1e1493f35cbef40ed6', role: "status", "aria-label": this.label, "data-theme": this.theme }, h("style", { key: 'b1f1c14a660db1ec56afbf814c6bfc5b21e4cf24', innerHTML: getComponentCss() }), h("svg", { key: '3e30e5ce78a52ba9904f808641fda6b0a3f5131f', ref: (el) => (this.svgEl = el), class: "glyph", "aria-hidden": "true", part: "ring", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-    }
-}, [1, "diwa-spinner", {
-        "size": [513],
-        "theme": [513],
-        "label": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-spinner":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaSpinner);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { DiwaSpinner as D, defineCustomElement as d };
-
-//# sourceMappingURL=p-3fce050e.js.map

package/dist-custom-elements/p-3fce050e.js.map

@@ -1 +0,0 @@
-{"file":"p-3fce050e.js","mappings":";;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCzC,qBAAqB,CAAC,QAAQ,CAAC;CAClC;;;ACnCD,SAAS,UAAU,CAAC,KAAe;IACjC,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;QAChB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;aAClC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;aAC9B,IAAI,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,IAAI,GAAG,IAAI,OAAO,IAAI,CAAC;KAC/B,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC;AAED,MAAM,eAAe,GAAG,UAAU,CAAC,MAACA,YAA+C,mCAAI,EAAE,CAAC,CAAC;MA0B9E,WAAW;IAJxB;;;;;;;;QAY2B,SAAI,GAAgB,IAAI,CAAC;;QAGzB,UAAK,GAAU,MAAM,CAAC;;;;;QAMvC,UAAK,GAAW,SAAS,CAAC;KAqCnC;;;;IA/BC,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe,CAAC;SACxC;KACF;IAED,MAAM;QACJ;;;;;;QAME,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,KAAK,gBAAc,IAAI,CAAC,KAAK,IAChE,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAmB,CAAC,EAC/C,KAAK,EAAC,OAAO,iBACD,MAAM,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["icons.LoaderCircle"],"sources":["src/components/diwa-spinner/diwa-spinner-styles.ts","src/components/diwa-spinner/diwa-spinner.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    align-self: center;\r\n    width: var(--diwa-spinner-size-md);\r\n    height: var(--diwa-spinner-size-md);\r\n  }\r\n\r\n  :host([size=\"sm\"]) {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) {\r\n    width: var(--diwa-spinner-size-lg);\r\n    height: var(--diwa-spinner-size-lg);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .glyph {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    color: var(--diwa-spinner-color, currentColor);\r\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\r\n    transform-origin: center;\r\n  }\r\n\r\n  @keyframes diwa-spinner-spin {\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  ${getReducedMotionStyle('.glyph')}\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport { icons } from 'lucide';\r\nimport type { SpinnerSize } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from './diwa-spinner-styles';\r\n\r\ntype IconNode = ReadonlyArray<readonly [string, Record<string, string>]>;\r\n\r\nfunction toInnerSvg(nodes: IconNode): string {\r\n  return nodes\r\n    .map(([tag, attrs]) => {\r\n      const attrStr = Object.entries(attrs)\r\n        .map(([k, v]) => `${k}=\"${v}\"`)\r\n        .join(' ');\r\n      return `<${tag} ${attrStr}/>`;\r\n    })\r\n    .join('');\r\n}\r\n\r\nconst loaderCircleSvg = toInnerSvg((icons as Record<string, IconNode>).LoaderCircle ?? []);\r\n\r\n/**\r\n * @component diwa-spinner\r\n *\r\n * An animated loading indicator based on a Lucide circular spinner glyph.\r\n * Communicates asynchronous activity to both sighted users and screen readers\r\n * via role=\"status\" and an accessible label.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-spinner-size-sm    Diameter for the sm tier (default 14px)\r\n *   --diwa-spinner-size-md    Diameter for the md tier (default 16px)\r\n *   --diwa-spinner-size-lg    Diameter for the lg tier (default 20px)\r\n *   --diwa-spinner-color      Spinner stroke colour (defaults to currentColor)\r\n *\r\n * Usage:\r\n *   <diwa-spinner></diwa-spinner>\r\n *   <diwa-spinner size=\"lg\" label=\"Saving changes…\"></diwa-spinner>\r\n *\r\n * Parity: mirrors stateless/stateful spinner behavior with consistent\n * aria-label propagation and size variants.\n */\r\n@Component({\r\n  tag: \"diwa-spinner\",\r\n  shadow: true,\r\n})\r\nexport class DiwaSpinner {\r\n  private svgEl?: SVGSVGElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Size tier — controls diameter of the spinner ring. */\r\n  @Prop({ reflect: true }) size: SpinnerSize = \"md\";\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /**\r\n   * Accessible label announced by screen readers.\r\n   * Defaults to \"Loading\" when omitted.\r\n   */\r\n  @Prop() label: string = \"Loading\";\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentDidRender() {\r\n    if (this.svgEl) {\r\n      this.svgEl.innerHTML = loaderCircleSvg;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      /**\r\n       * role=\"status\" on the Host allows screen readers to announce\r\n       * when the spinner appears without stealing focus (live region,\r\n       * polite by default). aria-label provides the announcement text.\r\n       */\r\n      <Host role=\"status\" aria-label={this.label} data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <svg\r\n          ref={(el) => (this.svgEl = el as SVGSVGElement)}\r\n          class=\"glyph\"\r\n          aria-hidden=\"true\"\r\n          part=\"ring\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}