@diwacopilot/components 1.2.0 → 1.2.1

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

@@ -1,258 +1 @@
-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-473ec48f.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: '3084d48e4054064d4cded143a1ca8abe50c5ff6e', "data-theme": this.theme }, h("style", { key: 'b4a2af6ea1f3fcc270716ab43d9dbb2906d0cc9a', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: '5e0728ea634713e1b8bb1dceb633591567ab4d10', class: "inner" }, anchorProps, { part: "base" }), hasIcon && (h("span", { key: 'a972160dc036db8ec2ad42e3ce5ea6378917cc57', class: "icon", "aria-hidden": "true" }, h("diwa-icon", { key: 'b4a442de79d1842ee5157a78ba722250b6ab7129', name: this.icon, size: iconSize }))), h("span", { key: '34bc94660fd0f1d350db1b324bd846bfbd39a936', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: '28ad8f5a6bc2238beb524e58ac919be76fc9f716' })))));
-    }
-    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
+import{t as n,p as a,H as e,h as r,a as t}from"./index.js";import{b as i,a as o}from"./p-C8h0Vfqp.js";import{d}from"./p-DOo0FY37.js";const s=a(class extends e{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.theme="dark",this.variant="primary",this.target="_self",this.icon="none",this.hideLabel=!1,this.compact=!1,this.disabled=!1}render(){var n;const a=!!this.href,e=a?"a":"span",d="none"!==this.icon,s=this.compact?16:20,c=a?Object.assign(Object.assign({href:this.href,target:this.target,download:this.download,rel:null!==(n=this.rel)&&void 0!==n?n:"_blank"===this.target?"noopener noreferrer":void 0},this.label?{"aria-label":this.label}:{}),this.disabled?{"aria-disabled":"true",tabIndex:-1}:{}):{};return r(t,{key:"3084d48e4054064d4cded143a1ca8abe50c5ff6e","data-theme":this.theme},r("style",{key:"b4a2af6ea1f3fcc270716ab43d9dbb2906d0cc9a",innerHTML:`\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  ${i(".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  ${o(".inner",".label",".icon")}\n`}),r(e,Object.assign({key:"5e0728ea634713e1b8bb1dceb633591567ab4d10",class:"inner"},c,{part:"base"}),d&&r("span",{key:"a972160dc036db8ec2ad42e3ce5ea6378917cc57",class:"icon","aria-hidden":"true"},r("diwa-icon",{key:"b4a442de79d1842ee5157a78ba722250b6ab7129",name:this.icon,size:s})),r("span",{key:"34bc94660fd0f1d350db1b324bd846bfbd39a936",class:"label"+(this.hideLabel?" label--hidden":""),part:"label"},r("slot",{key:"28ad8f5a6bc2238beb524e58ac919be76fc9f716"}))))}static get delegatesFocus(){return!0}get host(){return this}},[273,"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 c(){"undefined"!=typeof customElements&&["diwa-link","diwa-icon"].forEach((a=>{switch(a){case"diwa-link":customElements.get(n(a))||customElements.define(n(a),s);break;case"diwa-icon":customElements.get(n(a))||d()}}))}c();const l=s,h=c;export{l as DiwaLink,h as defineCustomElement}