@diwacopilot/components 1.0.0

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

@@ -0,0 +1,286 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-link-styles";
+/**
+ * @component diwa-link
+ *
+ * A fully accessible link primitive. Renders as <a> when href is provided,
+ * otherwise as a non-interactive <span>. Mirrors the PDS p-link component.
+ *
+ * Usage:
+ *   <diwa-link href="/home">Home</diwa-link>
+ *   <diwa-link href="/docs" variant="secondary" target="_blank">Docs</diwa-link>
+ *   <diwa-link href="/about" variant="ghost" icon="arrow-right">About</diwa-link>
+ *
+ * @slot default — Link label text
+ */
+export class DiwaLink {
+    constructor() {
+        /** Per-component theme override. */
+        this.theme = "dark";
+        /** Visual style variant. */
+        this.variant = "primary";
+        /** Target attribute — where to open the linked URL. */
+        this.target = "_self";
+        /** Lucide icon name (kebab-case, e.g. "arrow-right"), or "none" to hide. */
+        this.icon = "none";
+        /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */
+        this.hideLabel = false;
+        /** Compact (smaller) size variant. */
+        this.compact = false;
+        /** Disabled state. Sets aria-disabled and prevents interaction. */
+        this.disabled = false;
+    }
+    render() {
+        var _a;
+        const isAnchor = !!this.href;
+        const Tag = isAnchor ? "a" : "span";
+        const hasIcon = this.icon !== "none";
+        const iconSize = this.compact ? 16 : 20;
+        const anchorProps = isAnchor
+            ? Object.assign(Object.assign({ href: this.href, target: this.target, download: this.download, rel: (_a = this.rel) !== null && _a !== void 0 ? _a : (this.target === "_blank" ? "noopener noreferrer" : undefined) }, (this.label ? { "aria-label": this.label } : {})), (this.disabled ? { "aria-disabled": "true", tabIndex: -1 } : {})) : {};
+        return (h(Host, { key: '776e06394ce0ae72d3b17839f3b6c03a8b9d8d87', "data-theme": this.theme }, h("style", { key: 'c839450ec4fe0c4e887b0ca0ca20d98b72353c18', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: 'ffcf734b9978340a43f6e85fbbce99692a1a948e', class: "inner" }, anchorProps, { part: "base" }), hasIcon && (h("span", { key: '8eaa121076b37556d334d441cf538b878bc682b5', class: "icon", "aria-hidden": "true" }, h("diwa-icon", { key: '69b02d7412041c9f3ec276f84b2bdecc1882725b', name: this.icon, size: iconSize }))), h("span", { key: '99ffcd1bd80c6ddabb6cd99b75ce6c83f94afe00', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: '8057fd1012fbd5d5651fb2fe82f6d1fc0366a240' })))));
+    }
+    static get is() { return "diwa-link"; }
+    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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "\"dark\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkVariant",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "LinkVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-link/types.ts::LinkVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "\"primary\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL the link points to. When set, renders as <a>."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {
+                        "LinkTarget": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-link/types.ts::LinkTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Target attribute \u2014 where to open the linked URL."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false,
+                "defaultValue": "\"_self\""
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native download attribute for triggering file downloads."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "download",
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Relationship between the current document and the linked resource."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rel",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "\"none\""
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually (icon-only mode). Keep slot text for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact (smaller) size variant."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible aria-label override \u2014 useful for icon-only links."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state. Sets aria-disabled and prevents interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-link.js","sourceRoot":"","sources":["../../../src/components/diwa-link/diwa-link.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,oBAAoB,CAAC;AAErD;;;;;;;;;;;;GAYG;AAKH,MAAM,OAAO,QAAQ;IAJrB;QAOE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,4BAA4B;QACH,YAAO,GAAgB,SAAS,CAAC;QAK1D,uDAAuD;QAC/C,WAAM,GAAe,OAAO,CAAC;QAQrC,4EAA4E;QACpE,SAAI,GAAW,MAAM,CAAC;QAE9B,oFAAoF;QAC3D,cAAS,GAAY,KAAK,CAAC;QAEpD,sCAAsC;QACb,YAAO,GAAY,KAAK,CAAC;QAKlD,mEAAmE;QAC1C,aAAQ,GAAY,KAAK,CAAC;KAwCpD;IAtCC,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAE,MAAc,CAAC;QACtD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAExC,MAAM,WAAW,GAAG,QAAQ;YAC1B,CAAC,+BACG,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EACD,MAAA,IAAI,CAAC,GAAG,mCACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,IAC7D,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAChD,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvE,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,EAAC,GAAG,mEAAC,KAAK,EAAC,OAAO,IAAK,WAAW,IAAE,IAAI,EAAC,MAAM;gBAC5C,OAAO,IAAI,CACV,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM;oBACnC,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACR;gBACD,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\";\nimport type { LinkVariant, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-styles\";\n\n/**\n * @component diwa-link\n *\n * A fully accessible link primitive. Renders as <a> when href is provided,\n * otherwise as a non-interactive <span>. Mirrors the PDS p-link component.\n *\n * Usage:\n *   <diwa-link href=\"/home\">Home</diwa-link>\n *   <diwa-link href=\"/docs\" variant=\"secondary\" target=\"_blank\">Docs</diwa-link>\n *   <diwa-link href=\"/about\" variant=\"ghost\" icon=\"arrow-right\">About</diwa-link>\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLink {\n  @Element() host!: HTMLDiwaLinkElement;\n\n  /** Per-component theme override. */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\n\n  /** Visual style variant. */\n  @Prop({ reflect: true }) variant: LinkVariant = \"primary\";\n\n  /** The URL the link points to. When set, renders as <a>. */\n  @Prop() href?: string;\n\n  /** Target attribute — where to open the linked URL. */\n  @Prop() target: LinkTarget = \"_self\";\n\n  /** Native download attribute for triggering file downloads. */\n  @Prop() download?: string;\n\n  /** Relationship between the current document and the linked resource. */\n  @Prop() rel?: string;\n\n  /** Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide. */\n  @Prop() icon: string = \"none\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Compact (smaller) size variant. */\n  @Prop({ reflect: true }) compact: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\n\n  /** Disabled state. Sets aria-disabled and prevents interaction. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const isAnchor = !!this.href;\n    const Tag = isAnchor ? (\"a\" as any) : (\"span\" as any);\n    const hasIcon = this.icon !== \"none\";\n    const iconSize = this.compact ? 16 : 20;\n\n    const anchorProps = isAnchor\n      ? {\n          href: this.href,\n          target: this.target,\n          download: this.download,\n          rel:\n            this.rel ??\n            (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          ...(this.label ? { \"aria-label\": this.label } : {}),\n          ...(this.disabled ? { \"aria-disabled\": \"true\", tabIndex: -1 } : {}),\n        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"inner\" {...anchorProps} part=\"base\">\n          {hasIcon && (\n            <span class=\"icon\" aria-hidden=\"true\">\n              <diwa-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          <span\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\n            part=\"label\"\n          >\n            <slot />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-link/types.ts"],"names":[],"mappings":"","sourcesContent":["export type LinkVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type LinkTarget = '_self' | '_blank' | '_parent' | '_top';"]}

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

@@ -0,0 +1,130 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = () => `
+
+  /* ── 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 (<a> or <span>) ───────────────────────────────────── */
+
+  .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 ──────────────────────────────────────────────────────────── */
+
+  .root:hover {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */
+
+  :host([active]) .root,
+  .root:active {
+    background-color: var(--diwa-bg-active);
+    color: var(--diwa-text-primary);
+  }
+
+  /* ── Visited — prevent browser default purple ───────────────────────── */
+
+  .root:visited {
+    color: var(--diwa-text-primary);
+  }
+
+  /* ── 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;
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.root')}
+`;
+//# sourceMappingURL=diwa-link-pure-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-link-pure-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-link-pure/diwa-link-pure-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DzC,aAAa,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoEtB,qBAAqB,CAAC,OAAO,CAAC;CACjC,CAAC","sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* Stretch: fill the parent's inline axis */\n  :host([stretch]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* ── Root element (<a> or <span>) ───────────────────────────────────── */\n\n  .root {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-2);\n    flex-direction: row; /* overridden by alignLabel=start below */\n\n    background: transparent;\n    border: none;\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\n    margin: 0;\n    cursor: pointer;\n\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-regular);\n    line-height: 1;\n    color: var(--diwa-text-primary);\n    text-decoration: none;\n    white-space: nowrap;\n\n    -webkit-appearance: none;\n    appearance: none;\n    -webkit-font-smoothing: antialiased;\n\n    border-radius: var(--diwa-radius-sm);\n  }\n\n  /* Stretch: push icon and label to opposite edges */\n  :host([stretch]) .root {\n    width: 100%;\n    justify-content: space-between;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.root')}\n\n  /* ── Size ───────────────────────────────────────────────────────────── */\n\n  :host([size=\"sm\"]) .root {\n    font-size: var(--diwa-font-size-sm);\n  }\n\n  :host([size=\"lg\"]) .root {\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── Hover ──────────────────────────────────────────────────────────── */\n\n  .root:hover {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\n\n  :host([active]) .root,\n  .root:active {\n    background-color: var(--diwa-bg-active);\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── Visited — prevent browser default purple ───────────────────────── */\n\n  .root:visited {\n    color: var(--diwa-text-primary);\n  }\n\n  /* ── alignLabel: start → label on left, icon on right ──────────────── */\n\n  :host([align-label=\"start\"]) .root {\n    flex-direction: row-reverse;\n  }\n\n  /* ── Underline label text ───────────────────────────────────────────── */\n\n  :host([underline]) .label {\n    text-decoration: underline;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: contents;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.root')}\n`;"]}