@editora/ui-core 0.1.9 → 0.1.12

package/dist/collapsible.cjs.js

@@ -0,0 +1,381 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./ElementBase-1b301e7f.js"),x=`
+  :host {
+    --ui-collapsible-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --ui-collapsible-surface: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, #ffffff 2%);
+    --ui-collapsible-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-collapsible-text: var(--ui-color-text, #0f172a);
+    --ui-collapsible-muted: var(--ui-color-muted, #64748b);
+    --ui-collapsible-accent: var(--ui-color-primary, #2563eb);
+    --ui-collapsible-radius: 14px;
+    --ui-collapsible-shadow: none;
+
+    --ui-collapsible-header-min-h: 46px;
+    --ui-collapsible-padding-x: 14px;
+    --ui-collapsible-padding-y: 11px;
+
+    --ui-collapsible-duration: 170ms;
+    --ui-collapsible-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+
+  :host([size="sm"]) {
+    --ui-collapsible-header-min-h: 40px;
+    --ui-collapsible-padding-x: 12px;
+    --ui-collapsible-padding-y: 9px;
+  }
+
+  :host([size="lg"]) {
+    --ui-collapsible-header-min-h: 52px;
+    --ui-collapsible-padding-x: 16px;
+    --ui-collapsible-padding-y: 13px;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-collapsible-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 82%, var(--ui-color-text, #0f172a) 18%);
+  }
+
+  :host([tone="info"]) {
+    --ui-collapsible-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-collapsible-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-collapsible-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-collapsible-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([state="error"]) {
+    --ui-collapsible-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([state="success"]) {
+    --ui-collapsible-accent: var(--ui-color-success, #16a34a);
+  }
+
+  .shell {
+    border: 1px solid var(--ui-collapsible-border);
+    border-radius: var(--ui-collapsible-radius);
+    background: linear-gradient(164deg, var(--ui-collapsible-surface), var(--ui-collapsible-bg));
+    color: var(--ui-collapsible-text);
+    box-shadow: var(--ui-collapsible-shadow);
+    overflow: clip;
+    transition:
+      border-color var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      box-shadow var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      background-color var(--ui-collapsible-duration) var(--ui-collapsible-easing);
+  }
+
+  :host([variant="subtle"]) .shell {
+    background: color-mix(in srgb, var(--ui-collapsible-accent) 5%, var(--ui-collapsible-bg));
+  }
+
+  :host([variant="outline"]) .shell {
+    background: transparent;
+    box-shadow: none;
+    border-color: color-mix(in srgb, var(--ui-collapsible-accent) 30%, var(--ui-collapsible-border));
+  }
+
+  :host([variant="ghost"]) .shell {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .shell[data-open="true"] {
+    border-color: color-mix(in srgb, var(--ui-collapsible-accent) 34%, var(--ui-collapsible-border));
+  }
+
+  .shell[data-disabled="true"] {
+    opacity: 0.72;
+  }
+
+  .trigger {
+    inline-size: 100%;
+    min-block-size: var(--ui-collapsible-header-min-h);
+    border: 0;
+    margin: 0;
+    background: color-mix(in srgb, var(--ui-collapsible-surface) 94%, transparent);
+    color: var(--ui-collapsible-text);
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 12px;
+    padding: var(--ui-collapsible-padding-y) var(--ui-collapsible-padding-x);
+    transition:
+      background-color var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      color var(--ui-collapsible-duration) var(--ui-collapsible-easing);
+  }
+
+  .trigger:hover {
+    background: color-mix(in srgb, var(--ui-collapsible-accent) 7%, var(--ui-collapsible-surface));
+  }
+
+  .trigger:active {
+    transform: translateY(1px);
+  }
+
+  .trigger:focus-visible {
+    outline: 2px solid var(--ui-collapsible-accent);
+    outline-offset: -2px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .shell[data-disabled="true"] .trigger,
+  .trigger[disabled] {
+    cursor: not-allowed;
+  }
+
+  .leading {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .heading {
+    min-inline-size: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  .title {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 1.3;
+    font-weight: 650;
+    letter-spacing: 0.01em;
+  }
+
+  .caption {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 1.25;
+    color: var(--ui-collapsible-muted);
+  }
+
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-collapsible-muted);
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .icon {
+    inline-size: 16px;
+    block-size: 16px;
+    color: color-mix(in srgb, var(--ui-collapsible-accent) 74%, var(--ui-collapsible-text));
+    transition:
+      transform var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      color var(--ui-collapsible-duration) var(--ui-collapsible-easing);
+    flex: 0 0 auto;
+  }
+
+  .shell[data-open="true"] .icon {
+    transform: rotate(180deg);
+  }
+
+  :host([icon-position="left"]) .shell[data-open="true"] .icon {
+    transform: rotate(-180deg);
+  }
+
+  .panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    border-top: 1px solid transparent;
+    transition:
+      grid-template-rows var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      border-color var(--ui-collapsible-duration) var(--ui-collapsible-easing);
+  }
+
+  .shell[data-open="true"] .panel {
+    grid-template-rows: 1fr;
+    border-top-color: color-mix(in srgb, var(--ui-collapsible-accent) 20%, var(--ui-collapsible-border));
+  }
+
+  .panel-inner {
+    min-block-size: 0;
+    overflow: hidden;
+    padding: 0 var(--ui-collapsible-padding-x);
+    color: color-mix(in srgb, var(--ui-collapsible-text) 90%, var(--ui-collapsible-muted) 10%);
+    font-size: 14px;
+    line-height: 1.55;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    pointer-events: none;
+    transition:
+      opacity var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      transform var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      padding var(--ui-collapsible-duration) var(--ui-collapsible-easing),
+      visibility var(--ui-collapsible-duration) var(--ui-collapsible-easing);
+  }
+
+  .shell[data-open="true"] .panel-inner {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+    padding: 10px var(--ui-collapsible-padding-x) 14px;
+  }
+
+  .state-note {
+    margin: 0;
+    padding: 0 var(--ui-collapsible-padding-x) 10px;
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--ui-collapsible-muted);
+  }
+
+  :host([state="loading"]) .state-note {
+    color: var(--ui-color-warning, #d97706);
+  }
+
+  :host([state="error"]) .state-note {
+    color: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([state="success"]) .state-note {
+    color: var(--ui-color-success, #16a34a);
+  }
+
+  :host([headless]) .shell {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :host([headless]) .trigger {
+    background: transparent;
+    padding-inline: 0;
+  }
+
+  :host([headless]) .trigger:hover {
+    background: transparent;
+  }
+
+  :host([headless]) .panel-inner,
+  :host([headless]) .state-note {
+    padding-inline: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shell,
+    .trigger,
+    .icon,
+    .panel,
+    .panel-inner {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .shell,
+    .trigger,
+    .panel {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-collapsible-bg: Canvas;
+      --ui-collapsible-surface: Canvas;
+      --ui-collapsible-border: CanvasText;
+      --ui-collapsible-text: CanvasText;
+      --ui-collapsible-muted: CanvasText;
+      --ui-collapsible-accent: Highlight;
+      --ui-collapsible-shadow: none;
+    }
+
+    .shell,
+    .trigger,
+    .panel,
+    .panel-inner,
+    .state-note {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function d(i){return i!==null&&i.toLowerCase()!=="false"&&i!=="0"}function p(i){return i==="loading"||i==="error"||i==="success"?i:"idle"}function b(i){return i==="sm"||i==="lg"?i:"md"}function h(i){return i==="subtle"||i==="outline"||i==="ghost"?i:"default"}function g(i){return i==="neutral"||i==="info"||i==="success"||i==="warning"||i==="danger"?i:"neutral"}function f(i){return i==="left"?"left":"right"}function y(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():`ui-collapsible-${Math.random().toString(36).slice(2,10)}`}class v extends m.ElementBase{constructor(){super(),this._uid=y(),this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","headless","disabled","readonly","state","size","variant","tone","icon-position","close-on-escape"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this._applyOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,t,r){t!==r&&((e==="open"||e==="disabled"||e==="readonly")&&this._applyOpenState()&&e==="open"||this.requestRender())}get open(){return d(this.getAttribute("open"))}set open(e){const t=!!e;t!==this.open&&(t?this.setAttribute("open",""):this.removeAttribute("open"))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}get disabled(){return this.hasAttribute("disabled")||this.state==="loading"}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get readonly(){return this.hasAttribute("readonly")}set readonly(e){e?this.setAttribute("readonly",""):this.removeAttribute("readonly")}get state(){return p(this.getAttribute("state"))}set state(e){const t=p(e);t==="idle"?this.removeAttribute("state"):this.setAttribute("state",t)}get size(){return b(this.getAttribute("size"))}set size(e){const t=b(e);t==="md"?this.removeAttribute("size"):this.setAttribute("size",t)}get variant(){return h(this.getAttribute("variant"))}set variant(e){const t=h(e);t==="default"?this.removeAttribute("variant"):this.setAttribute("variant",t)}get tone(){return g(this.getAttribute("tone"))}set tone(e){const t=g(e);t==="neutral"?this.removeAttribute("tone"):this.setAttribute("tone",t)}get iconPosition(){return f(this.getAttribute("icon-position"))}set iconPosition(e){const t=f(e);t==="right"?this.removeAttribute("icon-position"):this.setAttribute("icon-position",t)}_closeOnEscape(){const e=this.getAttribute("close-on-escape");return e==null?!0:d(e)}_stateNote(){const e=this.state;return e==="loading"?"Updating section…":e==="error"?"Unable to sync this section.":e==="success"?"Section synced successfully.":""}_applyOpenState(){const e=this.root.querySelector(".trigger"),t=this.root.querySelector(".shell"),r=this.root.querySelector(".panel"),s=this.root.querySelector(".panel-inner");if(!e||!t||!r||!s)return!1;const o=this.open,a=this.disabled||this.readonly;return e.setAttribute("aria-expanded",o?"true":"false"),e.disabled=a,t.dataset.open=o?"true":"false",t.dataset.disabled=a?"true":"false",r.setAttribute("aria-hidden",o?"false":"true"),o?s.removeAttribute("inert"):s.setAttribute("inert",""),!0}_setOpenFromUser(e,t){if(this.disabled||this.readonly)return;const r=this.open;if(e===r)return;this.open=e;const s={open:this.open,previousOpen:r,source:t};this.dispatchEvent(new CustomEvent("toggle",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-toggle",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-change",{detail:s,bubbles:!0,composed:!0}))}_onClick(e){const t=e.target;!t||!t.closest(".trigger")||this._setOpenFromUser(!this.open,"pointer")}_onKeyDown(e){if(e.key!=="Escape"||!this.open||!this._closeOnEscape()||!e.composedPath().includes(this))return;e.preventDefault(),this._setOpenFromUser(!1,"keyboard");const t=this.root.querySelector(".trigger");t&&queueMicrotask(()=>{try{t.focus({preventScroll:!0})}catch{t.focus()}})}_indicatorMarkup(){return`
+      <span class="icon" part="icon" aria-hidden="true">
+        <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 7.5 10 12.5 15 7.5"></path>
+        </svg>
+      </span>
+    `}render(){const e=this.open,t=this.disabled||this.readonly,r=`${this._uid}-trigger`,s=`${this._uid}-panel`,o=this.state,a=this.size,l=this.variant,c=this.tone,n=this.iconPosition,u=this._stateNote();a!=="md"?this.setAttribute("size",a):this.removeAttribute("size"),l!=="default"?this.setAttribute("variant",l):this.removeAttribute("variant"),c!=="neutral"?this.setAttribute("tone",c):this.removeAttribute("tone"),o!=="idle"?this.setAttribute("state",o):this.removeAttribute("state"),n!=="right"?this.setAttribute("icon-position",n):this.removeAttribute("icon-position"),this.setContent(`
+      <style>${x}</style>
+      <section class="shell" part="base" data-open="${e?"true":"false"}" data-disabled="${t?"true":"false"}">
+        <button
+          id="${r}"
+          class="trigger"
+          part="header trigger"
+          type="button"
+          aria-controls="${s}"
+          aria-expanded="${e?"true":"false"}"
+          ${t?"disabled":""}
+        >
+          <span class="leading">
+            ${n==="left"?this._indicatorMarkup():""}
+            <span class="heading">
+              <span class="title"><slot name="header">Details</slot></span>
+              <span class="caption"><slot name="caption"></slot></span>
+            </span>
+          </span>
+          <span class="trailing">
+            <span class="meta"><slot name="meta"></slot></span>
+            ${n==="right"?this._indicatorMarkup():""}
+          </span>
+        </button>
+
+        <div
+          id="${s}"
+          class="panel"
+          part="content panel"
+          role="region"
+          aria-labelledby="${r}"
+          aria-hidden="${e?"false":"true"}"
+        >
+          <div class="panel-inner" part="content-inner" ${e?"":"inert"}><slot></slot></div>
+        </div>
+
+        ${u?`<p class="state-note" part="state-note">${u}</p>`:""}
+      </section>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-collapsible")&&customElements.define("ui-collapsible",v);exports.UICollapsible=v;