@editora/ui-core 0.1.8 → 0.1.10

package/dist/progress.esm.js

@@ -0,0 +1,453 @@
+import { E as p } from "./ElementBase-909688f3.mjs";
+const f = `
+  :host {
+    display: block;
+    width: 100%;
+    --ui-progress-bg: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent);
+    --ui-progress-fill: var(--ui-color-primary, #2563eb);
+    --ui-progress-fill-soft:
+      linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--ui-progress-fill, #2563eb) 82%, white 18%),
+        var(--ui-progress-fill, #2563eb)
+      );
+    --ui-progress-buffer: color-mix(in srgb, var(--ui-progress-fill, #2563eb) 24%, transparent);
+    --ui-progress-height: 10px;
+    --ui-progress-radius: 999px;
+    --ui-progress-shadow: none;
+    --ui-progress-label: #334155;
+    --ui-progress-duration: 220ms;
+    --ui-progress-easing: cubic-bezier(0.2, 0.9, 0.24, 1);
+    --ui-progress-track-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-progress-circle-size: 72px;
+    --ui-progress-circle-thickness: 8px;
+    --ui-progress-circle-track: color-mix(in srgb, var(--ui-progress-bg) 82%, transparent);
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    font: 600 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    color: var(--ui-progress-label);
+    letter-spacing: 0.01em;
+    min-height: 16px;
+  }
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: var(--ui-progress-height);
+    border-radius: var(--ui-progress-radius);
+    overflow: hidden;
+    border: var(--ui-progress-track-border);
+    box-sizing: border-box;
+    background: var(--ui-progress-bg);
+    box-shadow: var(--ui-progress-shadow);
+    isolation: isolate;
+  }
+
+  .radial-wrap {
+    display: none;
+    position: relative;
+    width: var(--ui-progress-circle-size);
+    height: var(--ui-progress-circle-size);
+    place-items: center;
+    border-radius: 50%;
+  }
+
+  .radial-buffer,
+  .radial-value {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--ui-progress-circle-thickness)),
+      #000 calc(100% - var(--ui-progress-circle-thickness) + 1px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--ui-progress-circle-thickness)),
+      #000 calc(100% - var(--ui-progress-circle-thickness) + 1px)
+    );
+  }
+
+  .radial-buffer {
+    background:
+      conic-gradient(
+        var(--ui-progress-buffer) calc(var(--ui-radial-buffer, 0) * 1%),
+        var(--ui-progress-circle-track) 0
+      );
+    transition: background var(--ui-progress-duration) var(--ui-progress-easing);
+  }
+
+  .radial-value {
+    background:
+      conic-gradient(
+        var(--ui-progress-fill) calc(var(--ui-radial-value, 0) * 1%),
+        transparent 0
+      );
+    transition: background var(--ui-progress-duration) var(--ui-progress-easing), transform 160ms ease;
+  }
+
+  .radial-center {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    min-width: calc(var(--ui-progress-circle-size) - (var(--ui-progress-circle-thickness) * 2));
+    min-height: calc(var(--ui-progress-circle-size) - (var(--ui-progress-circle-thickness) * 2));
+    border-radius: 50%;
+    font: 600 11px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    color: var(--ui-progress-label);
+    letter-spacing: 0.01em;
+    text-align: center;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  :host([mode="circle"]) {
+    width: fit-content;
+  }
+
+  :host([mode="circle"]) .track {
+    display: none;
+  }
+
+  :host([mode="circle"]) .radial-wrap {
+    display: grid;
+  }
+
+  :host([mode="circle"][size="xs"]) {
+    --ui-progress-circle-size: 36px;
+    --ui-progress-circle-thickness: 4px;
+  }
+
+  :host([mode="circle"][size="sm"]) {
+    --ui-progress-circle-size: 52px;
+    --ui-progress-circle-thickness: 6px;
+  }
+
+  :host([mode="circle"][size="lg"]) {
+    --ui-progress-circle-size: 96px;
+    --ui-progress-circle-thickness: 10px;
+  }
+
+  .buffer {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 0%;
+    border-radius: inherit;
+    background: var(--ui-progress-buffer);
+    transition: width var(--ui-progress-duration) var(--ui-progress-easing);
+  }
+
+  .value {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 0%;
+    border-radius: inherit;
+    background: var(--ui-progress-fill-soft);
+    transition: width var(--ui-progress-duration) var(--ui-progress-easing), transform 160ms ease;
+    will-change: width, transform;
+  }
+
+  .value::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 55%);
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-progress-fill-soft: var(--ui-progress-fill);
+    --ui-progress-shadow: none;
+  }
+
+  :host([variant="line"]) {
+    --ui-progress-height: 6px;
+    --ui-progress-track-border: 0;
+    --ui-progress-shadow: none;
+  }
+
+  :host([variant="line"]) .value::before,
+  :host([variant="contrast"]) .value::before {
+    display: none;
+  }
+
+  :host([variant="glass"]) .track {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-progress-bg) 74%, #ffffff 26%),
+        color-mix(in srgb, var(--ui-progress-bg) 94%, transparent)
+      ),
+      var(--ui-progress-bg);
+    backdrop-filter: blur(8px) saturate(1.08);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-progress-bg: #1f2937;
+    --ui-progress-fill: #93c5fd;
+    --ui-progress-buffer: rgba(147, 197, 253, 0.36);
+    --ui-progress-label: #e2e8f0;
+    --ui-progress-track-border: 1px solid #334155;
+    --ui-progress-fill-soft: var(--ui-progress-fill);
+    --ui-progress-shadow: none;
+  }
+
+  :host([tone="success"]) { --ui-progress-fill: #16a34a; }
+  :host([tone="warning"]) { --ui-progress-fill: #d97706; }
+  :host([tone="danger"]) { --ui-progress-fill: #dc2626; }
+  :host([tone="info"]) { --ui-progress-fill: #0ea5e9; }
+  :host([tone="neutral"]) { --ui-progress-fill: #64748b; }
+
+  :host([shape="square"]) { --ui-progress-radius: 2px; }
+  :host([shape="round"]) { --ui-progress-radius: 10px; }
+  :host([shape="pill"]) { --ui-progress-radius: 999px; }
+
+  :host([size="xs"]) { --ui-progress-height: 4px; }
+  :host([size="sm"]) { --ui-progress-height: 8px; }
+  :host([size="lg"]) { --ui-progress-height: 14px; }
+
+  :host([striped]) .value {
+    background-image:
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, #ffffff 30%, transparent) 25%,
+        transparent 25%,
+        transparent 50%,
+        color-mix(in srgb, #ffffff 30%, transparent) 50%,
+        color-mix(in srgb, #ffffff 30%, transparent) 75%,
+        transparent 75%,
+        transparent
+      ),
+      var(--ui-progress-fill-soft);
+    background-size: 16px 16px, 100% 100%;
+  }
+
+  :host([striped][animated]) .value {
+    animation: ui-progress-stripes 1s linear infinite;
+  }
+
+  :host([indeterminate]) .value {
+    width: 38% !important;
+    min-width: 34px;
+    animation: ui-progress-indeterminate 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  :host([mode="circle"][indeterminate]) .radial-value {
+    background: conic-gradient(var(--ui-progress-fill) 24%, transparent 0);
+    animation: ui-progress-spin 900ms linear infinite;
+  }
+
+  :host([headless]) .track,
+  :host([headless]) .radial-wrap,
+  :host([headless]) .meta {
+    display: none !important;
+  }
+
+  @keyframes ui-progress-stripes {
+    from { background-position: 16px 0, 0 0; }
+    to { background-position: 0 0, 0 0; }
+  }
+
+  @keyframes ui-progress-indeterminate {
+    0% { transform: translateX(-120%); }
+    50% { transform: translateX(60%); }
+    100% { transform: translateX(240%); }
+  }
+
+  @keyframes ui-progress-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .value,
+    .buffer {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .track {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .value,
+    .buffer {
+      forced-color-adjust: none;
+      background: Highlight;
+    }
+
+    .meta {
+      color: CanvasText;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .track,
+    .radial-wrap {
+      box-shadow: none;
+    }
+
+    .track {
+      border-width: 2px;
+    }
+  }
+`;
+function u(e, r, t) {
+  return Number.isNaN(e) || e < r ? r : e > t ? t : e;
+}
+function g(e, r) {
+  if (e == null)
+    return r;
+  const t = String(e).toLowerCase();
+  return t !== "false" && t !== "0";
+}
+function d(e, r) {
+  if (e == null || e === "")
+    return r;
+  const t = Number(e);
+  return Number.isFinite(t) ? t : r;
+}
+function b(e) {
+  return e === "xs" || e === "sm" || e === "lg" ? e : "md";
+}
+function m(e) {
+  return e === "solid" || e === "soft" || e === "line" || e === "glass" || e === "contrast" ? e : "default";
+}
+function v(e) {
+  return e === "success" || e === "warning" || e === "danger" || e === "info" || e === "neutral" ? e : "brand";
+}
+function _(e) {
+  return e === "square" || e === "round" ? e : "pill";
+}
+function x(e) {
+  return e === "circle" || e === "radial" ? "circle" : "line";
+}
+class E extends p {
+  constructor() {
+    super(), this._value = 0, this._buffer = 0, this._max = 100, this._min = 0, this._percent = 0, this._bufferPercent = 0, this._indeterminate = !1, this._domReady = !1, this._metaEl = null, this._trackEl = null, this._bufferEl = null, this._valueEl = null, this._radialWrapEl = null, this._radialBufferEl = null, this._radialValueEl = null, this._radialCenterEl = null, this._lastEmitted = "", this._completeFired = !1;
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "buffer",
+      "max",
+      "min",
+      "indeterminate",
+      "size",
+      "variant",
+      "tone",
+      "shape",
+      "mode",
+      "striped",
+      "animated",
+      "show-label",
+      "label",
+      "format",
+      "precision",
+      "headless"
+    ];
+  }
+  connectedCallback() {
+    this._syncFromAttributes(), super.connectedCallback(), this._emitState();
+  }
+  attributeChangedCallback(r, t, i) {
+    t !== i && (this._syncFromAttributes(), this.isConnected && this.render(), (r === "value" || r === "buffer" || r === "max" || r === "min" || r === "indeterminate") && this._emitState());
+  }
+  setValue(r) {
+    this.setAttribute("value", String(r));
+  }
+  setBuffer(r) {
+    this.setAttribute("buffer", String(r));
+  }
+  increment(r = 1) {
+    this.setValue(this._value + r);
+  }
+  reset() {
+    this.setValue(this._min);
+  }
+  _syncFromAttributes() {
+    const r = d(this.getAttribute("min"), 0), t = d(this.getAttribute("max"), 100), i = t > r ? t : r + 1, s = d(this.getAttribute("value"), r), o = d(this.getAttribute("buffer"), s), c = this.hasAttribute("indeterminate"), n = u(s, r, i), a = u(o, r, i), l = Math.max(1e-6, i - r);
+    this._min = r, this._max = i, this._value = n, this._buffer = a, this._indeterminate = c, this._percent = u((n - r) / l * 100, 0, 100), this._bufferPercent = u((a - r) / l * 100, 0, 100);
+  }
+  _formatLabel(r) {
+    const t = (this.getAttribute("format") || "percent").toLowerCase(), i = u(Math.round(d(this.getAttribute("precision"), 0)), 0, 3);
+    if (t === "value")
+      return `${this._value.toFixed(i)} / ${this._max.toFixed(i)}`;
+    if (t === "fraction") {
+      const s = Math.max(1, this._max - this._min);
+      return `${Math.max(0, this._value - this._min).toFixed(i)}/${s.toFixed(i)}`;
+    }
+    return `${r.toFixed(i)}%`;
+  }
+  _emitState() {
+    if (this._indeterminate)
+      return;
+    const r = `${this._value}|${this._buffer}|${this._max}|${this._min}`;
+    r !== this._lastEmitted && (this._lastEmitted = r, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          value: this._value,
+          buffer: this._buffer,
+          max: this._max,
+          min: this._min,
+          percent: this._percent,
+          bufferPercent: this._bufferPercent
+        },
+        bubbles: !0
+      })
+    ), this._value >= this._max ? this._completeFired || (this.dispatchEvent(
+      new CustomEvent("complete", {
+        detail: { value: this._value, max: this._max },
+        bubbles: !0
+      })
+    ), this._completeFired = !0) : this._completeFired = !1);
+  }
+  _ensureDom() {
+    this._domReady || (this.setContent(`
+      <style>${f}</style>
+      <div class="root" part="root">
+        <div class="meta" part="label"></div>
+        <div class="track" part="track" role="progressbar">
+          <div class="buffer" part="buffer"></div>
+          <div class="value" part="value"></div>
+          <slot></slot>
+        </div>
+        <div class="radial-wrap" part="radial" role="progressbar">
+          <div class="radial-buffer" part="radial-buffer"></div>
+          <div class="radial-value" part="radial-value"></div>
+          <div class="radial-center" part="radial-label"></div>
+        </div>
+      </div>
+    `), this._metaEl = this.root.querySelector(".meta"), this._trackEl = this.root.querySelector(".track"), this._bufferEl = this.root.querySelector(".buffer"), this._valueEl = this.root.querySelector(".value"), this._radialWrapEl = this.root.querySelector(".radial-wrap"), this._radialBufferEl = this.root.querySelector(".radial-buffer"), this._radialValueEl = this.root.querySelector(".radial-value"), this._radialCenterEl = this.root.querySelector(".radial-center"), this._domReady = !0);
+  }
+  render() {
+    this._ensureDom();
+    const r = g(this.getAttribute("show-label"), !1), t = this.getAttribute("label"), i = t != null && t !== "" ? t : this._indeterminate ? "Loading..." : this._formatLabel(this._percent), s = b(this.getAttribute("size")), o = m(this.getAttribute("variant")), c = v(this.getAttribute("tone")), n = _(this.getAttribute("shape")), a = x(this.getAttribute("mode")), l = r && a === "circle", h = r && a !== "circle";
+    this._metaEl && (this._metaEl.textContent = h ? i : "", this._metaEl.setAttribute("aria-hidden", h ? "false" : "true")), this._trackEl && (this._trackEl.dataset.size = s, this._trackEl.dataset.variant = o, this._trackEl.dataset.tone = c, this._trackEl.dataset.shape = n, a === "line" ? (this._trackEl.setAttribute("aria-valuemin", String(this._min)), this._trackEl.setAttribute("aria-valuemax", String(this._max)), this._trackEl.setAttribute("aria-busy", this._indeterminate ? "true" : "false"), this._trackEl.setAttribute("role", "progressbar"), this._indeterminate ? (this._trackEl.removeAttribute("aria-valuenow"), this._trackEl.setAttribute("aria-valuetext", "Loading")) : (this._trackEl.removeAttribute("aria-valuetext"), this._trackEl.setAttribute("aria-valuenow", String(this._value)))) : (this._trackEl.removeAttribute("role"), this._trackEl.removeAttribute("aria-valuemin"), this._trackEl.removeAttribute("aria-valuemax"), this._trackEl.removeAttribute("aria-valuenow"), this._trackEl.removeAttribute("aria-valuetext"), this._trackEl.removeAttribute("aria-busy"))), this._bufferEl && (this._bufferEl.style.width = `${this._indeterminate ? 0 : this._bufferPercent}%`), this._valueEl && (this._valueEl.style.width = `${this._indeterminate ? 38 : this._percent}%`), this._radialWrapEl && (this._radialWrapEl.dataset.size = s, this._radialWrapEl.dataset.variant = o, this._radialWrapEl.dataset.tone = c, this._radialWrapEl.dataset.shape = n, a === "circle" ? (this._radialWrapEl.setAttribute("aria-valuemin", String(this._min)), this._radialWrapEl.setAttribute("aria-valuemax", String(this._max)), this._radialWrapEl.setAttribute("aria-busy", this._indeterminate ? "true" : "false"), this._radialWrapEl.setAttribute("role", "progressbar"), this._indeterminate ? (this._radialWrapEl.removeAttribute("aria-valuenow"), this._radialWrapEl.setAttribute("aria-valuetext", "Loading")) : (this._radialWrapEl.removeAttribute("aria-valuetext"), this._radialWrapEl.setAttribute("aria-valuenow", String(this._value)))) : (this._radialWrapEl.removeAttribute("role"), this._radialWrapEl.removeAttribute("aria-valuemin"), this._radialWrapEl.removeAttribute("aria-valuemax"), this._radialWrapEl.removeAttribute("aria-valuenow"), this._radialWrapEl.removeAttribute("aria-valuetext"), this._radialWrapEl.removeAttribute("aria-busy"))), this._radialBufferEl && this._radialBufferEl.style.setProperty("--ui-radial-buffer", String(this._indeterminate ? 0 : this._bufferPercent)), this._radialValueEl && this._radialValueEl.style.setProperty("--ui-radial-value", String(this._indeterminate ? 24 : this._percent)), this._radialCenterEl && (this._radialCenterEl.textContent = l ? i : "", this._radialCenterEl.setAttribute("aria-hidden", l ? "false" : "true"));
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-progress") && customElements.define("ui-progress", E);
+export {
+  E as UIProgress
+};

package/dist/quick-actions.cjs.js

@@ -0,0 +1,202 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./ElementBase-1b301e7f.js"),p=`
+  :host {
+    --ui-quick-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-quick-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-quick-text: var(--ui-color-text, #0f172a);
+    --ui-quick-muted: var(--ui-color-muted, #64748b);
+    --ui-quick-accent: var(--ui-color-primary, #2563eb);
+    --ui-quick-focus: var(--ui-color-focus-ring, #2563eb);
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--ui-quick-border);
+    border-radius: 999px;
+    background: var(--ui-quick-bg);
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+    padding: 8px;
+    color: var(--ui-quick-text);
+  }
+
+  :host([orientation="vertical"]) .root {
+    flex-direction: column;
+    border-radius: 16px;
+    align-items: stretch;
+  }
+
+  :host([mode="fab"]) .root {
+    padding: 6px;
+    border-radius: 14px;
+    display: inline-grid;
+    gap: 8px;
+  }
+
+  .toggle {
+    inline-size: 36px;
+    block-size: 36px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-quick-border) 82%, transparent);
+    background: color-mix(in srgb, var(--ui-quick-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-quick-accent) 88%, #0f172a 12%);
+    font-size: 17px;
+    line-height: 1;
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    transition: border-color 120ms ease, background-color 120ms ease;
+  }
+
+  .toggle:hover {
+    border-color: color-mix(in srgb, var(--ui-quick-accent) 42%, var(--ui-quick-border));
+  }
+
+  .toggle:focus-visible {
+    outline: 2px solid var(--ui-quick-focus);
+    outline-offset: 1px;
+  }
+
+  .actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  :host([orientation="vertical"]) .actions,
+  :host([mode="fab"]) .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+
+  ::slotted([slot="action"]) {
+    border: 1px solid color-mix(in srgb, var(--ui-quick-border) 84%, transparent);
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--ui-quick-bg) 98%, transparent);
+    color: inherit;
+    font: 600 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    padding: 8px 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  ::slotted([slot="action"]:focus-visible) {
+    outline: 2px solid var(--ui-quick-focus);
+    outline-offset: 1px;
+  }
+
+  :host([variant="soft"]) {
+    --ui-quick-bg: color-mix(in srgb, var(--ui-quick-accent) 9%, var(--ui-color-surface, #ffffff));
+    --ui-quick-border: color-mix(in srgb, var(--ui-quick-accent) 26%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-quick-bg: #0f172a;
+    --ui-quick-border: #334155;
+    --ui-quick-text: #e2e8f0;
+    --ui-quick-muted: #93a4bd;
+    --ui-quick-accent: #93c5fd;
+    --ui-quick-focus: #93c5fd;
+  }
+
+  :host([variant="minimal"]) .root {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  :host([floating]) {
+    position: fixed;
+    z-index: 1250;
+  }
+
+  :host([floating][placement="bottom-right"]) {
+    right: 16px;
+    bottom: 16px;
+  }
+
+  :host([floating][placement="bottom-left"]) {
+    left: 16px;
+    bottom: 16px;
+  }
+
+  :host([floating][placement="top-right"]) {
+    right: 16px;
+    top: 16px;
+  }
+
+  :host([floating][placement="top-left"]) {
+    left: 16px;
+    top: 16px;
+  }
+
+  :host([headless]) .root {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .root,
+    .toggle,
+    ::slotted([slot="action"]) {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .root,
+    .toggle,
+    ::slotted([slot="action"]) {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-quick-bg: Canvas;
+      --ui-quick-border: CanvasText;
+      --ui-quick-text: CanvasText;
+      --ui-quick-muted: CanvasText;
+      --ui-quick-accent: Highlight;
+      --ui-quick-focus: Highlight;
+    }
+
+    .root,
+    .toggle,
+    ::slotted([slot="action"]) {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .toggle {
+      border-color: Highlight;
+    }
+  }
+`;let g=0;function l(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class d extends h.ElementBase{constructor(){super(),this._instanceId=++g,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,t){if(i!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const i=typeof e=="boolean"?e:!this.open;this.open=i;const t={open:i};this.dispatchEvent(new CustomEvent(i?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(i=>i instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,s)=>{var r;if(t.id||(t.id=`ui-quick-actions-${this._instanceId}-action-${s+1}`),t.hasAttribute("role")||t.setAttribute("role","button"),!t.hasAttribute("aria-label")){const o=(r=t.textContent)==null?void 0:r.trim();o&&t.setAttribute("aria-label",o)}if(e){const o=t.getAttribute("data-ui-quick-tabindex");o!=null?(o==="__none__"?t.removeAttribute("tabindex"):t.setAttribute("tabindex",o),t.removeAttribute("data-ui-quick-tabindex")):t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","false");return}t.hasAttribute("data-ui-quick-tabindex")||t.setAttribute("data-ui-quick-tabindex",t.getAttribute("tabindex")??"__none__"),t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true")})}_onClick(e){var n;const i=e.target;if(!i)return;if(i.closest(".toggle")){this.toggle();return}const s=e.composedPath(),r=this._actions(),o=r.find(b=>s.includes(b));if(!o)return;const a=r.indexOf(o),c={index:a,id:o.id||o.getAttribute("data-id")||String(a+1),label:o.getAttribute("aria-label")||((n=o.textContent)==null?void 0:n.trim())||`Action ${a+1}`};this.dispatchEvent(new CustomEvent("select",{detail:c,bubbles:!0,composed:!0})),this.getAttribute("mode")==="fab"&&this.hide()}_moveFocus(e,i){const t=this._actions();if(!t.length)return;const s=t.indexOf(e);if(s<0)return;const r=(s+i+t.length)%t.length;t[r].focus()}_onKeyDown(e){if(e.key==="Escape"&&this.open&&this.getAttribute("mode")==="fab"){e.preventDefault(),this.hide();return}const i=e.target;if(!i)return;const s=this._actions().find(n=>n===i||n.contains(i));if(!s)return;const r=this.getAttribute("orientation")==="vertical"||this.getAttribute("mode")==="fab",o=!r&&getComputedStyle(this).direction==="rtl",a=r?"ArrowDown":o?"ArrowLeft":"ArrowRight",c=r?"ArrowUp":o?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(s,1);return}if(e.key===c){e.preventDefault(),this._moveFocus(s,-1);return}if(e.key==="Home"||e.key==="End"){e.preventDefault();const n=this._actions();if(!n.length)return;(e.key==="Home"?n[0]:n[n.length-1]).focus()}}_syncOpenUi(){if(!this.isConnected)return;if(!this.root.querySelector(".root")){this.requestRender();return}const e=this.getAttribute("mode")==="fab"?"fab":"bar",i=this.hasAttribute("collapsible")||e==="fab",t=this.open||!i&&e==="bar",s=this.getAttribute("label")||"Quick actions",r=this.root.querySelector(".toggle");r&&(r.textContent=t?"−":"+",r.setAttribute("aria-label",s),r.setAttribute("aria-expanded",t?"true":"false"));const o=this.root.querySelector(".actions");o&&(t?o.removeAttribute("hidden"):o.setAttribute("hidden","")),this._syncActionAccessibility(t)}render(){const e=this.getAttribute("mode")==="fab"?"fab":"bar",i=this.hasAttribute("collapsible")||e==="fab",t=this.open||!i&&e==="bar",s=this.getAttribute("label")||"Quick actions",r=this._actionsId(),o=this.getAttribute("orientation")==="vertical"||e==="fab"?"vertical":"horizontal";this.setContent(`
+      <style>${p}</style>
+      <section class="root" part="root" role="toolbar" aria-label="${l(s)}" aria-orientation="${o}">
+        ${i?`<button type="button" class="toggle" part="toggle" aria-label="${l(s)}" aria-controls="${r}" aria-haspopup="true" aria-expanded="${t?"true":"false"}">${t?"−":"+"}</button>`:""}
+        <div id="${r}" class="actions" part="actions" role="group" aria-label="${l(s)} list" ${t?"":"hidden"}>
+          <slot name="action"></slot>
+        </div>
+      </section>
+    `),this._syncActionAccessibility(t)}}typeof customElements<"u"&&!customElements.get("ui-quick-actions")&&customElements.define("ui-quick-actions",d);exports.UIQuickActions=d;