@diwacopilot/components 1.2.0 → 1.2.1

package/dist-custom-elements/diwa-badge.js

@@ -1,166 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
-import { a as getReducedMotionStyle } from './p-70bbb21a.js';
-
-const getComponentCss = () => `
-  @keyframes diwa-badge-pulse {
-    0%, 100% { opacity: 1; }
-    50%       { opacity: 0.3; }
-  }
-
-  :host {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--diwa-font-family-base);
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--diwa-space-1-5, 6px);
-    padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));
-    border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));
-    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-badge-border-color, var(--diwa-border));
-    font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));
-    font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));
-    line-height: var(--diwa-line-height-tight);
-    white-space: nowrap;
-    background-color: var(--diwa-bg-hover);
-    color: var(--diwa-text-secondary);
-    transition: var(--diwa-transition-colors);
-  }
-
-  /* ── Pulsing dot indicator ──────────────────────────────────────────── */
-
-  .dot {
-    display: none;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--_badge-dot-color, currentColor);
-    flex-shrink: 0;
-    animation: diwa-badge-pulse 2s ease-in-out infinite;
-  }
-
-  :host([dot]) .dot {
-    display: block;
-  }
-
-  ${getReducedMotionStyle('.badge', '.dot')}
-
-  /* ── Size: sm ──────────────────────────────────────────────────────── */
-
-  :host([size="sm"]) .badge {
-    padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));
-    font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));
-  }
-
-  :host([size="sm"]) .dot {
-    width: 5px;
-    height: 5px;
-  }
-
-  /* ── Variant: neutral (default) ────────────────────────────────────── */
-
-  :host([variant="neutral"]) .badge {
-    --diwa-badge-border-color: var(--diwa-border);
-    --_badge-dot-color: var(--diwa-text-muted);
-    background-color: var(--diwa-bg-hover);
-    color: var(--diwa-text-secondary);
-  }
-
-  /* ── Variant: accent ───────────────────────────────────────────────── */
-
-  :host([variant="accent"]) .badge {
-    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-accent) 25%, transparent);
-    --_badge-dot-color: var(--diwa-accent);
-    background-color: var(--diwa-accent-bg);
-    color: var(--diwa-accent);
-  }
-
-  /* ── Variant: success ──────────────────────────────────────────────── */
-
-  :host([variant="success"]) .badge {
-    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-success-text) 25%, transparent);
-    --_badge-dot-color: var(--diwa-success-text);
-    background-color: var(--diwa-success-bg);
-    color: var(--diwa-success-text);
-  }
-
-  /* ── Variant: warning ──────────────────────────────────────────────── */
-
-  :host([variant="warning"]) .badge {
-    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-warning-text) 25%, transparent);
-    --_badge-dot-color: var(--diwa-warning-text);
-    background-color: var(--diwa-warning-bg);
-    color: var(--diwa-warning-text);
-  }
-
-  /* ── Variant: danger ───────────────────────────────────────────────── */
-
-  :host([variant="danger"]) .badge {
-    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-danger-text) 25%, transparent);
-    --_badge-dot-color: var(--diwa-danger-text);
-    background-color: var(--diwa-danger-bg);
-    color: var(--diwa-danger-text);
-  }
-`;
-
-const DiwaBadge$1 = /*@__PURE__*/ proxyCustomElement(class DiwaBadge extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Semantic colour variant. Determines background and text colour. */
-        this.variant = "neutral";
-        /** Size tier — controls height, padding, and font-size. */
-        this.size = "md";
-        /**
-         * When true, renders a small animated pulsing dot before the slot content.
-         * Use to indicate live status or active processes.
-         */
-        this.dot = false;
-        /** Per-component theme override. */
-        this.theme = 'dark';
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        var _a;
-        return (h(Host, { key: 'b305c163c262aee55c46a7d69ede81bda62ac56f', "data-theme": this.theme }, h("style", { key: '40a4c220bcf3847f8e894bf5f05896d1c4c21f17', innerHTML: getComponentCss() }), h("span", { key: 'c642e078977a843580ef50d3a4fb942601e84ad7', class: "badge", part: "base", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined, role: this.label ? "status" : undefined }, this.dot && h("span", { key: '74ff1195c0aa5e28c16fafef5d11b79236e92ec6', class: "dot", "aria-hidden": "true" }), h("slot", { key: 'c429093035124e22ba2a03e98238407345c60d3b' }))));
-    }
-}, [1, "diwa-badge", {
-        "variant": [513],
-        "size": [513],
-        "label": [1],
-        "dot": [516],
-        "theme": [513]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-badge"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaBadge$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaBadge = DiwaBadge$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaBadge, defineCustomElement };
-
-//# sourceMappingURL=diwa-badge.js.map
+import{t as a,p as n,H as e,h as r,a as d}from"./index.js";import{a as i}from"./p-C8h0Vfqp.js";const t=n(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.variant="neutral",this.size="md",this.dot=!1,this.theme="dark"}render(){var a;return r(d,{key:"b305c163c262aee55c46a7d69ede81bda62ac56f","data-theme":this.theme},r("style",{key:"40a4c220bcf3847f8e894bf5f05896d1c4c21f17",innerHTML:`\n  @keyframes diwa-badge-pulse {\n    0%, 100% { opacity: 1; }\n    50%       { opacity: 0.3; }\n  }\n\n  :host {\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--diwa-font-family-base);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-1-5, 6px);\n    padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));\n    border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));\n    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-badge-border-color, var(--diwa-border));\n    font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));\n    font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));\n    line-height: var(--diwa-line-height-tight);\n    white-space: nowrap;\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-secondary);\n    transition: var(--diwa-transition-colors);\n  }\n\n  /* ── Pulsing dot indicator ──────────────────────────────────────────── */\n\n  .dot {\n    display: none;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: var(--_badge-dot-color, currentColor);\n    flex-shrink: 0;\n    animation: diwa-badge-pulse 2s ease-in-out infinite;\n  }\n\n  :host([dot]) .dot {\n    display: block;\n  }\n\n  ${i(".badge",".dot")}\n\n  /* ── Size: sm ──────────────────────────────────────────────────────── */\n\n  :host([size="sm"]) .badge {\n    padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));\n    font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));\n  }\n\n  :host([size="sm"]) .dot {\n    width: 5px;\n    height: 5px;\n  }\n\n  /* ── Variant: neutral (default) ────────────────────────────────────── */\n\n  :host([variant="neutral"]) .badge {\n    --diwa-badge-border-color: var(--diwa-border);\n    --_badge-dot-color: var(--diwa-text-muted);\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-secondary);\n  }\n\n  /* ── Variant: accent ───────────────────────────────────────────────── */\n\n  :host([variant="accent"]) .badge {\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-accent) 25%, transparent);\n    --_badge-dot-color: var(--diwa-accent);\n    background-color: var(--diwa-accent-bg);\n    color: var(--diwa-accent);\n  }\n\n  /* ── Variant: success ──────────────────────────────────────────────── */\n\n  :host([variant="success"]) .badge {\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-success-text) 25%, transparent);\n    --_badge-dot-color: var(--diwa-success-text);\n    background-color: var(--diwa-success-bg);\n    color: var(--diwa-success-text);\n  }\n\n  /* ── Variant: warning ──────────────────────────────────────────────── */\n\n  :host([variant="warning"]) .badge {\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-warning-text) 25%, transparent);\n    --_badge-dot-color: var(--diwa-warning-text);\n    background-color: var(--diwa-warning-bg);\n    color: var(--diwa-warning-text);\n  }\n\n  /* ── Variant: danger ───────────────────────────────────────────────── */\n\n  :host([variant="danger"]) .badge {\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-danger-text) 25%, transparent);\n    --_badge-dot-color: var(--diwa-danger-text);\n    background-color: var(--diwa-danger-bg);\n    color: var(--diwa-danger-text);\n  }\n`}),r("span",{key:"c642e078977a843580ef50d3a4fb942601e84ad7",class:"badge",part:"base","aria-label":null!==(a=this.label)&&void 0!==a?a:void 0,role:this.label?"status":void 0},this.dot&&r("span",{key:"74ff1195c0aa5e28c16fafef5d11b79236e92ec6",class:"dot","aria-hidden":"true"}),r("slot",{key:"c429093035124e22ba2a03e98238407345c60d3b"})))}},[257,"diwa-badge",{variant:[513],size:[513],label:[1],dot:[516],theme:[513]}]);function o(){"undefined"!=typeof customElements&&["diwa-badge"].forEach((n=>{"diwa-badge"===n&&(customElements.get(a(n))||customElements.define(a(n),t))}))}o();const s=t,c=o;export{s as DiwaBadge,c as defineCustomElement}

package/dist-custom-elements/diwa-button-pure.js

@@ -1,8 +1 @@
-import { D as DiwaButtonPure$1, d as defineCustomElement$1 } from './p-236fbbdd.js';
-
-const DiwaButtonPure = DiwaButtonPure$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaButtonPure, defineCustomElement };
-
-//# sourceMappingURL=diwa-button-pure.js.map
+import{D as o,d as p}from"./p-C3hNpgqg.js";const s=o,r=p;export{s as DiwaButtonPure,r as defineCustomElement}

package/dist-custom-elements/diwa-button.js

@@ -1,455 +1 @@
-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$2 } from './p-473ec48f.js';
-
-/**
- * diwa-button-styles.ts
- * ======================
- * CSS-in-JS style function for <diwa-button>.
- *
- * Returns a complete, scoped CSS string injected into the component's Shadow DOM
- * via a <style innerHTML={...}> element in render(). This follows the shared
- * Diwa component styling architecture used across web components.
- *
- * All colour values use CSS custom properties (--diwa-*) — raw values are never
- * hardcoded. This means theming is entirely handled by the token cascade: when the
- * host element carries data-theme="light", the [data-theme="light"] overrides
- * defined in app.css cascade into the Shadow DOM via custom property inheritance.
- *
- * The function accepts the full prop surface for future conditional optimisation
- * (e.g. generating only variant- or size-specific CSS to reduce payload), but
- * currently outputs the complete ruleset regardless of prop values.
- */
-/**
- * Generates scoped CSS for the <diwa-button> shadow tree.
- *
- * @param _variant  — current ButtonVariant (reserved for conditional CSS)
- * @param _size     — current ButtonSize    (reserved for conditional CSS)
- * @param _disabled — disabled state        (reserved for conditional CSS)
- * @param _loading  — loading state         (reserved for conditional CSS)
- */
-const getComponentCss = (_variant, _size, _disabled, _loading) => `
-  /* ── Host ──────────────────────────────────────────────────────────── */
-
-  :host {
-    display: inline-flex;
-    position: relative;
-    font-family: var(--diwa-font-family-base);
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */
-
-  .inner {
-    /* Layout */
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--diwa-space-2);
-
-    /* Sizing defaults (md) */
-    height: var(--diwa-button-height, 40px);
-    padding: 0 var(--diwa-button-padding-x, 16px);
-    box-sizing: border-box;
-    width: 100%;
-
-    /* Shape */
-    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));
-    border: var(--diwa-border-width-thin) solid transparent;
-    font-size: var(--diwa-font-size-base);
-    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));
-    font-family: inherit;
-    line-height: 1;
-    white-space: nowrap;
-    text-decoration: none;
-
-    /* Interaction */
-    cursor: pointer;
-    user-select: none;
-    -webkit-font-smoothing: antialiased;
-    position: relative;
-
-    /* Motion */
-    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);
-
-    /* Reset native button styles */
-    appearance: none;
-    -webkit-appearance: none;
-  }
-
-  /* ── Focus ring ─────────────────────────────────────────────────────── */
-
-  ${getFocusStyle('.inner')}
-
-  /* ── Variant: primary ───────────────────────────────────────────────── */
-
-  :host([variant="primary"]) .inner {
-    background-color: var(--diwa-button-bg, var(--diwa-accent));
-    color: var(--diwa-button-color, var(--diwa-text-inverse));
-    border-color: transparent;
-  }
-
-  :host([variant="primary"]) .inner:hover:not(:disabled) {
-    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));
-  }
-
-  :host([variant="primary"]) .inner:active:not(:disabled) {
-    background-color: var(--diwa-accent-active);
-    transform: translateY(1px);
-  }
-
-  /* ── Variant: secondary ─────────────────────────────────────────────── */
-
-  :host([variant="secondary"]) .inner {
-    background-color: transparent;
-    color: var(--diwa-accent);
-    border-color: var(--diwa-accent);
-  }
-
-  :host([variant="secondary"]) .inner:hover:not(:disabled) {
-    background-color: var(--diwa-accent-bg);
-    border-color: var(--diwa-accent-hover);
-  }
-
-  :host([variant="secondary"]) .inner:active:not(:disabled) {
-    background-color: var(--diwa-accent-muted);
-    transform: translateY(1px);
-  }
-
-  /* ── Variant: ghost ─────────────────────────────────────────────────── */
-
-  :host([variant="ghost"]) .inner {
-    background-color: transparent;
-    color: var(--diwa-text-secondary);
-    border-color: transparent;
-  }
-
-  :host([variant="ghost"]) .inner:hover:not(:disabled) {
-    background-color: var(--diwa-bg-hover);
-    color: var(--diwa-text-primary);
-  }
-
-  :host([variant="ghost"]) .inner:active:not(:disabled) {
-    background-color: var(--diwa-bg-active);
-    transform: translateY(1px);
-  }
-
-  /* ── Variant: danger ────────────────────────────────────────────────── */
-
-  :host([variant="danger"]) .inner {
-    background-color: var(--diwa-danger);
-    color: var(--diwa-text-inverse);
-    border-color: transparent;
-  }
-
-  :host([variant="danger"]) .inner:hover:not(:disabled) {
-    background-color: var(--diwa-danger-hover);
-  }
-
-  :host([variant="danger"]) .inner:active:not(:disabled) {
-    background-color: var(--diwa-danger-active);
-    transform: translateY(1px);
-  }
-
-  /* ── Size: sm ───────────────────────────────────────────────────────── */
-
-  :host([size="sm"]) .inner {
-    height: var(--diwa-button-height-sm, 32px);
-    padding: 0 var(--diwa-button-padding-x-sm, 10px);
-    font-size: var(--diwa-font-size-md);
-  }
-
-  /* ── Size: lg ───────────────────────────────────────────────────────── */
-
-  :host([size="lg"]) .inner {
-    height: var(--diwa-button-height-lg, 44px);
-    padding: 0 var(--diwa-space-10);
-    font-size: var(--diwa-font-size-lg);
-  }
-
-  /* ── State: disabled ────────────────────────────────────────────────── */
-
-  :host([disabled]) .inner,
-  .inner:disabled {
-    opacity: var(--diwa-opacity-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ── State: loading ─────────────────────────────────────────────────── */
-
-  :host([loading]) .inner {
-    cursor: wait;
-    pointer-events: none;
-  }
-
-  /* ── Spinner ────────────────────────────────────────────────────────── */
-
-  .spinner {
-    width: var(--diwa-spinner-size-sm);
-    height: var(--diwa-spinner-size-sm);
-    flex-shrink: 0;
-    border: var(--diwa-border-width-base) solid currentColor;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;
-  }
-
-  @keyframes diwa-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  /* ── Icon slots ─────────────────────────────────────────────────────── */
-
-  .icon-start,
-  .icon-end {
-    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;
-  }
-
-  /* ── Icon-only mode ─────────────────────────────────────────────────── */
-
-  :host([hide-label]) .inner {
-    width: var(--diwa-button-height, 40px);
-    padding: 0;
-  }
-
-  :host([hide-label][size="sm"]) .inner {
-    width: var(--diwa-button-height-sm, 32px);
-  }
-
-  :host([hide-label][size="lg"]) .inner {
-    width: var(--diwa-button-height-lg, 44px);
-  }
-
-  /* ── Reduced motion ─────────────────────────────────────────────────── */
-
-  ${getReducedMotionStyle('.inner', '.label', '.spinner')}
-`;
-
-/**
- * diwa-button-utils.ts
- * =====================
- * Utility types and helper functions for <diwa-button>.
- *
- * Mirrors the PDS pattern used in:
- *   packages/components/src/components/button/button-utils.ts
- *
- * Separating ARIA logic into a dedicated utility file keeps the main component
- * lean and makes the accessibility mapping independently testable.
- */
-/**
- * Assembles ARIA attributes for the inner interactive element.
- *
- * Decision table:
- * - `aria-label`    → set when `label` prop is provided (icon-only or supplemental name)
- * - `aria-busy`     → set when `loading` is true (announces async activity to AT)
- * - `aria-disabled` → set when disabled **and** the element is an <a> (links have no
- *                     native disabled — we simulate it with aria + tabIndex=-1)
- *
- * For native <button>: disabled/loading are expressed via the `disabled` HTML attribute
- * (handled in the calling component's render), so `aria-disabled` is not needed there.
- *
- * @param disabled — whether the button interaction is blocked
- * @param loading  — whether the button is performing an async operation
- * @param label    — accessible label string (optional)
- * @param isLink   — true when the component renders as <a> (href is provided)
- */
-const getButtonAriaAttributes = (disabled, loading, label, isLink) => {
-    const attrs = {};
-    if (label) {
-        attrs['aria-label'] = label;
-    }
-    if (loading) {
-        attrs['aria-busy'] = 'true';
-    }
-    // <a> elements have no native `disabled` attribute — express it via ARIA.
-    if (isLink && (disabled || loading)) {
-        attrs['aria-disabled'] = 'true';
-    }
-    return attrs;
-};
-
-const DiwaButton$1 = /*@__PURE__*/ proxyCustomElement(class DiwaButton extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // ──────────────────────────────────────────────────────────────
-        // Props — each @Prop generates a corresponding argType in Storybook
-        // and an HTML attribute on the custom element.
-        // ──────────────────────────────────────────────────────────────
-        /**
-         * Per-component theme override.
-         *
-         * Setting this reflects data-theme onto the host element, causing the light/dark
-         * token overrides in app.css to cascade into the Shadow DOM automatically.
-         * Mirrors the `theme` prop on every PDS component.
-         */
-        this.theme = "dark";
-        /** Visual style variant. */
-        this.variant = "primary";
-        /** Size tier — controls height and padding. */
-        this.size = "md";
-        /**
-         * Native button type. Only applies when rendered as <button>
-         * (i.e., no `href` prop is set).
-         */
-        this.type = "button";
-        /**
-         * Disabled state. Blocks all pointer and keyboard interaction.
-         * When rendered as <a>, sets aria-disabled instead of disabled
-         * (the `disabled` attribute is not valid on anchor elements).
-         */
-        this.disabled = false;
-        /**
-         * Loading state. Shows an inline spinner, disables the button,
-         * and sets aria-busy="true" to communicate async activity to
-         * screen readers.
-         */
-        this.loading = false;
-        /**
-         * When `true`, the default label slot is visually hidden so the button
-         * renders as a compact square (icon-only mode). The slot text is kept in
-         * the DOM for screen-reader accessible-name calculation.
-         *
-         * For best accessibility, always pair with the `label` prop **or** ensure
-         * the default slot contains descriptive text, so the button has a name.
-         *
-         * Usage:
-         *   <diwa-button hide-label label="Save">
-         *     <svg slot="icon-start">…</svg>
-         *   </diwa-button>
-         */
-        this.hideLabel = false;
-        /**
-         * Lucide icon name in kebab-case (e.g. `"star"`, `"arrow-right"`), or `'none'`
-         * to show no icon. When set to any value other than `'none'`, renders a
-         * `<diwa-icon>` in the leading (icon-start) position.
-         *
-         * The `icon-start` slot still works alongside this prop — the prop-rendered
-         * icon comes first, followed by any slotted content.
-         */
-        this.icon = 'none';
-        this.handleClick = (e) => {
-            if (!this.isInteractive) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            // When interactive, allow the native click to retarget to the host element.
-            // Framework wrappers expose it as onClick (React) / @click (Vue) / (click) (Angular).
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Private helpers
-    // ──────────────────────────────────────────────────────────────
-    get isInteractive() {
-        return !this.disabled && !this.loading;
-    }
-    get iconSize() {
-        return this.size === 'sm' ? 16 : this.size === 'lg' ? 24 : 20;
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        /**
-         * Render as <a> when href is provided (link semantics).
-         * Render as <button> for all interactive / form scenarios.
-         */
-        const isLink = !!this.href;
-        const Tag = isLink ? "a" : "button";
-        // Consolidate all ARIA attributes via the utility — mirrors PDS getButtonAriaAttributes()
-        const ariaAttrs = getButtonAriaAttributes(this.disabled, this.loading, this.label, isLink);
-        const commonProps = Object.assign({ class: "inner", onClick: this.handleClick }, ariaAttrs);
-        const buttonProps = isLink
-            ? {
-                href: this.href,
-                target: this.target,
-                rel: this.target === "_blank" ? "noopener noreferrer" : undefined,
-                // Disabled links have no native mechanism — suppress tab stop too
-                tabIndex: this.disabled || this.loading ? -1 : undefined,
-            }
-            : {
-                type: this.type,
-                name: this.name,
-                value: this.value,
-                disabled: this.disabled || this.loading,
-            };
-        return (
-        /**
-         * <Host> renders the outer custom element tag itself.
-         *
-         * data-theme is set from the `theme` prop so that the [data-theme="light"]
-         * CSS variable overrides in app.css cascade into this Shadow DOM tree via
-         * custom property inheritance — no colour values are hardcoded here.
-         *
-         * Reflecting `variant` and `size` as attributes allows CSS consumers to
-         * target the host from outside:  diwa-button[variant="primary"] { ... }
-         *
-         * The part="base" exposes internals for ::part() in host-app stylesheets.
-         */
-        h(Host, { key: '40eee896f96707aa7e552ecb4a1dd9329dae5ec4', "data-theme": this.theme, role: isLink ? undefined : "button", "aria-disabled": (this.disabled || this.loading) && isLink ? "true" : undefined }, h("style", { key: 'd41a20f5d58d5408efeec81ea452d1bf4c160cbe', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: 'e4cb9b0f3b1d581803cee8a82ca9d838c48dd5f2' }, commonProps, buttonProps, { part: "base" /* ::part(base) hook for consumers */ }), this.loading && (h("span", { key: 'd57fe6c27bd115e73f136003e9cb3c3de494020e', class: "spinner", "aria-hidden": "true", part: "spinner" })), h("span", { key: 'bfdcd738e1b4541bae233a7be5804d1ba4fc02df', class: "icon-start", part: "icon-start", "aria-hidden": "true" }, this.icon !== 'none' && !this.loading && h("diwa-icon", { key: '674cf3892909a537d376dfb17bc4e14e6e5343ff', name: this.icon, size: this.iconSize }), h("slot", { key: '8bf7e06b4eab2814dccec4996a38f7fce76dedf9', name: "icon-start" })), h("span", { key: 'efa94bbd8858dba301646d8f072dac475cf16fc5', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: 'c296751f944fae738500ada889f0e057f6919e1f' })), h("span", { key: 'd057b75d8cf65aafc87d0b3996e0a024fff3e4f0', class: "icon-end", part: "icon-end", "aria-hidden": "true" }, h("slot", { key: 'b329bec720506f3b322c244cbf31139a57514a03', name: "icon-end" })))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return this; }
-}, [17, "diwa-button", {
-        "theme": [513],
-        "variant": [513],
-        "size": [513],
-        "type": [1],
-        "disabled": [516],
-        "loading": [516],
-        "href": [1],
-        "target": [1],
-        "name": [1],
-        "value": [1],
-        "label": [1],
-        "hideLabel": [516, "hide-label"],
-        "icon": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-button", "diwa-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaButton$1);
-            }
-            break;
-        case "diwa-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaButton = DiwaButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaButton, defineCustomElement };
-
-//# sourceMappingURL=diwa-button.js.map
+import{t as n,p as e,H as a,h as t,a as i}from"./index.js";import{b as r,a as o}from"./p-C8h0Vfqp.js";import{d as s}from"./p-DOo0FY37.js";const d=e(class extends a{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.theme="dark",this.variant="primary",this.size="md",this.type="button",this.disabled=!1,this.loading=!1,this.hideLabel=!1,this.icon="none",this.handleClick=n=>{this.isInteractive||(n.preventDefault(),n.stopPropagation())}}get isInteractive(){return!this.disabled&&!this.loading}get iconSize(){return"sm"===this.size?16:"lg"===this.size?24:20}render(){const n=!!this.href,e=n?"a":"button",a=((n,e,a,t)=>{const i={};return a&&(i["aria-label"]=a),e&&(i["aria-busy"]="true"),t&&(n||e)&&(i["aria-disabled"]="true"),i})(this.disabled,this.loading,this.label,n),s=Object.assign({class:"inner",onClick:this.handleClick},a),d=n?{href:this.href,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,tabIndex:this.disabled||this.loading?-1:void 0}:{type:this.type,name:this.name,value:this.value,disabled:this.disabled||this.loading};return t(i,{key:"40eee896f96707aa7e552ecb4a1dd9329dae5ec4","data-theme":this.theme,role:n?void 0:"button","aria-disabled":(this.disabled||this.loading)&&n?"true":void 0},t("style",{key:"d41a20f5d58d5408efeec81ea452d1bf4c160cbe",innerHTML:`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */\n\n  .inner {\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    /* Sizing defaults (md) */\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    /* Shape */\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    /* Interaction */\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    /* Motion */\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    /* Reset native button styles */\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${r(".inner")}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant="primary"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant="primary"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant="primary"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant="secondary"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant="secondary"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant="secondary"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant="ghost"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant="ghost"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant="ghost"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant="danger"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant="danger"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant="danger"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Size: sm ───────────────────────────────────────────────────────── */\n\n  :host([size="sm"]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── Size: lg ───────────────────────────────────────────────────────── */\n\n  :host([size="lg"]) .inner {\n    height: var(--diwa-button-height-lg, 44px);\n    padding: 0 var(--diwa-space-10);\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner,\n  .inner:disabled {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── State: loading ─────────────────────────────────────────────────── */\n\n  :host([loading]) .inner {\n    cursor: wait;\n    pointer-events: none;\n  }\n\n  /* ── Spinner ────────────────────────────────────────────────────────── */\n\n  .spinner {\n    width: var(--diwa-spinner-size-sm);\n    height: var(--diwa-spinner-size-sm);\n    flex-shrink: 0;\n    border: var(--diwa-border-width-base) solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\n  }\n\n  @keyframes diwa-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ── Icon slots ─────────────────────────────────────────────────────── */\n\n  .icon-start,\n  .icon-end {\n    display: contents;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][size="sm"]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  :host([hide-label][size="lg"]) .inner {\n    width: var(--diwa-button-height-lg, 44px);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${o(".inner",".label",".spinner")}\n`}),t(e,Object.assign({key:"e4cb9b0f3b1d581803cee8a82ca9d838c48dd5f2"},s,d,{part:"base"}),this.loading&&t("span",{key:"d57fe6c27bd115e73f136003e9cb3c3de494020e",class:"spinner","aria-hidden":"true",part:"spinner"}),t("span",{key:"bfdcd738e1b4541bae233a7be5804d1ba4fc02df",class:"icon-start",part:"icon-start","aria-hidden":"true"},"none"!==this.icon&&!this.loading&&t("diwa-icon",{key:"674cf3892909a537d376dfb17bc4e14e6e5343ff",name:this.icon,size:this.iconSize}),t("slot",{key:"8bf7e06b4eab2814dccec4996a38f7fce76dedf9",name:"icon-start"})),t("span",{key:"efa94bbd8858dba301646d8f072dac475cf16fc5",class:"label"+(this.hideLabel?" label--hidden":""),part:"label"},t("slot",{key:"c296751f944fae738500ada889f0e057f6919e1f"})),t("span",{key:"d057b75d8cf65aafc87d0b3996e0a024fff3e4f0",class:"icon-end",part:"icon-end","aria-hidden":"true"},t("slot",{key:"b329bec720506f3b322c244cbf31139a57514a03",name:"icon-end"}))))}static get delegatesFocus(){return!0}get host(){return this}},[273,"diwa-button",{theme:[513],variant:[513],size:[513],type:[1],disabled:[516],loading:[516],href:[1],target:[1],name:[1],value:[1],label:[1],hideLabel:[516,"hide-label"],icon:[1]}]);function c(){"undefined"!=typeof customElements&&["diwa-button","diwa-icon"].forEach((e=>{switch(e){case"diwa-button":customElements.get(n(e))||customElements.define(n(e),d);break;case"diwa-icon":customElements.get(n(e))||s()}}))}c();const h=d,l=c;export{h as DiwaButton,l as defineCustomElement}