@diwacopilot/components 1.0.0

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

@@ -0,0 +1,217 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+import { d as defineCustomElement$2 } from './p-302af10d.js';
+
+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')}
+`;
+
+const DiwaLinkPure$1 = /*@__PURE__*/ proxyCustomElement(class DiwaLinkPure extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Per-component theme override (light / dark). */
+        this.theme = "dark";
+        /** Target attribute — where to open the linked URL. */
+        this.target = "_self";
+        /**
+         * Lucide icon name (kebab-case, e.g. "arrow-right"), or "none" to hide icon.
+         * Defaults to "arrow-right" — matching PDS p-link-pure.
+         */
+        this.icon = "arrow-right";
+        /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */
+        this.hideLabel = false;
+        /** Display the link in active/pressed visual state. */
+        this.active = false;
+        /** Shows an underline decoration on the label text. */
+        this.underline = false;
+        /** Text size tier — also scales the icon. */
+        this.size = "md";
+        /**
+         * Controls label position relative to the icon.
+         * "end" (default): [icon] [label]
+         * "start":         [label] [icon]
+         */
+        this.alignLabel = "end";
+        /** Stretches the link to fill its container width. */
+        this.stretch = false;
+    }
+    render() {
+        var _a;
+        const isAnchor = !!this.href;
+        const Tag = isAnchor ? "a" : "span";
+        const hasIcon = this.icon !== "none";
+        const iconSize = this.size === "sm" ? 14 : this.size === "lg" ? 20 : 16;
+        const anchorProps = isAnchor
+            ? 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 } : {})) : {};
+        return (h(Host, { key: '761192365523187da4022afc17ddcd42eacd6fd1', "data-theme": this.theme }, h("style", { key: 'dcaf58e09c4bf9e728acc480748650235d005fb9', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: '9669b20ef6fcd90c86244205b9b1dd7c59f6143c', class: "root" }, anchorProps, { part: "base" }), hasIcon && (h("span", { key: '11a2c4828484693962c83ea800ec5ab17b6f1c77', class: "icon", "aria-hidden": "true" }, h("diwa-icon", { key: 'ce1521f41513d709c51292db263c6e8252ea91a5', name: this.icon, size: iconSize }))), h("span", { key: '61d7962e751fdd6e84630fe27d5f4fb1ed1c2de0', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: 'd585bfadb227cf240719d2958a3b6a52a1429410' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+}, [17, "diwa-link-pure", {
+        "theme": [513],
+        "href": [1],
+        "target": [1],
+        "download": [1],
+        "rel": [1],
+        "icon": [1],
+        "hideLabel": [516, "hide-label"],
+        "active": [516],
+        "underline": [516],
+        "size": [513],
+        "alignLabel": [513, "align-label"],
+        "stretch": [516],
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-link-pure", "diwa-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-link-pure":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaLinkPure$1);
+            }
+            break;
+        case "diwa-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaLinkPure = DiwaLinkPure$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaLinkPure, defineCustomElement };
+
+//# sourceMappingURL=diwa-link-pure.js.map

package/dist-custom-elements/diwa-link-pure.js.map

@@ -0,0 +1 @@
+{"file":"diwa-link-pure.js","mappings":";;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DzC,aAAa,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoEtB,qBAAqB,CAAC,OAAO,CAAC;CACjC;;MC3GYA,cAAY;IAJzB;;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAMvC,WAAM,GAAe,OAAO,CAAC;;;;;QAY7B,SAAI,GAAW,aAAa,CAAC;;QAGZ,cAAS,GAAY,KAAK,CAAC;;QAG3B,WAAM,GAAY,KAAK,CAAC;;QAGxB,cAAS,GAAY,KAAK,CAAC;;QAG3B,SAAI,GAAiB,IAAI,CAAC;;;;;;QAO1B,eAAU,GAAuB,KAAK,CAAC;;QAGvC,YAAO,GAAY,KAAK,CAAC;KA0CnD;IArCC,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,GAAI,GAAW,GAAI,MAAc,CAAC;QACtD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;QAExE,MAAM,WAAW,GAAG,QAAQ;8BAEtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EACD,MAAA,IAAI,CAAC,GAAG,oCACP,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,KAC5D,IAAI,CAAC,KAAK,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAEpD,EAAE,CAAC;QAEP,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,EAAC,GAAG,mEAAC,KAAK,EAAC,MAAM,IAAK,WAAW,IAAE,IAAI,EAAC,MAAM,KAC3C,OAAO,KACN,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,IACnC,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACR,EACD,6DACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvD,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaLinkPure"],"sources":["src/components/diwa-link-pure/diwa-link-pure-styles.ts","src/components/diwa-link-pure/diwa-link-pure.tsx"],"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`;","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkPureSize, LinkPureAlignLabel, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-pure-styles\";\n\n/**\n * @component diwa-link-pure\n *\n * A minimal, text+icon link — no background or border. Mirrors PDS p-link-pure.\n * Renders as <a> when href is set, otherwise as a non-interactive <span>.\n *\n * Usage:\n *   <diwa-link-pure href=\"/more\">Read more</diwa-link-pure>\n *   <diwa-link-pure href=\"/back\" icon=\"arrow-left\" align-label=\"start\">Back</diwa-link-pure>\n *   <diwa-link-pure href=\"/close\" hide-label label=\"Close\" icon=\"x\" />\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link-pure\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLinkPure {\n  @Element() host!: HTMLDiwaLinkPureElement;\n\n  /** Per-component theme override (light / dark). */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\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  /**\n   * Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide icon.\n   * Defaults to \"arrow-right\" — matching PDS p-link-pure.\n   */\n  @Prop() icon: string = \"arrow-right\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Display the link in active/pressed visual state. */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Shows an underline decoration on the label text. */\n  @Prop({ reflect: true }) underline: boolean = false;\n\n  /** Text size tier — also scales the icon. */\n  @Prop({ reflect: true }) size: LinkPureSize = \"md\";\n\n  /**\n   * Controls label position relative to the icon.\n   * \"end\" (default): [icon] [label]\n   * \"start\":         [label] [icon]\n   */\n  @Prop({ reflect: true }) alignLabel: LinkPureAlignLabel = \"end\";\n\n  /** Stretches the link to fill its container width. */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\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.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\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        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"root\" {...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}"],"version":3}

package/dist-custom-elements/diwa-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaLink extends Components.DiwaLink, HTMLElement {}
+export const DiwaLink: {
+    prototype: DiwaLink;
+    new (): DiwaLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,258 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+import { d as defineCustomElement$2 } from './p-302af10d.js';
+
+const getComponentCss = () => `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-flex;
+    position: relative;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */
+
+  .inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--diwa-space-2);
+
+    height: var(--diwa-button-height, 40px);
+    padding: 0 var(--diwa-button-padding-x, 16px);
+    box-sizing: border-box;
+    width: 100%;
+
+    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));
+    border: var(--diwa-border-width-thin) solid transparent;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));
+    font-family: inherit;
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+
+    cursor: pointer;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+
+    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);
+
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  ${getFocusStyle('.inner')}
+
+  /* ── Variant: primary ───────────────────────────────────────────────── */
+
+  :host([variant="primary"]) .inner {
+    background-color: var(--diwa-button-bg, var(--diwa-accent));
+    color: var(--diwa-button-color, var(--diwa-text-inverse));
+    border-color: transparent;
+  }
+
+  :host([variant="primary"]) .inner:hover {
+    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));
+  }
+
+  :host([variant="primary"]) .inner:active {
+    background-color: var(--diwa-accent-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: secondary ─────────────────────────────────────────────── */
+
+  :host([variant="secondary"]) .inner {
+    background-color: transparent;
+    color: var(--diwa-accent);
+    border-color: var(--diwa-accent);
+  }
+
+  :host([variant="secondary"]) .inner:hover {
+    background-color: var(--diwa-accent-bg);
+    border-color: var(--diwa-accent-hover);
+  }
+
+  :host([variant="secondary"]) .inner:active {
+    background-color: var(--diwa-accent-muted);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: ghost ─────────────────────────────────────────────────── */
+
+  :host([variant="ghost"]) .inner {
+    background-color: transparent;
+    color: var(--diwa-text-secondary);
+    border-color: transparent;
+  }
+
+  :host([variant="ghost"]) .inner:hover {
+    background-color: var(--diwa-bg-hover);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([variant="ghost"]) .inner:active {
+    background-color: var(--diwa-bg-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: danger ────────────────────────────────────────────────── */
+
+  :host([variant="danger"]) .inner {
+    background-color: var(--diwa-danger);
+    color: var(--diwa-text-inverse);
+    border-color: transparent;
+  }
+
+  :host([variant="danger"]) .inner:hover {
+    background-color: var(--diwa-danger-hover);
+  }
+
+  :host([variant="danger"]) .inner:active {
+    background-color: var(--diwa-danger-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Compact ────────────────────────────────────────────────────────── */
+
+  :host([compact]) .inner {
+    height: var(--diwa-button-height-sm, 32px);
+    padding: 0 var(--diwa-button-padding-x-sm, 10px);
+    font-size: var(--diwa-font-size-md);
+  }
+
+  /* ── State: disabled ────────────────────────────────────────────────── */
+
+  :host([disabled]) .inner {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Icon wrapper ───────────────────────────────────────────────────── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */
+
+  .label--hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /* ── Icon-only mode ─────────────────────────────────────────────────── */
+
+  :host([hide-label]) .inner {
+    width: var(--diwa-button-height, 40px);
+    padding: 0;
+  }
+
+  :host([hide-label][compact]) .inner {
+    width: var(--diwa-button-height-sm, 32px);
+  }
+
+  /* ── Span (no href) — not interactive ───────────────────────────────── */
+
+  span.inner {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.inner', '.label', '.icon')}
+`;
+
+const DiwaLink$1 = /*@__PURE__*/ proxyCustomElement(class DiwaLink extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** 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 delegatesFocus() { return true; }
+    get host() { return this; }
+}, [17, "diwa-link", {
+        "theme": [513],
+        "variant": [513],
+        "href": [1],
+        "target": [1],
+        "download": [1],
+        "rel": [1],
+        "icon": [1],
+        "hideLabel": [516, "hide-label"],
+        "compact": [516],
+        "label": [1],
+        "disabled": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-link", "diwa-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaLink$1);
+            }
+            break;
+        case "diwa-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaLink = DiwaLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaLink, defineCustomElement };
+
+//# sourceMappingURL=diwa-link.js.map

package/dist-custom-elements/diwa-link.js.map

@@ -0,0 +1 @@
+{"file":"diwa-link.js","mappings":";;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiDzC,aAAa,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmIvB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;CACrD;;MCjKYA,UAAQ;IAJrB;;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGtB,YAAO,GAAgB,SAAS,CAAC;;QAMlD,WAAM,GAAe,OAAO,CAAC;;QAS7B,SAAI,GAAW,MAAM,CAAC;;QAGL,cAAS,GAAY,KAAK,CAAC;;QAG3B,YAAO,GAAY,KAAK,CAAC;;QAMzB,aAAQ,GAAY,KAAK,CAAC;KAwCpD;IAtCC,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,GAAI,GAAW,GAAI,MAAc,CAAC;QACtD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAExC,MAAM,WAAW,GAAG,QAAQ;4CAEtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EACD,MAAA,IAAI,CAAC,GAAG,oCACP,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,KAC5D,IAAI,CAAC,KAAK,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAC9C,IAAI,CAAC,QAAQ,GAAG,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAEpE,EAAE,CAAC;QAEP,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,EAAC,GAAG,mEAAC,KAAK,EAAC,OAAO,IAAK,WAAW,IAAE,IAAI,EAAC,MAAM,KAC5C,OAAO,KACN,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,IACnC,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACR,EACD,6DACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvD,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaLink"],"sources":["src/components/diwa-link/diwa-link-styles.ts","src/components/diwa-link/diwa-link.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */\n\n  .inner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.inner')}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant=\"primary\"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant=\"primary\"]) .inner:hover {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant=\"primary\"]) .inner:active {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant=\"secondary\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant=\"secondary\"]) .inner:hover {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant=\"secondary\"]) .inner:active {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant=\"ghost\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant=\"ghost\"]) .inner:hover {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant=\"ghost\"]) .inner:active {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant=\"danger\"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant=\"danger\"]) .inner:hover {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant=\"danger\"]) .inner:active {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][compact]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  /* ── Span (no href) — not interactive ───────────────────────────────── */\n\n  span.inner {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.inner', '.label', '.icon')}\n`;\n","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}"],"version":3}

package/dist-custom-elements/diwa-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaModal extends Components.DiwaModal, HTMLElement {}
+export const DiwaModal: {
+    prototype: DiwaModal;
+    new (): DiwaModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;