@editora/ui-core 0.1.8 → 0.1.10

package/dist/toggle.esm.js

@@ -0,0 +1,346 @@
+import { E as g } from "./ElementBase-909688f3.mjs";
+const u = `
+  :host {
+    --ui-toggle-radius: 10px;
+    --ui-toggle-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-toggle-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-toggle-color: var(--ui-color-text, #0f172a);
+    --ui-toggle-active-bg: var(--ui-color-primary, #2563eb);
+    --ui-toggle-active-color: var(--ui-color-primary-foreground, #ffffff);
+    --ui-toggle-active-border: color-mix(in srgb, var(--ui-toggle-active-bg) 72%, #0f172a 28%);
+    --ui-toggle-muted: var(--ui-color-muted, #64748b);
+    --ui-toggle-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-toggle-shadow:
+      none;
+    --ui-toggle-padding-x: 12px;
+    --ui-toggle-padding-y: 8px;
+    --ui-toggle-height: 36px;
+    --ui-toggle-gap: 8px;
+
+    color-scheme: light dark;
+    display: inline-flex;
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .control {
+    min-inline-size: 0;
+    min-block-size: var(--ui-toggle-height);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-toggle-gap);
+    padding: var(--ui-toggle-padding-y) var(--ui-toggle-padding-x);
+    border: 1px solid var(--ui-toggle-border);
+    border-radius: var(--ui-toggle-radius);
+    background: var(--ui-toggle-bg);
+    color: var(--ui-toggle-color);
+    box-shadow: var(--ui-toggle-shadow);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    text-decoration: none;
+    font: 600 13px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      color 150ms ease,
+      transform 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .control:hover {
+    background: color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-toggle-bg));
+    border-color: color-mix(in srgb, var(--ui-toggle-active-bg) 30%, var(--ui-toggle-border));
+  }
+
+  .control:active {
+    transform: translateY(0.5px);
+  }
+
+  :host(:focus-visible) .control {
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-toggle-focus) 28%, transparent),
+      var(--ui-toggle-shadow);
+  }
+
+  :host([pressed]) .control,
+  .control[aria-pressed="true"] {
+    background: color-mix(in srgb, var(--ui-toggle-active-bg) 88%, #ffffff 12%);
+    border-color: var(--ui-toggle-active-border);
+    color: var(--ui-toggle-active-color);
+  }
+
+  :host([pressed]) .control:hover {
+    background: color-mix(in srgb, var(--ui-toggle-active-bg) 82%, #0f172a 18%);
+  }
+
+  .icon {
+    display: inline-grid;
+    place-items: center;
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .icon-off {
+    display: inline-grid;
+  }
+
+  .icon-on {
+    display: none;
+  }
+
+  :host([pressed]) .icon-on {
+    display: inline-grid;
+  }
+
+  :host([pressed]) .icon-off {
+    display: none;
+  }
+
+  .label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :host([size="sm"]) {
+    --ui-toggle-padding-x: 10px;
+    --ui-toggle-padding-y: 6px;
+    --ui-toggle-height: 32px;
+    --ui-toggle-radius: 9px;
+  }
+
+  :host([size="lg"]) {
+    --ui-toggle-padding-x: 14px;
+    --ui-toggle-padding-y: 10px;
+    --ui-toggle-height: 40px;
+    --ui-toggle-radius: 11px;
+  }
+
+  :host([shape="square"]) {
+    --ui-toggle-radius: 4px;
+  }
+
+  :host([shape="pill"]) {
+    --ui-toggle-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-toggle-shadow: none;
+  }
+
+  :host([variant="soft"]) {
+    --ui-toggle-bg: color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-color-surface, #ffffff));
+    --ui-toggle-border: color-mix(in srgb, var(--ui-toggle-active-bg) 24%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="outline"]) .control {
+    --ui-toggle-bg: transparent;
+    box-shadow: none;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-toggle-bg: #0f172a;
+    --ui-toggle-color: #e2e8f0;
+    --ui-toggle-border: #334155;
+    --ui-toggle-active-bg: #93c5fd;
+    --ui-toggle-active-color: #0f172a;
+    --ui-toggle-focus: #93c5fd;
+    --ui-toggle-shadow:
+      0 10px 24px rgba(2, 6, 23, 0.38),
+      0 24px 50px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([variant="minimal"]) .control {
+    box-shadow: none;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  :host([tone="success"]) {
+    --ui-toggle-active-bg: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-toggle-active-bg: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-toggle-active-bg: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([disabled]) .control,
+  :host([loading]) .control {
+    opacity: 0.56;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  :host([loading]) .icon {
+    animation: ui-toggle-spin 900ms linear infinite;
+  }
+
+  :host([headless]) .control {
+    display: none;
+  }
+
+  @keyframes ui-toggle-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control,
+    .icon {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .control {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-toggle-bg: Canvas;
+      --ui-toggle-color: CanvasText;
+      --ui-toggle-border: CanvasText;
+      --ui-toggle-active-bg: Highlight;
+      --ui-toggle-active-color: HighlightText;
+      --ui-toggle-focus: Highlight;
+      --ui-toggle-shadow: none;
+    }
+  }
+`, l = /* @__PURE__ */ new Set(["icon-on", "icon-off", "aria-label"]);
+function c(o) {
+  if (o == null)
+    return !1;
+  const e = String(o).toLowerCase();
+  return e !== "false" && e !== "0" && e !== "off";
+}
+function n(o) {
+  return String(o).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+class d extends g {
+  constructor() {
+    super(), this._control = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "pressed",
+      "disabled",
+      "loading",
+      "headless",
+      "size",
+      "variant",
+      "tone",
+      "shape",
+      "elevation",
+      "name",
+      "value",
+      "required",
+      "icon-on",
+      "icon-off",
+      "aria-label",
+      "tabindex"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this._syncAria();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (l.has(e)) {
+        super.attributeChangedCallback(e, t, i);
+        return;
+      }
+      this._syncAria();
+    }
+  }
+  get pressed() {
+    return this.hasAttribute("pressed");
+  }
+  set pressed(e) {
+    e ? this.setAttribute("pressed", "") : this.removeAttribute("pressed");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled") || this.hasAttribute("loading");
+  }
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  toggle(e) {
+    if (this.disabled)
+      return;
+    const t = typeof e == "boolean" ? e : !this.pressed;
+    if (t === this.pressed) {
+      this._syncAria();
+      return;
+    }
+    this.pressed = t, this._syncAria();
+    const i = {
+      pressed: t,
+      value: this.getAttribute("value") || "",
+      name: this.getAttribute("name") || "",
+      required: c(this.getAttribute("required"))
+    };
+    this.dispatchEvent(new CustomEvent("input", { detail: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: i, bubbles: !0, composed: !0 }));
+  }
+  _syncAria() {
+    const e = this.pressed, t = this.disabled, i = this.hasAttribute("loading"), s = this.hasAttribute("data-group-item");
+    s ? this.hasAttribute("aria-pressed") && this.removeAttribute("aria-pressed") : (this.setAttribute("role", "button"), this.setAttribute("aria-pressed", e ? "true" : "false")), this.setAttribute("aria-disabled", t ? "true" : "false"), this.setAttribute("aria-busy", i ? "true" : "false");
+    const r = this.getAttribute("tabindex");
+    if (t)
+      this.hasAttribute("data-ui-prev-tabindex") || this.setAttribute("data-ui-prev-tabindex", r ?? ""), r !== "-1" && this.setAttribute("tabindex", "-1");
+    else {
+      const a = this.getAttribute("data-ui-prev-tabindex");
+      a != null ? (a ? this.setAttribute("tabindex", a) : this.removeAttribute("tabindex"), this.removeAttribute("data-ui-prev-tabindex")) : r == null && this.setAttribute("tabindex", "0");
+    }
+    this._control && (this._control.disabled = t, s ? this._control.removeAttribute("aria-pressed") : this._control.setAttribute("aria-pressed", e ? "true" : "false"), this._control.setAttribute("aria-disabled", t ? "true" : "false"), this._control.setAttribute("aria-busy", i ? "true" : "false"));
+  }
+  _onClick(e) {
+    const t = e.target;
+    t && t.closest(".control") && this.toggle();
+  }
+  _onKeyDown(e) {
+    this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+  }
+  render() {
+    const e = this.pressed, t = this.disabled, i = this.getAttribute("icon-on") || "●", s = this.getAttribute("icon-off") || "○", r = this.getAttribute("aria-label") || "Toggle";
+    this.setContent(`
+      <style>${u}</style>
+      <button
+        type="button"
+        class="control"
+        part="control"
+        aria-label="${n(r)}"
+        aria-pressed="${e ? "true" : "false"}"
+        aria-disabled="${t ? "true" : "false"}"
+        tabindex="-1"
+        ${t ? "disabled" : ""}
+      >
+        <span class="icon icon-off" part="icon-off" aria-hidden="true">${n(s)}</span>
+        <span class="icon icon-on" part="icon-on" aria-hidden="true">${n(i)}</span>
+        <span class="label" part="label"><slot></slot></span>
+      </button>
+    `), this._control = this.root.querySelector(".control"), this._syncAria();
+  }
+  shouldRenderOnAttributeChange(e, t, i) {
+    return l.has(e);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-toggle") && customElements.define("ui-toggle", d);
+export {
+  d as UIToggle
+};

package/dist/toolbar.cjs.js

@@ -0,0 +1,126 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),i=require("./roving-focus-group-5c059bf9.js"),b=`
+  :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 c(s){if(!(s instanceof HTMLElement)||s.hasAttribute("disabled")||s.getAttribute("aria-disabled")==="true")return!1;const t=s.tagName.toLowerCase();return!!(["button","input","select","textarea","a"].includes(t)||s.hasAttribute("tabindex")||t.startsWith("ui-"))}class l extends u.ElementBase{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=n=>{c(n)&&e.push(n)};a.forEach(n=>{o(n),n.querySelectorAll('button, [tabindex], a[href], input:not([type="hidden"]), select, textarea, ui-button, ui-toggle, ui-input, ui-select').forEach(o)});const r=new Set;return e.filter(n=>r.has(n)?!1:(r.add(n),!0))}_moveFocus(t,a){const e=this._focusables();if(e.length<2)return;const o=e.indexOf(t);if(o<0)return;const r=i.moveRovingFocusIndex(e,o,a,{wrap:this.hasAttribute("loop")||!this.hasAttribute("no-loop"),fallbackIndex:i.resolveRovingFocusIndex(e,{activeIndex:o,getDisabled:()=>!1}),getDisabled:()=>!1});if(r<0)return;const n=e[r];i.syncRovingTabStops(e,n,{activeAttribute:null}),i.focusRovingItem(n)}_syncRovingState(){const t=this._focusables();if(!t.length)return;const a=t.find(e=>e===document.activeElement)||t[i.resolveRovingFocusIndex(t,{getDisabled:()=>!1})];i.syncRovingTabStops(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=i.getRovingFocusBoundaryIndex(o,"first",()=>!1);if(r<0)return;i.syncRovingTabStops(o,o[r],{activeAttribute:null}),i.focusRovingItem(o[r]);return}if(t.key==="End"){const o=this._focusables();if(!o.length)return;t.preventDefault();const r=i.getRovingFocusBoundaryIndex(o,"last",()=>!1);if(r<0)return;i.syncRovingTabStops(o,o[r],{activeAttribute:null}),i.focusRovingItem(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>${b}</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",l);exports.UIToolbar=l;