ranui 0.3.1-alpha.1 → 0.4.1-alpha.2

package/dist/close-circle-DZZJhaf-.js

@@ -0,0 +1,10 @@
+import { n as t } from "./rolldown-runtime-DkpYurw3.js";
+var e = /* @__PURE__ */ t({ default: () => s }), s = {
+  success: !0,
+  _identification: !0,
+  data: '<svg t="1667483596224" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8848" width="200" height="200"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8849"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8850"></path></svg>'
+};
+export {
+  e as n,
+  s as t
+};

package/dist/close-circle-fill-Ds9W-XNo.cjs

@@ -0,0 +1 @@
+const l=require("./rolldown-runtime-CAnuVJ4g.cjs");var t=l.__exportAll({default:()=>e}),e={success:!0,_identification:!0,data:'<svg t="1667965220951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8711" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" p-id="8712"></path></svg>'};Object.defineProperty(exports,"close_circle_fill_default",{enumerable:!0,get:function(){return e}});Object.defineProperty(exports,"close_circle_fill_exports",{enumerable:!0,get:function(){return t}});

package/dist/close-circle-fill-OiY9CVOv.js

@@ -0,0 +1,10 @@
+import { n as l } from "./rolldown-runtime-DkpYurw3.js";
+var e = /* @__PURE__ */ l({ default: () => t }), t = {
+  success: !0,
+  _identification: !0,
+  data: '<svg t="1667965220951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8711" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m165.4 618.2l-66-0.3L512 563.4l-99.3 118.4-66.1 0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" p-id="8712"></path></svg>'
+};
+export {
+  e as n,
+  t
+};

package/dist/colorpicker-C8vbgSta.js

@@ -0,0 +1,250 @@
+import { d as f, f as g, g as v, h as x, m as b, o as c, p as m, u as k } from "./utils-nntJky78.js";
+import { P as u, _ as h, h as P, i as s, z as y } from "./factory-Ce9hR27Y.js";
+import { t as w } from "./events-C59wGdni.js";
+import { a as S, n as A } from "./ssr-vZNJHtYm.js";
+import { a as $, l as p, n as D, o as _, r as C, t as I } from "./utils-DqjNwwjC.js";
+import "./input-_iNjylVC.js";
+import "./select-Bqo_7nRL.js";
+import "./popover-DR5ua2_I.js";
+var E = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-colorpicker{box-sizing:border-box;min-width:32px;height:32px;border-radius:var(--ran-colorpicker-border-radius, var(--ran-radius-md, 8px));border:var(--ran-colorpicker-border, 1px solid var(--ran-color-border, #eaeaea));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--ran-colorpicker-transition, none);background:var(--ran-colorpicker-background, var(--ran-color-bg-elevated, #ffffff));padding:3px}.ran-colorpicker:hover{border-color:var(--ran-colorpicker-border-hover, var(--ran-color-border-hover, var(--ran-gray-500)))}.ran-colorpicker-block{position:relative;border-radius:var(--ran-colorpicker-block-border-radius, var(--ran-radius-sm, 4px));width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));background-image:conic-gradient(var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 25%,transparent 0 50%,var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 75%,transparent 0);background-size:50% 50%}.ran-colorpicker-inner{width:100%;height:100%;border-radius:inherit}.ran-colorpicker-block[disabled]{cursor:var(--ran-colorpicker-disabled-cursor, not-allowed);opacity:var(--ran-colorpicker-disabled-opacity, .5)}", V = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-color-picker-inner{box-sizing:border-box}.ran-color-picker-inner-content{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:224px;padding:12px;font-family:var(--ran-font-family, inherit)}.ran-color-picker-inner-content *,.ran-color-picker-inner-content *:before,.ran-color-picker-inner-content *:after{box-sizing:border-box}.ran-color-picker-palette{position:relative;width:100%;height:160px;border-radius:var(--ran-radius-sm, 6px);overflow:hidden;cursor:crosshair;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));touch-action:none}.ran-color-picker-saturation{position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.ran-color-picker-palette-dot{position:absolute;top:0;left:0;z-index:2;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0003,0 1px 3px #00000059;pointer-events:none}.ran-color-picker-controls{display:flex;align-items:center;gap:12px}.ran-color-picker-preview{position:relative;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));background-image:conic-gradient(var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 25%,transparent 0 50%,var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 75%,transparent 0);background-size:12px 12px}.ran-color-picker-preview-inner{position:absolute;inset:0;border-radius:inherit}.ran-color-picker-sliders{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.ran-color-picker-slider{position:relative;height:10px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));touch-action:none}.ran-color-picker-slider-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ran-color-picker-slider-alpha{background-image:conic-gradient(var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 25%,transparent 0 50%,var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 75%,transparent 0);background-size:8px 8px}.ran-color-picker-slider-alpha-track{position:absolute;inset:0;border-radius:inherit}.ran-color-picker-slider-thumb{position:absolute;top:50%;left:0;z-index:1;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0003,0 1px 3px #00000059;pointer-events:none}.ran-color-picker-input-container{display:flex;align-items:center;gap:8px}.ran-color-picker-format{flex:none;width:68px}.ran-color-picker-value{flex:1;min-width:0}", d = 360, H = class extends A {
+  colorpicker;
+  colorpickerInner;
+  context;
+  _shadowDom;
+  _events = new w();
+  _effectDisposers = [];
+  popoverBlock;
+  popoverContent;
+  colorPickerInner;
+  colorPickerPalette;
+  colorPickerSaturation;
+  colorPickerPaletteDot;
+  colorPickerHueSlider;
+  colorPickerHueThumb;
+  colorPickerAlphaSlider;
+  colorPickerAlphaTrack;
+  colorPickerAlphaThumb;
+  colorPickerPreviewInner;
+  colorPickerValueInput;
+  colorPickerFormatSelect;
+  colorPickerPaletteSelect;
+  _activeSlider = null;
+  _format = "HEX";
+  _editingInput = !1;
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "value",
+      "sheet"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = D(this, E);
+    const e = I(this._shadowDom, "r-popover", () => {
+      const t = s().class("ran-colorpicker-inner").part("swatch").build(), r = s().class("ran-colorpicker-block").part("block").children(t).build(), i = h("r-content").class("ran-content").build();
+      return h("r-popover").class("ran-popover").attr("trigger", "click").children(r, i).build();
+    });
+    this.popoverBlock = e, this.popoverContent = e.querySelector("r-content"), this.colorpicker = e.querySelector(".ran-colorpicker-block"), this.colorpickerInner = e.querySelector(".ran-colorpicker-inner"), this.colorpicker.setAttribute("role", "button"), this.colorpicker.setAttribute("tabindex", "0"), this.colorpicker.setAttribute("aria-haspopup", "dialog"), this.colorpicker.setAttribute("aria-label", "Choose color"), this.colorPickerPaletteSelect = !1, this.createContext();
+  }
+  get value() {
+    return this.context?.value.getter() || "";
+  }
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  get sheet() {
+    return C(this, "sheet");
+  }
+  set sheet(e) {
+    $(this, "sheet", e);
+  }
+  get disabled() {
+    return p(this);
+  }
+  set disabled(e) {
+    e === !1 || e === void 0 || e === null ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
+  }
+  handlerExternalCss = () => {
+    _(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  syncDisabledState = () => {
+    const e = p(this);
+    this.context?.disabled.setter(e), e ? (this.setAttribute("aria-disabled", "true"), this.colorpicker?.setAttribute("disabled", "")) : (this.removeAttribute("aria-disabled"), this.colorpicker?.removeAttribute("disabled")), this.colorpicker?.setAttribute("aria-disabled", e ? "true" : "false"), this.colorpicker?.setAttribute("tabindex", e ? "-1" : "0");
+  };
+  blockWhenDisabled = (e) => {
+    p(this) && (e.stopImmediatePropagation(), e.preventDefault());
+  };
+  createContext = () => {
+    const e = (t) => {
+      const [r, i] = y(t);
+      return {
+        getter: r,
+        setter: i
+      };
+    };
+    this.context = {
+      value: e(""),
+      disabled: e(!1),
+      hue: e(0),
+      saturation: e(0),
+      lightness: e(100),
+      transparency: e(100)
+    };
+  };
+  currentRgba = () => {
+    const { hue: e, saturation: t, lightness: r, transparency: i } = this.context, [o, a, n] = k(e.getter(), t.getter(), r.getter());
+    return {
+      r: o,
+      g: a,
+      b: n,
+      a: i.getter() / 100
+    };
+  };
+  currentValue = () => {
+    const { r: e, g: t, b: r, a: i } = this.currentRgba();
+    return i < 1 ? `rgba(${e}, ${t}, ${r}, ${Number(i.toFixed(2))})` : b(e, t, r);
+  };
+  currentDisplay = () => {
+    const { r: e, g: t, b: r, a: i } = this.currentRgba();
+    return this._format === "RGB" ? i < 1 ? `rgba(${e}, ${t}, ${r}, ${Number(i.toFixed(2))})` : `rgb(${e}, ${t}, ${r})` : b(e, t, r);
+  };
+  updateColorValue = (e) => {
+    if (e === this.context?.value.getter()) return;
+    const t = e.replace(/\s+/g, ""), r = v.exec(e), i = x.exec(t), o = m.exec(t);
+    if (r) {
+      const [a, n, l] = f(r[0]);
+      this.context.hue.setter(a), this.context.saturation.setter(n), this.context.lightness.setter(l), this.context.transparency.setter(100);
+    } else if (i) {
+      const [a, n, l] = g(Number(i[1]), Number(i[2]), Number(i[3]));
+      this.context.hue.setter(a), this.context.saturation.setter(n), this.context.lightness.setter(l), this.context.transparency.setter(Number(i[4]) * 100);
+    } else if (o) {
+      const [a, n, l] = g(Number(o[1]), Number(o[2]), Number(o[3]));
+      this.context.hue.setter(a), this.context.saturation.setter(n), this.context.lightness.setter(l), this.context.transparency.setter(100);
+    } else return;
+    this.setAttribute("value", e), this.context?.value.setter(e);
+  };
+  emitChange = () => {
+    const e = this.currentValue(), { r: t, g: r, b: i, a: o } = this.currentRgba();
+    this.context?.value.setter(e), this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        value: e,
+        hex: b(t, r, i),
+        rgb: `rgb(${t}, ${r}, ${i})`,
+        rgba: `rgba(${t}, ${r}, ${i}, ${Number(o.toFixed(2))})`,
+        alpha: Number(o.toFixed(2))
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  };
+  palettePointerDown = (e) => {
+    e.preventDefault(), this.colorPickerPaletteSelect = !0, this.updatePaletteFromEvent(e);
+  };
+  updatePaletteFromEvent = (e) => {
+    if (!this.colorPickerPalette) return;
+    const { left: t, top: r, width: i, height: o } = this.colorPickerPalette.getBoundingClientRect();
+    if (!i || !o) return;
+    const a = c(e.clientX - t, 0, i), n = c(e.clientY - r, 0, o);
+    this.context.saturation.setter(a / i * 100), this.context.lightness.setter((1 - n / o) * 100), this.emitChange();
+  };
+  sliderPointerDown = (e) => (t) => {
+    t.preventDefault(), this._activeSlider = e, this.updateSliderFromEvent(e, t);
+  };
+  updateSliderFromEvent = (e, t) => {
+    const r = e === "hue" ? this.colorPickerHueSlider : this.colorPickerAlphaSlider;
+    if (!r) return;
+    const { left: i, width: o } = r.getBoundingClientRect();
+    if (!o) return;
+    const a = c(t.clientX - i, 0, o) / o;
+    e === "hue" ? this.context.hue.setter(a * d) : this.context.transparency.setter(a * 100), this.emitChange();
+  };
+  onPointerMove = (e) => {
+    const t = e;
+    this.colorPickerPaletteSelect ? this.updatePaletteFromEvent(t) : this._activeSlider && this.updateSliderFromEvent(this._activeSlider, t);
+  };
+  initSliderA11y = (e, t, r) => {
+    e.setAttribute("role", "slider"), e.setAttribute("tabindex", "0"), e.setAttribute("aria-label", t), e.setAttribute("aria-orientation", "horizontal"), e.setAttribute("aria-valuemin", "0"), e.setAttribute("aria-valuemax", String(r));
+  };
+  sliderKeydown = (e) => (t) => {
+    const r = e === "hue" ? d : 100, i = e === "hue" ? this.context.hue : this.context.transparency, o = t.shiftKey ? 10 : 1, a = i.getter();
+    let n = a;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        n = a + o;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        n = a - o;
+        break;
+      case "Home":
+        n = 0;
+        break;
+      case "End":
+        n = r;
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), i.setter(c(n, 0, r)), this.emitChange();
+  };
+  onPointerUp = () => {
+    this.colorPickerPaletteSelect = !1, this._activeSlider = null;
+  };
+  onSwatchKeydown = (e) => {
+    p(this) || (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), this.colorpicker?.click());
+  };
+  onValueInput = (e) => {
+    const t = e.target, r = e.detail?.value ?? t?.value;
+    typeof r == "string" && (this._editingInput = !0, this.updateColorValue(r.trim()), this._editingInput = !1, this.emitChange());
+  };
+  onFormatChange = (e) => {
+    const t = e.detail?.value;
+    this._format = t === "RGB" ? "RGB" : "HEX", this.syncValueInput();
+  };
+  syncValueInput = () => {
+    this._editingInput || !this.colorPickerValueInput || (this.colorPickerValueInput.value = this.currentDisplay());
+  };
+  setupEffects = () => {
+    this._effectDisposers.push(u(() => {
+      const [e, t, r] = k(this.context.hue.getter(), 100, 100);
+      this.colorPickerSaturation?.style.setProperty("background-color", `rgb(${e}, ${t}, ${r})`);
+    }), u(() => {
+      const e = c(this.context.saturation.getter(), 0, 100), t = c(this.context.lightness.getter(), 0, 100);
+      this.colorPickerPaletteDot?.style.setProperty("left", `${e}%`), this.colorPickerPaletteDot?.style.setProperty("top", `${100 - t}%`);
+    }), u(() => {
+      const e = this.context.hue.getter(), [t, r, i] = k(e, 100, 100);
+      this.colorPickerHueThumb?.style.setProperty("left", `${e / d * 100}%`), this.colorPickerHueThumb?.style.setProperty("background", `rgb(${t}, ${r}, ${i})`), this.colorPickerHueSlider?.setAttribute("aria-valuenow", String(Math.round(e)));
+    }), u(() => {
+      const { r: e, g: t, b: r, a: i } = this.currentRgba(), o = `rgb(${e}, ${t}, ${r})`, a = `rgba(${e}, ${t}, ${r}, ${Number(i.toFixed(3))})`;
+      this.colorPickerAlphaTrack?.style.setProperty("background", `linear-gradient(to right, rgba(${e}, ${t}, ${r}, 0), ${o})`), this.colorPickerAlphaThumb?.style.setProperty("left", `${i * 100}%`), this.colorPickerAlphaThumb?.style.setProperty("background", a), this.colorPickerPreviewInner?.style.setProperty("background", a), this.colorpickerInner?.style.setProperty("background", a), this.colorPickerAlphaSlider?.setAttribute("aria-valuenow", String(Math.round(i * 100))), this.colorPickerAlphaSlider?.setAttribute("aria-valuetext", `${Math.round(i * 100)}%`), this.syncValueInput();
+    }));
+  };
+  disposeEffects = () => {
+    for (const e of this._effectDisposers) e();
+    this._effectDisposers = [];
+  };
+  openColorPicker = () => {
+    if (p(this) || this.colorPickerInner) return;
+    this.colorPickerSaturation = s().class("ran-color-picker-saturation").build(), this.colorPickerPaletteDot = s().class("ran-color-picker-palette-dot").build(), this.colorPickerPalette = s().class("ran-color-picker-palette").on("mousedown", this.palettePointerDown).children(this.colorPickerSaturation, this.colorPickerPaletteDot).build(), this.colorPickerPreviewInner = s().class("ran-color-picker-preview-inner").build();
+    const e = s().class("ran-color-picker-preview").children(this.colorPickerPreviewInner).build();
+    this.colorPickerHueThumb = s().class("ran-color-picker-slider-thumb").build(), this.colorPickerHueSlider = s().class("ran-color-picker-slider ran-color-picker-slider-hue").on("mousedown", this.sliderPointerDown("hue")).on("keydown", this.sliderKeydown("hue")).children(this.colorPickerHueThumb).build(), this.initSliderA11y(this.colorPickerHueSlider, "Hue", d), this.colorPickerAlphaTrack = s().class("ran-color-picker-slider-alpha-track").build(), this.colorPickerAlphaThumb = s().class("ran-color-picker-slider-thumb").build(), this.colorPickerAlphaSlider = s().class("ran-color-picker-slider ran-color-picker-slider-alpha").on("mousedown", this.sliderPointerDown("alpha")).on("keydown", this.sliderKeydown("alpha")).children(this.colorPickerAlphaTrack, this.colorPickerAlphaThumb).build(), this.initSliderA11y(this.colorPickerAlphaSlider, "Alpha opacity", 100);
+    const t = s().class("ran-color-picker-sliders").children(this.colorPickerHueSlider, this.colorPickerAlphaSlider).build(), r = s().class("ran-color-picker-controls").children(e, t).build();
+    this.colorPickerFormatSelect = h("r-select").class("ran-color-picker-format").attr("value", this._format).attr("defaultValue", this._format).attr("trigger", "click").children(...["HEX", "RGB"].map((a) => h("r-option").attr("value", a).text(a).build())).on("change", this.onFormatChange).build(), this.colorPickerValueInput = h("r-input").class("ran-color-picker-value").on("change", this.onValueInput).build();
+    const i = s().class("ran-color-picker-input-container").children(this.colorPickerFormatSelect, this.colorPickerValueInput).build(), o = s().class("ran-color-picker-inner-content").children(this.colorPickerPalette, r, i).build();
+    this.colorPickerInner = s().class("ran-color-picker-inner").children(P().text(V).build(), o).build(), this.popoverContent.appendChild(this.colorPickerInner), this.setupEffects(), this.syncValueInput();
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this.setAttribute("class", "ran-colorpicker"), this._events.on(this, "click", this.blockWhenDisabled, { capture: !0 }), this._events.on(this, "keydown", this.blockWhenDisabled, { capture: !0 }), this._events.on(this.popoverBlock, "click", this.openColorPicker), this._events.on(this.colorpicker, "keydown", this.onSwatchKeydown), this._events.on(document, "mousemove", this.onPointerMove), this._events.on(document, "mouseup", this.onPointerUp), this.syncDisabledState(), this.value && this.updateColorValue(this.value), this.colorPickerInner && this._effectDisposers.length === 0 && this.setupEffects();
+  }
+  disconnectedCallback() {
+    this._events.abort(), this.disposeEffects();
+  }
+  attributeChangedCallback(e, t, r) {
+    t !== r && (e === "value" && this.updateColorValue(r), e === "disabled" && this.syncDisabledState(), e === "sheet" && this.handlerExternalCss());
+  }
+};
+S("r-colorpicker", H);
+export {
+  H as t
+};

package/dist/colorpicker.js

@@ -1,4 +1,4 @@
-import { t as r } from "./colorpicker-CKA4xN-g.js";
+import { t as r } from "./colorpicker-C8vbgSta.js";
 export {
   r as ColorPicker,
   r as default

package/dist/components/icon/index.d.ts

@@ -42,6 +42,13 @@ export declare class Icon extends RanElement {
      * @return {*}
      */
     setIcon: () => void;
+    /**
+     * A builtin icon name that isn't registered yet → fetch its SVG chunk on demand,
+     * then registerIcon() (which caches it and dispatches `ranui-icon-registered`; this
+     * element's own listener turns that into a re-render if the name still matches). The
+     * dynamic import is module-cached, so concurrent/duplicate calls share one fetch.
+     */
+    lazyLoadBuiltinIcon: (name: string, loader: () => Promise<string>) => void;
     isSvgText: (value: string) => boolean;
     parseSvg: (svgContent: string) => SVGElement | undefined;
     renderSvg: (svgContent: string, iconName: string) => void;

package/dist/components/loading/index.d.ts

@@ -1,4 +1,5 @@
 import { RanElement } from '@/utils/index';
+export type { LoadingVariant } from './types';
 export declare enum ICON_NAME_AMP {
     DOUBLE_BOUNCE = "double-bounce",
     ROTATE = "rotate",
@@ -33,6 +34,10 @@ export declare enum ICON_NAME_AMP {
 export declare class Loading extends RanElement {
     contain: HTMLDivElement;
     _shadowDom: ShadowRoot;
+    /** 递增令牌：异步渲染回来时若 name 已变则丢弃，避免竞态覆盖。 */
+    private _renderToken;
+    /** 最近一次渲染的 Promise，便于测试 await。 */
+    _pending: Promise<void>;
     static get observedAttributes(): string[];
     constructor();
     get name(): ICON_NAME_AMP;
@@ -40,35 +45,7 @@ export declare class Loading extends RanElement {
     get sheet(): string;
     set sheet(value: string);
     handlerExternalCss: () => void;
-    rotateLoading: () => void;
-    stretchLoading: () => void;
-    doubleBounceLoading: () => void;
-    cubeLoading: () => void;
-    dotLoading: () => void;
-    tripleBounceLoading: () => void;
-    scaleOutLoading: () => void;
-    circleLoading: () => void;
-    circleLineLoading: () => void;
-    squareLoading: () => void;
-    pulseLoading: () => void;
-    solarLoading: () => void;
-    cubeFoldLoading: () => void;
-    circleFoldLoading: () => void;
-    cubeGridLoading: () => void;
-    circleTurnLoading: () => void;
-    circleRotateLoading: () => void;
-    circleSpinLoading: () => void;
-    dotBarLoading: () => void;
-    dotCircleLoading: () => void;
-    lineLoading: () => void;
-    dotPulseLoading: () => void;
-    lineScaleLoading: () => void;
-    textLoading: () => void;
-    cubeDimLoading: () => void;
-    dotLineLoading: () => void;
-    arcLoading: () => void;
-    dropLoading: () => void;
-    pacmanLoading: () => void;
+    private applyVariant;
     createLoading: () => void;
     connectedCallback(): void;
     attributeChangedCallback(k: string, o: string, n: string): void;

package/dist/components/loading/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 每个 loading 动画拆分为独立模块，与自身 CSS co-locate，按需（动态 import）加载。
+ * 使用方无需感知：`<r-loading name="xxx">` 用法不变，只有用到的 variant 的
+ * JS + CSS 会被打进/下载。详见 variants/ 目录与 index.ts 的 LOADERS 表。
+ */
+export interface LoadingVariant {
+    /** 该动画自身的 CSS（scoped 在 `.ran-loading` 下），按需注入 shadow root。 */
+    css: string;
+    /** 构建并返回该动画的根节点（挂到 `.ran-loading` 容器内）。 */
+    render: () => HTMLElement;
+}

package/dist/components/loading/variants/arc/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/circle/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/circle-fold/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/circle-line/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/circle-rotate/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/circle-spin/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/circle-turn/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/cube/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/cube-dim/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/cube-fold/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/cube-grid/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/dot/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/dot-bar/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/dot-circle/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/dot-line/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/dot-pulse/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/double-bounce/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/drop/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/line/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/line-scale/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/pacman/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/pulse/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/rotate/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/scale-out/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/solar/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/square/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/stretch/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/text/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;

package/dist/components/loading/variants/triple-bounce/index.d.ts

@@ -0,0 +1,6 @@
+declare const render: () => HTMLElement;
+declare const _default: {
+    css: string;
+    render: typeof render;
+};
+export default _default;