ranui 0.2.0-alpha.1 → 0.2.0-alpha.3

package/README.md

@@ -155,6 +155,32 @@ UMD, IIFE, CJS:
 <script src="./ranui/dist/umd/index.umd.cjs"></script>
 ```
 
+### Without a bundler (static pages / CDN)
+
+Pick the distribution that matches how many components the page uses:
+
+| Scenario                       | Best option                                    | Why                                                                  |
+| ------------------------------ | ---------------------------------------------- | -------------------------------------------------------------------- |
+| 1–2 components, one script tag | Per-component IIFE: `dist/iife/<name>.iife.js` | Self-contained, no module syntax needed                              |
+| Several components             | Per-component ES modules: `dist/<name>.js`     | Shared runtime chunks are deduplicated by the browser's module graph |
+| Everything                     | Full bundle: `dist/index.iife.js`              | One file, every component registered                                 |
+| Project with a bundler         | npm imports: `import 'ranui/<name>'`           | Tree-shaking and a single shared runtime                             |
+
+Per-component IIFE — one tag, no build step:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/ranui/dist/iife/select.iife.js" defer></script>
+```
+
+Each IIFE inlines its internal dependencies (e.g. `select` includes `icon`); element registration is guarded, so loading several files that share dependencies is safe — but each file carries its own copy of the shared runtime. When a page needs several components, prefer the ES modules instead, which deduplicate it:
+
+```html
+<script type="module">
+  import 'https://cdn.jsdelivr.net/npm/ranui/dist/button.js';
+  import 'https://cdn.jsdelivr.net/npm/ranui/dist/select.js';
+</script>
+```
+
 ## Usage
 
 RanUI components are Web Components, so they can be used without framework-specific wrappers.

package/README.zh-CN.md

@@ -127,6 +127,32 @@ import 'ranui/button';
 <script src="./ranui/dist/umd/index.umd.cjs"></script>
 ```
 
+### 无构建工具场景（静态页 / CDN）
+
+按页面用到的组件数量选择分发方式：
+
+| 场景                         | 推荐方式                                | 原因                                      |
+| ---------------------------- | --------------------------------------- | ----------------------------------------- |
+| 只用 1–2 个组件，一行 script | 按组件 IIFE：`dist/iife/<name>.iife.js` | 自包含，无需模块语法                      |
+| 用多个组件                   | 按组件 ES 模块：`dist/<name>.js`        | 共享 runtime chunk 由浏览器模块图自动去重 |
+| 全都要                       | 全量包：`dist/index.iife.js`            | 一个文件注册所有组件                      |
+| 项目里有构建工具             | npm 引入：`import 'ranui/<name>'`       | 可摇树，共享一份 runtime                  |
+
+按组件 IIFE——一行引入、零构建：
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/ranui/dist/iife/select.iife.js" defer></script>
+```
+
+每个 IIFE 内联了自己的内部依赖（如 `select` 内含 `icon`）；元素注册有守卫，多个文件共享依赖时同时加载是安全的——但每个文件都带一份共享 runtime。页面需要多个组件时，建议改用 ES 模块，浏览器会自动去重：
+
+```html
+<script type="module">
+  import 'https://cdn.jsdelivr.net/npm/ranui/dist/button.js';
+  import 'https://cdn.jsdelivr.net/npm/ranui/dist/select.js';
+</script>
+```
+
 ## 使用方式
 
 它是基于`Web Components`的组件，你可以不用关注框架就可以使用它。

package/dist/bin/build-iife.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/builder.js

@@ -1,6 +1,6 @@
 import { a as s, c as e, i as t, n as o, o as r, r as c, s as i, t as l } from "./mocks-CMGoftIc.js";
 import { t as n } from "./events-C59wGdni.js";
-import { i as d, n as u, r as S, t as f } from "./signal-XHfNsQNW.js";
+import { i as d, n as u, r as S, t as f } from "./signal-CSSZxlK5.js";
 import { _ as M, a as v, b as B, c as b, d as g, f as w, g as E, h as H, i as k, l as D, m as L, n as R, o as y, p as A, r as F, s as x, t as I, u as N, v as T, y as U } from "./factory-BdsO0dEW.js";
 export {
   I as Article,

package/dist/{button-BstLjXNe.js → button-CJFSrjq_.js}

@@ -1,14 +1,14 @@
-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 {
+import { _ as i, a as b, n as d, o as l, s as a, t as h } from "./utils-DBfrRFoE.js";
+import { t as v } from "./events-C59wGdni.js";
+import { _ as u, i as s, p as f } from "./factory-BdsO0dEW.js";
+import { a as g, n as p } 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, #006bff));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-primary, #006bff));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))}:host([type="contrast"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-contrast-bg, #171717));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-contrast-bg, #171717));color:var(--ran-btn-content-color, var(--ran-color-contrast-text, #fff))}:host([type="contrast"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, var(--ran-color-contrast-text, #fff) 10%, transparent 10.01%))}:host([type="contrast"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-contrast-bg-active, #4d4d4d));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-contrast-bg-active, #4d4d4d))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-border-hover, #c9c9c9));color:var(--ran-btn-content-hover-color, var(--ran-color-text, #171717))}: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="contrast"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-contrast-bg-hover, #383838));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-contrast-bg-hover, #383838));color:var(--ran-btn-content-hover-color, var(--ran-color-contrast-text, #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-gray-alpha-400, #00000014) 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, #eaeaea));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 p {
   _btn;
   _btnContent;
   _iconElement;
   _slot;
   _shadowDom;
-  _events = new u();
+  _events = new v();
   debounceTimeId;
   static get observedAttributes() {
     return [
@@ -21,7 +21,7 @@ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     ];
   }
   constructor() {
-    super(), this._shadowDom = b(this, m);
+    super(), this._shadowDom = d(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");
   }
@@ -71,7 +71,7 @@ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     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);
+      e || (e = u("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));
@@ -95,7 +95,7 @@ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
   };
   handlerExternalCss = () => {
-    d(this, this._shadowDom, "sheet", null, this.sheet);
+    b(this, this._shadowDom, "sheet", null, this.sheet);
   };
   syncA11yState = () => {
     const t = a(this);
@@ -111,7 +111,7 @@ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     n !== r && (t === "disabled" && this._btnContent && this.syncA11yState(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
   }
 };
-p("r-button", y);
+g("r-button", y);
 export {
   y as t
 };

package/dist/button.js

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

package/dist/card-F-3fRynz.js

@@ -0,0 +1,67 @@
+import { a as n, i as a, n as d, r as i, t as c } from "./utils-DBfrRFoE.js";
+import { i as t, p as o } from "./factory-BdsO0dEW.js";
+import { a as l, n as h } from "./ssr-DSGwPtEd.js";
+var p = ".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{display:var(--ran-card-display, block);box-sizing:border-box;min-height:var(--ran-card-min-height, 0)}:host([hoverable]) .ran-card{transition:border-color var(--ran-motion-duration-base, .2s),box-shadow var(--ran-motion-duration-base, .2s)}:host([hoverable]:hover) .ran-card{border-color:var(--ran-card-hover-border-color, var(--ran-color-border-hover, #c9c9c9));box-shadow:var(--ran-card-hover-shadow, var(--ran-shadow-elevated, 0 1px 2px rgba(0, 0, 0, .04)))}.ran-card{display:grid;align-content:start;gap:var(--ran-card-gap, 14px);height:100%;min-width:0;padding:var(--ran-card-padding, 16px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-card-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-card-radius, var(--ran-radius-md));background:var(--ran-card-background, var(--ran-color-bg));box-shadow:var(--ran-card-shadow, none);box-sizing:border-box}.ran-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ran-card-title-area{flex:1;min-width:0}.ran-card-title{margin:0;color:var(--ran-card-title-color, var(--ran-color-text));font-size:var(--ran-card-title-font-size, 16px);font-weight:var(--ran-card-title-font-weight, 600);line-height:1.3}.ran-card-title:empty{display:none}.ran-card-description{margin:4px 0 0;color:var(--ran-card-description-color, var(--ran-color-text-secondary));font-size:var(--ran-card-description-font-size, 14px);line-height:1.5}.ran-card-description:empty{display:none}.ran-card-body,.ran-card-footer{min-width:0}:host(:not([title]):not([description])) .ran-card-header{display:none}", b = class extends h {
+  _shadowDom;
+  _titleEl;
+  _descriptionEl;
+  _headerEl;
+  _footerEl;
+  static get observedAttributes() {
+    return [
+      "title",
+      "description",
+      "sheet",
+      "hoverable"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = d(this, p);
+    const r = c(this._shadowDom, ".ran-card", () => t().class("ran-card").attr("part", "card").children(t().class("ran-card-header").attr("part", "header").children(t().class("ran-card-title-area").children(t().class("ran-card-title").attr("part", "title"), t().class("ran-card-description").attr("part", "description")), o().attr("name", "extra").attr("part", "extra")), t().class("ran-card-body").attr("part", "body").children(o()), t().class("ran-card-footer").attr("part", "footer").children(o().attr("name", "footer"))).build());
+    this._headerEl = r.querySelector(".ran-card-header"), this._titleEl = r.querySelector(".ran-card-title"), this._descriptionEl = r.querySelector(".ran-card-description"), this._footerEl = r.querySelector(".ran-card-footer"), this._footerEl.style.display = "none";
+    const e = this._footerEl.querySelector('slot[name="footer"]');
+    e.addEventListener("slotchange", () => {
+      this._footerEl.style.display = e.assignedElements().length > 0 ? "" : "none";
+    });
+  }
+  get title() {
+    return i(this, "title");
+  }
+  set title(r) {
+    a(this, "title", r);
+  }
+  get description() {
+    return i(this, "description");
+  }
+  set description(r) {
+    a(this, "description", r);
+  }
+  get sheet() {
+    return i(this, "sheet");
+  }
+  set sheet(r) {
+    a(this, "sheet", r);
+  }
+  get hoverable() {
+    return this.hasAttribute("hoverable");
+  }
+  set hoverable(r) {
+    r ? this.setAttribute("hoverable", "") : this.removeAttribute("hoverable");
+  }
+  _syncTitle() {
+    this._titleEl.textContent = this.getAttribute("title") ?? "";
+  }
+  _syncDescription() {
+    this._descriptionEl.textContent = this.getAttribute("description") ?? "";
+  }
+  connectedCallback() {
+    this._syncTitle(), this._syncDescription(), n(this, this._shadowDom, "sheet", null, this.sheet);
+  }
+  attributeChangedCallback(r, e, s) {
+    e !== s && (r === "title" && this._syncTitle(), r === "description" && this._syncDescription(), r === "sheet" && n(this, this._shadowDom, r, e, s));
+  }
+};
+l("r-card", b);
+export {
+  b as t
+};

package/dist/card.js

@@ -1,4 +1,4 @@
-import { t as r } from "./card-DQUJoDUQ.js";
+import { t as r } from "./card-F-3fRynz.js";
 export {
   r as Card,
   r as default

package/dist/{checkbox-iHZQb-yQ.js → checkbox-BS5kNY6n.js}

@@ -1,8 +1,8 @@
-import { c as o, d as i, f as t, l as s, m as h, p as b, s as d, u as l, v as k } from "./utils-D4pPF77E.js";
+import { a as o, c as i, f as s, i as h, n as b, o as t, r as d, s as l, t as k } from "./utils-DBfrRFoE.js";
 import { t as x } from "./events-C59wGdni.js";
 import { i as a, m as c, p as u, s as p } from "./factory-BdsO0dEW.js";
 import { a as v, n as f } from "./ssr-DSGwPtEd.js";
-var g = '.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{position:var(--ran-checkbox-host-position, relative);display:var(--ran-checkbox-host-display, inline-flex);margin:var(--ran-checkbox-host-margin, 0);padding:var(--ran-checkbox-host-padding, 0);box-sizing:var(--ran-checkbox-host-box-sizing, border-box);list-style:var(--ran-checkbox-host-list-style, none)}:host([disabled]){opacity:var(--ran-checkbox-disabled-opacity, .6)}:host([disabled]) .ran-checkbox-input{cursor:var(--ran-checkbox-disabled-cursor, not-allowed);pointer-events:var(--ran-checkbox-disabled-pointer-events, all)}:host([disabled]) .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #d9d9d9));border:1px solid var(--ran-color-border, #d9d9d9)}:host([disabled]) .ran-checkbox-inner:after{cursor:not-allowed;pointer-events:none;opacity:var(--ran-checkbox-checked-after-opacity, 1)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #d9d9d9))}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 0)}.ran-checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--ran-checkbox-label-gap, 8px);cursor:pointer;line-height:1}.ran-checkbox-label{color:var(--ran-checkbox-label-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-label-font-size, 14px);font-family:var(--ran-checkbox-label-font-family, var(--ran-skin-font-family, inherit));line-height:var(--ran-checkbox-label-line-height, 1.5);-webkit-user-select:none;user-select:none}.ran-checkbox{position:var(--ran-checkbox-position, relative);display:var(--ran-checkbox-display, block);box-sizing:var(--ran-checkbox-box-sizing, border-box);margin:var(--ran-checkbox-margin, 0);width:var(--ran-checkbox-width, 16px);height:var(--ran-checkbox-height, 16px);padding:var(--ran-checkbox-padding, 0);color:var(--ran-checkbox-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-font-size, 14px);line-height:var(--ran-checkbox-line-height, 1);list-style:var(--ran-checkbox-list-style, none);font-family:var(--ran-checkbox-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));white-space:var(--ran-checkbox-white-space, nowrap);cursor:var(--ran-checkbox-cursor, pointer);border-radius:var(--ran-checkbox-border-radius, 4px)}.ran-checkbox-input{position:var(--ran-checkbox-input-position, absolute);inset:var(--ran-checkbox-input-inset, 0);z-index:var(--ran-checkbox-input-z-index, 1);cursor:var(--ran-checkbox-input-cursor, pointer);opacity:var(--ran-checkbox-input-opacity, 0);margin:var(--ran-checkbox-input-margin, 0)}.ran-checkbox-inner{box-sizing:var(--ran-checkbox-inner-box-sizing, border-box);display:var(--ran-checkbox-inner-display, block);width:var(--ran-checkbox-inner-width, 16px);height:var(--ran-checkbox-inner-height, 16px);direction:var(--ran-checkbox-inner-direction, ltr);background-color:var(--ran-checkbox-inner-background-color, var(--ran-color-bg-elevated, #fff));border:var(--ran-checkbox-inner-border, 1px solid var(--ran-color-border, #d9d9d9));border-image-source:var(--ran-checkbox-inner-border-image-source, none);border-image-slice:var(--ran-checkbox-inner-border-image-slice, 8);border-image-width:var(--ran-checkbox-inner-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-checkbox-inner-border-radius, 4px);border-collapse:var(--ran-checkbox-inner-border-collapse, separate)}.ran-checkbox-inner:after{box-sizing:var(--ran-checkbox-inner-after-box-sizing, border-box);position:var(--ran-checkbox-inner-after-position, absolute);top:var(--ran-checkbox-inner-after-top, 50%);inset-inline-start:var(--ran-checkbox-inner-after-inset-inline-start, 25%);display:var(--ran-checkbox-inner-after-display, table);width:var(--ran-checkbox-inner-after-width, calc(16px / 14 * 5));height:var(--ran-checkbox-inner-after-height, calc(16px / 14 * 8));border:var(--ran-checkbox-inner-after-border, 2px solid #fff);border-top:var(--ran-checkbox-inner-after-border-top, 0);border-inline-start:var(--ran-checkbox-inner-after-border-inline-start, 0);opacity:var(--ran-checkbox-inner-after-opacity, 0);content:var(--ran-checkbox-inner-after-content, "");transition:var(--ran-checkbox-inner-after-transition, all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-inner-after-transform, rotate(45deg) scale(1) translate(-50%, -50%))}.ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-checkbox-checked-background-image, none);border:var(--ran-checkbox-checked-border, 1px solid var(--ran-color-primary, #006bff))}.ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 1)}.ran-checkbox:focus-within .ran-checkbox-inner{box-shadow:var(--ran-checkbox-focus-box-shadow, 0 0 0 2px var(--ran-blue-400, #cae7ff));border-color:var(--ran-checkbox-focus-border-color, var(--ran-color-primary, #006bff))}', m = class extends f {
+var g = '.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{position:var(--ran-checkbox-host-position, relative);display:var(--ran-checkbox-host-display, inline-flex);margin:var(--ran-checkbox-host-margin, 0);padding:var(--ran-checkbox-host-padding, 0);box-sizing:var(--ran-checkbox-host-box-sizing, border-box);list-style:var(--ran-checkbox-host-list-style, none)}:host([disabled]){opacity:var(--ran-checkbox-disabled-opacity, .6)}:host([disabled]) .ran-checkbox-input{cursor:var(--ran-checkbox-disabled-cursor, not-allowed);pointer-events:var(--ran-checkbox-disabled-pointer-events, all)}:host([disabled]) .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #f2f2f2));border:1px solid var(--ran-color-border, #eaeaea)}:host([disabled]) .ran-checkbox-inner:after{cursor:not-allowed;pointer-events:none;opacity:var(--ran-checkbox-checked-after-opacity, 1)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #f2f2f2))}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 0)}.ran-checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--ran-checkbox-label-gap, 8px);cursor:pointer;line-height:1}.ran-checkbox-label{color:var(--ran-checkbox-label-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-label-font-size, 14px);font-family:var(--ran-checkbox-label-font-family, var(--ran-skin-font-family, inherit));line-height:var(--ran-checkbox-label-line-height, 1.5);-webkit-user-select:none;user-select:none}.ran-checkbox{position:var(--ran-checkbox-position, relative);display:var(--ran-checkbox-display, block);box-sizing:var(--ran-checkbox-box-sizing, border-box);margin:var(--ran-checkbox-margin, 0);width:var(--ran-checkbox-width, 16px);height:var(--ran-checkbox-height, 16px);padding:var(--ran-checkbox-padding, 0);color:var(--ran-checkbox-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-font-size, 14px);line-height:var(--ran-checkbox-line-height, 1);list-style:var(--ran-checkbox-list-style, none);font-family:var(--ran-checkbox-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));white-space:var(--ran-checkbox-white-space, nowrap);cursor:var(--ran-checkbox-cursor, pointer);border-radius:var(--ran-checkbox-border-radius, 4px)}.ran-checkbox-input{position:var(--ran-checkbox-input-position, absolute);inset:var(--ran-checkbox-input-inset, 0);z-index:var(--ran-checkbox-input-z-index, 1);cursor:var(--ran-checkbox-input-cursor, pointer);opacity:var(--ran-checkbox-input-opacity, 0);margin:var(--ran-checkbox-input-margin, 0)}.ran-checkbox-inner{box-sizing:var(--ran-checkbox-inner-box-sizing, border-box);display:var(--ran-checkbox-inner-display, block);width:var(--ran-checkbox-inner-width, 16px);height:var(--ran-checkbox-inner-height, 16px);direction:var(--ran-checkbox-inner-direction, ltr);background-color:var(--ran-checkbox-inner-background-color, var(--ran-color-bg-elevated, #fff));border:var(--ran-checkbox-inner-border, 1px solid var(--ran-color-border, #eaeaea));border-image-source:var(--ran-checkbox-inner-border-image-source, none);border-image-slice:var(--ran-checkbox-inner-border-image-slice, 8);border-image-width:var(--ran-checkbox-inner-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-checkbox-inner-border-radius, 4px);border-collapse:var(--ran-checkbox-inner-border-collapse, separate)}.ran-checkbox-inner:after{box-sizing:var(--ran-checkbox-inner-after-box-sizing, border-box);position:var(--ran-checkbox-inner-after-position, absolute);top:var(--ran-checkbox-inner-after-top, 50%);inset-inline-start:var(--ran-checkbox-inner-after-inset-inline-start, 25%);display:var(--ran-checkbox-inner-after-display, table);width:var(--ran-checkbox-inner-after-width, calc(16px / 14 * 5));height:var(--ran-checkbox-inner-after-height, calc(16px / 14 * 8));border:var(--ran-checkbox-inner-after-border, 2px solid #fff);border-top:var(--ran-checkbox-inner-after-border-top, 0);border-inline-start:var(--ran-checkbox-inner-after-border-inline-start, 0);opacity:var(--ran-checkbox-inner-after-opacity, 0);content:var(--ran-checkbox-inner-after-content, "");transition:var(--ran-checkbox-inner-after-transition, all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-inner-after-transform, rotate(45deg) scale(1) translate(-50%, -50%))}.ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-checkbox-checked-background-image, none);border:var(--ran-checkbox-checked-border, 1px solid var(--ran-color-primary, #006bff))}.ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 1)}.ran-checkbox:focus-within .ran-checkbox-inner{box-shadow:var(--ran-checkbox-focus-box-shadow, 0 0 0 2px var(--ran-blue-400, #cae7ff));border-color:var(--ran-checkbox-focus-border-color, var(--ran-color-primary, #006bff))}', m = class extends f {
   static formAssociated = !0;
   _events = new x();
   _internals;
@@ -26,12 +26,12 @@ var g = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     } catch {
       this._internals = void 0;
     }
-    this._shadowDom = o(this, g);
-    const e = d(this._shadowDom, ".ran-checkbox-wrapper", () => a().class("ran-checkbox-wrapper").part("wrapper").children(a().class("ran-checkbox").part("checkbox").children(p().class("ran-checkbox-input").part("input").attr("type", "checkbox"), c().class("ran-checkbox-inner").part("inner")), c().class("ran-checkbox-label").part("label").children(u())).build());
+    this._shadowDom = b(this, g);
+    const e = k(this._shadowDom, ".ran-checkbox-wrapper", () => a().class("ran-checkbox-wrapper").part("wrapper").children(a().class("ran-checkbox").part("checkbox").children(p().class("ran-checkbox-input").part("input").attr("type", "checkbox"), c().class("ran-checkbox-inner").part("inner")), c().class("ran-checkbox-label").part("label").children(u())).build());
     this.container = e.querySelector(".ran-checkbox"), this.checkInput = e.querySelector(".ran-checkbox-input"), this.checkInner = e.querySelector(".ran-checkbox-inner"), this.checkInput.setAttribute("aria-hidden", "true"), this.checkInput.tabIndex = -1, this.context = { checked: !1 };
   }
   get disabled() {
-    return b(this);
+    return l(this);
   }
   set disabled(e) {
     t.includes(e) ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
@@ -51,17 +51,17 @@ var g = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     t.includes(e) ? (this.setAttribute("checked", "false"), this.context.checked = !1) : (this.setAttribute("checked", "true"), this.context.checked = !0), this.updateChecked();
   }
   get sheet() {
-    return s(this, "sheet");
+    return d(this, "sheet");
   }
   set sheet(e) {
-    l(this, "sheet", e);
+    h(this, "sheet", e);
   }
   handlerExternalCss = () => {
-    i(this, this._shadowDom, "sheet", null, this.sheet);
+    o(this, this._shadowDom, "sheet", null, this.sheet);
   };
   updateChecked = () => {
     const { checked: e } = this.context;
-    e ? (this.setAttribute("checked", "true"), this.setAttribute("value", "true"), h(this.container, "ran-checkbox-checked")) : (this.setAttribute("checked", "false"), this.setAttribute("value", "false"), k(this.container, "ran-checkbox-checked")), this.syncA11yAndForm();
+    e ? (this.setAttribute("checked", "true"), this.setAttribute("value", "true"), i(this.container, "ran-checkbox-checked")) : (this.setAttribute("checked", "false"), this.setAttribute("value", "false"), s(this.container, "ran-checkbox-checked")), this.syncA11yAndForm();
   };
   syncA11yAndForm = () => {
     const { checked: e } = this.context;

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { t } from "./checkbox-iHZQb-yQ.js";
+import { t } from "./checkbox-BS5kNY6n.js";
 export {
   t as Checkbox,
   t as default

package/dist/{colorpicker-CGh8pRqo.js → colorpicker-CdzUAVC5.js}

@@ -1,11 +1,11 @@
-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 { a as v, h as l, i as x, n as m, r as P, s as h, t as y } from "./utils-DBfrRFoE.js";
 import { t as w } from "./events-C59wGdni.js";
-import { i as S, r as p } from "./signal-XHfNsQNW.js";
+import { i as S, r as p } from "./signal-CSSZxlK5.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";
+import "./input-BM6e_LQr.js";
+import "./select-BSeCT9tF.js";
+import "./popover-DRUQjdPs.js";
 var D = (e) => {
   const { r: t, g: i, b: r } = I(e);
   return f(t, i, r);
@@ -71,7 +71,7 @@ var D = (e) => {
   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 _ {
+].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, #eaeaea));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;
@@ -104,8 +104,8 @@ var D = (e) => {
     ];
   }
   constructor() {
-    super(), this._shadowDom = v(this, V);
-    const e = P(this._shadowDom, "r-popover", () => {
+    super(), this._shadowDom = m(this, V);
+    const e = y(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();
     });
@@ -118,10 +118,10 @@ var D = (e) => {
     this.setAttribute("value", e);
   }
   get sheet() {
-    return m(this, "sheet");
+    return P(this, "sheet");
   }
   set sheet(e) {
-    y(this, "sheet", e);
+    x(this, "sheet", e);
   }
   get disabled() {
     return h(this);
@@ -130,7 +130,7 @@ var D = (e) => {
     e === !1 || e === void 0 || e === null ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
   }
   handlerExternalCss = () => {
-    x(this, this._shadowDom, "sheet", null, this.sheet);
+    v(this, this._shadowDom, "sheet", null, this.sheet);
   };
   syncDisabledState = () => {
     const e = h(this);

package/dist/colorpicker.js

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

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

@@ -20,7 +20,7 @@ export declare class Button extends RanElement {
     set icon(value: string | null);
     get effect(): string;
     set effect(value: string | null);
-    /** Visual variant: `''` (default) | `'primary'` | `'warning'` | `'text'`. Drives the `:host([type=...])` styles. */
+    /** Visual variant: `''` (default) | `'primary'` | `'contrast'` | `'warning'` | `'text'`. Drives the `:host([type=...])` styles. */
     get type(): string;
     set type(value: string | null);
     /**

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

@@ -13,6 +13,9 @@ export declare class Card extends RanElement {
     set description(value: string);
     get sheet(): string;
     set sheet(value: string);
+    /** Interactive card (Geist): hover darkens the border and lifts to the elevated shadow tier. Purely presentational — gate it to cards that are actually clickable. */
+    get hoverable(): boolean;
+    set hoverable(value: boolean);
     private _syncTitle;
     private _syncDescription;
     connectedCallback(): void;

package/dist/components/theme-switch/index.d.ts

@@ -0,0 +1,36 @@
+import { EventManager } from '@/utils/builder';
+import { RanElement } from '@/utils/index';
+import type { RanThemeName } from '@/utils/theme';
+/**
+ * `<r-theme-switch>` — a three-state (system / light / dark) segmented control
+ * wired to ranui's theme API (`setTheme`/`getTheme`, localStorage `ran-theme`).
+ * Multiple instances on one page stay in sync; `label-*` attributes localize
+ * the aria-labels. Emits a composed `change` event with `{ theme }`.
+ */
+export declare class ThemeSwitch extends RanElement {
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _shadowDom: ShadowRoot;
+    _group: HTMLDivElement;
+    constructor();
+    get sheet(): string;
+    set sheet(v: string);
+    /** Current selection; falls back to 'system' when nothing is forced. */
+    get value(): RanThemeName;
+    set value(v: RanThemeName);
+    _label(choice: RanThemeName): string;
+    _syncLabels(): void;
+    _reflect(): void;
+    _select(choice: RanThemeName): void;
+    /** Keep <meta name="theme-color"> (browser/PWA chrome) in step. Forced
+     * themes get the page's resolved background (no hardcoded colors); 'system'
+     * restores each meta's original — possibly media-qualified — content. */
+    _syncMeta(choice: RanThemeName): void;
+    _handleClick: (event: MouseEvent) => void;
+    _handleSync: () => void;
+    handlerExternalCss: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string, next: string): void;
+}
+export default ThemeSwitch;

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

@@ -1,4 +1,4 @@
-import { c as w, d as p, l as o, m as i, s as h, u as a, v as d } from "./utils-D4pPF77E.js";
+import { a as w, c as i, f as d, i as o, n as p, r as a, t as h } from "./utils-DBfrRFoE.js";
 import { i as n, p as l } from "./factory-BdsO0dEW.js";
 import { a as c, n as f } 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}@keyframes ranui-dropdown-up-in{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}to{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes ranui-dropdown-up-out{0%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}to{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}}@keyframes ranui-dropdown-down-in{0%{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleY(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-down-out{0%{transform:scaleY(1);transform-origin:0% 0%;opacity:1}to{transform:scaleY(.8);transform-origin:0% 0%;opacity:0}}@keyframes ranui-dropdown-left-in{0%{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}to{transform:scaleX(1);transform-origin:100% 0%;opacity:1}}@keyframes ranui-dropdown-left-out{0%{transform:scaleX(1);transform-origin:100% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:100% 0%;opacity:0}}@keyframes ranui-dropdown-right-in{0%{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}to{transform:scaleX(1);transform-origin:0% 0%;opacity:1}}@keyframes ranui-dropdown-right-out{0%{transform:scaleX(1);transform-origin:0% 0%;opacity:1}to{transform:scaleX(.8);transform-origin:0% 0%;opacity:0}}.ran-dropdown-down-in{animation:ranui-dropdown-down-in .1s;animation-fill-mode:forwards}.ran-dropdown-down-out{animation:ranui-dropdown-down-out .1s;animation-fill-mode:forwards}.ran-dropdown-up-in{animation:ranui-dropdown-up-in .1s;animation-fill-mode:forwards}.ran-dropdown-up-out{animation:ranui-dropdown-up-out .1s;animation-fill-mode:forwards}.ran-dropdown-left-in{animation:ranui-dropdown-left-in .1s;animation-fill-mode:forwards}.ran-dropdown-left-out{animation:ranui-dropdown-left-out .1s;animation-fill-mode:forwards}.ran-dropdown-right-in{animation:ranui-dropdown-right-in .1s;animation-fill-mode:forwards}.ran-dropdown-right-out{animation:ranui-dropdown-right-out .1s;animation-fill-mode:forwards}:host{text-align:var(--ran-dropdown-host-text-align, left);z-index:var(--ran-dropdown-host-z-index, var(--ran-z-dropdown, 1100))}.ranui-dropdown{transform-origin:var(--ran-x, 50%) var(--ran-y, 50%);box-sizing:var(--ran-dropdown-box-sizing, border-box);margin:var(--ran-dropdown-margin, 0);padding:var(--ran-dropdown-padding, 0);color:var(--ran-dropdown-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-font-size, 14px);list-style:var(--ran-dropdown-list-style, none);font-family:var(--ran-dropdown-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));z-index:var(--ran-dropdown-z-index, 1050);overflow:var(--ran-dropdown-overflow, hidden);font-variant:var(--ran-dropdown-font-variant, initial);background:var(--ran-dropdown-background, var(--ran-color-bg-elevated, #ffffff));border-radius:var(--ran-dropdown-border-radius, var(--ran-radius-md, 12px));outline:var(--ran-dropdown-outline, none);box-shadow:var(--ran-dropdown-box-shadow, var(--ran-shadow-menu, var(--ran-shadow-elevated, 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05))));cursor:var(--ran-dropdown-cursor, auto);width:var(--ran-dropdown-width, 100%);height:var(--ran-dropdown-height, 100%);min-height:var(--ran-dropdown-min-height, 100%);min-width:var(--ran-dropdown-min-width, 100%)}.ranui-dropdown-container{position:var(--ran-dropdown-container-position, relative);display:var(--ran-dropdown-container-display, block);width:var(--ran-dropdown-container-width, 100%);height:var(--ran-dropdown-container-height, 100%);box-sizing:var(--ran-dropdown-container-box-sizing, border-box)}.ranui-dropdown-container .top{transform:translate(calc(var(--ran-dropdown-arrow-anchor-width, var(--ran-dropdown-min-width, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(calc(-1 * var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px)) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(0);top:0}.ranui-dropdown-container .bottom{transform:translate(calc(var(--ran-dropdown-arrow-anchor-width, var(--ran-dropdown-min-width, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2))) translateY(var(--ran-dropdown-arrow-overlap, 2px)) rotate(180deg);top:max(0px,calc(var(--ran-dropdown-min-height, 100%) - calc(var(--ran-dropdown-arrow-width, 16px) / 4)))}.ranui-dropdown-container .left{transform:translate(calc(0px - var(--ran-dropdown-arrow-width, 16px))) translateY(calc(var(--ran-dropdown-arrow-width, 16px) / 2 + var(--ran-dropdown-arrow-overlap, 2px))) rotate(270deg);top:max(0px,calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - var(--ran-dropdown-arrow-width, 16px)))}.ranui-dropdown-container .right{left:100%;transform:translate(0) translateY(calc(var(--ran-dropdown-arrow-anchor-height, var(--ran-dropdown-min-height, 100%)) / 2 - calc(var(--ran-dropdown-arrow-width, 16px) / 2) + var(--ran-dropdown-arrow-overlap, 2px))) rotate(90deg);top:0}.ranui-dropdown-arrow{position:var(--ran-dropdown-arrow-position, absolute);box-sizing:var(--ran-dropdown-arrow-box-sizing, border-box);z-index:var(--ran-dropdown-arrow-z-index, 1);display:var(--ran-dropdown-arrow-display, block);pointer-events:var(--ran-dropdown-arrow-pointer-events, none);width:var(--ran-dropdown-arrow-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-height, var(--ran-dropdown-arrow-width, 16px));overflow:var(--ran-dropdown-arrow-overflow, hidden)}.ranui-dropdown-arrow:before{background:var(--ran-dropdown-arrow-before-background, var(--ran-color-bg-elevated, #fff));position:var(--ran-dropdown-arrow-before-position, absolute);bottom:var(--ran-dropdown-arrow-before-bottom, 0);inset-inline-start:0;width:var(--ran-dropdown-arrow-before-width, var(--ran-dropdown-arrow-width, 16px));height:var(--ran-dropdown-arrow-before-height, calc(var(--ran-dropdown-arrow-width, 16px) / 2));clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:var(--ran-dropdown-arrow-before-content, "")}.ranui-dropdown-arrow:after{content:var(--ran-dropdown-arrow-after-content, "");position:var(--ran-dropdown-arrow-after-position, absolute);width:var(--ran-dropdown-arrow-after-width, 9px);height:var(--ran-dropdown-arrow-after-height, 9px);bottom:var(--ran-dropdown-arrow-after-bottom, 0);inset-inline:0;margin:var(--ran-dropdown-arrow-after-margin, auto);border-radius:var(--ran-dropdown-arrow-after-border-radius, 0 0 2px 0);transform:var(--ran-dropdown-arrow-after-transform, translateY(50%) rotate(-135deg));box-shadow:var(--ran-dropdown-arrow-after-box-shadow, 2px 2px 5px rgba(0, 0, 0, .05));z-index:var(--ran-dropdown-arrow-after-z-index, 0);background:var(--ran-dropdown-arrow-after-background, var(--ran-color-bg-elevated, #fff))}', e = 300, x = /* @__PURE__ */ (function(r) {
@@ -17,30 +17,30 @@ var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     ];
   }
   constructor() {
-    super(), this._shadowDom = w(this, m);
+    super(), this._shadowDom = p(this, m);
     const r = h(this._shadowDom, ".ranui-dropdown-container", () => n().class("ranui-dropdown-container").children(n().style("-webkit-tap-highlight-color", "transparent").style("outline", "0").class("ranui-dropdown").part("dropdown").children(l().class("slot"))).build());
     this.container = r, this.dropdown = r.querySelector(".ranui-dropdown"), this._slot = r.querySelector(".slot");
   }
   get transit() {
-    return o(this, "transit");
+    return a(this, "transit");
   }
   set transit(r) {
-    a(this, "transit", r, { removeEmpty: !0 });
+    o(this, "transit", r, { removeEmpty: !0 });
   }
   get arrow() {
-    return o(this, "arrow");
+    return a(this, "arrow");
   }
   set arrow(r) {
-    a(this, "arrow", r, { removeEmpty: !0 });
+    o(this, "arrow", r, { removeEmpty: !0 });
   }
   get sheet() {
-    return o(this, "sheet");
+    return a(this, "sheet");
   }
   set sheet(r) {
-    a(this, "sheet", r);
+    o(this, "sheet", r);
   }
   handlerExternalCss = () => {
-    p(this, this._shadowDom, "sheet", null, this.sheet);
+    w(this, this._shadowDom, "sheet", null, this.sheet);
   };
   handlerTransit = () => {
     this.transit && this.dropdown && (i(this.dropdown, this.transit), setTimeout(() => {

package/dist/dropdown.js

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