ranui 0.2.0-alpha.7 → 0.2.1-alpha.3

package/docs/BUILDER.md

@@ -0,0 +1,383 @@
+# ranui Builder — fluent DOM + fine-grained reactivity
+
+`ranui/builder` is a framework-free way to build DOM declaratively with
+SwiftUI/Solid-style fine-grained reactivity. No virtual DOM, no re-render of a
+whole tree — a signal change updates only the exact node bound to it.
+
+> **Principle: build once, update in place.** A view function runs once; state
+> changes flow through fine-grained bindings, never by re-running the view. Pick
+> the primitive that matches the shape — value → getter binding; conditional →
+> [`Show`](#conditionals--show) / [`Switch`](#multi-branch--switch--match); list →
+> [`For`](#keyed-lists--for) / [`Index`](#index-lists--index). A raw getter child
+> is the coarse fallback (rebuilds its whole region on any read).
+
+```ts
+import {
+  View,
+  Div,
+  Span,
+  ButtonBuilder, // element factories
+  signal,
+  computed,
+  createEffect,
+  batch,
+  untrack, // reactivity
+  createRoot,
+  onCleanup,
+  getOwner,
+  runWithOwner, // ownership
+  EventManager, // lifecycle-scoped events
+} from 'ranui/builder';
+```
+
+The builder does **not** register custom elements. To use `<r-button>` etc.,
+also import the component subpath once: `import 'ranui/button'`.
+
+---
+
+## 1. Elements
+
+Factories return an `ElementBuilder` (chainable). `build()` returns the DOM node.
+
+```ts
+const box = Div().class('card').text('hi').build();
+
+const submit = View('r-button') // any tag, incl. custom elements
+  .attr('type', 'primary')
+  .text('Save')
+  .on('click', onSave)
+  .build();
+```
+
+Factories: `View(tag)`, `Div`, `Span`, `Slot`, `ButtonBuilder`, `InputBuilder`,
+`Label`, `Ul`, `Li`, `Section`, `Article`, `Nav`, `Header`, `Footer`, `Main`,
+`Style`, `DeclarativeShadow`. For anything else use `View('tag')`.
+
+### Chainable API
+
+| Group          | Methods                                                                                                     |
+| -------------- | ----------------------------------------------------------------------------------------------------------- |
+| Identity/class | `id(v)`, `class(v)`, `addClass(...v)`, `removeClass(...v)`                                                  |
+| Attributes     | `attr(name, v)`, `attrs({...})`, `boolAttr(name, on, enabledValue?)`, `part(v)`, `data(key, v)`             |
+| Style          | `style(prop, v)` / `style({...})`, `cssVar(name, v)`                                                        |
+| A11y           | `aria(key, v)`, `role(v)`, `tabIndex(n)`, `label(v)`, `labelledBy(id)`, `describedBy(id)`, `ariaHidden(b?)` |
+| Content        | `text(v)`, `children(...nodes)`, `replaceChildren(...nodes)`                                                |
+| Refs/shadow    | `ref(holder)`, `shadow(opts?)` → `ShadowBuilder`                                                            |
+| Terminal       | `build()`, `serialize()` (SSR HTML string)                                                                  |
+
+`children()` accepts elements, strings, other `ElementBuilder`s, arrays,
+`null`/`undefined` (skipped), **and getters `() => …`** (reactive regions, see
+[Reactive children](#reactive-children)) — nest freely:
+
+```ts
+Ul()
+  .class('list')
+  .children(
+    items.map((it) => Li().text(it.name)),
+    extra && Li().text('extra'),
+  )
+  .build();
+```
+
+### Events
+
+```ts
+.on(type, handler, options?)      // permanent listener (element lifetime)
+.listen(manager, type, handler)   // lifecycle-managed (removed via manager.abort())
+.delegate(manager, selector, type, handler) // event delegation on a container
+```
+
+### Refs (incl. imperative custom-element methods)
+
+`createRef<T>()` + `.ref(holder)` capture the built element. For a custom
+element with imperative methods, **type the ref with the component's element
+class** (each component exports it) — then its methods are typed, no cast:
+
+```ts
+import { Popover } from 'ranui'; // the element class
+import { View, createRef } from 'ranui/builder';
+
+const ref = createRef<Popover>();
+View<Popover>('r-popover').attr('trigger', 'click').ref(ref).children(/* … */).build();
+ref.current?.closePopover(); // typed method, no `as` cast
+```
+
+---
+
+## 2. Reactivity
+
+```ts
+const [count, setCount] = signal(0);
+count(); // read (tracked inside effects/memos)
+setCount(1); // write; setCount(n => n + 1) also works
+setCount(1); // no-op if unchanged (Object.is; override via signal(v, { equals }))
+
+const double = computed(() => count() * 2); // LAZY + memoized: recomputes only
+double(); // when read after a dep changed
+// A memo re-notifies its readers only when its VALUE changes (override the
+// comparison via computed(fn, { equals })), so effects behind a stable memo sleep.
+
+const dispose = createEffect(() => {
+  // runs now + on every dependency change
+  console.log(count());
+  return () => {
+    /* optional cleanup, runs before re-run and on dispose */
+  };
+});
+
+batch(() => {
+  setCount(1);
+  setName('x');
+}); // one flush, effects deduped
+untrack(() => count()); // read without subscribing
+```
+
+- **`computed` is lazy** — an unread memo never recomputes. Diamond dependencies
+  run a dependent effect **once** per change, not once per path.
+- **Effects auto-track**: only signals actually read on the latest run are
+  subscribed (conditionals never leave stale subscriptions).
+- **Cyclic guard**: an effect that writes a signal it reads throws instead of
+  looping forever.
+
+### Reactive bindings
+
+Any of `text`, `attr`, `class`, `boolAttr`, `style`, `part`, `data`, `aria`,
+`role`, `label` accepts a **getter** — pass a signal (or `computed`) and the
+attribute/text updates itself, no manual effect:
+
+```ts
+const [label, setLabel] = signal('Connect');
+const btn = View('r-button').text(label).build(); // updates when setLabel(...) runs
+
+const [active, setActive] = signal(true);
+Div()
+  .class(() => (active() ? 'row active' : 'row')) // recomputes on toggle
+  .boolAttr('disabled', () => !active())
+  .build();
+```
+
+### Reactive children
+
+`children()` / `replaceChildren()` also take a **getter** as any argument. The
+getter marks a live region: it re-runs when a signal it reads changes, replacing
+the region — no `createRef` + `createEffect` + `replaceChildren` boilerplate.
+Return a node, a `null` (conditional), or an array (list). Static siblings around
+the getter keep their position.
+
+> **Semantics — this is a full rebuild, not a keyed diff.** On each change the
+> whole region is torn down and re-created; there is no per-item keying, and it
+> re-runs on **every** change the getter reads — even one that doesn't alter the
+> result. It is the coarse escape hatch. Prefer the fine-grained primitives:
+> [`Show`](#conditionals--show) for conditionals (rebuilds only when the branch
+> flips) and [`For`](#keyed-lists--for) for lists (reuses nodes by key). Reach for
+> a raw getter only for content whose shape genuinely changes on every update.
+
+### Conditionals — `Show`
+
+`Show` is a **fine-grained** conditional: it rebuilds a branch only when the
+_truthiness_ of `when` flips, not on every change `when` reads. Content inside a
+branch updates through its own bindings — the branch is built once. (A raw getter
+child, by contrast, tears down and rebuilds on every dependency tick.)
+
+```ts
+import { Show } from 'ranui/builder';
+
+Div().children(
+  Show({
+    when: () => user(), // reads a signal
+    children: (u) => Span().text(() => u().name), // built once; text updates in place
+    fallback: () => Span().text('Signed out'), // optional
+  }),
+);
+```
+
+`children` gets an accessor to the narrowed truthy value — read it inside a
+binding so it updates without rebuilding. `Show` returns a getter, so it slots
+into `children()` anywhere.
+
+### Multi-branch — `Switch` / `Match`
+
+`Switch` is the n-way `Show`: it renders the **first** `Match` whose `when` is
+truthy (else `fallback`), and is equally fine-grained — only the _index_ of the
+winning branch is memoized, so it rebuilds only when the active branch changes.
+Evaluation short-circuits at the first match.
+
+```ts
+import { Switch, Match } from 'ranui/builder';
+
+Div().children(
+  Switch({
+    fallback: () => Span().text('idle'),
+    children: [
+      Match({ when: () => status() === 'loading', children: () => Spinner() }),
+      Match({ when: () => error(), children: (e) => ErrorView(e) }), // e: accessor to the truthy value
+    ],
+  }),
+);
+```
+
+```ts
+// Conditional — toggles a node in/out between static siblings
+Div().children(Header().text('H'), () => (open() ? Div().class('panel').text('body') : null), Footer().text('F'));
+
+// List — reconciles as the array changes
+Ul().children(() => rows().map((r) => Li().text(r.title)));
+```
+
+On **SSR** a getter is evaluated once (static snapshot); reactivity is a
+client-only concern. Like all bindings, reactive children must be built inside a
+`createRoot` so their effects are owned and disposed with the page (see §3 Ownership).
+
+### Keyed lists — `For`
+
+For lists that add/remove/reorder, `For` matches items by `key` and **reuses
+their DOM nodes** — only changed items touch the DOM, so focus, scroll, input
+values and transitions inside surviving rows are preserved (a plain getter child
+would rebuild all of them). Pass the handle straight to `children()`.
+
+```ts
+import { For } from 'ranui/builder';
+
+const [rows, setRows] = signal([{ id: 1, title: 'a' }]);
+
+Ul().children(
+  For({
+    each: () => rows(), // reactive source array
+    key: (r) => r.id, // stable, UNIQUE identity per item
+    render: (r, index) => Li().text(() => `${index()}. ${r.title}`),
+  }),
+);
+```
+
+- `key` **must be unique** — it is how a node is matched to its item across
+  updates. A duplicate key is ignored (only the first item with it renders) and
+  warned in dev. (Don't use the array index as the key — that defeats reuse on
+  reorder.)
+- `each` reads a signal, so update it with a **new array** (`setRows([...])`).
+  Mutating the same array in place and re-setting it is skipped (`Object.is`
+  equality), and the list won't update.
+- `render` runs **once per item**, not on every list change. Drive per-row
+  updates with signals (e.g. `.text(() => …)`); `index` is a **getter** so it
+  stays correct after reorders.
+- Removing an item disposes that row's scope (its effects/cleanups). The whole
+  list is disposed with its owning `createRoot`.
+- **SSR**: rendered once as a static snapshot (no reconciliation).
+
+### Index lists — `Index`
+
+`Index` is the position-keyed counterpart to `For`: the node at index `i` is
+reused across updates and its **item is a signal** — when the value at that
+position changes, it updates in place (the node is not rebuilt); nodes never
+move. Use it when position is the identity (primitive arrays, fixed rows); use
+`For` when items have a stable id and can reorder.
+
+```ts
+import { Index } from 'ranui/builder';
+
+Ul().children(
+  Index({
+    each: () => nums(),
+    render: (n, i) => Li().text(() => `${i}: ${n()}`), // n is an accessor; i is a fixed number
+  }),
+);
+```
+
+Rule of thumb: **`Show`/`Switch` for conditionals; `For` (keyed by id) or `Index`
+(keyed by position) for lists; a raw getter child only for content that changes
+shape on every update.**
+
+A getter binding creates an effect **owned by the current scope** (see below), so
+it is cleaned up automatically when that scope is disposed. Reactivity applies to
+the single-value forms — `style(prop, getter)`, not the `style({...})` /
+`attrs({...})` map forms, which apply once. A getter dropped into a map is called
+once and never re-runs.
+
+---
+
+## 3. Ownership — the key to leak-free apps (and MPAs)
+
+Every effect/memo (including reactive bindings) is owned by the scope that
+created it. Disposing a scope disposes everything under it — nested effects,
+bindings, and `onCleanup` callbacks.
+
+```ts
+import { createRoot, onCleanup } from 'ranui/builder';
+
+const dispose = createRoot((dispose) => {
+  const el = Div().text(msg).build(); // this binding is owned by the root
+  onCleanup(() => console.log('torn down'));
+  mount(el);
+  return dispose;
+});
+
+// later:
+dispose(); // removes the binding's effect + runs cleanups
+```
+
+Build reactive UI **inside a `createRoot`**. Bindings created with no owner still
+work but won't auto-dispose (dispose them manually).
+
+> **Inside a Web Component?** A component's `constructor`/`connectedCallback` are
+> _not_ reactive scopes, so a getter binding or `createEffect` created there is
+> orphaned (never disposed). Don't use getter bindings in component code — build
+> with plain values and drive updates with explicit `createEffect`s whose dispose
+> functions you collect and call in `disconnectedCallback`, re-arming on reconnect.
+> See the ranui component guide (`CLAUDE.md` → "Using reactivity inside a component").
+
+### Multi-page / SPA pattern
+
+Give each page/route its own root and dispose it on navigation — every effect,
+binding, timer, and listener that page created is torn down in one call:
+
+```ts
+let disposePage: (() => void) | null = null;
+
+function showPage(render: (host: HTMLElement) => void, host: HTMLElement) {
+  disposePage?.(); // tear down the previous page
+  disposePage = createRoot((dispose) => {
+    render(host); // effects/bindings register to this root
+    return dispose;
+  });
+}
+```
+
+ranui's `<r-route>` has this built in. Two modes:
+
+- **Static (default)** — slotted content, shown/hidden by URL; all routes stay in
+  the DOM (great for SSG — every page is pre-rendered): `<r-route path="/a">…</r-route>`.
+- **Lazy (`src`)** — code-split, mount on match / unmount on leave:
+  `<r-route path="/a" src="/pages/a.js">`. On match the module is dynamically
+  imported and its `default: (host) => void | (() => void)` render runs **inside a
+  `createRoot`**; on leave that root is disposed — every effect, binding, and
+  `onCleanup` the page registered is torn down automatically. The per-page-lifecycle
+  mode for larger multi-page apps (client-rendered).
+
+`getOwner()` / `runWithOwner()` let a router capture and restore a scope across
+async boundaries.
+
+---
+
+## 4. Web-component listeners — `EventManager`
+
+For listeners inside a custom element, use `EventManager` (backed by
+`AbortController`) so `disconnectedCallback` removes them all at once:
+
+```ts
+private events = new EventManager();
+connectedCallback() {
+  this.events
+    .on(this.input, 'input', this.onInput)
+    .delegate(this, '[data-action]', 'click', (e, el) => this.run(el.dataset.action));
+}
+disconnectedCallback() { this.events.abort(); } // resets for the next connect
+```
+
+---
+
+## Notes
+
+- **SSR**: builders work under `defineSSR` / `renderToString`; `build()` returns a
+  mock node, `serialize()` returns HTML. Reactive bindings run once during SSR.
+- **Components vs builder**: use registered `<r-*>` elements (see
+  [COMPONENTS.md](./COMPONENTS.md)) for rich widgets; use the builder for
+  layout/glue and reactive views. Theme tokens: [DESIGN.md](./DESIGN.md).

package/docs/COMPONENTS.md

@@ -6,7 +6,7 @@ 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-11T05:42:36.629Z
+Generated at: 2026-07-12T08:47:20.080Z
 
 30 custom elements.
 
@@ -110,6 +110,19 @@ Source: `components/icon/index.ts`
 - **Slots**: —
 - **Parts**: `ran-icon`
 
+> **Requires registration.** `<r-icon>` has no built-in icon set — it renders only SVGs
+> registered into its in-memory registry, so `<r-icon name="lock">` is **blank** until `lock`
+> is registered. Register once, in the browser, before the first `<r-icon>` connects:
+>
+> ```ts
+> import { registerBuiltinIcons } from 'ranui'; // or 'ranui/icons'
+> registerBuiltinIcons(); // registers every name in RAN_ICON_NAMES
+> ```
+>
+> For a custom set, call `registerIcon(name, svgString)` / `registerIcons({ … })`, or pass raw
+> SVG markup straight to `name` (rendered as-is when it starts with `<svg`). Valid bundled
+> names are the `RanIconName` union / `RAN_ICON_NAMES` tuple.
+
 ## `<r-img>`
 
 Source: `components/image/index.ts`
@@ -251,8 +264,13 @@ Source: `components/radar/index.ts`
 
 Source: `components/route/index.ts`
 
-- **Attributes**: `exact: boolean`, `path: string`, `sheet: string`
-- **Properties**: `exact: boolean`, `params: Record<string, string>`, `path: string`, `sheet: string`
+- **Attributes**: `exact: boolean`, `path: string`, `sheet: string`, `src: string`
+- **Properties**:
+  - `exact: boolean`
+  - `params: Record<string, string>`
+  - `path: string`
+  - `sheet: string`
+  - `src: string` — A lazy page module's default export: render into `host`, optionally return a cleanup. */
 - **Events**: `routematch` → detail `{ params, path }`
 - **Slots**: `default`
 - **Parts**: —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.2.0-alpha.7",
+  "version": "0.2.1-alpha.3",
   "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",
@@ -50,6 +50,7 @@
     "typings.d.ts",
     "docs/DESIGN.md",
     "docs/COMPONENTS.md",
+    "docs/BUILDER.md",
     "docs/style-tokens-public.md"
   ],
   "keywords": [
@@ -114,6 +115,11 @@
       "import": "./dist/icon.js",
       "require": "./dist/index.cjs"
     },
+    "./icons": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/icons.js",
+      "require": "./dist/index.cjs"
+    },
     "./image": {
       "types": "./dist/index.d.ts",
       "import": "./dist/image.js",
@@ -199,6 +205,11 @@
       "import": "./dist/math.js",
       "require": "./dist/index.cjs"
     },
+    "./mermaid": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mermaid.js",
+      "require": "./dist/index.cjs"
+    },
     "./checkbox": {
       "types": "./dist/index.d.ts",
       "import": "./dist/checkbox.js",
@@ -209,6 +220,21 @@
       "import": "./dist/card.js",
       "require": "./dist/index.cjs"
     },
+    "./form": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/index.cjs"
+    },
+    "./scratch": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/scratch.js",
+      "require": "./dist/index.cjs"
+    },
+    "./section": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/section.js",
+      "require": "./dist/index.cjs"
+    },
     "./router": {
       "types": "./dist/index.d.ts",
       "import": "./dist/router.js",
@@ -246,7 +272,7 @@
     }
   },
   "devDependencies": {
-    "@argos-ci/playwright": "^7.3.0",
+    "@argos-ci/playwright": "^7.3.5",
     "@playwright/test": "^1.61.1",
     "@types/node": "^26.1.1",
     "@vitest/coverage-v8": "^4.1.10",
@@ -254,12 +280,14 @@
     "less": "^4.6.7",
     "rollup-plugin-visualizer": "^7.0.1",
     "svgo": "^4.0.1",
+    "terser": "^5.49.0",
     "tsx": "^4.23.0",
-    "typescript": "^6.0.3",
+    "typescript": "^7.0.2",
     "vite": "^8.1.4",
     "vitest": "^4.1.10"
   },
   "dependencies": {
+    "mermaid": "^11",
     "ranuts": "^0.2.0-alpha.1"
   },
   "scripts": {

package/dist/button-Be_uHDZG.js

@@ -1,117 +0,0 @@
-import { _ as i, a as b, n as l, o as d, 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, 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 v();
-  debounceTimeId;
-  static get observedAttributes() {
-    return [
-      "disabled",
-      "icon",
-      "effect",
-      "iconSize",
-      "type",
-      "sheet"
-    ];
-  }
-  constructor() {
-    super(), this._shadowDom = l(this, m);
-    const t = h(this._shadowDom, ".ran-btn", () => s().class("ran-btn").attr("part", "button").role("button").tabIndex(0).children(s().class("ran-btn-content").attr("part", "content").children(f().class("slot"))).build());
-    this._btn = t, this._btnContent = t.querySelector(".ran-btn-content"), this._slot = t.querySelector("slot");
-  }
-  get sheet() {
-    return this.getAttribute("sheet") || "";
-  }
-  set sheet(t) {
-    this.setAttribute("sheet", t || ""), this.handlerExternalCss();
-  }
-  get disabled() {
-    return a(this);
-  }
-  set disabled(t) {
-    !t || t === "false" ? (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")) : (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"));
-  }
-  get iconSize() {
-    return this.getAttribute("iconSize") || "";
-  }
-  set iconSize(t) {
-    !t || t === "false" ? this.removeAttribute("iconSize") : (this.setAttribute("iconSize", t), this.setIcon());
-  }
-  get icon() {
-    return this.getAttribute("icon") || "";
-  }
-  set icon(t) {
-    !t || t === "false" ? this.removeAttribute("icon") : (this.setAttribute("icon", t), this.setIcon());
-  }
-  get effect() {
-    return this.getAttribute("effect") || "";
-  }
-  set effect(t) {
-    d.includes(t) || !t ? this.removeAttribute("effect") : this.setAttribute("effect", t);
-  }
-  get type() {
-    return this.getAttribute("type") || "";
-  }
-  set type(t) {
-    t ? this.setAttribute("type", t) : this.removeAttribute("type");
-  }
-  setIcon = () => {
-    if (typeof document > "u" || !this._slot) return;
-    const t = this.icon;
-    if (!t) {
-      this._iconElement && (this._iconElement.remove(), this._iconElement = void 0);
-      return;
-    }
-    if (this._iconElement) this._iconElement.setAttribute("name", t);
-    else {
-      let e = this._shadowDom.querySelector("r-icon");
-      e || (e = 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));
-  };
-  mousedown = (t) => {
-    if (i() === "pc" && !this.disabled) {
-      this.debounceMouseEvent();
-      const { left: n, top: r } = this.getBoundingClientRect();
-      this._btn.style.setProperty("--ran-x", `${t.clientX - n}px`), this._btn.style.setProperty("--ran-y", `${t.clientY - r}px`);
-    }
-  };
-  mouseup = () => {
-    i() === "pc" && (this.debounceTimeId || (this.debounceTimeId = setTimeout(() => {
-      this._btn.style.removeProperty("--ran-x"), this._btn.style.removeProperty("--ran-y"), this.debounceMouseEvent();
-    }, 600)));
-  };
-  keydown = (t) => {
-    a(this) || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
-  };
-  debounceMouseEvent = () => {
-    this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
-  };
-  handlerExternalCss = () => {
-    b(this, this._shadowDom, "sheet", null, this.sheet);
-  };
-  syncA11yState = () => {
-    const t = a(this);
-    this._btn.setAttribute("aria-disabled", t ? "true" : "false"), this._btn.tabIndex = t ? -1 : 0, t ? (this.setAttribute("aria-disabled", "true"), this._btnContent.setAttribute("disabled", "true")) : (this.removeAttribute("aria-disabled"), this._btnContent.removeAttribute("disabled"));
-  };
-  connectedCallback() {
-    this.handlerExternalCss(), this.setIcon(), this.syncA11yState(), this._events.on(this._btn, "mousedown", this.mousedown).on(this._btn, "mouseup", this.mouseup).on(this._btn, "keydown", this.keydown);
-  }
-  disconnectedCallback() {
-    this.debounceMouseEvent(), this._events.abort();
-  }
-  attributeChangedCallback(t, n, r) {
-    n !== r && (t === "disabled" && this._btnContent && this.syncA11yState(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
-  }
-};
-g("r-button", y);
-export {
-  y as t
-};