@editora/ui-core 0.1.9 → 0.1.12

package/dist/toolbar.esm.js

@@ -0,0 +1,240 @@
+import { E as c } from "./ElementBase-909688f3.mjs";
+import { m as d, r as u, s, f as l, g as b } from "./roving-focus-group-4350c9a7.mjs";
+const f = `
+  :host {
+    --ui-toolbar-gap: 8px;
+    --ui-toolbar-padding: 8px;
+    --ui-toolbar-radius: 12px;
+    --ui-toolbar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-toolbar-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-toolbar-shadow:
+      none;
+
+    color-scheme: light dark;
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .toolbar {
+    min-inline-size: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--ui-toolbar-gap);
+    padding: var(--ui-toolbar-padding);
+    border: 1px solid var(--ui-toolbar-border);
+    border-radius: var(--ui-toolbar-radius);
+    background: var(--ui-toolbar-bg);
+    box-shadow: var(--ui-toolbar-shadow);
+  }
+
+  :host([orientation="vertical"]) .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([wrap]) .toolbar {
+    flex-wrap: wrap;
+  }
+
+  .toolbar ::slotted([data-separator]),
+  .toolbar ::slotted(hr) {
+    border: 0;
+    inline-size: 1px;
+    block-size: 20px;
+    background: color-mix(in srgb, var(--ui-toolbar-border) 82%, transparent);
+    margin: 0 2px;
+  }
+
+  :host([orientation="vertical"]) .toolbar ::slotted([data-separator]),
+  :host([orientation="vertical"]) .toolbar ::slotted(hr) {
+    inline-size: 100%;
+    block-size: 1px;
+  }
+
+  :host([variant="soft"]) {
+    --ui-toolbar-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, var(--ui-color-surface, #ffffff));
+    --ui-toolbar-border: color-mix(in srgb, var(--ui-color-primary, #2563eb) 24%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-toolbar-bg: #0f172a;
+    --ui-toolbar-border: #334155;
+    --ui-toolbar-shadow:
+      0 10px 24px rgba(2, 6, 23, 0.42),
+      0 24px 50px rgba(2, 6, 23, 0.38);
+  }
+
+  :host([variant="minimal"]) .toolbar {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding-inline: 0;
+  }
+
+  :host([size="sm"]) {
+    --ui-toolbar-gap: 6px;
+    --ui-toolbar-padding: 6px;
+    --ui-toolbar-radius: 10px;
+  }
+
+  :host([size="lg"]) {
+    --ui-toolbar-gap: 10px;
+    --ui-toolbar-padding: 10px;
+    --ui-toolbar-radius: 14px;
+  }
+
+  :host([density="compact"]) {
+    --ui-toolbar-gap: 5px;
+    --ui-toolbar-padding: 5px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-toolbar-gap: 11px;
+    --ui-toolbar-padding: 11px;
+  }
+
+  :host([headless]) .toolbar {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toolbar {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .toolbar {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-toolbar-bg: Canvas;
+      --ui-toolbar-border: CanvasText;
+      --ui-toolbar-shadow: none;
+    }
+  }
+`;
+function p(n) {
+  if (!(n instanceof HTMLElement) || n.hasAttribute("disabled") || n.getAttribute("aria-disabled") === "true")
+    return !1;
+  const t = n.tagName.toLowerCase();
+  return !!(["button", "input", "select", "textarea", "a"].includes(t) || n.hasAttribute("tabindex") || t.startsWith("ui-"));
+}
+class h extends c {
+  static get observedAttributes() {
+    return [
+      "orientation",
+      "headless",
+      "variant",
+      "size",
+      "density",
+      "wrap",
+      "loop",
+      "aria-label"
+    ];
+  }
+  constructor() {
+    super(), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("keydown", this._onKeyDown), queueMicrotask(() => this._syncRovingState());
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("keydown", this._onKeyDown), super.disconnectedCallback();
+  }
+  _focusables() {
+    const t = this.root.querySelector("slot");
+    if (!t)
+      return [];
+    const a = t.assignedElements({ flatten: !0 }), e = [], o = (i) => {
+      p(i) && e.push(i);
+    };
+    a.forEach((i) => {
+      o(i), i.querySelectorAll('button, [tabindex], a[href], input:not([type="hidden"]), select, textarea, ui-button, ui-toggle, ui-input, ui-select').forEach(o);
+    });
+    const r = /* @__PURE__ */ new Set();
+    return e.filter((i) => r.has(i) ? !1 : (r.add(i), !0));
+  }
+  _moveFocus(t, a) {
+    const e = this._focusables();
+    if (e.length < 2)
+      return;
+    const o = e.indexOf(t);
+    if (o < 0)
+      return;
+    const r = d(e, o, a, {
+      wrap: this.hasAttribute("loop") || !this.hasAttribute("no-loop"),
+      fallbackIndex: u(e, { activeIndex: o, getDisabled: () => !1 }),
+      getDisabled: () => !1
+    });
+    if (r < 0)
+      return;
+    const i = e[r];
+    s(e, i, { activeAttribute: null }), l(i);
+  }
+  _syncRovingState() {
+    const t = this._focusables();
+    if (!t.length)
+      return;
+    const a = t.find((e) => e === document.activeElement) || t[u(t, { getDisabled: () => !1 })];
+    s(t, a || null, { activeAttribute: null });
+  }
+  _onKeyDown(t) {
+    const a = t.target;
+    if (!a)
+      return;
+    const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    if (e === "horizontal" && t.key === "ArrowRight" || e === "vertical" && t.key === "ArrowDown") {
+      t.preventDefault(), this._moveFocus(a, 1);
+      return;
+    }
+    if (e === "horizontal" && t.key === "ArrowLeft" || e === "vertical" && t.key === "ArrowUp") {
+      t.preventDefault(), this._moveFocus(a, -1);
+      return;
+    }
+    if (t.key === "Home") {
+      const o = this._focusables();
+      if (!o.length)
+        return;
+      t.preventDefault();
+      const r = b(o, "first", () => !1);
+      if (r < 0)
+        return;
+      s(o, o[r], { activeAttribute: null }), l(o[r]);
+      return;
+    }
+    if (t.key === "End") {
+      const o = this._focusables();
+      if (!o.length)
+        return;
+      t.preventDefault();
+      const r = b(o, "last", () => !1);
+      if (r < 0)
+        return;
+      s(o, o[r], { activeAttribute: null }), l(o[r]);
+    }
+  }
+  shouldRenderOnAttributeChange(t, a, e) {
+    return !0;
+  }
+  render() {
+    const t = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("aria-label") || "Toolbar";
+    this.setContent(`
+      <style>${f}</style>
+      <div class="toolbar" part="toolbar" role="toolbar" aria-label="${a}" aria-orientation="${t}">
+        <slot></slot>
+      </div>
+    `), queueMicrotask(() => this._syncRovingState());
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-toolbar") && customElements.define("ui-toolbar", h);
+export {
+  h as UIToolbar
+};

package/dist/tooltip.cjs.js

@@ -0,0 +1,159 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-1b301e7f.js"),w=require("./portal-d8d7fbca.js"),d=140,y=120,m=`
+  .tooltip {
+    color-scheme: light dark;
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 92%, #0b1220 8%);
+    --ui-tooltip-color: var(--ui-color-surface, #f8fafc);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-border, #475569) 62%, transparent);
+    --ui-tooltip-shadow: none;
+    --ui-tooltip-radius: 10px;
+    --ui-tooltip-padding-y: 7px;
+    --ui-tooltip-padding-x: 10px;
+    --ui-tooltip-font-size: 12px;
+
+    position: absolute;
+    pointer-events: auto;
+    max-inline-size: min(340px, calc(100vw - 16px));
+    border: 1px solid var(--ui-tooltip-border);
+    border-radius: var(--ui-tooltip-radius);
+    background: var(--ui-tooltip-bg);
+    color: var(--ui-tooltip-color);
+    box-shadow: var(--ui-tooltip-shadow);
+    padding: var(--ui-tooltip-padding-y) var(--ui-tooltip-padding-x);
+    font: 550 var(--ui-tooltip-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    opacity: 0;
+    transform: translate3d(0, 4px, 0) scale(0.98);
+    transition: opacity ${d}ms ease, transform ${d}ms ease;
+    z-index: 3000;
+    will-change: transform, opacity;
+  }
+
+  .tooltip[data-interactive="false"] {
+    pointer-events: none;
+  }
+
+  .tooltip.show {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  .tooltip.closing {
+    opacity: 0;
+    transform: translate3d(0, 3px, 0) scale(0.98);
+  }
+
+  .tooltip[data-size="sm"] {
+    --ui-tooltip-font-size: 11px;
+    --ui-tooltip-padding-y: 5px;
+    --ui-tooltip-padding-x: 8px;
+    --ui-tooltip-radius: 8px;
+  }
+
+  .tooltip[data-size="lg"] {
+    --ui-tooltip-font-size: 13px;
+    --ui-tooltip-padding-y: 8px;
+    --ui-tooltip-padding-x: 12px;
+    --ui-tooltip-radius: 12px;
+  }
+
+  .tooltip[data-variant="soft"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, var(--ui-color-text, #0f172a));
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-primary, #2563eb) 42%, transparent);
+  }
+
+  .tooltip[data-variant="contrast"] {
+    --ui-tooltip-bg: var(--ui-color-surface, #f8fafc);
+    --ui-tooltip-color: var(--ui-color-text, #0f172a);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-border, #94a3b8) 72%, transparent);
+    --ui-tooltip-shadow:
+      0 1px 2px rgba(2, 6, 23, 0.08),
+      0 10px 24px rgba(15, 23, 42, 0.18);
+  }
+
+  .tooltip[data-variant="minimal"] {
+    --ui-tooltip-shadow: none;
+    --ui-tooltip-border: transparent;
+    --ui-tooltip-radius: 8px;
+  }
+
+  .tooltip[data-tone="success"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 84%, #052e16 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-success, #16a34a) 42%, transparent);
+  }
+
+  .tooltip[data-tone="warning"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 84%, #451a03 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-warning, #d97706) 42%, transparent);
+  }
+
+  .tooltip[data-tone="danger"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 84%, #450a0a 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-danger, #dc2626) 42%, transparent);
+  }
+
+  .tooltip-content {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .arrow {
+    position: absolute;
+    inline-size: 9px;
+    block-size: 9px;
+    background: var(--ui-tooltip-bg);
+    border-left: 1px solid var(--ui-tooltip-border);
+    border-top: 1px solid var(--ui-tooltip-border);
+    transform: rotate(45deg);
+    left: 50%;
+    top: -5px;
+    margin-left: -4px;
+    pointer-events: none;
+  }
+
+  .tooltip[data-placement="top"] .arrow {
+    top: auto;
+    bottom: -5px;
+    transform: rotate(225deg);
+  }
+
+  .tooltip[data-placement="left"] .arrow {
+    left: auto;
+    right: -5px;
+    top: 50%;
+    margin-left: 0;
+    margin-top: -4px;
+    transform: rotate(135deg);
+  }
+
+  .tooltip[data-placement="right"] .arrow {
+    left: -5px;
+    top: 50%;
+    margin-left: 0;
+    margin-top: -4px;
+    transform: rotate(-45deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip {
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .tooltip {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .tooltip {
+      --ui-tooltip-bg: Canvas;
+      --ui-tooltip-color: CanvasText;
+      --ui-tooltip-border: CanvasText;
+      --ui-tooltip-shadow: none;
+      forced-color-adjust: none;
+    }
+  }
+`;function b(o){if(o==null)return!1;const t=String(o).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function a(o,t){const e=Number(o);return Number.isFinite(e)?e:t}function _(o){return o==="top"||o==="right"||o==="bottom"||o==="left"?o:"top"}function A(o){const t=(o||"hover focus").trim().toLowerCase();return t?new Set(t.split(/[\s,]+/).filter(Boolean)):new Set(["hover","focus"])}function l(o){return b(o)}class f extends E.ElementBase{constructor(){super(),this._portalEl=null,this._cleanup=null,this._id=`ui-tooltip-${Math.random().toString(36).slice(2,9)}`,this._isOpen=!1,this._syncingOpenAttr=!1,this._openTimer=null,this._closeTimer=null,this._exitTimer=null,this._pointerInsidePortal=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onPortalMouseEnter=this._handlePortalMouseEnter.bind(this),this._onPortalMouseLeave=this._handlePortalMouseLeave.bind(this),this._onDocumentPointerDown=this._handleDocumentPointerDown.bind(this)}static get observedAttributes(){return["text","placement","open","disabled","headless","variant","size","tone","delay","close-delay","trigger","offset","interactive","arrow","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this.hasAttribute("open")&&this._scheduleShow(0)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._clearTimers(),this.hide(!0),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="open"&&!this._syncingOpenAttr){this.hasAttribute("open")?this._scheduleShow(0):this._scheduleHide(0);return}if(t==="disabled"&&this.hasAttribute("disabled")){this.hide();return}if((t==="text"||t==="aria-label")&&this._isOpen&&!(this.getAttribute("text")||this.getAttribute("aria-label")||"").trim()){this.hide();return}if(this._isOpen&&["text","placement","variant","size","tone","headless","offset","arrow","aria-label","interactive"].includes(t)){this._renderPortalContent(),this._reposition();return}}}_clearTimers(){this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),this._exitTimer&&(clearTimeout(this._exitTimer),this._exitTimer=null)}_triggerEnabled(t){const e=A(this.getAttribute("trigger"));return e.has("manual")?t==="manual":e.has(t)}_scheduleShow(t){if(this.hasAttribute("disabled"))return;this._clearTimers();const e=typeof t=="number"?t:a(this.getAttribute("delay"),250);this._openTimer=setTimeout(()=>{this.show(),this._openTimer=null},Math.max(0,e))}_scheduleHide(t){this._clearTimers();const e=typeof t=="number"?t:a(this.getAttribute("close-delay"),120);this._closeTimer=setTimeout(()=>{if(l(this.getAttribute("interactive"))&&this._pointerInsidePortal){this._closeTimer=null;return}this.hide(),this._closeTimer=null},Math.max(0,e))}_ensurePortalEl(){if(this._portalEl)return this._portalEl;const t=document.createElement("div");if(t.className="tooltip",t.id=this._id,t.setAttribute("role","tooltip"),!this.hasAttribute("headless")){const i=document.createElement("style");i.setAttribute("data-ui-tooltip-style",""),i.textContent=m,t.appendChild(i)}const e=document.createElement("div");return e.className="tooltip-content",t.appendChild(e),t.addEventListener("mouseenter",this._onPortalMouseEnter),t.addEventListener("mouseleave",this._onPortalMouseLeave),this._portalEl=t,t}_handlePortalMouseEnter(){this._pointerInsidePortal=!0,this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null)}_handlePortalMouseLeave(){this._pointerInsidePortal=!1,l(this.getAttribute("interactive"))&&this._scheduleHide()}_renderPortalContent(){const t=this._ensurePortalEl(),e=this.getAttribute("text")||this.getAttribute("aria-label")||"",i=_(this.getAttribute("placement")),u=this.getAttribute("variant")||"default",v=this.getAttribute("size")||"md",g=this.getAttribute("tone")||"default",h=!this.hasAttribute("arrow")||b(this.getAttribute("arrow")),x=l(this.getAttribute("interactive")),c=this.hasAttribute("headless"),r=t.querySelector("style[data-ui-tooltip-style]");if(!c&&!r){const s=document.createElement("style");s.setAttribute("data-ui-tooltip-style",""),s.textContent=m,t.prepend(s)}else c&&r&&r.remove();t.setAttribute("data-variant",u),t.setAttribute("data-size",v),t.setAttribute("data-tone",g),t.setAttribute("data-placement",i),t.setAttribute("data-interactive",x?"true":"false");const p=t.querySelector(".tooltip-content");p&&(p.textContent=e);const n=t.querySelector(".arrow");if(h&&!n){const s=document.createElement("div");s.className="arrow",t.appendChild(s)}!h&&n&&n.remove()}_reposition(){if(!this._portalEl)return;this._cleanup&&(this._cleanup(),this._cleanup=null);const t=_(this.getAttribute("placement")),e=a(this.getAttribute("offset"),8);this._cleanup=w.showPortalFor(this,this._portalEl,{placement:t,offset:e,shift:!0,flip:!0})}_syncOpenAttr(t){this._syncingOpenAttr=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncingOpenAttr=!1}}show(){if(this.hasAttribute("disabled")||!(this.getAttribute("text")||this.getAttribute("aria-label")||"").trim())return;this._clearTimers(),this._renderPortalContent(),this._reposition(),this._portalEl&&(this._portalEl.classList.remove("closing"),this._portalEl.classList.add("show"),this.setAttribute("aria-describedby",this._id)),this._bindDocumentDismiss();const e=this._isOpen;this._isOpen=!0,this._syncOpenAttr(!0),e||(this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:!0},bubbles:!0,composed:!0})))}hide(t=!1){this._clearTimers(),this._unbindDocumentDismiss(),this._cleanup&&(this._cleanup(),this._cleanup=null);const e=this._portalEl;e&&(e.classList.remove("show"),e.classList.add("closing"),t?this._removePortal():this._exitTimer=setTimeout(()=>{this._removePortal(),this._exitTimer=null},y)),this._pointerInsidePortal=!1,this.removeAttribute("aria-describedby");const i=this._isOpen;this._isOpen=!1,this._syncOpenAttr(!1),i&&(this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:!1},bubbles:!0,composed:!0})))}_removePortal(){this._portalEl&&(this._portalEl.removeEventListener("mouseenter",this._onPortalMouseEnter),this._portalEl.removeEventListener("mouseleave",this._onPortalMouseLeave),this._portalEl.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null)}_bindDocumentDismiss(){this._triggerEnabled("click")&&document.addEventListener("pointerdown",this._onDocumentPointerDown)}_unbindDocumentDismiss(){document.removeEventListener("pointerdown",this._onDocumentPointerDown)}_handleDocumentPointerDown(t){var i;if(!this._isOpen)return;const e=t.target;e&&(this.contains(e)||(i=this._portalEl)!=null&&i.contains(e)||this.hide())}shouldRenderOnAttributeChange(t,e,i){return!1}_onMouseEnter(){this._triggerEnabled("hover")&&this._scheduleShow()}_onMouseLeave(){this._triggerEnabled("hover")&&this._scheduleHide()}_onFocusIn(){this._triggerEnabled("focus")&&this._scheduleShow(0)}_onFocusOut(t){var i;if(!this._triggerEnabled("focus"))return;const e=t.relatedTarget;e&&this.contains(e)||e&&((i=this._portalEl)!=null&&i.contains(e))||this._scheduleHide(0)}_onClick(){this._triggerEnabled("click")&&(this._isOpen?this.hide():this._scheduleShow(0))}_onKeyDown(t){t.key==="Escape"&&this._isOpen&&(t.preventDefault(),this.hide())}render(){this.setContent("<slot></slot>")}}typeof customElements<"u"&&!customElements.get("ui-tooltip")&&customElements.define("ui-tooltip",f);exports.UITooltip=f;