ranui 0.2.1-alpha.4 → 0.2.1-alpha.5

package/dist/index.js

@@ -2,21 +2,21 @@ import { t as o } from "./button-Cj-XSCsd.js";
 import { a, i as m, n as e, o as s, r as i, t as p } from "./theme-kOWZbKCq.js";
 import { i as f, n as c, r as T, t as h } from "./icon-GZrfSeon.js";
 import { t as P } from "./image-CqoQfJoV.js";
-import { t as S } from "./input-BlwAXu7I.js";
+import { t as S } from "./input-ZY2Wumze.js";
 import { t as R } from "./message-CNdmbeLf.js";
 import { t as u } from "./skeleton-D7JIbROq.js";
 import { t as d } from "./tabpane-C3qZGN-D.js";
 import { t as N } from "./tab-DFVtDJb2.js";
 import { t as E } from "./radar-Bg0cexzU.js";
 import { t as b } from "./modal-gRagDkTb.js";
-import { t as L } from "./select-BIFVbQIj.js";
+import { t as L } from "./select-DRKYa3W2.js";
 import { n as w, t as x } from "./dropdown-CzGAVWYC.js";
 import { t as y } from "./math-8E-45Y8e.js";
 import { t as v } from "./mermaid-C1oQyPE3.js";
-import { n as F } from "./player-CAQ5Og2P.js";
+import { n as F } from "./player-BkkmkqR4.js";
 import { t as V } from "./progress-vk40tuhm.js";
 import { t as j } from "./checkbox-O_J_n1_W.js";
-import { t as z } from "./colorpicker-mebH0XLm.js";
+import { t as z } from "./colorpicker-CKA4xN-g.js";
 import { n as J, t as K } from "./popover-BZKSLe3D.js";
 import { n as X, t as Z } from "./loading-M6gWxLbm.js";
 import { t as rr } from "./form-B8afuJlF.js";

package/dist/{input-BlwAXu7I.js → input-ZY2Wumze.js}

@@ -42,6 +42,15 @@ var m = `.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     const t = p(this._shadowDom, ".ran-input", () => a().class("ran-input").part("input").children(b().class("ran-input-content").part("content")).build());
     this._input = t, this._inputContent = t.querySelector(".ran-input-content"), this._inputContent.id || (this._inputContent.id = `ran-input-${++f}`);
   }
+  focus(t) {
+    this._inputContent?.focus(t);
+  }
+  blur() {
+    this._inputContent?.blur();
+  }
+  select() {
+    this._inputContent?.select?.();
+  }
   get value() {
     return this.getAttribute("value") || "";
   }

package/dist/input.js

@@ -1,4 +1,4 @@
-import { t as a } from "./input-BlwAXu7I.js";
+import { t as a } from "./input-ZY2Wumze.js";
 export {
   a as Input,
   a as default

package/dist/{player-CAQ5Og2P.js → player-BkkmkqR4.js}

@@ -2,7 +2,7 @@ import { t as Oo } from "./rolldown-runtime-9ZSF5uba.js";
 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";
 import { _ as Bt, i as ie } from "./factory-ZNhcQ4tf.js";
 import { a as Ko, t as Yo } from "./ssr-DSGwPtEd.js";
-import "./select-BIFVbQIj.js";
+import "./select-DRKYa3W2.js";
 var Go = /* @__PURE__ */ Oo(((y, b) => {
   (function O(H) {
     var _ = this, $ = function() {

package/dist/player.js

@@ -1,4 +1,4 @@
-import { n as e, t as r } from "./player-CAQ5Og2P.js";
+import { n as e, t as r } from "./player-BkkmkqR4.js";
 export {
   r as RanPlayer,
   e as default

package/dist/{select-BIFVbQIj.js → select-DRKYa3W2.js}

@@ -3,7 +3,7 @@ import { t as x } from "./events-C59wGdni.js";
 import { _ as v, i as l, m as C, p as g, s as O } from "./factory-ZNhcQ4tf.js";
 import { a as f, n as _ } from "./ssr-DSGwPtEd.js";
 import { r as E } from "./icon-GZrfSeon.js";
-import "./input-BlwAXu7I.js";
+import "./input-ZY2Wumze.js";
 import { t as T } from "./arrow-down-Bi5kqUrX.js";
 import "./dropdown-CzGAVWYC.js";
 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

@@ -1,4 +1,4 @@
-import { t as e } from "./select-BIFVbQIj.js";
+import { t as e } from "./select-DRKYa3W2.js";
 export {
   e as Select,
   e as default

package/docs/COMPONENTS.md

@@ -6,9 +6,9 @@ shape), slots, and `::part()` names — extracted from source. For CSS variables
 (theming tokens) see [style-tokens-public.md](./style-tokens-public.md); for
 design rules see [DESIGN.md](./DESIGN.md).
 
-Generated at: 2026-07-12T08:47:20.080Z
+Generated at: 2026-07-19T06:15:56.300Z
 
-30 custom elements.
+32 custom elements.
 
 ## `<r-button>`
 
@@ -100,6 +100,23 @@ Source: `components/form/index.ts`
 - **Slots**: `default`, `r-form_content (named)`
 - **Parts**: —
 
+## `<r-glass>`
+
+Source: `components/glass/index.ts`
+
+- **Attributes**: `blur`, `displace: string`, `frequency: string`, `radius: string`, `saturate: string`, `tint: string`
+- **Properties**:
+  - `displace: string` — Liquid refraction strength — the SVG displacement scale. `0` is a flat pane.
+  - `frequency: string` — Turbulence base frequency — smaller = larger, smoother liquid ripples.
+  - `interactive: boolean` — Hover lift + press-scale feedback (for clickable glass).
+  - `radius: string` — Corner radius, in px.
+  - `saturate: string` — `r-glass` — a liquid / frosted glass surface.
+  - `sheen: boolean` — Animated specular sweep across the surface.
+  - `tint: string` — Glass fill tint (any CSS background value).
+- **Events**: —
+- **Slots**: `default`
+- **Parts**: `glass`, `specular`
+
 ## `<r-icon>`
 
 Source: `components/icon/index.ts`
@@ -155,7 +172,7 @@ Source: `components/input/index.ts`
   - `status: string` — input 框的状态
   - `step: string` — 当 input 类型为 number 类型时，可以获取 step 属性
   - `type: string` — input 的类型
-  - `value: string` — input 的值
+  - `value: string` — 聚焦到内部原生 <input>。宿主自身不在 tab 序、也无内建 focus 行为，
 - **Events**: `change` → detail `{ value }` · `input` → detail `{ value }`
 - **Slots**: —
 - **Parts**: `content`, `input`, `label`, `message`
@@ -190,6 +207,16 @@ Source: `components/math/index.ts`
 - **Slots**: —
 - **Parts**: —
 
+## `<r-mermaid>`
+
+Source: `components/mermaid/index.ts`
+
+- **Attributes**: `code: string`, `copy`, `download`, `fullscreen`, `sheet: string`, `theme: string`
+- **Properties**: `code: string`, `copyable: boolean`, `downloadable: boolean`, `fullscreenable: boolean`, `sheet: string`, `theme: string`
+- **Events**: —
+- **Slots**: —
+- **Parts**: `button`, `diagram`, `error`, `menu`, `mermaid`, `toolbar`
+
 ## `<r-message>`
 
 Source: `components/message/index.ts`
@@ -204,8 +231,17 @@ Source: `components/message/index.ts`
 
 Source: `components/modal/index.ts`
 
-- **Attributes**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
-- **Properties**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
+- **Attributes**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `hide-header`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
+- **Properties**:
+  - `autoFocus: boolean`
+  - `closable: boolean`
+  - `closeOnEsc: boolean`
+  - `hideHeader: boolean` — Headerless mode: drops the title bar and its border, leaving only a floating
+  - `lockScroll: boolean`
+  - `maskClosable: boolean`
+  - `open: boolean`
+  - `sheet: string`
+  - `title: string`
 - **Events**: `afterclose` → detail `{ trigger }` · `afteropen` · `beforeclose` → detail `{ trigger }` · `beforeopen` · `close` → detail `{ trigger }` · `open`
 - **Slots**: `default`, `footer (named)`
 - **Parts**: `body`, `close`, `dialog`, `footer`, `header`, `mask`, `root`, `title`
@@ -355,4 +391,4 @@ Source: `components/theme-switch/index.ts`
   - `value: RanThemeName` — `<r-theme-switch>` — a three-state (system / light / dark) segmented control
 - **Events**: `change` → detail `{ theme }`
 - **Slots**: —
-- **Parts**: —
+- **Parts**: `button ${choice}`, `switch`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.2.1-alpha.4",
+  "version": "0.2.1-alpha.5",
   "description": "A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",