@editora/ui-core 0.1.12 → 0.1.14

package/dist/radio.cjs.js

@@ -0,0 +1,259 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-1b301e7f.js"),u=`
+  :host {
+    --ui-radio-size: 18px;
+    --ui-radio-hit-area: 24px;
+    --ui-radio-dot-size: 8px;
+    --ui-radio-border: 1.5px solid color-mix(in srgb, var(--ui-radio-accent, var(--ui-primary, var(--ui-color-primary, #2563eb))) 44%, var(--ui-color-border, #cbd5e1) 56%);
+    --ui-radio-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
+    --ui-radio-accent: var(--ui-primary, var(--ui-color-primary, #2563eb));
+    --ui-radio-dot-color: var(--ui-radio-accent);
+    --ui-radio-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-accent) 24%, transparent);
+    --ui-radio-invalid: var(--ui-color-danger, #dc2626);
+    --ui-radio-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-invalid) 24%, transparent);
+    --ui-radio-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
+    --ui-radio-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-radio-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-radio-muted: var(--ui-color-muted, #64748b);
+    --ui-radio-duration: 170ms;
+    --ui-radio-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    display: inline-flex;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    color-scheme: light dark;
+  }
+
+  :host([density="compact"]) {
+    --ui-radio-size: 16px;
+    --ui-radio-hit-area: 20px;
+    --ui-radio-dot-size: 7px;
+    --ui-radio-duration: 140ms;
+  }
+
+  :host([density="compact"]) .label {
+    font-size: 13px;
+    line-height: 1.35;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-radio-size: 20px;
+    --ui-radio-hit-area: 28px;
+    --ui-radio-dot-size: 9px;
+  }
+
+  :host([density="comfortable"]) .label {
+    font-size: 15px;
+  }
+
+  :host([tone="neutral"]) { --ui-radio-accent: #64748b; }
+  :host([tone="success"]) { --ui-radio-accent: #16a34a; }
+  :host([tone="warning"]) { --ui-radio-accent: #d97706; }
+  :host([tone="danger"]) { --ui-radio-accent: #dc2626; }
+  :host([tone="info"]) { --ui-radio-accent: #0ea5e9; }
+
+  :host([disabled]),
+  :host([loading]) {
+    cursor: not-allowed;
+  }
+
+  .row {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: var(--ui-radio-hit-area);
+  }
+
+  .control-wrap {
+    width: var(--ui-radio-hit-area);
+    min-width: var(--ui-radio-hit-area);
+    height: var(--ui-radio-hit-area);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .control {
+    width: var(--ui-radio-size);
+    min-width: var(--ui-radio-size);
+    height: var(--ui-radio-size);
+    border-radius: 999px;
+    border: var(--ui-radio-border);
+    background: var(--ui-radio-background);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    transition:
+      border-color var(--ui-radio-duration) var(--ui-radio-easing),
+      background-color var(--ui-radio-duration) var(--ui-radio-easing),
+      box-shadow var(--ui-radio-duration) var(--ui-radio-easing),
+      transform var(--ui-radio-duration) var(--ui-radio-easing);
+  }
+
+  .control::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 26%, transparent), transparent 56%);
+    opacity: 0.18;
+    pointer-events: none;
+    transition: opacity var(--ui-radio-duration) var(--ui-radio-easing);
+  }
+
+  .dot {
+    width: var(--ui-radio-dot-size);
+    height: var(--ui-radio-dot-size);
+    border-radius: 999px;
+    background: var(--ui-radio-dot-color);
+    opacity: 0;
+    transform: scale(0.2);
+    transition:
+      opacity var(--ui-radio-duration) var(--ui-radio-easing),
+      transform var(--ui-radio-duration) var(--ui-radio-easing);
+  }
+
+  .spinner {
+    position: absolute;
+    width: calc(var(--ui-radio-size) - 5px);
+    height: calc(var(--ui-radio-size) - 5px);
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    opacity: 0;
+    animation: ui-radio-spin 700ms linear infinite;
+    pointer-events: none;
+  }
+
+  :host([checked]) .control {
+    border-color: var(--ui-radio-accent);
+    background: color-mix(in srgb, var(--ui-radio-accent) 8%, var(--ui-radio-background));
+  }
+
+  :host([checked]) .control::before {
+    opacity: 0.28;
+  }
+
+  :host([checked]) .dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :host(:focus-visible) .control {
+    box-shadow: var(--ui-radio-focus);
+  }
+
+  :host(:not([disabled]):not([loading]):hover) .control {
+    transform: translateY(-0.5px);
+    border-color: color-mix(in srgb, var(--ui-radio-accent) 80%, #0f172a 20%);
+  }
+
+  :host(:not([disabled]):not([loading]):active) .control {
+    transform: scale(0.96);
+  }
+
+  :host([invalid]) .control {
+    border-color: var(--ui-radio-invalid);
+  }
+
+  :host([invalid]:focus-visible) .control {
+    box-shadow: var(--ui-radio-invalid-focus);
+  }
+
+  :host([disabled]) .control,
+  :host([loading]) .control {
+    background: var(--ui-radio-disabled-bg);
+    border: var(--ui-radio-disabled-border);
+    box-shadow: none;
+    transform: none;
+  }
+
+  :host([loading]) .spinner {
+    opacity: 1;
+  }
+
+  .label {
+    color: var(--ui-radio-label-color);
+    font-size: 14px;
+    line-height: 1.4;
+    letter-spacing: -0.005em;
+  }
+
+  .label:empty {
+    display: none;
+  }
+
+  :host([disabled]) .label,
+  :host([loading]) .label {
+    color: color-mix(in srgb, var(--ui-radio-label-color) 55%, var(--ui-radio-muted) 45%);
+  }
+
+  :host([headless]) .control {
+    display: none;
+  }
+
+  :host([headless]) .control-wrap {
+    width: 0;
+    min-width: 0;
+    height: 0;
+  }
+
+  :host([headless]) .row {
+    gap: 0;
+  }
+
+  :host([headless]) .label {
+    color: inherit;
+    font: inherit;
+  }
+
+  @keyframes ui-radio-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control,
+    .dot,
+    .spinner {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-radio-border: 2px solid currentColor;
+      --ui-radio-disabled-border: 2px solid currentColor;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-radio-background: Canvas;
+      --ui-radio-border: 1px solid CanvasText;
+      --ui-radio-accent: Highlight;
+      --ui-radio-invalid: Highlight;
+      --ui-radio-disabled-bg: Canvas;
+      --ui-radio-disabled-border: 1px solid GrayText;
+      --ui-radio-focus: 0 0 0 2px Highlight;
+      --ui-radio-invalid-focus: 0 0 0 2px Highlight;
+      --ui-radio-label-color: CanvasText;
+    }
+  }
+`;function o(r){return r!==null&&r.toLowerCase()!=="false"&&r!=="0"}function c(r){return r instanceof HTMLElement?!!r.closest('a, button, input, select, textarea, [contenteditable="true"], [data-ui-radio-no-toggle]'):!1}class s extends l.ElementBase{constructor(){super(),this._uid=`ui-radio-${Math.random().toString(36).slice(2,9)}`,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["checked","disabled","loading","invalid","required","headless","name","value","tabindex"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this.checked&&this._uncheckSiblings(),this._syncA11yState()}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&((e==="checked"||e==="name")&&this.checked&&this._uncheckSiblings(),this._syncA11yState())}get checked(){return o(this.getAttribute("checked"))}set checked(e){const i=!!e;i!==this.checked&&(i?this.setAttribute("checked",""):this.removeAttribute("checked"))}get disabled(){return o(this.getAttribute("disabled"))}set disabled(e){const i=!!e;i!==this.disabled&&(i?this.setAttribute("disabled",""):this.removeAttribute("disabled"))}get loading(){return o(this.getAttribute("loading"))}set loading(e){const i=!!e;i!==this.loading&&(i?this.setAttribute("loading",""):this.removeAttribute("loading"))}get invalid(){return o(this.getAttribute("invalid"))}set invalid(e){const i=!!e;i!==this.invalid&&(i?this.setAttribute("invalid",""):this.removeAttribute("invalid"))}get required(){return o(this.getAttribute("required"))}set required(e){const i=!!e;i!==this.required&&(i?this.setAttribute("required",""):this.removeAttribute("required"))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}get name(){return this.getAttribute("name")||""}set name(e){const i=String(e||"").trim();if(!i){this.removeAttribute("name");return}this.setAttribute("name",i)}get value(){return this.getAttribute("value")||""}set value(e){const i=String(e||"");if(!i){this.removeAttribute("value");return}this.setAttribute("value",i)}get density(){return this.getAttribute("density")||"default"}set density(e){const i=(e||"").trim().toLowerCase();if(!i||i==="default"){this.removeAttribute("density");return}this.setAttribute("density",i)}get tone(){const e=this.getAttribute("tone");return e==="neutral"||e==="success"||e==="warning"||e==="danger"||e==="info"?e:"brand"}set tone(e){const i=(e||"").trim().toLowerCase();if(!i||i==="brand"){this.removeAttribute("tone");return}this.setAttribute("tone",i)}_syncA11yState(){const e=this.disabled||this.loading,i=e?"-1":this.getAttribute("tabindex")||"0",t=`${this._uid}-label`;this.setAttribute("role","radio"),this.setAttribute("aria-checked",this.checked?"true":"false"),this.setAttribute("aria-disabled",e?"true":"false"),this.setAttribute("aria-busy",this.loading?"true":"false"),this.setAttribute("aria-required",this.required?"true":"false"),this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.setAttribute("aria-labelledby",t),this.setAttribute("tabindex",i)}_resolveQueryScope(){const e=this.closest("form, ui-form");if(e)return e;const i=this.getRootNode();return i instanceof Document||i instanceof ShadowRoot||i instanceof Element?i:null}_getGroupMembers(){const e=this.name.trim();if(!e)return[this];const i=this._resolveQueryScope();return!i||!("querySelectorAll"in i)?[this]:Array.from(i.querySelectorAll("ui-radio")).filter(t=>t instanceof s&&t.name===e)}_uncheckSiblings(){this._getGroupMembers().forEach(i=>{i!==this&&i.checked&&(i.checked=!1)})}_focusSelf(){try{this.focus({preventScroll:!0})}catch{this.focus()}}_checkFromUser(e){if(this.disabled||this.loading||this.checked)return;this.checked=!0;const i={checked:!0,value:this.value||void 0,name:this.name||void 0,reason:e};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:i,bubbles:!0,composed:!0}))}_moveGroupSelection(e){const i=this._getGroupMembers().filter(n=>!n.disabled&&!n.loading);if(i.length<=1)return;const d=(Math.max(i.indexOf(this),0)+e+i.length)%i.length,a=i[d];!a||a===this||(a._checkFromUser("keyboard"),a._focusSelf())}_onClick(e){this.disabled||this.loading||e.composedPath().some(t=>c(t))||this._checkFromUser("click")}_onKeyDown(e){if(!(this.disabled||this.loading)){if(e.key===" "||e.key==="Enter"){e.preventDefault(),this._checkFromUser("keyboard");return}if(this.name){if(e.key==="ArrowRight"||e.key==="ArrowDown"){e.preventDefault(),this._moveGroupSelection(1);return}(e.key==="ArrowLeft"||e.key==="ArrowUp")&&(e.preventDefault(),this._moveGroupSelection(-1))}}}render(){this._syncA11yState(),this.setContent(`
+      <style>${u}</style>
+      <span class="row" part="root">
+        <span class="control-wrap" part="hit-area" aria-hidden="true">
+          <span class="control" part="control">
+            <span class="dot" part="dot"></span>
+            <span class="spinner" part="spinner"></span>
+          </span>
+        </span>
+        <span class="label" id="${this._uid}-label" part="label"><slot></slot></span>
+      </span>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-radio")&&customElements.define("ui-radio",s);exports.UIRadio=s;