@editora/ui-core 0.1.9 → 0.1.10

package/dist/block-controls.cjs.js

@@ -0,0 +1,347 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),v=`
+  :host {
+    display: inline-flex;
+    min-inline-size: 0;
+    --ui-block-controls-gap: var(--base-block-controls-gap, 6px);
+    --ui-block-controls-padding: var(--base-block-controls-padding, 8px);
+    --ui-block-controls-radius: var(--base-block-controls-radius, var(--ui-radius, 4px));
+    --ui-block-controls-border: var(--base-block-controls-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 88%, transparent));
+    --ui-block-controls-bg: var(--base-block-controls-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
+    --ui-block-controls-shadow: var(--base-block-controls-shadow, var(--shadow-2, none));
+    --ui-block-controls-accent: var(--ui-color-primary, #2563eb);
+    --ui-block-controls-focus-ring: var(--ui-color-focus-ring, #2563eb);
+    --ui-block-controls-duration: 170ms;
+    --ui-block-controls-item-radius: var(--base-block-controls-item-radius, var(--ui-radius, 4px));
+    --ui-control-radius: var(--ui-block-controls-item-radius);
+    --ui-control-min-height: 32px;
+    --ui-control-padding-inline: 10px;
+    --ui-control-gap: 6px;
+    --ui-control-font-size: 13px;
+    color-scheme: light dark;
+    box-sizing: border-box;
+    font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  }
+
+  :host([tone="neutral"]) {
+    --ui-block-controls-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 72%, var(--ui-color-text, #0f172a) 28%);
+  }
+
+  :host([tone="info"]) {
+    --ui-block-controls-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-block-controls-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-block-controls-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-block-controls-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  .toolbar {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--ui-block-controls-gap);
+    padding: var(--ui-block-controls-padding);
+    border-radius: var(--ui-block-controls-radius);
+    border: var(--ui-block-controls-border);
+    background: var(--ui-block-controls-bg);
+    box-shadow: var(--ui-block-controls-shadow);
+    backdrop-filter: var(--backdrop-filter-panel, saturate(1.04) blur(10px));
+    transition:
+      transform var(--ui-block-controls-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      border-color var(--ui-block-controls-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      box-shadow var(--ui-block-controls-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity var(--ui-block-controls-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .toolbar::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background:
+      radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--ui-block-controls-accent) 14%, transparent), transparent 64%),
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 28%, transparent), transparent 48%);
+    opacity: 0.52;
+  }
+
+  .toolbar:focus-within {
+    border-color: color-mix(in srgb, var(--ui-block-controls-focus-ring) 52%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-block-controls-focus-ring) 22%, transparent),
+      0 14px 30px rgba(15, 23, 42, 0.14);
+  }
+
+  :host(:not([disabled])):hover .toolbar {
+    transform: translateY(-1px);
+  }
+
+  :host([orientation="vertical"]) .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([wrap]) .toolbar {
+    flex-wrap: wrap;
+  }
+
+  :host([density="compact"]) {
+    --ui-block-controls-gap: 4px;
+    --ui-block-controls-padding: 6px;
+    --ui-block-controls-radius: calc(var(--ui-radius, 4px) + 2px);
+  }
+
+  :host([density="comfortable"]) {
+    --ui-block-controls-gap: 8px;
+    --ui-block-controls-padding: 10px;
+    --ui-block-controls-radius: calc(var(--ui-radius, 4px) + 6px);
+  }
+
+  :host([variant="surface"]) {
+    --ui-block-controls-bg: var(--base-block-controls-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
+    --ui-block-controls-border: var(--base-block-controls-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 88%, transparent));
+  }
+
+  :host([variant="soft"]) {
+    --ui-block-controls-bg: color-mix(in srgb, var(--ui-block-controls-accent) 8%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-block-controls-border: 1px solid color-mix(in srgb, var(--ui-block-controls-accent) 16%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-block-controls-shadow: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-block-controls-bg: color-mix(in srgb, var(--ui-block-controls-accent) 14%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-block-controls-border: 1px solid color-mix(in srgb, var(--ui-block-controls-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([variant="outline"]) {
+    --ui-block-controls-bg: color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 88%, transparent);
+    --ui-block-controls-border: 1px solid color-mix(in srgb, var(--ui-block-controls-accent) 42%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-block-controls-shadow: none;
+  }
+
+  :host([variant="ghost"]) {
+    --ui-block-controls-bg: transparent;
+    --ui-block-controls-border: 1px solid transparent;
+    --ui-block-controls-shadow: none;
+  }
+
+  :host([variant="minimal"]) {
+    --ui-block-controls-bg: transparent;
+    --ui-block-controls-border: 1px solid transparent;
+    --ui-block-controls-shadow: none;
+  }
+
+  :host([variant="minimal"]) .toolbar,
+  :host([variant="ghost"]) .toolbar {
+    padding-inline: 2px;
+  }
+
+  :host([elevation="none"]) .toolbar {
+    box-shadow: none;
+  }
+
+  :host([elevation="low"]) .toolbar {
+    box-shadow: var(--base-block-controls-shadow, var(--shadow-2, none));
+  }
+
+  :host([elevation="high"]) {
+    --ui-block-controls-shadow:
+      0 2px 6px rgba(15, 23, 42, 0.08),
+      0 20px 38px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-block-controls-gap: 4px;
+    --ui-block-controls-padding: 6px;
+    --ui-block-controls-item-radius: calc(var(--ui-radius, 4px) + 2px);
+    --ui-control-min-height: 28px;
+    --ui-control-padding-inline: 8px;
+    --ui-control-gap: 5px;
+    --ui-control-font-size: 12px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-block-controls-gap: 8px;
+    --ui-block-controls-padding: 10px;
+    --ui-block-controls-item-radius: calc(var(--ui-radius, 4px) + 4px);
+    --ui-control-min-height: 36px;
+    --ui-control-padding-inline: 12px;
+    --ui-control-gap: 7px;
+    --ui-control-font-size: 14px;
+  }
+
+  :host([radius="none"]) {
+    --ui-block-controls-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-block-controls-radius: 8px;
+  }
+
+  :host([radius="md"]),
+  :host([radius="large"]) {
+    --ui-block-controls-radius: 12px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-block-controls-radius: 16px;
+  }
+
+  :host([radius="full"]) {
+    --ui-block-controls-radius: 9999px;
+  }
+
+  :host([state="loading"]) .toolbar::after {
+    content: '';
+    position: absolute;
+    inset-inline: 8px;
+    inset-block-end: -1px;
+    block-size: 2px;
+    border-radius: 999px;
+    background:
+      linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--ui-block-controls-accent) 0%, transparent) 0%,
+        color-mix(in srgb, var(--ui-block-controls-accent) 94%, #0f172a) 45%,
+        color-mix(in srgb, var(--ui-block-controls-accent) 0%, transparent) 100%
+      );
+    background-size: 46% 100%;
+    animation: ui-block-controls-progress 1.2s linear infinite;
+    pointer-events: none;
+  }
+
+  :host([state="error"]) {
+    --ui-block-controls-accent: var(--ui-color-danger, #dc2626);
+    --ui-block-controls-border: 1px solid color-mix(in srgb, var(--ui-block-controls-accent) 44%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([state="success"]) {
+    --ui-block-controls-accent: var(--ui-color-success, #16a34a);
+    --ui-block-controls-border: 1px solid color-mix(in srgb, var(--ui-block-controls-accent) 44%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([state="error"]) .toolbar,
+  :host([state="success"]) .toolbar {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--ui-block-controls-accent) 16%, transparent),
+      var(--ui-block-controls-shadow);
+  }
+
+  .toolbar ::slotted([data-separator]),
+  .toolbar ::slotted(hr) {
+    border: 0;
+    inline-size: 1px;
+    block-size: 18px;
+    align-self: center;
+    margin: 0 2px;
+    background: color-mix(in srgb, var(--ui-block-controls-accent) 28%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    border-radius: 999px;
+    opacity: 0.72;
+  }
+
+  :host([orientation="vertical"]) .toolbar ::slotted([data-separator]),
+  :host([orientation="vertical"]) .toolbar ::slotted(hr) {
+    inline-size: 100%;
+    block-size: 1px;
+    margin: 2px 0;
+  }
+
+  .toolbar ::slotted([disabled]),
+  .toolbar ::slotted([aria-disabled="true"]) {
+    opacity: 0.56;
+    cursor: not-allowed;
+  }
+
+  .toolbar ::slotted([data-active="true"]) {
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-block-controls-accent) 38%, transparent);
+    border-radius: var(--ui-block-controls-item-radius);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .toolbar {
+    opacity: 0.58;
+    filter: saturate(0.78);
+    box-shadow: none;
+    transform: none !important;
+  }
+
+  :host([headless]) .toolbar {
+    display: none;
+  }
+
+  @keyframes ui-block-controls-progress {
+    from {
+      background-position: -120% 0;
+    }
+    to {
+      background-position: 220% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toolbar,
+    .toolbar::after {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .toolbar {
+      border-width: 2px;
+      box-shadow: none;
+    }
+    .toolbar:focus-within {
+      box-shadow: none;
+      outline: 2px solid var(--ui-block-controls-focus-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .toolbar {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+      box-shadow: none;
+    }
+    .toolbar ::slotted([data-separator]),
+    .toolbar ::slotted(hr) {
+      background: CanvasText;
+      opacity: 1;
+    }
+    .toolbar:focus-within {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+`,u=["button:not([disabled])","a[href]",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[role="button"]','[role="menuitem"]'].join(", ");function m(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(i){if(!i)return"";const o=i.trim().toLowerCase();return o?o==="none"?"0px":o==="sm"?"8px":o==="md"||o==="large"?"12px":o==="lg"?"16px":o==="full"||o==="pill"?"9999px":/^\d+(\.\d+)?$/.test(o)?`${o}px`:i:""}function b(i){if(i.hasAttribute("disabled"))return!0;const o=i.getAttribute("aria-disabled");return o==="true"||o==="1"}function d(i){return i.hidden||i.getAttribute("aria-hidden")==="true"||i.closest('[hidden], [aria-hidden="true"]')?!0:i.getClientRects().length===0}function y(i){if(!(i instanceof HTMLElement))return!1;if(i.isContentEditable||i.closest('[contenteditable="true"], textarea, select, [role="textbox"]'))return!0;const o=i.closest("input");if(!o)return!1;const t=(o.type||"").toLowerCase();return!["button","submit","reset","checkbox","radio"].includes(t)}class g extends k.ElementBase{constructor(){super(),this._slots=[],this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["orientation","headless","density","size","variant","tone","state","elevation","radius","wrap","loop","no-loop","disabled","active-index","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("focusin",this._onFocusIn),this._syncBusyState(),this._syncDisabledState();const o=f(this.getAttribute("radius"));o&&this.style.setProperty("--ui-block-controls-radius",o)}disconnectedCallback(){this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("focusin",this._onFocusIn),this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(o,t,e){if(t!==e){if(o==="disabled"&&this._syncDisabledState(),o==="state"&&this._syncBusyState(),o==="active-index"&&this._applyRovingTabIndex(),o==="radius"){const r=f(e);r?this.style.setProperty("--ui-block-controls-radius",r):this.style.removeProperty("--ui-block-controls-radius")}this.isConnected&&["orientation","headless","aria-label"].includes(o)&&this.requestRender()}}_orientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}_direction(){const o=this.getAttribute("dir");if(o==="rtl"||o==="ltr")return o;const t=this.closest("[dir]"),e=t==null?void 0:t.getAttribute("dir");return e==="rtl"||e==="ltr"?e:getComputedStyle(this).direction==="rtl"?"rtl":"ltr"}_loops(){return!this.hasAttribute("no-loop")}_syncBusyState(){this.getAttribute("state")==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy")}_syncDisabledState(){this.hasAttribute("disabled")?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}_resolveFocusable(o){if(!o||b(o)||d(o)||o.hasAttribute("data-separator")||o.tagName.toLowerCase()==="hr")return null;if(o.matches(u)||o.tabIndex>=0)return o;const t=o.shadowRoot,e=t==null?void 0:t.querySelector(u);if(e&&!b(e)&&!d(e))return e;const r=o.querySelector(u);return r&&!b(r)&&!d(r)?r:null}_focusEntries(){const o=this._slots;if(o.length===0)return[];const t=o.flatMap(n=>n.assignedElements({flatten:!0})),e=new Set,r=[];return t.forEach(n=>{const a=this._resolveFocusable(n);!a||e.has(a)||(e.add(a),r.push({root:n,focusTarget:a}))}),r}_parseActiveIndex(o){const t=Number(this.getAttribute("active-index")||"");return!Number.isFinite(t)||o<=0||t<0?0:t>o-1?o-1:Math.floor(t)}_applyRovingTabIndex(o){const t=this._focusEntries();if(t.length===0)return;if(this.hasAttribute("disabled")){t.forEach(r=>r.focusTarget.setAttribute("tabindex","-1"));return}let e=t.findIndex(r=>r.focusTarget===o);e<0&&(e=t.findIndex(r=>r.focusTarget.getAttribute("tabindex")==="0")),e<0&&(e=this._parseActiveIndex(t.length)),t.forEach((r,n)=>{r.focusTarget.setAttribute("tabindex",n===e?"0":"-1")})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(o=>o.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(o=>o.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this._applyRovingTabIndex()}_onFocusIn(o){const t=o.target;if(!t)return;const r=this._focusEntries().find(n=>t===n.focusTarget||n.root.contains(t));r&&this._applyRovingTabIndex(r.focusTarget)}_onKeyDown(o){if(this.hasAttribute("disabled")||o.defaultPrevented||o.altKey||o.ctrlKey||o.metaKey||y(o.target))return;const t=this._focusEntries();if(t.length<2)return;const e=o.composedPath(),r=t.findIndex(p=>e.includes(p.root)||e.includes(p.focusTarget));if(r<0)return;const n=this._orientation()==="horizontal",a=this._direction()==="rtl",x=this._loops();let s=r,l=!1;if(n?o.key==="ArrowRight"?(s=a?r-1:r+1,l=!0):o.key==="ArrowLeft"&&(s=a?r+1:r-1,l=!0):o.key==="ArrowDown"?(s=r+1,l=!0):o.key==="ArrowUp"&&(s=r-1,l=!0),o.key==="Home"?(s=0,l=!0):o.key==="End"&&(s=t.length-1,l=!0),!l)return;if(x?s=(s+t.length)%t.length:(s<0&&(s=0),s>t.length-1&&(s=t.length-1)),s===r){o.preventDefault();return}o.preventDefault();const c=t[s].focusTarget;this._applyRovingTabIndex(c);try{c.focus({preventScroll:!0})}catch{c.focus()}const h={fromIndex:r,toIndex:s,total:t.length,key:o.key,orientation:this._orientation()};this.dispatchEvent(new CustomEvent("ui-navigate",{detail:h,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("navigate",{detail:h,bubbles:!0,composed:!0}))}render(){const o=this._orientation(),t=m(this.getAttribute("aria-label")||"Block controls"),e=this.getAttribute("state")==="loading"?"true":"false",r=this.hasAttribute("disabled")?"true":"false";this.setContent(`
+      <style>${v}</style>
+      <div
+        class="toolbar"
+        part="base toolbar"
+        role="toolbar"
+        aria-orientation="${o}"
+        aria-label="${t}"
+        aria-busy="${e}"
+        aria-disabled="${r}"
+      >
+        <slot></slot>
+      </div>
+    `),this._attachSlotListeners(),this._syncBusyState(),this._syncDisabledState(),this._applyRovingTabIndex()}shouldRenderOnAttributeChange(o,t,e){return t===e?!1:!["density","size","variant","tone","elevation","radius","wrap","loop","no-loop","disabled"].includes(o)}}typeof customElements<"u"&&!customElements.get("ui-block-controls")&&customElements.define("ui-block-controls",g);exports.UIBlockControls=g;