@diwacopilot/components 1.2.0 → 1.2.2

package/dist/diwa-components/p-42c2e78f.entry.js

@@ -0,0 +1 @@
+import{r as n,h as a,H as e,a as t}from"./p-rIMpxxZG.js";import{b as i,a as r}from"./p-C8h0Vfqp.js";const o=class{constructor(a){n(this,a),this.theme="dark",this.variant="primary",this.size="md",this.type="button",this.disabled=!1,this.loading=!1,this.hideLabel=!1,this.icon="none",this.handleClick=n=>{this.isInteractive||(n.preventDefault(),n.stopPropagation())}}get isInteractive(){return!this.disabled&&!this.loading}get iconSize(){return"sm"===this.size?16:"lg"===this.size?24:20}render(){const n=!!this.href,t=n?"a":"button",o=((n,a,e,t)=>{const i={};return e&&(i["aria-label"]=e),a&&(i["aria-busy"]="true"),t&&(n||a)&&(i["aria-disabled"]="true"),i})(this.disabled,this.loading,this.label,n),d=Object.assign({class:"inner",onClick:this.handleClick},o),s=n?{href:this.href,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,tabIndex:this.disabled||this.loading?-1:void 0}:{type:this.type,name:this.name,value:this.value,disabled:this.disabled||this.loading};return a(e,{key:"40eee896f96707aa7e552ecb4a1dd9329dae5ec4","data-theme":this.theme,role:n?void 0:"button","aria-disabled":(this.disabled||this.loading)&&n?"true":void 0},a("style",{key:"d41a20f5d58d5408efeec81ea452d1bf4c160cbe",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 <button> or <a> in Shadow DOM) ─────────── */\n\n  .inner {\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    /* Sizing defaults (md) */\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    /* Shape */\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    /* Interaction */\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    /* Motion */\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    /* Reset native button styles */\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:not(:disabled) {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant="primary"]) .inner:active:not(:disabled) {\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:not(:disabled) {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant="secondary"]) .inner:active:not(:disabled) {\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:not(:disabled) {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant="ghost"]) .inner:active:not(:disabled) {\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:not(:disabled) {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant="danger"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Size: sm ───────────────────────────────────────────────────────── */\n\n  :host([size="sm"]) .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  /* ── Size: lg ───────────────────────────────────────────────────────── */\n\n  :host([size="lg"]) .inner {\n    height: var(--diwa-button-height-lg, 44px);\n    padding: 0 var(--diwa-space-10);\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner,\n  .inner:disabled {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── State: loading ─────────────────────────────────────────────────── */\n\n  :host([loading]) .inner {\n    cursor: wait;\n    pointer-events: none;\n  }\n\n  /* ── Spinner ────────────────────────────────────────────────────────── */\n\n  .spinner {\n    width: var(--diwa-spinner-size-sm);\n    height: var(--diwa-spinner-size-sm);\n    flex-shrink: 0;\n    border: var(--diwa-border-width-base) solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\n  }\n\n  @keyframes diwa-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ── Icon slots ─────────────────────────────────────────────────────── */\n\n  .icon-start,\n  .icon-end {\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  /* ── 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][size="sm"]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  :host([hide-label][size="lg"]) .inner {\n    width: var(--diwa-button-height-lg, 44px);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${r(".inner",".label",".spinner")}\n`}),a(t,Object.assign({key:"e4cb9b0f3b1d581803cee8a82ca9d838c48dd5f2"},d,s,{part:"base"}),this.loading&&a("span",{key:"d57fe6c27bd115e73f136003e9cb3c3de494020e",class:"spinner","aria-hidden":"true",part:"spinner"}),a("span",{key:"bfdcd738e1b4541bae233a7be5804d1ba4fc02df",class:"icon-start",part:"icon-start","aria-hidden":"true"},"none"!==this.icon&&!this.loading&&a("diwa-icon",{key:"674cf3892909a537d376dfb17bc4e14e6e5343ff",name:this.icon,size:this.iconSize}),a("slot",{key:"8bf7e06b4eab2814dccec4996a38f7fce76dedf9",name:"icon-start"})),a("span",{key:"efa94bbd8858dba301646d8f072dac475cf16fc5",class:"label"+(this.hideLabel?" label--hidden":""),part:"label"},a("slot",{key:"c296751f944fae738500ada889f0e057f6919e1f"})),a("span",{key:"d057b75d8cf65aafc87d0b3996e0a024fff3e4f0",class:"icon-end",part:"icon-end","aria-hidden":"true"},a("slot",{key:"b329bec720506f3b322c244cbf31139a57514a03",name:"icon-end"}))))}static get delegatesFocus(){return!0}get host(){return t(this)}};export{o as diwa_button}