@editora/ui-core 0.1.9 → 0.1.12

package/dist/block-controls.esm.js

@@ -0,0 +1,556 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+const k = `
+  :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 v(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 m(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 y extends x {
+  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 = /* @__PURE__ */ 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 || m(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", g = 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 (g ? 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 = v(this.getAttribute("aria-label") || "Block controls"), e = this.getAttribute("state") === "loading" ? "true" : "false", r = this.hasAttribute("disabled") ? "true" : "false";
+    this.setContent(`
+      <style>${k}</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", y);
+export {
+  y as UIBlockControls
+};