@diwacopilot/components 1.0.0

package/dist/esm/diwa-button.entry.js

@@ -0,0 +1,416 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // 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: '9182fd6e2a9ccce76a67596d99c5ef080dbdc219', "data-theme": this.theme, role: isLink ? undefined : "button", "aria-disabled": (this.disabled || this.loading) && isLink ? "true" : undefined }, h("style", { key: '349d3b828df53f57b23192854929f921a479146a', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: 'ffc8b04d99d508c5de77d07757ab362c57420132' }, commonProps, buttonProps, { part: "base" /* ::part(base) hook for consumers */ }), this.loading && (h("span", { key: '226b226efdd671e9494b6db3c83d09e609a08ae6', class: "spinner", "aria-hidden": "true", part: "spinner" })), h("span", { key: '571b34bc8dd3e712bb0702d35283c99c57dee34e', class: "icon-start", part: "icon-start", "aria-hidden": "true" }, this.icon !== 'none' && !this.loading && h("diwa-icon", { key: 'b4304efd1423d517b5aee0a079b6f17993700398', name: this.icon, size: this.iconSize }), h("slot", { key: '1262b1411d2e2faadbabdf6a05cdfa6863b4f53d', name: "icon-start" })), h("span", { key: '6da505ff94ceb539c2f5c063b0aa364ef62c0923', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: '055841a5c87793d21d7f2f02ce895326889fa887' })), h("span", { key: 'd6f33edb88b49bde1ca50968e3a4f6ac45b2ae77', class: "icon-end", part: "icon-end", "aria-hidden": "true" }, h("slot", { key: '6239635e5cbbfed9a064095b66fb77a466d77aa8', name: "icon-end" })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return getElement(this); }
+};
+
+export { DiwaButton as diwa_button };
+
+//# sourceMappingURL=diwa-button.entry.js.map

package/dist/esm/diwa-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-button.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-button/diwa-button-styles.ts","src/components/diwa-button/diwa-button-utils.ts","src/components/diwa-button/diwa-button.tsx"],"sourcesContent":["/**\r\n * diwa-button-styles.ts\r\n * ======================\r\n * CSS-in-JS style function for <diwa-button>.\r\n *\r\n * Returns a complete, scoped CSS string injected into the component's Shadow DOM\r\n * via a <style innerHTML={...}> element in render(). This follows the shared\n * Diwa component styling architecture used across web components.\n *\r\n * All colour values use CSS custom properties (--diwa-*) — raw values are never\r\n * hardcoded. This means theming is entirely handled by the token cascade: when the\r\n * host element carries data-theme=\"light\", the [data-theme=\"light\"] overrides\r\n * defined in app.css cascade into the Shadow DOM via custom property inheritance.\r\n *\r\n * The function accepts the full prop surface for future conditional optimisation\r\n * (e.g. generating only variant- or size-specific CSS to reduce payload), but\r\n * currently outputs the complete ruleset regardless of prop values.\r\n */\r\n\r\nimport type { ButtonSize, ButtonVariant } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-button> shadow tree.\r\n *\r\n * @param _variant  — current ButtonVariant (reserved for conditional CSS)\r\n * @param _size     — current ButtonSize    (reserved for conditional CSS)\r\n * @param _disabled — disabled state        (reserved for conditional CSS)\r\n * @param _loading  — loading state         (reserved for conditional CSS)\r\n */\r\nexport const getComponentCss = (\r\n  _variant: ButtonVariant,\r\n  _size: ButtonSize,\r\n  _disabled: boolean,\r\n  _loading: boolean,\r\n): string => `\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  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */\r\n\r\n  .inner {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: var(--diwa-space-2);\r\n\r\n    /* Sizing defaults (md) */\r\n    height: var(--diwa-button-height, 40px);\r\n    padding: 0 var(--diwa-button-padding-x, 16px);\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n\r\n    /* Shape */\r\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\r\n    border: var(--diwa-border-width-thin) solid transparent;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\r\n    font-family: inherit;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    text-decoration: none;\r\n\r\n    /* Interaction */\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    position: relative;\r\n\r\n    /* Motion */\r\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n\r\n    /* Reset native button styles */\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.inner')}\r\n\r\n  /* ── Variant: primary ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"primary\"]) .inner {\r\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\r\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"primary\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\r\n  }\r\n\r\n  :host([variant=\"primary\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-accent-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"secondary\"]) .inner {\r\n    background-color: transparent;\r\n    color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-bg);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-accent-muted);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"ghost\"]) .inner {\r\n    background-color: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"ghost\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  :host([variant=\"ghost\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-bg-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: danger ────────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"danger\"]) .inner {\r\n    background-color: var(--diwa-danger);\r\n    color: var(--diwa-text-inverse);\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"danger\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-danger-hover);\r\n  }\r\n\r\n  :host([variant=\"danger\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-danger-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Size: sm ───────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .inner {\r\n    height: var(--diwa-button-height-sm, 32px);\r\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\r\n    font-size: var(--diwa-font-size-md);\r\n  }\r\n\r\n  /* ── Size: lg ───────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"lg\"]) .inner {\r\n    height: var(--diwa-button-height-lg, 44px);\r\n    padding: 0 var(--diwa-space-10);\r\n    font-size: var(--diwa-font-size-lg);\r\n  }\r\n\r\n  /* ── State: disabled ────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .inner,\r\n  .inner:disabled {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── State: loading ─────────────────────────────────────────────────── */\r\n\r\n  :host([loading]) .inner {\r\n    cursor: wait;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n  .spinner {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\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-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n  }\r\n\r\n  @keyframes diwa-spin {\r\n    to { transform: rotate(360deg); }\r\n  }\r\n\r\n  /* ── Icon slots ─────────────────────────────────────────────────────── */\r\n\r\n  .icon-start,\r\n  .icon-end {\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  /* ── Icon-only mode ─────────────────────────────────────────────────── */\r\n\r\n  :host([hide-label]) .inner {\r\n    width: var(--diwa-button-height, 40px);\r\n    padding: 0;\r\n  }\r\n\r\n  :host([hide-label][size=\"sm\"]) .inner {\r\n    width: var(--diwa-button-height-sm, 32px);\r\n  }\r\n\r\n  :host([hide-label][size=\"lg\"]) .inner {\r\n    width: var(--diwa-button-height-lg, 44px);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.inner', '.label', '.spinner')}\r\n`;\r\n","/**\r\n * diwa-button-utils.ts\r\n * =====================\r\n * Utility types and helper functions for <diwa-button>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n *   packages/components/src/components/button/button-utils.ts\r\n *\r\n * Separating ARIA logic into a dedicated utility file keeps the main component\r\n * lean and makes the accessibility mapping independently testable.\r\n */\r\n\r\n/**\r\n * ARIA attributes applied to the inner interactive element (<button> or <a>).\r\n * All keys are optional — only set when semantically appropriate.\r\n */\r\nexport interface ButtonAriaAttributes {\r\n  /** Accessible text label — overrides slot content for AT. */\r\n  'aria-label'?: string;\r\n  /** Signals that the button is performing an async operation. */\r\n  'aria-busy'?: 'true';\r\n  /** Used on <a> elements (which have no native disabled attribute). */\r\n  'aria-disabled'?: 'true';\r\n}\r\n\r\n/**\r\n * Assembles ARIA attributes for the inner interactive element.\r\n *\r\n * Decision table:\r\n * - `aria-label`    → set when `label` prop is provided (icon-only or supplemental name)\r\n * - `aria-busy`     → set when `loading` is true (announces async activity to AT)\r\n * - `aria-disabled` → set when disabled **and** the element is an <a> (links have no\r\n *                     native disabled — we simulate it with aria + tabIndex=-1)\r\n *\r\n * For native <button>: disabled/loading are expressed via the `disabled` HTML attribute\r\n * (handled in the calling component's render), so `aria-disabled` is not needed there.\r\n *\r\n * @param disabled — whether the button interaction is blocked\r\n * @param loading  — whether the button is performing an async operation\r\n * @param label    — accessible label string (optional)\r\n * @param isLink   — true when the component renders as <a> (href is provided)\r\n */\r\nexport const getButtonAriaAttributes = (\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  label: string | undefined,\r\n  isLink: boolean,\r\n): ButtonAriaAttributes => {\r\n  const attrs: ButtonAriaAttributes = {};\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  // <a> elements have no native `disabled` attribute — express it via ARIA.\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 { ButtonSize, ButtonType, ButtonVariant } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-styles\";\r\nimport { getButtonAriaAttributes } from \"./diwa-button-utils\";\r\n\r\n/**\r\n * @component diwa-button\r\n *\r\n * A fully encapsulated, accessible button primitive.\r\n * Renders as a native <button> (or <a> when `href` is supplied).\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-button-bg          Background color (primary variant default)\r\n *   --diwa-button-bg-hover    Hover background\r\n *   --diwa-button-color       Foreground / text color\r\n *   --diwa-button-radius      Border radius\r\n *   --diwa-button-height      Height for md size\r\n *   --diwa-button-height-sm   Height for sm size\r\n *   --diwa-button-height-lg   Height for lg size\r\n *   --diwa-button-padding-x   Horizontal padding for md/lg\r\n *   --diwa-button-padding-x-sm Horizontal padding for sm\r\n *\r\n * Usage:\r\n *   <diwa-button variant=\"primary\">Get Started</diwa-button>\r\n *   <diwa-button variant=\"secondary\" size=\"sm\" disabled>Cancel</diwa-button>\r\n *   <diwa-button href=\"/dashboard\" target=\"_blank\">Open Panel</diwa-button>\r\n *\r\n * @slot default — Button label content (text, icons, or mixed)\r\n */\r\n@Component({\r\n  tag: \"diwa-button\",\r\n  /**\r\n   * No styleUrl — styles are injected dynamically via getComponentCss().\r\n   * This follows the PDS CSS-in-JS pattern, enabling per-component theming\r\n   * and keeping style logic co-located with the component.\r\n   *\r\n   * shadow.delegatesFocus = true:\r\n   *   Forwards focus from the host element (<diwa-button>) to the first\r\n   *   focusable element inside the Shadow DOM (<button> or <a>).\r\n   *   This ensures keyboard navigation and :focus-visible work correctly\r\n   *   when host-app code calls .focus() on the custom element.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButton {\r\n  @Element() host!: HTMLDiwaButtonElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props — each @Prop generates a corresponding argType in Storybook\r\n  // and an HTML attribute on the custom element.\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   *\r\n   * Setting this reflects data-theme onto the host element, causing the light/dark\r\n   * token overrides in app.css to cascade into the Shadow DOM automatically.\r\n   * Mirrors the `theme` prop on every PDS component.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: ButtonVariant = \"primary\";\r\n\r\n  /** Size tier — controls height and padding. */\r\n  @Prop({ reflect: true }) size: ButtonSize = \"md\";\r\n\r\n  /**\r\n   * Native button type. Only applies when rendered as <button>\r\n   * (i.e., no `href` prop is set).\r\n   */\r\n  @Prop() type: ButtonType = \"button\";\r\n\r\n  /**\r\n   * Disabled state. Blocks all pointer and keyboard interaction.\r\n   * When rendered as <a>, sets aria-disabled instead of disabled\r\n   * (the `disabled` attribute is not valid on anchor elements).\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Loading state. Shows an inline spinner, disables the button,\r\n   * and sets aria-busy=\"true\" to communicate async activity to\r\n   * screen readers.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * When set, the button 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  /** 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   * Accessible label. Use when the visible slot content is not\r\n   * descriptive enough (e.g., icon-only buttons).\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * When `true`, the default label slot is visually hidden so the button\r\n   * renders as a compact square (icon-only mode). The slot text is kept in\r\n   * the DOM for screen-reader accessible-name calculation.\r\n   *\r\n   * For best accessibility, always pair with the `label` prop **or** ensure\r\n   * the default slot contains descriptive text, so the button has a name.\r\n   *\r\n   * Usage:\r\n   *   <diwa-button hide-label label=\"Save\">\r\n   *     <svg slot=\"icon-start\">…</svg>\r\n   *   </diwa-button>\r\n   */\r\n  @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n  /**\r\n   * Lucide icon name in kebab-case (e.g. `\"star\"`, `\"arrow-right\"`), or `'none'`\r\n   * to show no icon. When set to any value other than `'none'`, renders a\r\n   * `<diwa-icon>` in the leading (icon-start) position.\r\n   *\r\n   * The `icon-start` slot still works alongside this prop — the prop-rendered\r\n   * icon comes first, followed by any slotted content.\r\n   */\r\n  @Prop() icon: string = 'none';\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  private get iconSize(): number {\r\n    return this.size === 'sm' ? 16 : this.size === 'lg' ? 24 : 20;\r\n  }\r\n\r\n  private handleClick = (e: MouseEvent): void => {\r\n    if (!this.isInteractive) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n    }\r\n    // When interactive, allow the native click to retarget to the host element.\r\n    // Framework wrappers expose it as onClick (React) / @click (Vue) / (click) (Angular).\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    /**\r\n     * Render as <a> when href is provided (link semantics).\r\n     * Render as <button> for all interactive / form scenarios.\r\n     */\r\n    const isLink = !!this.href;\r\n    const Tag = isLink ? \"a\" : \"button\";\r\n\r\n    // Consolidate all ARIA attributes via the utility — mirrors PDS getButtonAriaAttributes()\r\n    const ariaAttrs = getButtonAriaAttributes(this.disabled, this.loading, this.label, isLink);\r\n\r\n    const commonProps = {\r\n      class: \"inner\",\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          // Disabled links have no native mechanism — suppress tab stop too\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    return (\r\n      /**\r\n       * <Host> renders the outer custom element tag itself.\r\n       *\r\n       * data-theme is set from the `theme` prop so that the [data-theme=\"light\"]\r\n       * CSS variable overrides in app.css cascade into this Shadow DOM tree via\r\n       * custom property inheritance — no colour values are hardcoded here.\r\n       *\r\n       * Reflecting `variant` and `size` as attributes allows CSS consumers to\r\n       * target the host from outside:  diwa-button[variant=\"primary\"] { ... }\r\n       *\r\n       * The part=\"base\" exposes internals for ::part() in host-app stylesheets.\r\n       */\r\n      <Host\r\n        data-theme={this.theme}\r\n        role={isLink ? undefined : \"button\"}\r\n        aria-disabled={\r\n          (this.disabled || this.loading) && isLink ? \"true\" : undefined\r\n        }\r\n      >\r\n        {/* CSS-in-JS styles — injected into Shadow DOM, scoped automatically */}\r\n        <style innerHTML={getComponentCss(this.variant, this.size, this.disabled, this.loading)} />\r\n\r\n        <Tag\r\n          {...commonProps}\r\n          {...buttonProps}\r\n          part=\"base\" /* ::part(base) hook for consumers */\r\n        >\r\n          {/* Loading spinner — visually hidden from AT via aria-hidden */}\r\n          {this.loading && (\r\n            <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n          )}\r\n\r\n          {/* Leading icon slot — decorative; aria-hidden keeps AT focused on label */}\r\n          <span class=\"icon-start\" part=\"icon-start\" aria-hidden=\"true\">\r\n            {this.icon !== 'none' && !this.loading && <diwa-icon name={this.icon} size={this.iconSize} />}\r\n            <slot name=\"icon-start\" />\r\n          </span>\r\n\r\n          {/* Slot — content projection. Text, icons, or mixed content. */}\r\n          <span class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`} part=\"label\">\r\n            <slot />\r\n          </span>\r\n\r\n          {/* Trailing icon slot */}\r\n          <span class=\"icon-end\" part=\"icon-end\" aria-hidden=\"true\">\r\n            <slot name=\"icon-end\" />\r\n          </span>\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}