@diwacopilot/components 1.0.0

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

@@ -0,0 +1,19 @@
+/**
+ * diwa-button-pure-utils.ts
+ * ==========================
+ * ARIA helpers for <diwa-button-pure>.
+ */
+export const getButtonPureAriaAttributes = (disabled, loading, label, isLink) => {
+    const attrs = {};
+    if (label) {
+        attrs['aria-label'] = label;
+    }
+    if (loading) {
+        attrs['aria-busy'] = 'true';
+    }
+    if (isLink && (disabled || loading)) {
+        attrs['aria-disabled'] = 'true';
+    }
+    return attrs;
+};
+//# sourceMappingURL=diwa-button-pure-utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-button-pure-utils.js","sourceRoot":"","sources":["../../../src/components/diwa-button-pure/diwa-button-pure-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,QAAiB,EACjB,OAAgB,EAChB,KAAyB,EACzB,MAAe,EACW,EAAE;IAC5B,MAAM,KAAK,GAA6B,EAAE,CAAC;IAE3C,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAC9B,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAC9B,CAAC;IAED,IAAI,MAAM,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,EAAE,CAAC;QACpC,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;IAClC,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["/**\r\n * diwa-button-pure-utils.ts\r\n * ==========================\r\n * ARIA helpers for <diwa-button-pure>.\r\n */\r\n\r\nexport interface ButtonPureAriaAttributes {\r\n  'aria-label'?: string;\r\n  'aria-busy'?: 'true';\r\n  'aria-disabled'?: 'true';\r\n}\r\n\r\nexport const getButtonPureAriaAttributes = (\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  label: string | undefined,\r\n  isLink: boolean,\r\n): ButtonPureAriaAttributes => {\r\n  const attrs: ButtonPureAriaAttributes = {};\r\n\r\n  if (label) {\r\n    attrs['aria-label'] = label;\r\n  }\r\n\r\n  if (loading) {\r\n    attrs['aria-busy'] = 'true';\r\n  }\r\n\r\n  if (isLink && (disabled || loading)) {\r\n    attrs['aria-disabled'] = 'true';\r\n  }\r\n\r\n  return attrs;\r\n};\r\n"]}

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

@@ -0,0 +1,453 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-button-pure-styles";
+import { getButtonPureAriaAttributes } from "./diwa-button-pure-utils";
+/**
+ * @component diwa-button-pure
+ *
+ * A transparent, text+icon action button — no background or border.
+ * Mirrors the PDS `p-button-pure` component.
+ *
+ * Default layout: [icon] [label]  (alignLabel="end")
+ * Reversed layout: [label] [icon] (alignLabel="start")
+ * Stretched layout: [icon] ·····  [label] (stretch + alignLabel="end")
+ *
+ * Usage:
+ *   <diwa-button-pure>Read more</diwa-button-pure>
+ *   <diwa-button-pure icon="arrow-left" align-label="start">Back</diwa-button-pure>
+ *   <diwa-button-pure hide-label label="Close" icon="x" />
+ *
+ * @slot default — Button label text
+ */
+export class DiwaButtonPure {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (light / dark). */
+        this.theme = "dark";
+        /** Text size tier. Controls both font-size and icon size. */
+        this.size = "md";
+        /**
+         * Lucide icon name in kebab-case (e.g. `"arrow-right"`, `"star"`), or `"none"`
+         * to render with no icon. Defaults to `"arrow-right"` — matching PDS.
+         */
+        this.icon = "arrow-right";
+        /** Disabled state. Blocks all pointer and keyboard interaction. */
+        this.disabled = false;
+        /**
+         * Loading state. Replaces the icon with a spinner, blocks interaction,
+         * and announces aria-busy to screen readers.
+         */
+        this.loading = false;
+        /**
+         * When `true`, the label slot is visually hidden (icon-only mode).
+         * Always pair with the `label` prop for screen-reader accessible name.
+         */
+        this.hideLabel = false;
+        /** Forces the button into its active/pressed visual state. */
+        this.active = false;
+        /** Adds an underline decoration to the label text. */
+        this.underline = false;
+        /**
+         * Controls which side the label appears on relative to the icon.
+         * - `"end"` (default): [icon] [label]
+         * - `"start"`:         [label] [icon]
+         */
+        this.alignLabel = "end";
+        /**
+         * When `true`, the button stretches to fill its container and the space
+         * between icon and label expands to fill remaining width.
+         */
+        this.stretch = false;
+        /** Native button type. Only applies when rendered as `<button>`. */
+        this.type = "button";
+        this.handleClick = (e) => {
+            if (!this.isInteractive) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Private helpers
+    // ──────────────────────────────────────────────────────────────
+    get isInteractive() {
+        return !this.disabled && !this.loading;
+    }
+    /** Icon pixel size scaled to the current size tier. */
+    get iconSize() {
+        return this.size === "sm" ? 14 : this.size === "lg" ? 20 : 16;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const isLink = !!this.href;
+        const Tag = isLink ? "a" : "button";
+        const ariaAttrs = getButtonPureAriaAttributes(this.disabled, this.loading, this.label, isLink);
+        const commonProps = Object.assign({ class: "root", onClick: this.handleClick }, ariaAttrs);
+        const buttonProps = isLink
+            ? {
+                href: this.href,
+                target: this.target,
+                rel: this.target === "_blank" ? "noopener noreferrer" : undefined,
+                tabIndex: this.disabled || this.loading ? -1 : undefined,
+            }
+            : {
+                type: this.type,
+                name: this.name,
+                value: this.value,
+                disabled: this.disabled || this.loading,
+            };
+        const hasIcon = this.icon !== "none";
+        return (h(Host, { key: 'e5e00513cc1ceafdf7291b57d8458e52e187c527', "data-theme": this.theme }, h("style", { key: 'af00274b62bdfd75958eeb1b03f4b951b8cbf987', innerHTML: getComponentCss(this.size, this.disabled, this.loading, this.underline, this.active, this.hideLabel, this.alignLabel, this.stretch) }), h(Tag, Object.assign({ key: 'ec7e751f5f9190a525cf9d9bae61a6ea62c01a88' }, commonProps, buttonProps, { part: "base" }), this.loading ? (h("span", { class: "spinner", "aria-hidden": "true", part: "spinner" })) : (hasIcon && (h("span", { class: "icon", "aria-hidden": "true" }, h("diwa-icon", { name: this.icon, size: this.iconSize })))), h("span", { key: '2fcb3075fee28a67f9c4379b01cf5f16baeed26b', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: 'e53e29638f01d75ee33e331fe43212ee7e569fcf' })))));
+    }
+    static get is() { return "diwa-button-pure"; }
+    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 (light / dark)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "\"dark\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonPureSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ButtonPureSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-button-pure/types.ts::ButtonPureSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text size tier. Controls both font-size and icon size."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "\"md\""
+            },
+            "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. `\"arrow-right\"`, `\"star\"`), or `\"none\"`\r\nto render with no icon. Defaults to `\"arrow-right\"` \u2014 matching PDS."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "\"arrow-right\""
+            },
+            "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."
+                },
+                "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. Replaces the icon with a spinner, blocks interaction,\r\nand announces aria-busy to screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, the label slot is visually hidden (icon-only mode).\r\nAlways pair with the `label` prop for screen-reader accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forces the button into its active/pressed visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "underline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an underline decoration to the label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "underline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "alignLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonPureAlignLabel",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "ButtonPureAlignLabel": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-button-pure/types.ts::ButtonPureAlignLabel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls which side the label appears on relative to the icon.\r\n- `\"end\"` (default): [icon] [label]\r\n- `\"start\"`:         [label] [icon]"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "align-label",
+                "reflect": true,
+                "defaultValue": "\"end\""
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, the button stretches to fill its container and the space\r\nbetween icon and label expands to fill remaining width."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "stretch",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonPureType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonPureType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-button-pure/types.ts::ButtonPureType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native button type. Only applies when rendered as `<button>`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"button\""
+            },
+            "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
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, 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
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for icon-only buttons.\r\nRequired when `hideLabel` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-button-pure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-button-pure.js","sourceRoot":"","sources":["../../../src/components/diwa-button-pure/diwa-button-pure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAEvE;;;;;;;;;;;;;;;;GAgBG;AAKH,MAAM,OAAO,cAAc;IAJ3B;QAOE,iEAAiE;QACjE,QAAQ;QACR,iEAAiE;QAEjE,mDAAmD;QAC1B,UAAK,GAAU,MAAM,CAAC;QAE/C,6DAA6D;QACpC,SAAI,GAAmB,IAAI,CAAC;QAErD;;;WAGG;QACK,SAAI,GAAW,aAAa,CAAC;QAErC,mEAAmE;QAC1C,aAAQ,GAAY,KAAK,CAAC;QAEnD;;;WAGG;QACsB,YAAO,GAAY,KAAK,CAAC;QAElD;;;WAGG;QACsB,cAAS,GAAY,KAAK,CAAC;QAEpD,8DAA8D;QACrC,WAAM,GAAY,KAAK,CAAC;QAEjD,sDAAsD;QAC7B,cAAS,GAAY,KAAK,CAAC;QAEpD;;;;WAIG;QACsB,eAAU,GAAyB,KAAK,CAAC;QAElE;;;WAGG;QACsB,YAAO,GAAY,KAAK,CAAC;QAElD,oEAAoE;QAC5D,SAAI,GAAmB,QAAQ,CAAC;QAoCvB,gBAAW,GAAG,CAAC,CAAa,EAAQ,EAAE;YACrD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;KA6EH;IA/FC,iEAAiE;IACjE,kBAAkB;IAClB,iEAAiE;IAEjE,IAAY,aAAa;QACvB,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IACzC,CAAC;IAED,uDAAuD;IACvD,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,CAAC;IASD,iEAAiE;IACjE,SAAS;IACT,iEAAiE;IAEjE,MAAM;QACJ,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3B,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpC,MAAM,SAAS,GAAG,2BAA2B,CAC3C,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,EACV,MAAM,CACP,CAAC;QAEF,MAAM,WAAW,mBACf,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IACtB,SAAS,CACb,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM;YACxB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS;gBACjE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;aACzD;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,CAAC;QAEN,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QAErC,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DACE,SAAS,EAAE,eAAe,CACxB,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,OAAO,CACb,GACD;YAEF,EAAC,GAAG,qEAAK,WAAW,EAAM,WAAW,IAAE,IAAI,EAAC,MAAM;gBAE/C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,YAAM,KAAK,EAAC,SAAS,iBAAa,MAAM,EAAC,IAAI,EAAC,SAAS,GAAG,CAC3D,CAAC,CAAC,CAAC,CACF,OAAO,IAAI,CACT,YAAM,KAAK,EAAC,MAAM,iBAAa,MAAM;oBACnC,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC9C,CACR,CACF;gBAGD,6DACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,EACvD,IAAI,EAAC,OAAO;oBAEZ,8DAAQ,CACH,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\nimport type { ButtonPureSize, ButtonPureAlignLabel, ButtonPureType } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-pure-styles\";\r\nimport { getButtonPureAriaAttributes } from \"./diwa-button-pure-utils\";\r\n\r\n/**\r\n * @component diwa-button-pure\r\n *\r\n * A transparent, text+icon action button — no background or border.\r\n * Mirrors the PDS `p-button-pure` component.\r\n *\r\n * Default layout: [icon] [label]  (alignLabel=\"end\")\r\n * Reversed layout: [label] [icon] (alignLabel=\"start\")\r\n * Stretched layout: [icon] ·····  [label] (stretch + alignLabel=\"end\")\r\n *\r\n * Usage:\r\n *   <diwa-button-pure>Read more</diwa-button-pure>\r\n *   <diwa-button-pure icon=\"arrow-left\" align-label=\"start\">Back</diwa-button-pure>\r\n *   <diwa-button-pure hide-label label=\"Close\" icon=\"x\" />\r\n *\r\n * @slot default — Button label text\r\n */\r\n@Component({\r\n  tag: \"diwa-button-pure\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButtonPure {\r\n  @Element() host!: HTMLDiwaButtonPureElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (light / dark). */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /** Text size tier. Controls both font-size and icon size. */\r\n  @Prop({ reflect: true }) size: ButtonPureSize = \"md\";\r\n\r\n  /**\r\n   * Lucide icon name in kebab-case (e.g. `\"arrow-right\"`, `\"star\"`), or `\"none\"`\r\n   * to render with no icon. Defaults to `\"arrow-right\"` — matching PDS.\r\n   */\r\n  @Prop() icon: string = \"arrow-right\";\r\n\r\n  /** Disabled state. Blocks all pointer and keyboard interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Loading state. Replaces the icon with a spinner, blocks interaction,\r\n   * and announces aria-busy to screen readers.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * When `true`, the label slot is visually hidden (icon-only mode).\r\n   * Always pair with the `label` prop for screen-reader accessible name.\r\n   */\r\n  @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n  /** Forces the button into its active/pressed visual state. */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  /** Adds an underline decoration to the label text. */\r\n  @Prop({ reflect: true }) underline: boolean = false;\r\n\r\n  /**\r\n   * Controls which side the label appears on relative to the icon.\r\n   * - `\"end\"` (default): [icon] [label]\r\n   * - `\"start\"`:         [label] [icon]\r\n   */\r\n  @Prop({ reflect: true }) alignLabel: ButtonPureAlignLabel = \"end\";\r\n\r\n  /**\r\n   * When `true`, the button stretches to fill its container and the space\r\n   * between icon and label expands to fill remaining width.\r\n   */\r\n  @Prop({ reflect: true }) stretch: boolean = false;\r\n\r\n  /** Native button type. Only applies when rendered as `<button>`. */\r\n  @Prop() type: ButtonPureType = \"button\";\r\n\r\n  /** Native button name — submitted with form data. */\r\n  @Prop() name?: string;\r\n\r\n  /** Native button value — submitted with form data. */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * When set, renders as an `<a>` element (link semantics).\r\n   * Pair with `target` for external links.\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /** Link target — only meaningful when `href` is set. */\r\n  @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n\r\n  /**\r\n   * Accessible label for icon-only buttons.\r\n   * Required when `hideLabel` is `true`.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get isInteractive(): boolean {\r\n    return !this.disabled && !this.loading;\r\n  }\r\n\r\n  /** Icon pixel size scaled to the current size tier. */\r\n  private get iconSize(): number {\r\n    return this.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\r\n  }\r\n\r\n  private readonly handleClick = (e: MouseEvent): void => {\r\n    if (!this.isInteractive) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const isLink = !!this.href;\r\n    const Tag = isLink ? \"a\" : \"button\";\r\n\r\n    const ariaAttrs = getButtonPureAriaAttributes(\r\n      this.disabled,\r\n      this.loading,\r\n      this.label,\r\n      isLink,\r\n    );\r\n\r\n    const commonProps = {\r\n      class: \"root\",\r\n      onClick: this.handleClick,\r\n      ...ariaAttrs,\r\n    };\r\n\r\n    const buttonProps = isLink\r\n      ? {\r\n          href: this.href,\r\n          target: this.target,\r\n          rel: this.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\r\n          tabIndex: this.disabled || this.loading ? -1 : undefined,\r\n        }\r\n      : {\r\n          type: this.type,\r\n          name: this.name,\r\n          value: this.value,\r\n          disabled: this.disabled || this.loading,\r\n        };\r\n\r\n    const hasIcon = this.icon !== \"none\";\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.size,\r\n            this.disabled,\r\n            this.loading,\r\n            this.underline,\r\n            this.active,\r\n            this.hideLabel,\r\n            this.alignLabel,\r\n            this.stretch,\r\n          )}\r\n        />\r\n\r\n        <Tag {...commonProps} {...buttonProps} part=\"base\">\r\n          {/* Spinner replaces the icon during loading */}\r\n          {this.loading ? (\r\n            <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n          ) : (\r\n            hasIcon && (\r\n              <span class=\"icon\" aria-hidden=\"true\">\r\n                <diwa-icon name={this.icon} size={this.iconSize} />\r\n              </span>\r\n            )\r\n          )}\r\n\r\n          {/* Label — visually hidden when hideLabel=true but kept for AT */}\r\n          <span\r\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\r\n            part=\"label\"\r\n          >\r\n            <slot />\r\n          </span>\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-button-pure/types.ts"],"names":[],"mappings":"","sourcesContent":["export type ButtonPureSize = 'sm' | 'md' | 'lg';\r\n\r\n/** Controls which side the label appears on relative to the icon. */\r\nexport type ButtonPureAlignLabel = 'start' | 'end';\r\n\r\nexport type ButtonPureType = 'button' | 'submit' | 'reset';\r\n"]}