@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-button/diwa-button.js

@@ -0,0 +1,434 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-button-styles";
+import { getButtonAriaAttributes } from "./diwa-button-utils";
+/**
+ * @component diwa-button
+ *
+ * A fully encapsulated, accessible button primitive.
+ * Renders as a native <button> (or <a> when `href` is supplied).
+ *
+ * Design token override API (set on :root or any ancestor):
+ *   --diwa-button-bg          Background color (primary variant default)
+ *   --diwa-button-bg-hover    Hover background
+ *   --diwa-button-color       Foreground / text color
+ *   --diwa-button-radius      Border radius
+ *   --diwa-button-height      Height for md size
+ *   --diwa-button-height-sm   Height for sm size
+ *   --diwa-button-height-lg   Height for lg size
+ *   --diwa-button-padding-x   Horizontal padding for md/lg
+ *   --diwa-button-padding-x-sm Horizontal padding for sm
+ *
+ * Usage:
+ *   <diwa-button variant="primary">Get Started</diwa-button>
+ *   <diwa-button variant="secondary" size="sm" disabled>Cancel</diwa-button>
+ *   <diwa-button href="/dashboard" target="_blank">Open Panel</diwa-button>
+ *
+ * @slot default — Button label content (text, icons, or mixed)
+ */
+export class DiwaButton {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // 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(this.variant, this.size, this.disabled, this.loading) }), 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 is() { return "diwa-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override.\r\n\r\nSetting this reflects data-theme onto the host element, causing the light/dark\r\ntoken overrides in app.css to cascade into the Shadow DOM automatically.\r\nMirrors the `theme` prop on every PDS component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "\"dark\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-button/types.ts::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "\"primary\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-button/types.ts::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size tier \u2014 controls height and padding."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "\"md\""
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-button/types.ts::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button type. Only applies when rendered as <button>\r\n(i.e., no `href` prop is set)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"button\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state. Blocks all pointer and keyboard interaction.\r\nWhen rendered as <a>, sets aria-disabled instead of disabled\r\n(the `disabled` attribute is not valid on anchor elements)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state. Shows an inline spinner, disables the button,\r\nand sets aria-busy=\"true\" to communicate async activity to\r\nscreen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the button renders as an <a> element (link semantics).\r\nPair with `target` for external links."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"_blank\" | \"_self\" | \"_parent\" | \"_top\"",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target \u2014 only meaningful when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button name \u2014 submitted with form data."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button value \u2014 submitted with form data."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label. Use when the visible slot content is not\r\ndescriptive enough (e.g., icon-only buttons)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, the default label slot is visually hidden so the button\r\nrenders as a compact square (icon-only mode). The slot text is kept in\r\nthe DOM for screen-reader accessible-name calculation.\r\n\r\nFor best accessibility, always pair with the `label` prop **or** ensure\r\nthe default slot contains descriptive text, so the button has a name.\r\n\r\nUsage:\r\n  <diwa-button hide-label label=\"Save\">\r\n    <svg slot=\"icon-start\">\u2026</svg>\r\n  </diwa-button>"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lucide icon name in kebab-case (e.g. `\"star\"`, `\"arrow-right\"`), or `'none'`\r\nto 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\nThe `icon-start` slot still works alongside this prop \u2014 the prop-rendered\r\nicon comes first, followed by any slotted content."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-button.js.map

package/dist/collection/components/diwa-button/diwa-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-button.js","sourceRoot":"","sources":["../../../src/components/diwa-button/diwa-button.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/diwa-button/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-button/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\r\n * diwa-button — Public TypeScript interfaces\r\n * ============================================\r\n * Exported so framework wrapper packages and consumers can share these types.\r\n */\r\n\r\n/** Visual variant of the button. Maps to distinct styled roles. */\r\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\r\n\r\n/** Size tier. Controls height, padding, and font-size. */\r\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\r\n\r\n/** Native button type attribute — passthrough to the inner <button>. */\r\nexport type ButtonType = \"button\" | \"submit\" | \"reset\";\r\n\r\n/**\r\n * Per-component theme override.\r\n *\r\n * When set, the component writes `data-theme=\"light|dark\"` onto its host element.\r\n * This causes the [data-theme] CSS variable overrides in app.css to cascade into\r\n * the Shadow DOM via custom property inheritance — no hardcoded colour values needed.\r\n *\r\n * Use this to render a single component in the opposite theme from its surroundings,\r\n * e.g. a light-theme button inside a dark-mode layout.\r\n *\r\n * Mirrors the `theme` prop present on every PDS component.\r\n */\r\nexport type { Theme } from '../../utils/styles';\r\n"]}

package/dist/collection/components/diwa-button-pure/diwa-button-pure-styles.js

@@ -0,0 +1,169 @@
+/**
+ * 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
+ */
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export 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')}
+`;
+//# sourceMappingURL=diwa-button-pure-styles.js.map

package/dist/collection/components/diwa-button-pure/diwa-button-pure-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-button-pure-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-button-pure/diwa-button-pure-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAqB,EACrB,SAAkB,EAClB,QAAiB,EACjB,UAAmB,EACnB,OAAgB,EAChB,UAAmB,EACnB,WAAiC,EACjC,QAAiB,EACT,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DT,aAAa,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8FtB,qBAAqB,CAAC,OAAO,EAAE,UAAU,CAAC;CAC7C,CAAC","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"]}