@editora/ui-core 0.1.8 → 0.1.10

package/dist/checkbox.cjs.js

@@ -0,0 +1,338 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-1b301e7f.js"),n=`
+  :host {
+    --ui-checkbox-size: 18px;
+    --ui-checkbox-hit-area: 24px;
+    --ui-checkbox-radius: 4px;
+    --ui-checkbox-border: 1.5px solid color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 44%, var(--ui-color-border, #cbd5e1) 56%);
+    --ui-checkbox-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
+    --ui-checkbox-check-color: #ffffff;
+    --ui-checkbox-checked-background: var(--ui-primary, var(--ui-color-primary, #2563eb));
+    --ui-checkbox-checked-border: var(--ui-checkbox-border);
+    --ui-checkbox-indeterminate-bg: #d97706;
+    --ui-checkbox-indeterminate-border: 1.5px solid color-mix(in srgb, #d97706 72%, #78350f 28%);
+    --ui-checkbox-invalid-border: 1.5px solid var(--ui-color-danger, #dc2626);
+    --ui-checkbox-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-color-danger, #dc2626) 24%, transparent);
+    --ui-checkbox-focus: 0 0 0 4px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 26%, transparent);
+    --ui-checkbox-shadow: none;
+    --ui-checkbox-shadow-checked: none;
+    --ui-checkbox-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
+    --ui-checkbox-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-checkbox-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-checkbox-muted: var(--ui-color-muted, #64748b);
+    --ui-checkbox-duration: 170ms;
+    --ui-checkbox-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-checkbox-size: 16px;
+    --ui-checkbox-hit-area: 20px;
+    --ui-checkbox-radius: 4px;
+    --ui-checkbox-duration: 140ms;
+  }
+
+  :host([density="compact"]) .label {
+    font-size: 13px;
+    line-height: 1.35;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-checkbox-size: 20px;
+    --ui-checkbox-hit-area: 28px;
+    --ui-checkbox-radius: 5px;
+  }
+
+  :host([density="comfortable"]) .label {
+    font-size: 15px;
+  }
+
+  :host([preset="admin"]) {
+    --ui-checkbox-radius: 4px;
+    --ui-checkbox-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, #64748b 30%);
+    --ui-checkbox-background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 76%, var(--ui-color-surface-alt, #f8fafc) 24%);
+    --ui-checkbox-checked-background: color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 88%, #0f172a 12%);
+    --ui-checkbox-checked-border: 1px solid color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 72%, #0f172a 28%);
+    --ui-checkbox-shadow: none;
+    --ui-checkbox-shadow-checked: 0 0 0 1px color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 28%, transparent);
+  }
+
+  :host([preset="admin"][density="compact"]) {
+    --ui-checkbox-size: 15px;
+    --ui-checkbox-hit-area: 18px;
+    --ui-checkbox-radius: 3px;
+    --ui-checkbox-duration: 120ms;
+  }
+
+  :host([preset="admin"][density="compact"]) .label {
+    font-size: 12.5px;
+    letter-spacing: 0;
+  }
+
+  :host([disabled]),
+  :host([loading]) {
+    cursor: not-allowed;
+  }
+
+  .row {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: var(--ui-checkbox-hit-area);
+  }
+
+  .control-wrap {
+    width: var(--ui-checkbox-hit-area);
+    min-width: var(--ui-checkbox-hit-area);
+    height: var(--ui-checkbox-hit-area);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .control {
+    width: var(--ui-checkbox-size);
+    min-width: var(--ui-checkbox-size);
+    height: var(--ui-checkbox-size);
+    border-radius: var(--ui-checkbox-radius);
+    border: var(--ui-checkbox-border);
+    background: var(--ui-checkbox-background);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--ui-checkbox-shadow);
+    transition:
+      border-color var(--ui-checkbox-duration) var(--ui-checkbox-easing),
+      background-color var(--ui-checkbox-duration) var(--ui-checkbox-easing),
+      box-shadow var(--ui-checkbox-duration) var(--ui-checkbox-easing),
+      transform var(--ui-checkbox-duration) var(--ui-checkbox-easing);
+  }
+
+  .control::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 30%, transparent), transparent 52%);
+    opacity: 0.22;
+    pointer-events: none;
+    transition: opacity var(--ui-checkbox-duration) var(--ui-checkbox-easing);
+  }
+
+  .check,
+  .dash {
+    opacity: 0;
+    transform: scale(0.86);
+    transition:
+      opacity var(--ui-checkbox-duration) var(--ui-checkbox-easing),
+      transform var(--ui-checkbox-duration) var(--ui-checkbox-easing);
+  }
+
+  .check {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: calc(var(--ui-checkbox-size) - 4px);
+    height: calc(var(--ui-checkbox-size) - 4px);
+    color: var(--ui-checkbox-check-color);
+    transform-origin: center;
+  }
+
+  .check-path {
+    stroke-dasharray: 22;
+    stroke-dashoffset: 22;
+    transition: stroke-dashoffset 210ms var(--ui-checkbox-easing);
+  }
+
+  .dash {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: calc(var(--ui-checkbox-size) - 6px);
+    height: 2.2px;
+    border-radius: 99px;
+    background: var(--ui-checkbox-check-color);
+    transform-origin: center;
+  }
+
+  .spinner {
+    position: absolute;
+    width: calc(var(--ui-checkbox-size) - 5px);
+    height: calc(var(--ui-checkbox-size) - 5px);
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    opacity: 0;
+    animation: ui-checkbox-spin 700ms linear infinite;
+    pointer-events: none;
+  }
+
+  :host([checked]:not([indeterminate])) .control {
+    background: var(--ui-checkbox-checked-background);
+    border: var(--ui-checkbox-checked-border);
+    box-shadow: var(--ui-checkbox-shadow-checked);
+  }
+
+  :host([checked]:not([indeterminate])) .control::before {
+    opacity: 0.32;
+  }
+
+  :host([checked]:not([indeterminate])) .check {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :host([checked]:not([indeterminate])) .check-path {
+    stroke-dashoffset: 0;
+  }
+
+  :host([indeterminate]) .control {
+    background: var(--ui-checkbox-indeterminate-bg);
+    border: var(--ui-checkbox-indeterminate-border);
+    box-shadow: var(--ui-checkbox-shadow-checked);
+  }
+
+  :host([indeterminate]) .dash {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :host(:focus-visible) .control {
+    box-shadow: var(--ui-checkbox-focus);
+  }
+
+  :host(:not([disabled]):not([loading]):hover) .control {
+    transform: translateY(-0.5px);
+    border-color: color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 80%, #0f172a 20%);
+  }
+
+  :host(:not([disabled]):not([loading]):active) .control {
+    transform: scale(0.96);
+  }
+
+  :host([invalid]) .control {
+    border: var(--ui-checkbox-invalid-border);
+  }
+
+  :host([invalid]:focus-visible) .control {
+    box-shadow: var(--ui-checkbox-invalid-focus);
+  }
+
+  :host([disabled]) .control,
+  :host([loading]) .control {
+    background: var(--ui-checkbox-disabled-bg);
+    border: var(--ui-checkbox-disabled-border);
+    box-shadow: none;
+    transform: none;
+  }
+
+  :host([disabled]) .check,
+  :host([disabled]) .dash,
+  :host([loading]) .check,
+  :host([loading]) .dash {
+    opacity: 0.72 !important;
+  }
+
+  :host([loading]) .spinner {
+    opacity: 1;
+  }
+
+  .label {
+    color: var(--ui-checkbox-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-checkbox-label-color) 55%, var(--ui-checkbox-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-checkbox-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control,
+    .check,
+    .dash,
+    .spinner {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-checkbox-border: 2px solid currentColor;
+      --ui-checkbox-checked-border: 2px solid currentColor;
+      --ui-checkbox-indeterminate-border: 2px solid currentColor;
+      --ui-checkbox-invalid-border: 2px solid currentColor;
+      --ui-checkbox-disabled-border: 2px solid currentColor;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-checkbox-background: Canvas;
+      --ui-checkbox-border: 1px solid CanvasText;
+      --ui-checkbox-checked-background: Highlight;
+      --ui-checkbox-checked-border: 1px solid Highlight;
+      --ui-checkbox-indeterminate-bg: Highlight;
+      --ui-checkbox-indeterminate-border: 1px solid Highlight;
+      --ui-checkbox-invalid-border: 1px solid Highlight;
+      --ui-checkbox-disabled-bg: Canvas;
+      --ui-checkbox-disabled-border: 1px solid GrayText;
+      --ui-checkbox-focus: 0 0 0 2px Highlight;
+      --ui-checkbox-invalid-focus: 0 0 0 2px Highlight;
+      --ui-checkbox-label-color: CanvasText;
+    }
+  }
+`;function r(t){return t!==null&&t.toLowerCase()!=="false"&&t!=="0"}function d(t){return t instanceof HTMLElement?!!t.closest('a, button, input, select, textarea, [contenteditable="true"], [data-ui-checkbox-no-toggle]'):!1}class c extends s.ElementBase{constructor(){super(),this._uid=`ui-checkbox-${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","indeterminate","headless","loading","invalid","tabindex"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._syncA11yState()}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,o){if(i!==o){if(e==="tabindex"){this._syncA11yState();return}this.requestRender()}}get checked(){return r(this.getAttribute("checked"))}set checked(e){const i=!!e;i!==this.checked&&(i?this.setAttribute("checked",""):this.removeAttribute("checked"))}get indeterminate(){return r(this.getAttribute("indeterminate"))}set indeterminate(e){const i=!!e;i!==this.indeterminate&&(i?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate"))}get disabled(){return r(this.getAttribute("disabled"))}set disabled(e){const i=!!e;i!==this.disabled&&(i?this.setAttribute("disabled",""):this.removeAttribute("disabled"))}get loading(){return r(this.getAttribute("loading"))}set loading(e){const i=!!e;i!==this.loading&&(i?this.setAttribute("loading",""):this.removeAttribute("loading"))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}get invalid(){return r(this.getAttribute("invalid"))}set invalid(e){const i=!!e;i!==this.invalid&&(i?this.setAttribute("invalid",""):this.removeAttribute("invalid"))}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 preset(){return this.getAttribute("preset")||"default"}set preset(e){const i=(e||"").trim().toLowerCase();if(!i||i==="default"){this.removeAttribute("preset");return}this.setAttribute("preset",i)}_syncA11yState(){const e=this.indeterminate?"mixed":this.checked?"true":"false",i=this.disabled||this.loading,o=i?"-1":this.getAttribute("tabindex")||"0",a=`${this._uid}-label`;this.setAttribute("role","checkbox"),this.setAttribute("aria-checked",e),this.setAttribute("aria-disabled",i?"true":"false"),this.setAttribute("aria-busy",this.loading?"true":"false"),this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.setAttribute("aria-labelledby",a),this.setAttribute("tabindex",o)}_toggleFromUser(){if(this.disabled||this.loading)return;this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked;const e={checked:this.checked,indeterminate:this.indeterminate};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_onClick(e){this.disabled||this.loading||e.composedPath().some(o=>d(o))||this._toggleFromUser()}_onKeyDown(e){this.disabled||this.loading||e.key!==" "&&e.key!=="Enter"||(e.preventDefault(),this._toggleFromUser())}render(){this._syncA11yState(),this.setContent(`
+      <style>${n}</style>
+      <span class="row" part="root">
+        <span class="control-wrap" part="hit-area" aria-hidden="true">
+          <span class="control" part="control">
+            <svg class="check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+              <polyline class="check-path" points="2.8 8.6 6.7 12.1 13.1 4.9"></polyline>
+            </svg>
+            <span class="dash"></span>
+            <span class="spinner"></span>
+          </span>
+        </span>
+        <span class="label" id="${this._uid}-label" part="label"><slot></slot></span>
+      </span>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-checkbox")&&customElements.define("ui-checkbox",c);exports.UICheckbox=c;