ranui 0.2.0-alpha.0 → 0.2.0-alpha.1

package/dist/button-BstLjXNe.js

@@ -0,0 +1,117 @@
+import { C as i, c as b, d, f as l, p as a, s as h } from "./utils-D4pPF77E.js";
+import { t as u } from "./events-C59wGdni.js";
+import { _ as v, i as s, p as f } from "./factory-BdsO0dEW.js";
+import { a as p, n as g } from "./ssr-DSGwPtEd.js";
+var m = '.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}:host{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, var(--ran-skin-raised-shadow, 0 2px #00000004));cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{box-sizing:var(--ran-btn-contain-box-sizing, border-box);position:var(--ran-btn-contain-position, relative);display:var(--ran-btn-contain-display, block);background-image:var(--ran-btn-contain-background-image, none);cursor:var(--ran-btn-contain-cursor, pointer);transition:var(--ran-btn-contain-transition, color var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1), border-color var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1), box-shadow var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1), opacity var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1));-webkit-user-select:var(--ran-btn-contain-user-select, none);user-select:var(--ran-btn-contain-user-select, none);touch-action:var(--ran-btn-contain-touch-action, manipulation);border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));background:var(--ran-btn-contain-background, var(--ran-color-bg-elevated, #fff))}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:var(--ran-btn-contain-outline, 0)}:host(:focus-visible){outline:var(--ran-btn-focus-outline, 2px solid var(--ran-color-primary));outline-offset:var(--ran-btn-focus-outline-offset, 2px)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-primary, #1890ff));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-primary, #1890ff));color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-primary-active, #005ff2));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-primary-active, #005ff2))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary, #1890ff));color:var(--ran-btn-content-hover-color, var(--ran-color-primary, #1890ff))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-primary-hover, #0059ec));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary-hover, #0059ec));color:var(--ran-btn-content-hover-color, #fff)}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));color:var(--ran-btn-content-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));background-image:var(--ran-btn-content-background-image, none);color:var(--ran-btn-content-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-content-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-disabled-container-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-container-pointer-events, all);opacity:var(--ran-btn-disabled-container-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-transition, 0s)}@media(min-width:1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,var(--ran-color-primary, #1890ff) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:var(--ran-btn-slot-display, block)}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-display, space-between);align-items:var(--ran-btn-content-align-items, center);padding:var(--ran-btn-content-padding, 4px 15px);border:var(--ran-btn-content-border, 1px solid transparent);border-image-source:var(--ran-btn-content-border-image-source, none);border-image-slice:var(--ran-btn-content-border-image-slice, 8);border-image-width:var(--ran-btn-content-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));border-color:var(--ran-btn-content-border-color, var(--ran-color-border, #d9d9d9));color:var(--ran-btn-content-color, var(--ran-color-text, #000000d9));line-height:var(--ran-btn-content-line-height, 22px);font-size:var(--ran-btn-content-font-size, 14px);font-weight:var(--ran-btn-content-font-weight, 400);font-family:var(--ran-btn-content-font-family, var(--ran-skin-font-family, inherit));white-space:var(--ran-btn-content-white-space, nowrap);text-align:var(--ran-btn-content-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box)}.ran-btn-content .icon{margin-right:var(--ran-btn-icon-margin-right, 2px)}', y = class extends g {
+  _btn;
+  _btnContent;
+  _iconElement;
+  _slot;
+  _shadowDom;
+  _events = new u();
+  debounceTimeId;
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "icon",
+      "effect",
+      "iconSize",
+      "type",
+      "sheet"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = b(this, m);
+    const t = h(this._shadowDom, ".ran-btn", () => s().class("ran-btn").attr("part", "button").role("button").tabIndex(0).children(s().class("ran-btn-content").attr("part", "content").children(f().class("slot"))).build());
+    this._btn = t, this._btnContent = t.querySelector(".ran-btn-content"), this._slot = t.querySelector("slot");
+  }
+  get sheet() {
+    return this.getAttribute("sheet") || "";
+  }
+  set sheet(t) {
+    this.setAttribute("sheet", t || ""), this.handlerExternalCss();
+  }
+  get disabled() {
+    return a(this);
+  }
+  set disabled(t) {
+    !t || t === "false" ? (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")) : (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"));
+  }
+  get iconSize() {
+    return this.getAttribute("iconSize") || "";
+  }
+  set iconSize(t) {
+    !t || t === "false" ? this.removeAttribute("iconSize") : (this.setAttribute("iconSize", t), this.setIcon());
+  }
+  get icon() {
+    return this.getAttribute("icon") || "";
+  }
+  set icon(t) {
+    !t || t === "false" ? this.removeAttribute("icon") : (this.setAttribute("icon", t), this.setIcon());
+  }
+  get effect() {
+    return this.getAttribute("effect") || "";
+  }
+  set effect(t) {
+    l.includes(t) || !t ? this.removeAttribute("effect") : this.setAttribute("effect", t);
+  }
+  get type() {
+    return this.getAttribute("type") || "";
+  }
+  set type(t) {
+    t ? this.setAttribute("type", t) : this.removeAttribute("type");
+  }
+  setIcon = () => {
+    if (typeof document > "u" || !this._slot) return;
+    const t = this.icon;
+    if (!t) {
+      this._iconElement && (this._iconElement.remove(), this._iconElement = void 0);
+      return;
+    }
+    if (this._iconElement) this._iconElement.setAttribute("name", t);
+    else {
+      let e = this._shadowDom.querySelector("r-icon");
+      e || (e = v("r-icon").attr("color", "currentColor").class("icon").build(), this._slot.insertAdjacentElement("beforebegin", e)), this._iconElement = e, this._iconElement.setAttribute("name", t);
+    }
+    const { width: n, height: r } = this._slot.getBoundingClientRect(), o = Math.min(n, r) || 16, c = this.iconSize || `${o > 5 ? o - 5 : o}`;
+    this._iconElement.setAttribute("size", String(c));
+  };
+  mousedown = (t) => {
+    if (i() === "pc" && !this.disabled) {
+      this.debounceMouseEvent();
+      const { left: n, top: r } = this.getBoundingClientRect();
+      this._btn.style.setProperty("--ran-x", `${t.clientX - n}px`), this._btn.style.setProperty("--ran-y", `${t.clientY - r}px`);
+    }
+  };
+  mouseup = () => {
+    i() === "pc" && (this.debounceTimeId || (this.debounceTimeId = setTimeout(() => {
+      this._btn.style.removeProperty("--ran-x"), this._btn.style.removeProperty("--ran-y"), this.debounceMouseEvent();
+    }, 600)));
+  };
+  keydown = (t) => {
+    a(this) || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
+  };
+  debounceMouseEvent = () => {
+    this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
+  };
+  handlerExternalCss = () => {
+    d(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  syncA11yState = () => {
+    const t = a(this);
+    this._btn.setAttribute("aria-disabled", t ? "true" : "false"), this._btn.tabIndex = t ? -1 : 0, t ? (this.setAttribute("aria-disabled", "true"), this._btnContent.setAttribute("disabled", "true")) : (this.removeAttribute("aria-disabled"), this._btnContent.removeAttribute("disabled"));
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this.setIcon(), this.syncA11yState(), this._events.on(this._btn, "mousedown", this.mousedown).on(this._btn, "mouseup", this.mouseup).on(this._btn, "keydown", this.keydown);
+  }
+  disconnectedCallback() {
+    this.debounceMouseEvent(), this._events.abort();
+  }
+  attributeChangedCallback(t, n, r) {
+    n !== r && (t === "disabled" && this._btnContent && this.syncA11yState(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
+  }
+};
+p("r-button", y);
+export {
+  y as t
+};

package/dist/button.js

@@ -1,4 +1,4 @@
-import { t as o } from "./button-DukaD6uL.js";
+import { t as o } from "./button-BstLjXNe.js";
 export {
   o as Button,
   o as default

package/dist/colorpicker-CGh8pRqo.js

@@ -0,0 +1,315 @@
+import { c as v, d as x, l as m, p as h, s as P, u as y, x as l } from "./utils-D4pPF77E.js";
+import { t as w } from "./events-C59wGdni.js";
+import { i as S, r as p } from "./signal-XHfNsQNW.js";
+import { _ as u, h as A, i as n } from "./factory-BdsO0dEW.js";
+import { a as $, n as _ } from "./ssr-DSGwPtEd.js";
+import "./input-Dskw1bAl.js";
+import "./select-BVdUtQX5.js";
+import "./popover-BY32HNMl.js";
+var D = (e) => {
+  const { r: t, g: i, b: r } = I(e);
+  return f(t, i, r);
+}, I = (e) => (e[0] === "#" && (e = e.substr(1)), e.length === 3 ? {
+  r: parseInt(e[0] + e[0], 16),
+  g: parseInt(e[1] + e[1], 16),
+  b: parseInt(e[2] + e[2], 16)
+} : {
+  r: parseInt(e.substr(0, 2), 16),
+  g: parseInt(e.substr(2, 2), 16),
+  b: parseInt(e.substr(4, 2), 16)
+}), f = (e, t, i) => {
+  let r;
+  const o = Math.max(e, t, i), a = o - Math.min(e, t, i);
+  a === 0 ? r = 0 : e === o ? r = (t - i) / a % 6 : t === o ? r = (i - e) / a + 2 : r = (e - t) / a + 4, r = Math.round(r * 60), r < 0 && (r += 360);
+  const s = Math.round((o === 0 ? 0 : a / o) * 100), c = Math.round(o / 255 * 100);
+  return {
+    h: r,
+    s,
+    v: c
+  };
+}, b = (e, t, i) => {
+  t = t / 100, i = i / 100;
+  let r = [];
+  const o = i * t, a = e / 60, s = o * (1 - Math.abs(a % 2 - 1)), c = i - o;
+  return a >= 0 && a < 1 ? r = [
+    o,
+    s,
+    0
+  ] : a >= 1 && a < 2 ? r = [
+    s,
+    o,
+    0
+  ] : a >= 2 && a < 3 ? r = [
+    0,
+    o,
+    s
+  ] : e >= 3 && a < 4 ? r = [
+    0,
+    s,
+    o
+  ] : e >= 4 && a < 5 ? r = [
+    s,
+    0,
+    o
+  ] : e >= 5 && a <= 6 ? r = [
+    o,
+    0,
+    s
+  ] : r = [
+    0,
+    0,
+    0
+  ], {
+    r: Math.round(255 * (r[0] + c)),
+    g: Math.round(255 * (r[1] + c)),
+    b: Math.round(255 * (r[2] + c))
+  };
+}, k = (e) => {
+  const t = e.toString(16);
+  return t.length === 1 ? "0" + t : t;
+}, g = (e, t, i) => "#" + [
+  k(e),
+  k(t),
+  k(i)
+].join(""), C = /^#([\da-f]{6}|[\da-f]{3})$/i, E = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/, R = /^rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(\d{1,3}(\.\d+)?)\)$/, 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-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, #d9d9d9));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--ran-colorpicker-transition, border-color .2s, box-shadow .2s);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)}", H = ".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, F = class extends _ {
+  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 = v(this, V);
+    const e = P(this._shadowDom, "r-popover", () => {
+      const t = n().class("ran-colorpicker-inner").part("swatch").build(), i = n().class("ran-colorpicker-block").part("block").children(t).build(), r = u("r-content").class("ran-content").build();
+      return u("r-popover").class("ran-popover").attr("trigger", "click").children(i, r).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 m(this, "sheet");
+  }
+  set sheet(e) {
+    y(this, "sheet", e);
+  }
+  get disabled() {
+    return h(this);
+  }
+  set disabled(e) {
+    e === !1 || e === void 0 || e === null ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
+  }
+  handlerExternalCss = () => {
+    x(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  syncDisabledState = () => {
+    const e = h(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) => {
+    h(this) && (e.stopImmediatePropagation(), e.preventDefault());
+  };
+  createContext = () => {
+    const e = (t) => {
+      const [i, r] = S(t);
+      return {
+        getter: i,
+        setter: r
+      };
+    };
+    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: i, transparency: r } = this.context, { r: o, g: a, b: s } = b(e.getter(), t.getter(), i.getter());
+    return {
+      r: o,
+      g: a,
+      b: s,
+      a: r.getter() / 100
+    };
+  };
+  currentValue = () => {
+    const { r: e, g: t, b: i, a: r } = this.currentRgba();
+    return r < 1 ? `rgba(${e}, ${t}, ${i}, ${Number(r.toFixed(2))})` : g(e, t, i);
+  };
+  currentDisplay = () => {
+    const { r: e, g: t, b: i, a: r } = this.currentRgba();
+    return this._format === "RGB" ? r < 1 ? `rgba(${e}, ${t}, ${i}, ${Number(r.toFixed(2))})` : `rgb(${e}, ${t}, ${i})` : g(e, t, i);
+  };
+  updateColorValue = (e) => {
+    if (e === this.context?.value.getter()) return;
+    const t = e.replace(/\s+/g, ""), i = C.exec(e), r = R.exec(t), o = E.exec(t);
+    if (i) {
+      const { h: a, s, v: c } = D(i[0]);
+      this.context.hue.setter(a), this.context.saturation.setter(s), this.context.lightness.setter(c), this.context.transparency.setter(100);
+    } else if (r) {
+      const { h: a, s, v: c } = f(Number(r[1]), Number(r[2]), Number(r[3]));
+      this.context.hue.setter(a), this.context.saturation.setter(s), this.context.lightness.setter(c), this.context.transparency.setter(Number(r[4]) * 100);
+    } else if (o) {
+      const { h: a, s, v: c } = f(Number(o[1]), Number(o[2]), Number(o[3]));
+      this.context.hue.setter(a), this.context.saturation.setter(s), this.context.lightness.setter(c), this.context.transparency.setter(100);
+    } else return;
+    this.setAttribute("value", e), this.context?.value.setter(e);
+  };
+  emitChange = () => {
+    const e = this.currentValue(), { r: t, g: i, b: r, a: o } = this.currentRgba();
+    this.context?.value.setter(e), this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        value: e,
+        hex: g(t, i, r),
+        rgb: `rgb(${t}, ${i}, ${r})`,
+        rgba: `rgba(${t}, ${i}, ${r}, ${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: i, width: r, height: o } = this.colorPickerPalette.getBoundingClientRect();
+    if (!r || !o) return;
+    const a = l(e.clientX - t, 0, r), s = l(e.clientY - i, 0, o);
+    this.context.saturation.setter(a / r * 100), this.context.lightness.setter((1 - s / o) * 100), this.emitChange();
+  };
+  sliderPointerDown = (e) => (t) => {
+    t.preventDefault(), this._activeSlider = e, this.updateSliderFromEvent(e, t);
+  };
+  updateSliderFromEvent = (e, t) => {
+    const i = e === "hue" ? this.colorPickerHueSlider : this.colorPickerAlphaSlider;
+    if (!i) return;
+    const { left: r, width: o } = i.getBoundingClientRect();
+    if (!o) return;
+    const a = l(t.clientX - r, 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, i) => {
+    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(i));
+  };
+  sliderKeydown = (e) => (t) => {
+    const i = e === "hue" ? d : 100, r = e === "hue" ? this.context.hue : this.context.transparency, o = t.shiftKey ? 10 : 1, a = r.getter();
+    let s = a;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        s = a + o;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        s = a - o;
+        break;
+      case "Home":
+        s = 0;
+        break;
+      case "End":
+        s = i;
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), r.setter(l(s, 0, i)), this.emitChange();
+  };
+  onPointerUp = () => {
+    this.colorPickerPaletteSelect = !1, this._activeSlider = null;
+  };
+  onSwatchKeydown = (e) => {
+    h(this) || (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), this.colorpicker?.click());
+  };
+  onValueInput = (e) => {
+    const t = e.target, i = e.detail?.value ?? t?.value;
+    typeof i == "string" && (this._editingInput = !0, this.updateColorValue(i.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(p(() => {
+      const { r: e, g: t, b: i } = b(this.context.hue.getter(), 100, 100);
+      this.colorPickerSaturation?.style.setProperty("background-color", `rgb(${e}, ${t}, ${i})`);
+    }), p(() => {
+      const e = l(this.context.saturation.getter(), 0, 100), t = l(this.context.lightness.getter(), 0, 100);
+      this.colorPickerPaletteDot?.style.setProperty("left", `${e}%`), this.colorPickerPaletteDot?.style.setProperty("top", `${100 - t}%`);
+    }), p(() => {
+      const e = this.context.hue.getter(), { r: t, g: i, b: r } = b(e, 100, 100);
+      this.colorPickerHueThumb?.style.setProperty("left", `${e / d * 100}%`), this.colorPickerHueThumb?.style.setProperty("background", `rgb(${t}, ${i}, ${r})`), this.colorPickerHueSlider?.setAttribute("aria-valuenow", String(Math.round(e)));
+    }), p(() => {
+      const { r: e, g: t, b: i, a: r } = this.currentRgba(), o = `rgb(${e}, ${t}, ${i})`, a = `rgba(${e}, ${t}, ${i}, ${Number(r.toFixed(3))})`;
+      this.colorPickerAlphaTrack?.style.setProperty("background", `linear-gradient(to right, rgba(${e}, ${t}, ${i}, 0), ${o})`), this.colorPickerAlphaThumb?.style.setProperty("left", `${r * 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(r * 100))), this.colorPickerAlphaSlider?.setAttribute("aria-valuetext", `${Math.round(r * 100)}%`), this.syncValueInput();
+    }));
+  };
+  disposeEffects = () => {
+    for (const e of this._effectDisposers) e();
+    this._effectDisposers = [];
+  };
+  openColorPicker = () => {
+    if (h(this) || this.colorPickerInner) return;
+    this.colorPickerSaturation = n().class("ran-color-picker-saturation").build(), this.colorPickerPaletteDot = n().class("ran-color-picker-palette-dot").build(), this.colorPickerPalette = n().class("ran-color-picker-palette").on("mousedown", this.palettePointerDown).children(this.colorPickerSaturation, this.colorPickerPaletteDot).build(), this.colorPickerPreviewInner = n().class("ran-color-picker-preview-inner").build();
+    const e = n().class("ran-color-picker-preview").children(this.colorPickerPreviewInner).build();
+    this.colorPickerHueThumb = n().class("ran-color-picker-slider-thumb").build(), this.colorPickerHueSlider = n().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 = n().class("ran-color-picker-slider-alpha-track").build(), this.colorPickerAlphaThumb = n().class("ran-color-picker-slider-thumb").build(), this.colorPickerAlphaSlider = n().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 = n().class("ran-color-picker-sliders").children(this.colorPickerHueSlider, this.colorPickerAlphaSlider).build(), i = n().class("ran-color-picker-controls").children(e, t).build();
+    this.colorPickerFormatSelect = u("r-select").class("ran-color-picker-format").attr("value", this._format).attr("defaultValue", this._format).attr("trigger", "click").children(...["HEX", "RGB"].map((a) => u("r-option").attr("value", a).text(a).build())).on("change", this.onFormatChange).build(), this.colorPickerValueInput = u("r-input").class("ran-color-picker-value").on("change", this.onValueInput).build();
+    const r = n().class("ran-color-picker-input-container").children(this.colorPickerFormatSelect, this.colorPickerValueInput).build(), o = n().class("ran-color-picker-inner-content").children(this.colorPickerPalette, i, r).build();
+    this.colorPickerInner = n().class("ran-color-picker-inner").children(A().text(H).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);
+  }
+  disconnectedCallback() {
+    this._events.abort(), this.disposeEffects();
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && (e === "value" && this.updateColorValue(i), e === "disabled" && this.syncDisabledState(), e === "sheet" && this.handlerExternalCss());
+  }
+};
+$("r-colorpicker", F);
+export {
+  F as t
+};

package/dist/colorpicker.js

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

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

@@ -53,7 +53,18 @@ export declare class ColorPicker extends RanElement {
     set value(value: string);
     get sheet(): string;
     set sheet(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean | string | undefined | null);
     handlerExternalCss: () => void;
+    /**
+     * Reflect the `disabled` attribute into the internal state, ARIA, and the
+     * swatch's visual/interaction state. When disabled the swatch is removed from
+     * the tab order and marked `aria-disabled`; opening is blocked by
+     * `blockWhenDisabled` (a capture-phase guard wired in connectedCallback).
+     */
+    syncDisabledState: () => void;
+    /** Capture-phase guard: swallow clicks/keydowns on the swatch while disabled. */
+    blockWhenDisabled: (e: Event) => void;
     createContext: () => void;
     currentRgba: () => RGBA;
     /** Canonical string used for the `value` attribute and `change` events. */

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

@@ -17,8 +17,6 @@ export declare class Dropdown extends RanElement {
     set transit(value: string);
     get arrow(): string;
     set arrow(value: string);
-    get show(): string;
-    set show(value: string);
     get sheet(): string;
     set sheet(value: string);
     handlerExternalCss: () => void;

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

@@ -19,6 +19,12 @@ export declare class ImageElement extends RanElement {
     set alt(value: string);
     handlerExternalCss: () => void;
     listenFallback(name: string, value: string | null): void;
+    /**
+     * Point the inner `<img>` at the current `src` attribute. The `error`/`load`
+     * listeners wired in `connectedCallback` stay attached, so this reuses the
+     * same fallback-on-error and append-on-load behavior for every src change.
+     */
+    updateSrc: () => void;
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

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

@@ -127,26 +127,6 @@ export declare class Input extends RanElement {
      * @param {string|null} value
      */
     set icon(value: string);
-    /**
-     * @description: 获取前面的 icon
-     * @return {String}
-     */
-    get prefix(): string;
-    /**
-     * @description: 设置前面的 icon 来表示标识
-     * @param {string|null} value
-     */
-    set prefix(value: string);
-    /**
-     * @description: 获取后面的 icon
-     * @return {String}
-     */
-    get suffix(): string;
-    /**
-     * @description: 设置后面的 icon 来表示标识
-     * @param {string|null} value
-     */
-    set suffix(value: string);
     /**
      * @description: 获取 input 的类型
      * @return {string|null}
@@ -199,6 +179,19 @@ export declare class Input extends RanElement {
      * @param {string} value
      */
     listenMessage: (name: string, value: string) => void;
+    /**
+     * @description: 监听 min/max/step 属性，仅在 type="number" 时转发到内部 <input>
+     * 以启用原生数值约束；否则从内部 <input> 移除。
+     * @param {string} name
+     * @param {string} value
+     */
+    listenNumericConstraint: (name: string, value: string) => void;
+    /**
+     * @description: 监听 required 属性，转发到内部 <input> 以启用原生约束校验
+     * @param {string} name
+     * @param {string} value
+     */
+    listenRequired: (name: string, value: string) => void;
     /**
      * @description: 监听 disabled 属性
      * @param {string} name

package/dist/components/player/core/view.d.ts

@@ -6,7 +6,6 @@ export interface SpeedOption {
 export interface PlayerViewRefs {
     player: HTMLDivElement;
     container: HTMLDivElement;
-    slot: HTMLSlotElement;
     playerBtn: HTMLDivElement;
     playerController: HTMLDivElement;
     progress: HTMLDivElement;

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

@@ -73,7 +73,6 @@ export declare class RanPlayer extends RanPlayer_base {
     ctx: Context;
     _player: HTMLDivElement;
     _container: HTMLDivElement;
-    _slot: HTMLSlotElement;
     _playerController: HTMLDivElement;
     _playerBtn: HTMLDivElement;
     _progress: HTMLDivElement;

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

@@ -25,8 +25,6 @@ export declare class Popover extends RanElement {
     constructor();
     get placement(): string;
     set placement(value: string);
-    get arrow(): string;
-    set arrow(value: string);
     get trigger(): string;
     set trigger(value: string);
     get getPopupContainerId(): string;

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

@@ -8,11 +8,13 @@ import { EventManager } from '@/utils/builder';
 interface Option {
     label: string | number;
     value: string | number;
+    disabled?: boolean;
 }
 export declare class Select extends RanElement {
     static formAssociated: boolean;
     _internals?: ElementInternals;
     _events: EventManager;
+    _searchEvents: EventManager;
     removeTimeId?: NodeJS.Timeout;
     _listboxId: string;
     _activeIndex: number;
@@ -63,6 +65,12 @@ export declare class Select extends RanElement {
     setActiveOptionByIndex: (targetIndex: number) => void;
     selectOptionElement: (optionElement: HTMLElement | null, shouldDispatch?: boolean) => void;
     isDropdownOpen: () => boolean;
+    /**
+     * Walk from `from` in the direction of `step` (clamped to the list bounds)
+     * and return the first non-disabled option index, or -1 if none exists.
+     * Keeps keyboard navigation from ever landing on a disabled option.
+     */
+    _nextEnabledIndex: (from: number, step: number) => number;
     keydownSelect: (e: KeyboardEvent) => void;
     handlerExternalCss(): void;
     /**
@@ -123,6 +131,13 @@ export declare class Select extends RanElement {
     changeSearch: (e: Event) => void;
     clickRemoveSelect: (e: Event) => void;
     connectedCallback(): void;
+    /**
+     * (Re)wire the search-box listeners to match the current `showSearch` value.
+     * Reactive: abort any previously-registered search listeners first, then
+     * re-register only while `showSearch` is truthy. Safe to call on connect and
+     * on every `showSearch` attribute change.
+     */
+    _applyShowSearch: () => void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /**

package/dist/{dropdown-C5362qTy.js → dropdown-RqHMRhFE.js}

@@ -33,12 +33,6 @@ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
   set arrow(r) {
     a(this, "arrow", r, { removeEmpty: !0 });
   }
-  get show() {
-    return o(this, "show");
-  }
-  set show(r) {
-    a(this, "show", r, { removeEmpty: !0 });
-  }
   get sheet() {
     return o(this, "sheet");
   }

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-import { n as a, t as r } from "./dropdown-C5362qTy.js";
+import { n as a, t as r } from "./dropdown-RqHMRhFE.js";
 export {
   r as ARROW_TYPE,
   a as Dropdown,

package/dist/{icon-DmoEnao5.js → icon-Blm7AbyY.js}

@@ -136,6 +136,8 @@ var b = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     if (this._icon) {
       const t = this.size || "1em";
       this._icon.setAttribute("width", t), this._icon.setAttribute("height", t);
+      const e = /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+      this._icon.style.setProperty("width", e), this._icon.style.setProperty("height", e);
     }
   };
   setColor = () => {

package/dist/icon.js

@@ -1,4 +1,4 @@
-import { n as o, r as s, t as e } from "./icon-DmoEnao5.js";
+import { n as o, r as s, t as e } from "./icon-Blm7AbyY.js";
 export {
   e as Icon,
   o as registerIcon,