@editora/ui-core 0.1.9 → 0.1.12

package/dist/presence.esm.js

@@ -0,0 +1,301 @@
+import { E as c } from "./ElementBase-909688f3.mjs";
+const d = `
+  :host {
+    --ui-presence-duration-enter: 180ms;
+    --ui-presence-duration-exit: 150ms;
+    --ui-presence-ease-enter: cubic-bezier(0.2, 0.9, 0.24, 1);
+    --ui-presence-ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
+    --ui-presence-scale-enter: 1;
+    --ui-presence-scale-exit: 0.96;
+    --ui-presence-slide-distance: 14px;
+    --ui-presence-filter-enter: none;
+    --ui-presence-filter-exit: none;
+    --ui-presence-perspective: 860px;
+    --ui-presence-color: var(--ui-color-text, inherit);
+    display: contents;
+    color: var(--ui-presence-color);
+    color-scheme: light dark;
+  }
+
+  .presence {
+    display: block;
+    transform-origin: center;
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(var(--ui-presence-scale-exit));
+    filter: var(--ui-presence-filter-exit);
+    pointer-events: none;
+    transition:
+      opacity var(--ui-presence-duration-enter) var(--ui-presence-ease-enter),
+      transform var(--ui-presence-duration-enter) var(--ui-presence-ease-enter),
+      filter var(--ui-presence-duration-enter) var(--ui-presence-ease-enter);
+    will-change: opacity, transform, filter;
+    perspective: var(--ui-presence-perspective);
+  }
+
+  .presence[data-state="entering"],
+  .presence[data-state="present"] {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(var(--ui-presence-scale-enter));
+    filter: var(--ui-presence-filter-enter);
+    pointer-events: auto;
+  }
+
+  .presence[data-state="exiting"] {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(var(--ui-presence-scale-exit));
+    filter: var(--ui-presence-filter-exit);
+    pointer-events: none;
+    transition-duration: var(--ui-presence-duration-exit);
+    transition-timing-function: var(--ui-presence-ease-exit);
+  }
+
+  :host([mode="fade"]) {
+    --ui-presence-scale-enter: 1;
+    --ui-presence-scale-exit: 1;
+  }
+
+  :host([mode="scale"]) {
+    --ui-presence-scale-enter: 1;
+    --ui-presence-scale-exit: 0.96;
+  }
+
+  :host([mode="slide-up"]) .presence[data-state="hidden"],
+  :host([mode="slide-up"]) .presence[data-state="exiting"] {
+    transform: translate3d(0, var(--ui-presence-slide-distance), 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="slide-down"]) .presence[data-state="hidden"],
+  :host([mode="slide-down"]) .presence[data-state="exiting"] {
+    transform: translate3d(0, calc(var(--ui-presence-slide-distance) * -1), 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="slide-left"]) .presence[data-state="hidden"],
+  :host([mode="slide-left"]) .presence[data-state="exiting"] {
+    transform: translate3d(var(--ui-presence-slide-distance), 0, 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="slide-right"]) .presence[data-state="hidden"],
+  :host([mode="slide-right"]) .presence[data-state="exiting"] {
+    transform: translate3d(calc(var(--ui-presence-slide-distance) * -1), 0, 0) scale(var(--ui-presence-scale-exit));
+  }
+
+  :host([mode="blur"]) {
+    --ui-presence-filter-enter: none;
+    --ui-presence-filter-exit: blur(10px);
+    --ui-presence-scale-exit: 0.985;
+  }
+
+  :host([mode="flip"]) .presence {
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  }
+
+  :host([mode="flip"]) .presence[data-state="hidden"],
+  :host([mode="flip"]) .presence[data-state="exiting"] {
+    transform: rotateX(-12deg) scale(0.985);
+  }
+
+  :host([size="sm"]) {
+    --ui-presence-slide-distance: 8px;
+    --ui-presence-duration-enter: 140ms;
+    --ui-presence-duration-exit: 120ms;
+  }
+
+  :host([size="lg"]) {
+    --ui-presence-slide-distance: 22px;
+    --ui-presence-duration-enter: 240ms;
+    --ui-presence-duration-exit: 200ms;
+  }
+
+  :host([variant="soft"]) {
+    --ui-presence-scale-exit: 0.98;
+  }
+
+  :host([variant="glass"]) {
+    --ui-presence-filter-enter: none;
+    --ui-presence-filter-exit: blur(8px);
+    --ui-presence-scale-exit: 0.99;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-presence-duration-enter: 150ms;
+    --ui-presence-duration-exit: 120ms;
+    --ui-presence-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+    --ui-presence-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  :host([headless]) .presence {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .presence {
+      transition: none !important;
+      transform: none !important;
+      filter: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .presence {
+      filter: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-presence-color: CanvasText;
+    }
+
+    .presence {
+      forced-color-adjust: none;
+      color: CanvasText;
+    }
+  }
+`;
+function a(e, t) {
+  if (e == null)
+    return t;
+  const s = String(e).toLowerCase();
+  return s !== "false" && s !== "0";
+}
+function r(e, t) {
+  if (e == null || e === "")
+    return t;
+  const s = Number(e);
+  return Number.isFinite(s) ? s : t;
+}
+function l(e) {
+  return e === "scale" || e === "slide-up" || e === "slide-down" || e === "slide-left" || e === "slide-right" || e === "blur" || e === "flip" ? e : "fade";
+}
+function u(e) {
+  return e === "sm" || e === "lg" ? e : "md";
+}
+function p(e) {
+  return e === "soft" || e === "glass" || e === "contrast" ? e : "default";
+}
+class h extends c {
+  constructor() {
+    super(), this._state = "hidden", this._present = !1, this._headless = !1, this._hasEntered = !1, this._delayTimer = null, this._presenceEl = null, this._onTransitionEnd = this._onTransitionEnd.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "present",
+      "headless",
+      "mode",
+      "size",
+      "variant",
+      "keep-mounted",
+      "lazy",
+      "enter-duration",
+      "exit-duration",
+      "delay"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._syncFromAttributes(), this._syncStateWithPresence();
+  }
+  disconnectedCallback() {
+    this._delayTimer != null && (window.clearTimeout(this._delayTimer), this._delayTimer = null), this._presenceEl && (this._presenceEl.removeEventListener("transitionend", this._onTransitionEnd), this._presenceEl = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, s, i) {
+    s !== i && (this._syncFromAttributes(), this._syncStateWithPresence(), this._syncNodePresentation());
+  }
+  show() {
+    this.setAttribute("present", "");
+  }
+  hide() {
+    this.removeAttribute("present");
+  }
+  toggle() {
+    this._present ? this.hide() : this.show();
+  }
+  _syncFromAttributes() {
+    this._present = this.hasAttribute("present"), this._headless = this.hasAttribute("headless"), l(this.getAttribute("mode")), u(this.getAttribute("size")), p(this.getAttribute("variant"));
+  }
+  _syncStateWithPresence() {
+    if (this._headless) {
+      this._setState("hidden");
+      return;
+    }
+    this._present ? this._enter() : this._exit();
+  }
+  _clearDelay() {
+    this._delayTimer != null && (window.clearTimeout(this._delayTimer), this._delayTimer = null);
+  }
+  _enter() {
+    if (this._clearDelay(), a(this.getAttribute("lazy"), !1) && this._hasEntered) {
+      this._setState("present"), this._dispatch("after-enter");
+      return;
+    }
+    const s = Math.max(0, r(this.getAttribute("delay"), 0));
+    this._dispatch("before-enter");
+    const i = () => {
+      this._setState("entering"), this._dispatch("enter"), requestAnimationFrame(() => {
+        this._setState("present"), this._hasEntered = !0;
+      });
+    };
+    if (s > 0) {
+      this._setState("hidden"), this._delayTimer = window.setTimeout(() => {
+        this._delayTimer = null, i();
+      }, s);
+      return;
+    }
+    i();
+  }
+  _exit() {
+    this._clearDelay(), this._state !== "hidden" && (this._dispatch("before-exit"), this._setState("exiting"), this._dispatch("exit"));
+  }
+  _setState(t) {
+    if (this._state === t)
+      return;
+    this._state = t;
+    const s = this._presenceEl || this.root.querySelector(".presence");
+    this._presenceEl = s, s && s.setAttribute("data-state", t), this._syncNodePresentation(), this.setAttribute("data-state", t);
+  }
+  _syncNodePresentation() {
+    const t = this._presenceEl || this.root.querySelector(".presence");
+    if (!t)
+      return;
+    this._presenceEl = t;
+    const s = a(this.getAttribute("keep-mounted"), !1), i = Math.max(0, r(this.getAttribute("enter-duration"), 180)), o = Math.max(0, r(this.getAttribute("exit-duration"), 150)), n = this._state !== "hidden" || s;
+    t.style.setProperty("--ui-presence-duration-enter", `${i}ms`), t.style.setProperty("--ui-presence-duration-exit", `${o}ms`), t.style.display = n ? "block" : "none";
+  }
+  _onTransitionEnd(t) {
+    if (t.target !== t.currentTarget)
+      return;
+    if (this._state === "entering" || this._state === "present") {
+      this._setState("present"), this._dispatch("after-enter");
+      return;
+    }
+    if (this._state !== "exiting")
+      return;
+    a(this.getAttribute("keep-mounted"), !1) || this._setState("hidden"), this._dispatch("after-exit");
+  }
+  _dispatch(t) {
+    this.dispatchEvent(new CustomEvent(t, { detail: { state: this._state }, bubbles: !0 }));
+  }
+  render() {
+    const t = a(this.getAttribute("keep-mounted"), !1), s = Math.max(0, r(this.getAttribute("enter-duration"), 180)), i = Math.max(0, r(this.getAttribute("exit-duration"), 150)), o = this._state !== "hidden" || t;
+    this.setContent(`
+      <style>${d}</style>
+      <div
+        class="presence"
+        part="presence"
+        data-state="${this._state}"
+        style="display:${o ? "block" : "none"};--ui-presence-duration-enter:${s}ms;--ui-presence-duration-exit:${i}ms;"
+      >
+        <slot></slot>
+      </div>
+    `);
+    const n = this.root.querySelector(".presence");
+    n && (this._presenceEl = n, n.removeEventListener("transitionend", this._onTransitionEnd), n.addEventListener("transitionend", this._onTransitionEnd), this._syncNodePresentation());
+  }
+  shouldRenderOnAttributeChange(t, s, i) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-presence") && customElements.define("ui-presence", h);
+export {
+  h as UIPresence
+};

package/dist/progress.cjs.js

@@ -0,0 +1,329 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-1b301e7f.js"),g=`
+  :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 b(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 m(e){return e==="xs"||e==="sm"||e==="lg"?e:"md"}function v(e){return e==="solid"||e==="soft"||e==="line"||e==="glass"||e==="contrast"?e:"default"}function _(e){return e==="success"||e==="warning"||e==="danger"||e==="info"||e==="neutral"?e:"brand"}function x(e){return e==="square"||e==="round"?e:"pill"}function E(e){return e==="circle"||e==="radial"?"circle":"line"}class p extends f.ElementBase{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>${g}</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=b(this.getAttribute("show-label"),!1),t=this.getAttribute("label"),i=t!=null&&t!==""?t:this._indeterminate?"Loading...":this._formatLabel(this._percent),s=m(this.getAttribute("size")),o=v(this.getAttribute("variant")),c=_(this.getAttribute("tone")),n=x(this.getAttribute("shape")),a=E(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",p);exports.UIProgress=p;