ranui 0.2.1-alpha.4 → 0.3.1-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{button-Cj-XSCsd.js → button-Dw6YKyNd.js} +8 -8
- package/dist/button.js +1 -1
- package/dist/{colorpicker-mebH0XLm.js → colorpicker-CKA4xN-g.js} +2 -2
- package/dist/colorpicker.js +1 -1
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/input/index.d.ts +15 -0
- package/dist/iife/button.iife.js +1 -1
- package/dist/iife/colorpicker.iife.js +1 -1
- package/dist/iife/input.iife.js +1 -1
- package/dist/iife/player.iife.js +1 -1
- package/dist/iife/select.iife.js +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.iife.js +2 -2
- package/dist/index.js +5 -5
- package/dist/{input-BlwAXu7I.js → input-ZY2Wumze.js} +9 -0
- package/dist/input.js +1 -1
- package/dist/{player-CAQ5Og2P.js → player-BkkmkqR4.js} +1 -1
- package/dist/player.js +1 -1
- package/dist/ranui.css +1 -1
- package/dist/{select-BIFVbQIj.js → select-DRKYa3W2.js} +1 -1
- package/dist/select.js +1 -1
- package/docs/COMPONENTS.md +43 -7
- package/docs/DESIGN.md +21 -22
- package/docs/style-tokens-public.md +89 -23
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { t as o } from "./button-
|
|
1
|
+
import { t as o } from "./button-Dw6YKyNd.js";
|
|
2
2
|
import { a, i as m, n as e, o as s, r as i, t as p } from "./theme-kOWZbKCq.js";
|
|
3
3
|
import { i as f, n as c, r as T, t as h } from "./icon-GZrfSeon.js";
|
|
4
4
|
import { t as P } from "./image-CqoQfJoV.js";
|
|
5
|
-
import { t as S } from "./input-
|
|
5
|
+
import { t as S } from "./input-ZY2Wumze.js";
|
|
6
6
|
import { t as R } from "./message-CNdmbeLf.js";
|
|
7
7
|
import { t as u } from "./skeleton-D7JIbROq.js";
|
|
8
8
|
import { t as d } from "./tabpane-C3qZGN-D.js";
|
|
9
9
|
import { t as N } from "./tab-DFVtDJb2.js";
|
|
10
10
|
import { t as E } from "./radar-Bg0cexzU.js";
|
|
11
11
|
import { t as b } from "./modal-gRagDkTb.js";
|
|
12
|
-
import { t as L } from "./select-
|
|
12
|
+
import { t as L } from "./select-DRKYa3W2.js";
|
|
13
13
|
import { n as w, t as x } from "./dropdown-CzGAVWYC.js";
|
|
14
14
|
import { t as y } from "./math-8E-45Y8e.js";
|
|
15
15
|
import { t as v } from "./mermaid-C1oQyPE3.js";
|
|
16
|
-
import { n as F } from "./player-
|
|
16
|
+
import { n as F } from "./player-BkkmkqR4.js";
|
|
17
17
|
import { t as V } from "./progress-vk40tuhm.js";
|
|
18
18
|
import { t as j } from "./checkbox-O_J_n1_W.js";
|
|
19
|
-
import { t as z } from "./colorpicker-
|
|
19
|
+
import { t as z } from "./colorpicker-CKA4xN-g.js";
|
|
20
20
|
import { n as J, t as K } from "./popover-BZKSLe3D.js";
|
|
21
21
|
import { n as X, t as Z } from "./loading-M6gWxLbm.js";
|
|
22
22
|
import { t as rr } from "./form-B8afuJlF.js";
|
|
@@ -42,6 +42,15 @@ var m = `.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
|
|
|
42
42
|
const t = p(this._shadowDom, ".ran-input", () => a().class("ran-input").part("input").children(b().class("ran-input-content").part("content")).build());
|
|
43
43
|
this._input = t, this._inputContent = t.querySelector(".ran-input-content"), this._inputContent.id || (this._inputContent.id = `ran-input-${++f}`);
|
|
44
44
|
}
|
|
45
|
+
focus(t) {
|
|
46
|
+
this._inputContent?.focus(t);
|
|
47
|
+
}
|
|
48
|
+
blur() {
|
|
49
|
+
this._inputContent?.blur();
|
|
50
|
+
}
|
|
51
|
+
select() {
|
|
52
|
+
this._inputContent?.select?.();
|
|
53
|
+
}
|
|
45
54
|
get value() {
|
|
46
55
|
return this.getAttribute("value") || "";
|
|
47
56
|
}
|
package/dist/input.js
CHANGED
|
@@ -2,7 +2,7 @@ import { t as Oo } from "./rolldown-runtime-9ZSF5uba.js";
|
|
|
2
2
|
import { _ as Uo, a as xo, g as at, h as Ct, l as Wt, n as Mo, o as Po, p as Xt, r as Qo, y as No } from "./utils-D1iZnChu.js";
|
|
3
3
|
import { _ as Bt, i as ie } from "./factory-ZNhcQ4tf.js";
|
|
4
4
|
import { a as Ko, t as Yo } from "./ssr-DSGwPtEd.js";
|
|
5
|
-
import "./select-
|
|
5
|
+
import "./select-DRKYa3W2.js";
|
|
6
6
|
var Go = /* @__PURE__ */ Oo(((y, b) => {
|
|
7
7
|
(function O(H) {
|
|
8
8
|
var _ = this, $ = function() {
|
package/dist/player.js
CHANGED
package/dist/ranui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.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}:root{--ran-background-100: #ffffff;--ran-background-200: #fafafa;--ran-gray-100: #f2f2f2;--ran-gray-200: #ebebeb;--ran-gray-300: #e6e6e6;--ran-gray-400: #eaeaea;--ran-gray-500: #c9c9c9;--ran-gray-600: #a8a8a8;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #4d4d4d;--ran-gray-1000: #171717;--ran-gray-alpha-100: #0000000d;--ran-gray-alpha-200: #00000015;--ran-gray-alpha-300: #0000001a;--ran-gray-alpha-400: #00000014;--ran-gray-alpha-500: #00000036;--ran-gray-alpha-600: #0000003d;--ran-gray-alpha-700: #00000070;--ran-gray-alpha-800: #00000082;--ran-gray-alpha-900: #000000b3;--ran-gray-alpha-1000: #000000e8;--ran-blue-100: #f0f7ff;--ran-blue-200: #e9f4ff;--ran-blue-300: #dfefff;--ran-blue-400: #cae7ff;--ran-blue-500: #94ccff;--ran-blue-600: #48aeff;--ran-blue-700: #006bff;--ran-blue-800: #0059ec;--ran-blue-900: #005ff2;--ran-blue-1000: #002359;--ran-red-100: #ffeeef;--ran-red-200: #ffe8ea;--ran-red-300: #ffe3e4;--ran-red-400: #ffd7d6;--ran-red-500: #ffb1b3;--ran-red-600: #ff676d;--ran-red-700: #fc0035;--ran-red-800: #ea001d;--ran-red-900: #d8001b;--ran-red-1000: #47000c;--ran-amber-100: #fff6de;--ran-amber-200: #fff4cf;--ran-amber-300: #fff1c1;--ran-amber-400: #ffdc73;--ran-amber-500: #ffc543;--ran-amber-600: #ffa600;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #aa4d00;--ran-amber-1000: #561900;--ran-green-100: #ecfdec;--ran-green-200: #e5fce7;--ran-green-300: #d3fad1;--ran-green-400: #b9f5bc;--ran-green-500: #82eb8d;--ran-green-600: #4ce15e;--ran-green-700: #28a948;--ran-green-800: #279141;--ran-green-900: #107d32;--ran-green-1000: #003a00;--ran-color-primary: var(--ran-
|
|
1
|
+
.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}:root{--ran-background-100: #ffffff;--ran-background-200: #fafafa;--ran-gray-100: #f2f2f2;--ran-gray-200: #ebebeb;--ran-gray-300: #e6e6e6;--ran-gray-400: #eaeaea;--ran-gray-500: #c9c9c9;--ran-gray-600: #a8a8a8;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #4d4d4d;--ran-gray-1000: #171717;--ran-gray-alpha-100: #0000000d;--ran-gray-alpha-200: #00000015;--ran-gray-alpha-300: #0000001a;--ran-gray-alpha-400: #00000014;--ran-gray-alpha-500: #00000036;--ran-gray-alpha-600: #0000003d;--ran-gray-alpha-700: #00000070;--ran-gray-alpha-800: #00000082;--ran-gray-alpha-900: #000000b3;--ran-gray-alpha-1000: #000000e8;--ran-blue-100: #f0f7ff;--ran-blue-200: #e9f4ff;--ran-blue-300: #dfefff;--ran-blue-400: #cae7ff;--ran-blue-500: #94ccff;--ran-blue-600: #48aeff;--ran-blue-700: #006bff;--ran-blue-800: #0059ec;--ran-blue-900: #005ff2;--ran-blue-1000: #002359;--ran-red-100: #ffeeef;--ran-red-200: #ffe8ea;--ran-red-300: #ffe3e4;--ran-red-400: #ffd7d6;--ran-red-500: #ffb1b3;--ran-red-600: #ff676d;--ran-red-700: #fc0035;--ran-red-800: #ea001d;--ran-red-900: #d8001b;--ran-red-1000: #47000c;--ran-amber-100: #fff6de;--ran-amber-200: #fff4cf;--ran-amber-300: #fff1c1;--ran-amber-400: #ffdc73;--ran-amber-500: #ffc543;--ran-amber-600: #ffa600;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #aa4d00;--ran-amber-1000: #561900;--ran-green-100: #ecfdec;--ran-green-200: #e5fce7;--ran-green-300: #d3fad1;--ran-green-400: #b9f5bc;--ran-green-500: #82eb8d;--ran-green-600: #4ce15e;--ran-green-700: #28a948;--ran-green-800: #279141;--ran-green-900: #107d32;--ran-green-1000: #003a00;--ran-color-primary: var(--ran-gray-1000);--ran-color-primary-hover: #383838;--ran-color-primary-active: #4d4d4d;--ran-color-primary-text: var(--ran-background-100);--ran-color-success: var(--ran-green-700);--ran-color-warning: var(--ran-amber-700);--ran-color-danger: var(--ran-red-700);--ran-color-bg: var(--ran-background-100);--ran-color-bg-subtle: var(--ran-background-200);--ran-color-bg-elevated: var(--ran-background-100);--ran-color-bg-muted: var(--ran-gray-100);--ran-color-bg-hover: var(--ran-gray-200);--ran-color-bg-active: var(--ran-gray-300);--ran-color-text: var(--ran-gray-1000);--ran-color-text-secondary: var(--ran-gray-900);--ran-color-text-disabled: var(--ran-gray-700);--ran-color-border: var(--ran-gray-400);--ran-color-border-secondary: var(--ran-gray-300);--ran-color-border-hover: var(--ran-gray-500);--ran-color-border-active: var(--ran-gray-600);--ran-color-link: var(--ran-blue-700);--ran-font-family: "Geist", "Geist Sans", -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";--ran-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--ran-font-size: 14px;--ran-line-height: 1.5715;--ran-radius-sm: 6px;--ran-radius-md: 12px;--ran-radius-lg: 16px;--ran-radius-full: 9999px;--ran-space-1: 4px;--ran-space-2: 8px;--ran-space-3: 12px;--ran-space-4: 16px;--ran-space-6: 24px;--ran-space-8: 32px;--ran-space-10: 40px;--ran-space-16: 64px;--ran-space-24: 96px;--ran-shadow-elevated: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 4px -2px rgba(0, 0, 0, .05);--ran-shadow-menu: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 24px -6px rgba(0, 0, 0, .14);--ran-shadow-modal: 0 4px 12px rgba(0, 0, 0, .08), 0 20px 48px -12px rgba(0, 0, 0, .22);--ran-z-modal: 1000;--ran-z-dropdown: 1100;--ran-z-message: 1200;--ran-focus-ring: 0 0 0 2px var(--ran-background-100), 0 0 0 4px var(--ran-blue-700);--ran-motion-duration-fast: .15s;--ran-motion-duration-base: .2s;--ran-motion-duration-slow: .35s;--ran-motion-ease-standard: cubic-bezier(.645, .045, .355, 1);--ran-motion-ease-snappy: cubic-bezier(.33, 0, .15, 1);--ran-motion-ease-spring: cubic-bezier(.34, 1.26, .5, 1);--ran-motion-ease-bouncy: cubic-bezier(.34, 1.56, .64, 1);--ran-motion-ease-smooth: cubic-bezier(.4, 0, .2, 1);--ran-skin-border-width: 1px;--ran-skin-border-style: solid;--ran-skin-raised-shadow: var(--ran-shadow-elevated);--ran-skin-font-family: var(--ran-font-family)}@media(prefers-color-scheme:dark){:root:not([data-ran-theme=light]):not([theme=light]):not(.light){--ran-background-100: #000000;--ran-background-200: #000000;--ran-gray-100: #1a1a1a;--ran-gray-200: #1f1f1f;--ran-gray-300: #292929;--ran-gray-400: #2e2e2e;--ran-gray-500: #454545;--ran-gray-600: #878787;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #a0a0a0;--ran-gray-1000: #ededed;--ran-gray-alpha-100: #ffffff12;--ran-gray-alpha-200: #ffffff17;--ran-gray-alpha-300: #ffffff21;--ran-gray-alpha-400: #ffffff24;--ran-gray-alpha-500: #ffffff3d;--ran-gray-alpha-600: #ffffff82;--ran-gray-alpha-700: #ffffff8a;--ran-gray-alpha-800: #ffffff78;--ran-gray-alpha-900: #ffffff9c;--ran-gray-alpha-1000: #ffffffeb;--ran-blue-100: #06193a;--ran-blue-200: #022248;--ran-blue-300: #002f62;--ran-blue-400: #003674;--ran-blue-500: #00418b;--ran-blue-600: #0090ff;--ran-blue-700: #006efe;--ran-blue-800: #005be7;--ran-blue-900: #47a8ff;--ran-blue-1000: #eaf6ff;--ran-red-100: #330a11;--ran-red-200: #440d13;--ran-red-300: #5d0e17;--ran-red-400: #6f101b;--ran-red-500: #88151f;--ran-red-600: #f32e40;--ran-red-700: #f13242;--ran-red-800: #e2162a;--ran-red-900: #ff565f;--ran-red-1000: #ffe9ed;--ran-amber-100: #2a1700;--ran-amber-200: #361900;--ran-amber-300: #502800;--ran-amber-400: #5b3000;--ran-amber-500: #703e00;--ran-amber-600: #ed9a00;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #ff9300;--ran-amber-1000: #fff3d5;--ran-green-100: #002608;--ran-green-200: #00320b;--ran-green-300: #003a0e;--ran-green-400: #004615;--ran-green-500: #006717;--ran-green-600: #00952d;--ran-green-700: #00ac3a;--ran-green-800: #009432;--ran-green-900: #00ca50;--ran-green-1000: #d8ffe4;--ran-color-bg-elevated: var(--ran-gray-100);--ran-color-primary-hover: #cccccc;--ran-color-primary-active: #b3b3b3;--ran-shadow-elevated: 0 1px 2px rgba(0, 0, 0, .16);--ran-shadow-menu: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px -4px rgba(0, 0, 0, .4), 0 16px 24px -8px rgba(0, 0, 0, .5);--ran-shadow-modal: 0 1px 1px rgba(0, 0, 0, .2), 0 8px 16px -4px rgba(0, 0, 0, .4), 0 24px 32px -8px rgba(0, 0, 0, .5)}}:root[data-ran-theme=dark],:root[theme=dark],:root.dark{--ran-background-100: #000000;--ran-background-200: #000000;--ran-gray-100: #1a1a1a;--ran-gray-200: #1f1f1f;--ran-gray-300: #292929;--ran-gray-400: #2e2e2e;--ran-gray-500: #454545;--ran-gray-600: #878787;--ran-gray-700: #8f8f8f;--ran-gray-800: #7d7d7d;--ran-gray-900: #a0a0a0;--ran-gray-1000: #ededed;--ran-gray-alpha-100: #ffffff12;--ran-gray-alpha-200: #ffffff17;--ran-gray-alpha-300: #ffffff21;--ran-gray-alpha-400: #ffffff24;--ran-gray-alpha-500: #ffffff3d;--ran-gray-alpha-600: #ffffff82;--ran-gray-alpha-700: #ffffff8a;--ran-gray-alpha-800: #ffffff78;--ran-gray-alpha-900: #ffffff9c;--ran-gray-alpha-1000: #ffffffeb;--ran-blue-100: #06193a;--ran-blue-200: #022248;--ran-blue-300: #002f62;--ran-blue-400: #003674;--ran-blue-500: #00418b;--ran-blue-600: #0090ff;--ran-blue-700: #006efe;--ran-blue-800: #005be7;--ran-blue-900: #47a8ff;--ran-blue-1000: #eaf6ff;--ran-red-100: #330a11;--ran-red-200: #440d13;--ran-red-300: #5d0e17;--ran-red-400: #6f101b;--ran-red-500: #88151f;--ran-red-600: #f32e40;--ran-red-700: #f13242;--ran-red-800: #e2162a;--ran-red-900: #ff565f;--ran-red-1000: #ffe9ed;--ran-amber-100: #2a1700;--ran-amber-200: #361900;--ran-amber-300: #502800;--ran-amber-400: #5b3000;--ran-amber-500: #703e00;--ran-amber-600: #ed9a00;--ran-amber-700: #ffae00;--ran-amber-800: #ff9300;--ran-amber-900: #ff9300;--ran-amber-1000: #fff3d5;--ran-green-100: #002608;--ran-green-200: #00320b;--ran-green-300: #003a0e;--ran-green-400: #004615;--ran-green-500: #006717;--ran-green-600: #00952d;--ran-green-700: #00ac3a;--ran-green-800: #009432;--ran-green-900: #00ca50;--ran-green-1000: #d8ffe4;--ran-color-bg-elevated: var(--ran-gray-100);--ran-color-primary-hover: #cccccc;--ran-color-primary-active: #b3b3b3;--ran-shadow-elevated: 0 1px 2px rgba(0, 0, 0, .16);--ran-shadow-menu: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px -4px rgba(0, 0, 0, .4), 0 16px 24px -8px rgba(0, 0, 0, .5);--ran-shadow-modal: 0 1px 1px rgba(0, 0, 0, .2), 0 8px 16px -4px rgba(0, 0, 0, .4), 0 24px 32px -8px rgba(0, 0, 0, .5)}
|
|
@@ -3,7 +3,7 @@ import { t as x } from "./events-C59wGdni.js";
|
|
|
3
3
|
import { _ as v, i as l, m as C, p as g, s as O } from "./factory-ZNhcQ4tf.js";
|
|
4
4
|
import { a as f, n as _ } from "./ssr-DSGwPtEd.js";
|
|
5
5
|
import { r as E } from "./icon-GZrfSeon.js";
|
|
6
|
-
import "./input-
|
|
6
|
+
import "./input-ZY2Wumze.js";
|
|
7
7
|
import { t as T } from "./arrow-down-Bi5kqUrX.js";
|
|
8
8
|
import "./dropdown-CzGAVWYC.js";
|
|
9
9
|
var L = '.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-select-host-position, relative);display:var(--ran-select-host-display, inline-block);cursor:var(--ran-select-host-cursor, pointer);height:var(--ran-select-host-height, 32px);outline:var(--ran-select-host-outline, 0);-webkit-tap-highlight-color:var(--ran-select-host-tap-highlight-color, transparent)}:host,:host(:focus),:host(:active){outline:var(--ran-select-host-focus-outline, 0);-webkit-tap-highlight-color:transparent}:host ::slotted(r-option){display:var(--ran-select-option-display, none)}:host([disabled]){cursor:var(--ran-select-host-disabled-cursor, not-allowed);pointer-events:var(--ran-select-host-disabled-pointer-events, all);opacity:var(--ran-select-host-disabled-opacity, .6)}:host(:not([disabled]):hover) .ran-select{cursor:var(--ran-select-host-hover-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection{border:var(--ran-select-selection-hover-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):hover) .selection-search{cursor:var(--ran-select-selection-hover-search-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection-item{cursor:var(--ran-select-selection-hover-item-cursor, pointer);color:var(--ran-select-selection-hover-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host([type="text"]) .selection{border:var(--ran-select-selection-text-border, none);background:var(--ran-select-selection-text-background, transparent)}:host([type="text"]) .icon{display:var(--ran-select-icon-text-display, none)}:host(:not([disabled],[type="text"]):focus) .selection{border:var(--ran-select-selection-focus-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):focus) .selection-search{cursor:var(--ran-select-selection-focus-search-cursor, pointer)}:host(:not([disabled],[type="text"]):focus) .selection-item{cursor:var(--ran-select-selection-focus-item-cursor, pointer);color:var(--ran-select-selection-focus-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host .selection-search{display:var(--ran-select-selection-search-display, none)}:host([showSearch]:not([disabled])) .selection-search{cursor:var(--ran-select-selection-search-visible-cursor, text);display:var(--ran-select-selection-search-visible-display, block)}:host([showSearch]:not([disabled])) .selection-item{cursor:var(--ran-select-selection-search-visible-item-cursor, pointer)}:host([showSearch]:not([disabled]):focus) .selection-search{display:var(--ran-select-selection-search-visible-display, block);cursor:var(--ran-select-selection-search-visible-cursor, text);opacity:var(--ran-select-selection-search-visible-opacity, 1)}.ran-select{width:var(--ran-select-root-width, 100%);height:var(--ran-select-root-height, 100%);font-size:var(--ran-select-root-font-size, 14px);box-sizing:var(--ran-select-root-box-sizing, border-box);margin:var(--ran-select-root-margin, 0);padding:var(--ran-select-root-padding, 0);color:var(--ran-select-root-color, var(--ran-color-text, rgba(0, 0, 0, .88)));line-height:var(--ran-select-root-line-height, 1.57142857);list-style:var(--ran-select-root-list-style, none);font-family:var(--ran-select-root-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"));position:var(--ran-select-root-position, relative);display:var(--ran-select-root-display, inline-block)}.ran-select .selection{position:var(--ran-select-selection-position, relative);background-color:var(--ran-select-selection-background-color, var(--ran-color-bg-elevated, #ffffff));background-image:var(--ran-select-selection-background-image, none);border:var(--ran-select-selection-border, 1px solid var(--ran-color-border, #eaeaea));transition:var(--ran-select-selection-transition, none);width:var(--ran-select-selection-width, 100%);height:var(--ran-select-selection-height, 100%);padding:var(--ran-select-selection-padding, 0 11px);box-sizing:var(--ran-select-selection-box-sizing, border-box);margin:var(--ran-select-selection-margin, 0);color:var(--ran-select-selection-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-select-selection-font-size, 14px);line-height:var(--ran-select-selection-line-height, 1.57142857);list-style:var(--ran-select-selection-list-style, none);font-family:var(--ran-select-selection-font-family, inherit);display:var(--ran-select-selection-display, flex);border-radius:var(--ran-select-selection-border-radius, var(--ran-radius-sm, 6px))}.ran-select .selection-search{position:var(--ran-select-selection-search-position, absolute);opacity:var(--ran-select-selection-search-opacity, 0);top:var(--ran-select-selection-search-top, 0);left:var(--ran-select-selection-search-left, 0);height:var(--ran-select-selection-search-height, 100%);inset-inline-start:var(--ran-select-selection-search-inset-inline-start, 11px);inset-inline-end:var(--ran-select-selection-search-inset-inline-end, 11px);margin:var(--ran-select-selection-search-margin, 0);padding:var(--ran-select-selection-search-padding, 0);background:var(--ran-select-selection-search-background, transparent);border:var(--ran-select-selection-search-border, none);outline:var(--ran-select-selection-search-outline, none);appearance:var(--ran-select-selection-search-appearance, none);font-family:var(--ran-select-selection-search-font-family, inherit);cursor:var(--ran-select-selection-search-cursor, not-allowed)}.ran-select .selection-search::-webkit-search-cancel-button{display:var(--ran-select-selection-search-cancel-display, none);-webkit-appearance:var(--ran-select-selection-search-cancel-appearance, none)}.ran-select .selection-search::part(input){border:var(--ran-select-selection-search-input-border, none);padding:var(--ran-select-selection-search-input-padding, 0);height:100%;min-height:100%;box-sizing:border-box;outline:var(--ran-select-selection-search-input-outline, none)}.ran-select .selection-search::part(input):active{border:var(--ran-select-selection-search-input-active-border, none);padding:var(--ran-select-selection-search-input-active-padding, 0);height:var(--ran-select-selection-search-input-active-height, 100%);outline:var(--ran-select-selection-search-input-active-outline, none);border-color:var(--ran-select-selection-search-input-active-border-color, transparent);box-shadow:var(--ran-select-selection-search-input-active-box-shadow, none);border-right-width:var(--ran-select-selection-search-input-active-border-right-width, 0px)}.ran-select .selection-search::part(content){min-height:var(--ran-select-selection-search-input-content-min-height, 0)}.ran-select .selection-item{position:var(--ran-select-selection-item-position, absolute);top:var(--ran-select-selection-item-top, 0);left:var(--ran-select-selection-item-left, 12px);right:var(--ran-select-selection-item-right, 28px);margin:var(--ran-select-selection-item-margin, 0);padding:var(--ran-select-selection-item-padding, 0);background:var(--ran-select-selection-item-background, transparent);border:var(--ran-select-selection-item-border, none);outline:var(--ran-select-selection-item-outline, none);appearance:var(--ran-select-selection-item-appearance, none);font-family:var(--ran-select-selection-item-font-family, inherit);height:var(--ran-select-selection-item-height, 100%);display:var(--ran-select-selection-item-display, flex);align-items:var(--ran-select-selection-item-align-items, center);-webkit-user-select:var(--ran-select-selection-item-user-select, none);user-select:var(--ran-select-selection-item-user-select, none);overflow:var(--ran-select-selection-item-overflow, hidden);white-space:var(--ran-select-selection-item-white-space, nowrap);text-overflow:var(--ran-select-selection-item-text-overflow, ellipsis);cursor:var(--ran-select-selection-item-cursor, pointer)}.ran-select .selection-select{color:var(--ran-select-selection-select-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)))}.ran-select .selection .icon{display:var(--ran-select-selection-icon-display, flex);align-items:var(--ran-select-selection-icon-align-items, center);color:var(--ran-select-selection-icon-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)));font-style:var(--ran-select-selection-icon-font-style, normal);text-align:var(--ran-select-selection-icon-text-align, center);text-transform:var(--ran-select-selection-icon-text-transform, none);text-rendering:var(--ran-select-selection-icon-text-rendering, optimizeLegibility);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:var(--ran-select-selection-icon-position, absolute);top:var(--ran-select-selection-icon-top, 50%);inset-inline-start:var(--ran-select-selection-icon-inset-inline-start, auto);inset-inline-end:var(--ran-select-selection-icon-inset-inline-end, 8px);height:var(--ran-select-selection-icon-height, 16px);transform:var(--ran-select-selection-icon-transform, translateY(-50%));margin-top:var(--ran-select-selection-icon-margin-top, 0);font-size:var(--ran-select-selection-icon-font-size, 12px);pointer-events:var(--ran-select-selection-icon-pointer-events, none)}', P = class extends _ {
|
package/dist/select.js
CHANGED
package/docs/COMPONENTS.md
CHANGED
|
@@ -6,9 +6,9 @@ shape), slots, and `::part()` names — extracted from source. For CSS variables
|
|
|
6
6
|
(theming tokens) see [style-tokens-public.md](./style-tokens-public.md); for
|
|
7
7
|
design rules see [DESIGN.md](./DESIGN.md).
|
|
8
8
|
|
|
9
|
-
Generated at: 2026-07-
|
|
9
|
+
Generated at: 2026-07-19T06:49:49.451Z
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
32 custom elements.
|
|
12
12
|
|
|
13
13
|
## `<r-button>`
|
|
14
14
|
|
|
@@ -21,7 +21,7 @@ Source: `components/button/index.ts`
|
|
|
21
21
|
- `icon: string`
|
|
22
22
|
- `iconSize: string`
|
|
23
23
|
- `sheet: string`
|
|
24
|
-
- `type: string` — Visual variant: `''` (default) | `'primary'`
|
|
24
|
+
- `type: string` — Visual variant: `''` (default) | `'primary'` (monochrome) | `'warning'` | `'text'`. Drives the `:host([type=...])` styles.
|
|
25
25
|
- **Events**: —
|
|
26
26
|
- **Slots**: `default`
|
|
27
27
|
- **Parts**: `button`, `content`
|
|
@@ -100,6 +100,23 @@ Source: `components/form/index.ts`
|
|
|
100
100
|
- **Slots**: `default`, `r-form_content (named)`
|
|
101
101
|
- **Parts**: —
|
|
102
102
|
|
|
103
|
+
## `<r-glass>`
|
|
104
|
+
|
|
105
|
+
Source: `components/glass/index.ts`
|
|
106
|
+
|
|
107
|
+
- **Attributes**: `blur`, `displace: string`, `frequency: string`, `radius: string`, `saturate: string`, `tint: string`
|
|
108
|
+
- **Properties**:
|
|
109
|
+
- `displace: string` — Liquid refraction strength — the SVG displacement scale. `0` is a flat pane.
|
|
110
|
+
- `frequency: string` — Turbulence base frequency — smaller = larger, smoother liquid ripples.
|
|
111
|
+
- `interactive: boolean` — Hover lift + press-scale feedback (for clickable glass).
|
|
112
|
+
- `radius: string` — Corner radius, in px.
|
|
113
|
+
- `saturate: string` — `r-glass` — a liquid / frosted glass surface.
|
|
114
|
+
- `sheen: boolean` — Animated specular sweep across the surface.
|
|
115
|
+
- `tint: string` — Glass fill tint (any CSS background value).
|
|
116
|
+
- **Events**: —
|
|
117
|
+
- **Slots**: `default`
|
|
118
|
+
- **Parts**: `glass`, `specular`
|
|
119
|
+
|
|
103
120
|
## `<r-icon>`
|
|
104
121
|
|
|
105
122
|
Source: `components/icon/index.ts`
|
|
@@ -155,7 +172,7 @@ Source: `components/input/index.ts`
|
|
|
155
172
|
- `status: string` — input 框的状态
|
|
156
173
|
- `step: string` — 当 input 类型为 number 类型时，可以获取 step 属性
|
|
157
174
|
- `type: string` — input 的类型
|
|
158
|
-
- `value: string` — input
|
|
175
|
+
- `value: string` — 聚焦到内部原生 <input>。宿主自身不在 tab 序、也无内建 focus 行为，
|
|
159
176
|
- **Events**: `change` → detail `{ value }` · `input` → detail `{ value }`
|
|
160
177
|
- **Slots**: —
|
|
161
178
|
- **Parts**: `content`, `input`, `label`, `message`
|
|
@@ -190,6 +207,16 @@ Source: `components/math/index.ts`
|
|
|
190
207
|
- **Slots**: —
|
|
191
208
|
- **Parts**: —
|
|
192
209
|
|
|
210
|
+
## `<r-mermaid>`
|
|
211
|
+
|
|
212
|
+
Source: `components/mermaid/index.ts`
|
|
213
|
+
|
|
214
|
+
- **Attributes**: `code: string`, `copy`, `download`, `fullscreen`, `sheet: string`, `theme: string`
|
|
215
|
+
- **Properties**: `code: string`, `copyable: boolean`, `downloadable: boolean`, `fullscreenable: boolean`, `sheet: string`, `theme: string`
|
|
216
|
+
- **Events**: —
|
|
217
|
+
- **Slots**: —
|
|
218
|
+
- **Parts**: `button`, `diagram`, `error`, `menu`, `mermaid`, `toolbar`
|
|
219
|
+
|
|
193
220
|
## `<r-message>`
|
|
194
221
|
|
|
195
222
|
Source: `components/message/index.ts`
|
|
@@ -204,8 +231,17 @@ Source: `components/message/index.ts`
|
|
|
204
231
|
|
|
205
232
|
Source: `components/modal/index.ts`
|
|
206
233
|
|
|
207
|
-
- **Attributes**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
|
|
208
|
-
- **Properties**:
|
|
234
|
+
- **Attributes**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `hide-header`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
|
|
235
|
+
- **Properties**:
|
|
236
|
+
- `autoFocus: boolean`
|
|
237
|
+
- `closable: boolean`
|
|
238
|
+
- `closeOnEsc: boolean`
|
|
239
|
+
- `hideHeader: boolean` — Headerless mode: drops the title bar and its border, leaving only a floating
|
|
240
|
+
- `lockScroll: boolean`
|
|
241
|
+
- `maskClosable: boolean`
|
|
242
|
+
- `open: boolean`
|
|
243
|
+
- `sheet: string`
|
|
244
|
+
- `title: string`
|
|
209
245
|
- **Events**: `afterclose` → detail `{ trigger }` · `afteropen` · `beforeclose` → detail `{ trigger }` · `beforeopen` · `close` → detail `{ trigger }` · `open`
|
|
210
246
|
- **Slots**: `default`, `footer (named)`
|
|
211
247
|
- **Parts**: `body`, `close`, `dialog`, `footer`, `header`, `mask`, `root`, `title`
|
|
@@ -355,4 +391,4 @@ Source: `components/theme-switch/index.ts`
|
|
|
355
391
|
- `value: RanThemeName` — `<r-theme-switch>` — a three-state (system / light / dark) segmented control
|
|
356
392
|
- **Events**: `change` → detail `{ theme }`
|
|
357
393
|
- **Slots**: —
|
|
358
|
-
- **Parts**:
|
|
394
|
+
- **Parts**: `button ${choice}`, `switch`
|
package/docs/DESIGN.md
CHANGED
|
@@ -38,27 +38,26 @@ Scales: `--ran-gray-100..1000`, `--ran-gray-alpha-100..1000` (translucent, layer
|
|
|
38
38
|
|
|
39
39
|
**Use the semantic layer, not the scale, in components:**
|
|
40
40
|
|
|
41
|
-
| Token
|
|
42
|
-
|
|
|
43
|
-
| `--ran-color-bg`
|
|
44
|
-
| `--ran-color-bg-subtle`
|
|
45
|
-
| `--ran-color-bg-elevated`
|
|
46
|
-
| `--ran-color-bg-muted`
|
|
47
|
-
| `--ran-color-bg-hover`
|
|
48
|
-
| `--ran-color-bg-active`
|
|
49
|
-
| `--ran-color-text`
|
|
50
|
-
| `--ran-color-text-secondary`
|
|
51
|
-
| `--ran-color-text-disabled`
|
|
52
|
-
| `--ran-color-border`
|
|
53
|
-
| `--ran-color-border-hover`
|
|
54
|
-
| `--ran-color-border-active`
|
|
55
|
-
| `--ran-color-primary` / `-hover` / `-active`
|
|
56
|
-
| `--ran-color-
|
|
57
|
-
| `--ran-color-
|
|
58
|
-
| `--ran-color-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
**Accent meaning:** blue = primary & links · green = success · amber = warning · red = danger/error. The **contrast** pair is the monochrome "highest-contrast" action (Geist contrast button): black-on-white in light, white-on-black in dark — use it when the primary action should carry no hue.
|
|
41
|
+
| Token | Maps to | Use for |
|
|
42
|
+
| -------------------------------------------- | ------------------------------------- | -------------------------------- |
|
|
43
|
+
| `--ran-color-bg` | background-100 | Page background |
|
|
44
|
+
| `--ran-color-bg-subtle` | background-200 | Subtle page zones |
|
|
45
|
+
| `--ran-color-bg-elevated` | bg-100 / gray-100 (dark) | Cards, surfaces |
|
|
46
|
+
| `--ran-color-bg-muted` | gray-100 | Inset / muted fills |
|
|
47
|
+
| `--ran-color-bg-hover` | gray-200 | Hover background |
|
|
48
|
+
| `--ran-color-bg-active` | gray-300 | Active background |
|
|
49
|
+
| `--ran-color-text` | gray-1000 | Primary text |
|
|
50
|
+
| `--ran-color-text-secondary` | gray-900 | Secondary text |
|
|
51
|
+
| `--ran-color-text-disabled` | gray-700 | Disabled text |
|
|
52
|
+
| `--ran-color-border` | gray-400 | Default border |
|
|
53
|
+
| `--ran-color-border-hover` | gray-500 | Hover border |
|
|
54
|
+
| `--ran-color-border-active` | gray-600 | Active border |
|
|
55
|
+
| `--ran-color-primary` / `-hover` / `-active` | gray-1000 / #383838 / #4d4d4d (flips) | Primary action (monochrome) |
|
|
56
|
+
| `--ran-color-primary-text` | background-100 | Ink on a primary surface (flips) |
|
|
57
|
+
| `--ran-color-success` / `warning` / `danger` | green-700 / amber-700 / red-700 | Status |
|
|
58
|
+
| `--ran-color-link` | blue-700 | Links |
|
|
59
|
+
|
|
60
|
+
**Accent meaning:** the **primary action is monochrome** — `--ran-color-primary` is black-on-white in light, white-on-black in dark (matching Vercel's brand tone), and text/icons on it use `--ran-color-primary-text` (the inverse, which flips too). **Blue** is reserved for **links (`--ran-color-link`) and the focus ring** only · green = success · amber = warning · red = danger/error. There is no separate "contrast" token — primary _is_ the highest-contrast monochrome action.
|
|
62
61
|
|
|
63
62
|
**Light & dark:** same token name, different value. `gray-1000` is `#171717` in light and `#ededed` in dark. Components reference the _semantic name_; dark mode only redefines the base scale (one mixin), and everything re-resolves.
|
|
64
63
|
|
|
@@ -193,7 +192,7 @@ transition: var(--ran-input-transition, none);
|
|
|
193
192
|
|
|
194
193
|
- Use the semantic ranui components (`r-button`, `r-input`, `r-select`, `r-card`, `r-modal`, …) rather than re-building primitives.
|
|
195
194
|
- Theme through **CSS variables**, **`::part()`**, or the **`sheet`** attribute (escape hatch). CSS variables cross Shadow DOM; selectors do not.
|
|
196
|
-
- Component tokens default to semantic tokens: `var(--ran-btn-content-background-color, var(--ran-color-primary, #
|
|
195
|
+
- Component tokens default to semantic tokens: `var(--ran-btn-content-background-color, var(--ran-color-primary, #171717))`.
|
|
197
196
|
- Map states to the color ladder: default → `bg`/`text`; hover → `bg-hover` / `border-hover` / `primary-hover`; active → `bg-active` / `primary-active`; disabled → `text-disabled` + reduced opacity; focus → focus ring.
|
|
198
197
|
- **Interactive cards opt in**: `r-card` only reacts to hover with the `hoverable` attribute (border 400 → 500 + elevated shadow). Non-interactive cards must stay inert — never add hover feedback to something that isn't clickable.
|
|
199
198
|
- **Theme switching UI is a component**: use `<r-theme-switch>` (system / light / dark segmented pill, wired to `setTheme`/localStorage, syncs across instances and updates `theme-color` metas) instead of hand-rolling toggles. Localize with `label` / `label-system` / `label-light` / `label-dark`.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
This file is auto-generated by `bin/generate-style-docs.ts`.
|
|
4
4
|
It is a filtered, public-facing style API view (structural/internal tokens excluded).
|
|
5
5
|
|
|
6
|
-
Generated at: 2026-07-
|
|
6
|
+
Generated at: 2026-07-19T06:49:49.075Z
|
|
7
7
|
|
|
8
8
|
## Components
|
|
9
9
|
|
|
@@ -14,7 +14,7 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
14
14
|
|
|
15
15
|
#### Tokens
|
|
16
16
|
|
|
17
|
-
<!-- layers: semantic:
|
|
17
|
+
<!-- layers: semantic: 13 · skin: 2 · component: 38 · internal: 1 -->
|
|
18
18
|
|
|
19
19
|
- `--ran-btn-after-background-image`
|
|
20
20
|
- `--ran-btn-after-opacity`
|
|
@@ -28,6 +28,7 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
28
28
|
- `--ran-btn-contain-user-select`
|
|
29
29
|
- `--ran-btn-content-active-background-color`
|
|
30
30
|
- `--ran-btn-content-active-border-color`
|
|
31
|
+
- `--ran-btn-content-active-transform`
|
|
31
32
|
- `--ran-btn-content-align-items`
|
|
32
33
|
- `--ran-btn-content-background-color`
|
|
33
34
|
- `--ran-btn-content-background-image`
|
|
@@ -46,6 +47,7 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
46
47
|
- `--ran-btn-content-padding`
|
|
47
48
|
- `--ran-btn-content-text-align`
|
|
48
49
|
- `--ran-btn-content-text-border`
|
|
50
|
+
- `--ran-btn-content-transition`
|
|
49
51
|
- `--ran-btn-content-warning-background-color`
|
|
50
52
|
- `--ran-btn-content-warning-border-color`
|
|
51
53
|
- `--ran-btn-content-warning-color`
|
|
@@ -55,18 +57,16 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
55
57
|
- `--ran-color-bg-elevated`
|
|
56
58
|
- `--ran-color-border`
|
|
57
59
|
- `--ran-color-border-hover`
|
|
58
|
-
- `--ran-color-contrast-`
|
|
59
|
-
- `--ran-color-contrast-bg`
|
|
60
|
-
- `--ran-color-contrast-bg-active`
|
|
61
|
-
- `--ran-color-contrast-bg-hover`
|
|
62
|
-
- `--ran-color-contrast-text`
|
|
63
60
|
- `--ran-color-danger`
|
|
64
61
|
- `--ran-color-primary`
|
|
65
62
|
- `--ran-color-primary-active`
|
|
66
63
|
- `--ran-color-primary-hover`
|
|
64
|
+
- `--ran-color-primary-text`
|
|
67
65
|
- `--ran-color-text`
|
|
68
66
|
- `--ran-gray-alpha-400`
|
|
69
67
|
- `--ran-motion-duration-base`
|
|
68
|
+
- `--ran-motion-ease-spring`
|
|
69
|
+
- `--ran-motion-ease-standard`
|
|
70
70
|
- `--ran-radius-sm`
|
|
71
71
|
- `--ran-skin-font-family`
|
|
72
72
|
- `--ran-skin-raised-shadow`
|
|
@@ -78,12 +78,12 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
78
78
|
|
|
79
79
|
### `card`
|
|
80
80
|
|
|
81
|
-
- Tokens:
|
|
81
|
+
- Tokens: 20
|
|
82
82
|
- Parts: 7
|
|
83
83
|
|
|
84
84
|
#### Tokens
|
|
85
85
|
|
|
86
|
-
<!-- layers: semantic:
|
|
86
|
+
<!-- layers: semantic: 7 · skin: 1 · internal: 12 -->
|
|
87
87
|
|
|
88
88
|
- `--ran-card-background`
|
|
89
89
|
- `--ran-card-border-color`
|
|
@@ -102,7 +102,6 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
102
102
|
- `--ran-color-border-hover`
|
|
103
103
|
- `--ran-color-text`
|
|
104
104
|
- `--ran-color-text-secondary`
|
|
105
|
-
- `--ran-motion-duration-base`
|
|
106
105
|
- `--ran-radius-md`
|
|
107
106
|
- `--ran-shadow-elevated`
|
|
108
107
|
- `--ran-skin-border-style`
|
|
@@ -119,12 +118,12 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
119
118
|
|
|
120
119
|
### `checkbox`
|
|
121
120
|
|
|
122
|
-
- Tokens:
|
|
121
|
+
- Tokens: 40
|
|
123
122
|
- Parts: 5
|
|
124
123
|
|
|
125
124
|
#### Tokens
|
|
126
125
|
|
|
127
|
-
<!-- layers: semantic:
|
|
126
|
+
<!-- layers: semantic: 7 · skin: 1 · component: 31 · internal: 1 -->
|
|
128
127
|
|
|
129
128
|
- `--ran-blue-400`
|
|
130
129
|
- `--ran-checkbox-border-radius`
|
|
@@ -156,12 +155,15 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
156
155
|
- `--ran-checkbox-label-font-family`
|
|
157
156
|
- `--ran-checkbox-label-font-size`
|
|
158
157
|
- `--ran-checkbox-label-gap`
|
|
158
|
+
- `--ran-checkbox-pop-animation`
|
|
159
159
|
- `--ran-checkbox-white-space`
|
|
160
160
|
- `--ran-color-bg-elevated`
|
|
161
161
|
- `--ran-color-bg-muted`
|
|
162
162
|
- `--ran-color-border`
|
|
163
163
|
- `--ran-color-primary`
|
|
164
164
|
- `--ran-color-text`
|
|
165
|
+
- `--ran-motion-duration-base`
|
|
166
|
+
- `--ran-motion-ease-bouncy`
|
|
165
167
|
- `--ran-skin-font-family`
|
|
166
168
|
|
|
167
169
|
#### Parts
|
|
@@ -251,6 +253,36 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
251
253
|
|
|
252
254
|
- (none)
|
|
253
255
|
|
|
256
|
+
### `glass`
|
|
257
|
+
|
|
258
|
+
- Tokens: 15
|
|
259
|
+
- Parts: 2
|
|
260
|
+
|
|
261
|
+
#### Tokens
|
|
262
|
+
|
|
263
|
+
<!-- layers: semantic: 3 · internal: 12 -->
|
|
264
|
+
|
|
265
|
+
- `--ran-glass-blur`
|
|
266
|
+
- `--ran-glass-border`
|
|
267
|
+
- `--ran-glass-brightness`
|
|
268
|
+
- `--ran-glass-radius`
|
|
269
|
+
- `--ran-glass-refraction`
|
|
270
|
+
- `--ran-glass-saturate`
|
|
271
|
+
- `--ran-glass-shadow`
|
|
272
|
+
- `--ran-glass-sheen-duration`
|
|
273
|
+
- `--ran-glass-specular`
|
|
274
|
+
- `--ran-glass-specular-opacity`
|
|
275
|
+
- `--ran-glass-tint`
|
|
276
|
+
- `--ran-glass-transition`
|
|
277
|
+
- `--ran-motion-duration-base`
|
|
278
|
+
- `--ran-motion-duration-fast`
|
|
279
|
+
- `--ran-motion-ease-spring`
|
|
280
|
+
|
|
281
|
+
#### Parts
|
|
282
|
+
|
|
283
|
+
- `glass`
|
|
284
|
+
- `specular`
|
|
285
|
+
|
|
254
286
|
### `icon`
|
|
255
287
|
|
|
256
288
|
- Tokens: 7
|
|
@@ -287,12 +319,12 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
287
319
|
|
|
288
320
|
### `input`
|
|
289
321
|
|
|
290
|
-
- Tokens:
|
|
322
|
+
- Tokens: 83
|
|
291
323
|
- Parts: 4
|
|
292
324
|
|
|
293
325
|
#### Tokens
|
|
294
326
|
|
|
295
|
-
<!-- layers: semantic:
|
|
327
|
+
<!-- layers: semantic: 10 · skin: 1 · component: 71 · internal: 1 -->
|
|
296
328
|
|
|
297
329
|
- `--ran-blue-400`
|
|
298
330
|
- `--ran-color-bg-elevated`
|
|
@@ -375,7 +407,6 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
375
407
|
- `--ran-input-status-error-border-color`
|
|
376
408
|
- `--ran-input-status-warning-border-color`
|
|
377
409
|
- `--ran-input-transition`
|
|
378
|
-
- `--ran-motion-duration-base`
|
|
379
410
|
- `--ran-radius-sm`
|
|
380
411
|
- `--ran-skin-font-family`
|
|
381
412
|
|
|
@@ -436,6 +467,42 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
436
467
|
|
|
437
468
|
- (none)
|
|
438
469
|
|
|
470
|
+
### `mermaid`
|
|
471
|
+
|
|
472
|
+
- Tokens: 17
|
|
473
|
+
- Parts: 6
|
|
474
|
+
|
|
475
|
+
#### Tokens
|
|
476
|
+
|
|
477
|
+
<!-- layers: semantic: 8 · internal: 9 -->
|
|
478
|
+
|
|
479
|
+
- `--ran-color-bg-elevated`
|
|
480
|
+
- `--ran-color-bg-muted`
|
|
481
|
+
- `--ran-color-primary`
|
|
482
|
+
- `--ran-color-text`
|
|
483
|
+
- `--ran-color-text-secondary`
|
|
484
|
+
- `--ran-mermaid-button-color`
|
|
485
|
+
- `--ran-mermaid-button-hover-background`
|
|
486
|
+
- `--ran-mermaid-button-hover-color`
|
|
487
|
+
- `--ran-mermaid-button-size`
|
|
488
|
+
- `--ran-mermaid-error-color`
|
|
489
|
+
- `--ran-mermaid-menu-item-color`
|
|
490
|
+
- `--ran-mermaid-toolbar-background`
|
|
491
|
+
- `--ran-mermaid-toolbar-gap`
|
|
492
|
+
- `--ran-mermaid-toolbar-shadow`
|
|
493
|
+
- `--ran-radius-md`
|
|
494
|
+
- `--ran-radius-sm`
|
|
495
|
+
- `--ran-shadow-menu`
|
|
496
|
+
|
|
497
|
+
#### Parts
|
|
498
|
+
|
|
499
|
+
- `button`
|
|
500
|
+
- `diagram`
|
|
501
|
+
- `error`
|
|
502
|
+
- `menu`
|
|
503
|
+
- `mermaid`
|
|
504
|
+
- `toolbar`
|
|
505
|
+
|
|
439
506
|
### `message`
|
|
440
507
|
|
|
441
508
|
- Tokens: 28
|
|
@@ -785,12 +852,12 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
785
852
|
|
|
786
853
|
### `select/dropdown-item`
|
|
787
854
|
|
|
788
|
-
- Tokens:
|
|
855
|
+
- Tokens: 19
|
|
789
856
|
- Parts: 2
|
|
790
857
|
|
|
791
858
|
#### Tokens
|
|
792
859
|
|
|
793
|
-
<!-- layers: semantic:
|
|
860
|
+
<!-- layers: semantic: 2 · component: 15 · internal: 2 -->
|
|
794
861
|
|
|
795
862
|
- `--ran-blue-100`
|
|
796
863
|
- `--ran-color-text`
|
|
@@ -810,7 +877,6 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
810
877
|
- `--ran-dropdown-option-item-hover-background-color`
|
|
811
878
|
- `--ran-dropdown-option-item-transition`
|
|
812
879
|
- `--ran-gray-alpha-100`
|
|
813
|
-
- `--ran-motion-duration-base`
|
|
814
880
|
- `--ran-radius-sm`
|
|
815
881
|
|
|
816
882
|
#### Parts
|
|
@@ -895,19 +961,18 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
895
961
|
|
|
896
962
|
### `theme-switch`
|
|
897
963
|
|
|
898
|
-
- Tokens:
|
|
899
|
-
- Parts:
|
|
964
|
+
- Tokens: 18
|
|
965
|
+
- Parts: 2
|
|
900
966
|
|
|
901
967
|
#### Tokens
|
|
902
968
|
|
|
903
|
-
<!-- layers: semantic:
|
|
969
|
+
<!-- layers: semantic: 6 · skin: 1 · internal: 11 -->
|
|
904
970
|
|
|
905
971
|
- `--ran-color-bg-hover`
|
|
906
972
|
- `--ran-color-border`
|
|
907
973
|
- `--ran-color-primary`
|
|
908
974
|
- `--ran-color-text`
|
|
909
975
|
- `--ran-color-text-secondary`
|
|
910
|
-
- `--ran-motion-duration-fast`
|
|
911
976
|
- `--ran-radius-full`
|
|
912
977
|
- `--ran-skin-border-style`
|
|
913
978
|
- `--ran-theme-switch-`
|
|
@@ -924,4 +989,5 @@ Generated at: 2026-07-11T05:42:37.197Z
|
|
|
924
989
|
|
|
925
990
|
#### Parts
|
|
926
991
|
|
|
927
|
-
-
|
|
992
|
+
- `button ${choice}`
|
|
993
|
+
- `switch`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ranui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1-alpha.1",
|
|
4
4
|
"description": "A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|