@marianmeres/stuic 3.172.0 → 3.174.0

package/dist/components/SplitPane/SplitPane.svelte.d.ts

@@ -0,0 +1,67 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { ResizableInfo, ResizableUnits } from "../../attachments/resizable.js";
+import type { TranslateFn } from "../../types.js";
+export type SplitPaneOrientation = "horizontal" | "vertical";
+/** Which pane carries the size; the other one flexes into the rest. */
+export type SplitPanePrimary = "start" | "end";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Content of the first pane (left; top when vertical) */
+    start?: Snippet;
+    /** Content of the second pane (right; bottom when vertical) */
+    end?: Snippet;
+    /**
+     * `horizontal` (default) puts the panes side by side and resizes a width,
+     * `vertical` stacks them and resizes a height — the container then needs a
+     * definite height (`%` units resolve against it).
+     */
+    orientation?: SplitPaneOrientation;
+    /** Which pane the size applies to (the other one fills the rest). Default `start`. */
+    primary?: SplitPanePrimary;
+    /**
+     * Size of the primary pane in `units` (bindable). Default `50`. Written on every
+     * resize; writing it resizes the pane (clamped to `min` / `max`). A size stored
+     * under `key` wins over it on mount and is written back into the binding. The
+     * size the component mounted with is what double-click / Enter on the separator
+     * and `reset()` restore.
+     */
+    size?: number;
+    /** `%` (default) of the container, or `px`. Not meant to change after mount. */
+    units?: ResizableUnits;
+    /** Lower bound in `units`. `0` = none. */
+    min?: number;
+    /** Upper bound in `units`. `0` = none (`%` is still capped at 100). */
+    max?: number;
+    /** Keyboard step in `units` (Shift multiplies by 10). Default `1` for %, `10` for px. */
+    step?: number;
+    /** Persist the size under this key (`resizable-width-<key>` / `resizable-height-<key>`) */
+    key?: string | number | null;
+    /** Where `key` persists to. Default `session`. */
+    storage?: "local" | "session";
+    /** Renders the separator inert: no drag, no keyboard, not focusable */
+    disabled?: boolean;
+    /** Accessible name of the separator. Defaults to `t("resize")` — "Resize". */
+    label?: string;
+    /** Skip all default styling, use only custom classes */
+    unstyled?: boolean;
+    class?: string;
+    /** Classes for the first pane */
+    startClass?: string;
+    /** Classes for the second pane */
+    endClass?: string;
+    /** Classes for the separator */
+    separatorClass?: string;
+    /** Bindable root element reference */
+    el?: HTMLDivElement;
+    /** Bindable separator element reference */
+    separatorEl?: HTMLDivElement;
+    /** Fires whenever a size is applied: on mount, while dragging, per key press, on reset, on `size` writes */
+    onResize?: (info: ResizableInfo) => void;
+    /** Translation function for the separator's default name (`resize`). English built in. */
+    t?: TranslateFn;
+}
+declare const SplitPane: import("svelte").Component<Props, {
+    reset: () => void;
+}, "el" | "size" | "separatorEl">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

package/dist/components/SplitPane/i18n-sk.d.ts

@@ -0,0 +1,17 @@
+import type { SplitPaneMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `SplitPane`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually
+ * imported (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { SplitPane, createSplitPaneT, SPLIT_PANE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createSplitPaneT(SPLIT_PANE_MESSAGES_SK);
+ * </script>
+ *
+ * <SplitPane {t}>…</SplitPane>
+ * ```
+ */
+export declare const SPLIT_PANE_MESSAGES_SK: SplitPaneMessages;

package/dist/components/SplitPane/i18n-sk.js

@@ -0,0 +1,18 @@
+/**
+ * Slovak message catalog for `SplitPane`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually
+ * imported (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { SplitPane, createSplitPaneT, SPLIT_PANE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createSplitPaneT(SPLIT_PANE_MESSAGES_SK);
+ * </script>
+ *
+ * <SplitPane {t}>…</SplitPane>
+ * ```
+ */
+export const SPLIT_PANE_MESSAGES_SK = {
+    resize: "Zmeniť veľkosť",
+};

package/dist/components/SplitPane/i18n.d.ts

@@ -0,0 +1,31 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `SplitPane`. Also the fallback of
+ * every other bundled locale, so a locale missing a key still renders text.
+ */
+export declare const SPLIT_PANE_MESSAGES_EN: {
+    /** Default accessible name of the separator (the drag handle) */
+    resize: string;
+};
+/** Every message key `SplitPane` may look up. */
+export type SplitPaneMessageKey = keyof typeof SPLIT_PANE_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type SplitPaneMessages = Record<SplitPaneMessageKey, string>;
+/**
+ * Builds the `t` prop of `SplitPane` from a message catalog. Unknown or
+ * untranslated keys fall back to `fallbackMessages` (English by default), so a
+ * catalog may safely be partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { SplitPane, createSplitPaneT, SPLIT_PANE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createSplitPaneT(SPLIT_PANE_MESSAGES_SK);
+ * </script>
+ *
+ * <SplitPane {t}>…</SplitPane>
+ * ```
+ */
+export declare function createSplitPaneT(messages: Partial<SplitPaneMessages> | Record<string, string>, fallbackMessages?: Partial<SplitPaneMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/SplitPane/i18n.js

@@ -0,0 +1,39 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `SplitPane`. Also the fallback of
+ * every other bundled locale, so a locale missing a key still renders text.
+ */
+export const SPLIT_PANE_MESSAGES_EN = {
+    /** Default accessible name of the separator (the drag handle) */
+    resize: "Resize",
+};
+/**
+ * Builds the `t` prop of `SplitPane` from a message catalog. Unknown or
+ * untranslated keys fall back to `fallbackMessages` (English by default), so a
+ * catalog may safely be partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { SplitPane, createSplitPaneT, SPLIT_PANE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createSplitPaneT(SPLIT_PANE_MESSAGES_SK);
+ * </script>
+ *
+ * <SplitPane {t}>…</SplitPane>
+ * ```
+ */
+export function createSplitPaneT(messages, fallbackMessages = SPLIT_PANE_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values, {
+                preSearchKeyTransform: (k) => `{${k}}`,
+            })
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createSplitPaneT(SPLIT_PANE_MESSAGES_EN);

package/dist/components/SplitPane/index.css

@@ -0,0 +1,153 @@
+/* ============================================================================
+   SPLIT PANE COMPONENT TOKENS
+   Override globally: :root { --stuic-split-pane-separator-color: red; }
+   Override locally:  <SplitPane style="--stuic-split-pane-separator-color: red;" />
+
+   The defaults reproduce the `resizable` attachment's built-in handle (the one
+   `resizableWidth` / `WithSidePanel` show): a faint 1px line with a small rounded grip.
+   ============================================================================ */
+
+:root {
+	/* the separator line */
+	--stuic-split-pane-separator-color: rgb(0 0 0 / 0.2);
+	/* … while hovered, focused or dragged */
+	--stuic-split-pane-separator-color-hover: rgb(0 0 0 / 0.3);
+	--stuic-split-pane-separator-thickness: 1px;
+	/* invisible grab zone added on each side of the line */
+	--stuic-split-pane-separator-hit-area: 4px;
+	/* the centered grip on the line */
+	--stuic-split-pane-grip-color: var(--color-gray-300);
+	--stuic-split-pane-grip-color-hover: var(--color-gray-400);
+	--stuic-split-pane-grip-border-color: rgb(0 0 0 / 0.2);
+	--stuic-split-pane-grip-length: 20px;
+	--stuic-split-pane-grip-thickness: 9px;
+	--stuic-split-pane-grip-radius: 0.25rem;
+	--stuic-split-pane-ring-color: var(--stuic-color-ring);
+}
+
+:root.dark {
+	--stuic-split-pane-separator-color: rgb(255 255 255 / 0.1);
+	--stuic-split-pane-separator-color-hover: rgb(255 255 255 / 0.2);
+	--stuic-split-pane-grip-color: var(--color-gray-600);
+	--stuic-split-pane-grip-color-hover: var(--color-gray-500);
+	--stuic-split-pane-grip-border-color: rgb(255 255 255 / 0.2);
+}
+
+@layer components {
+	/* fills its container (a definite container height is what makes the panes scroll
+	   instead of growing — and what `%` resolves against when vertical) */
+	.stuic-split-pane {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.stuic-split-pane[data-orientation="horizontal"] {
+		flex-direction: row;
+	}
+
+	.stuic-split-pane[data-orientation="vertical"] {
+		flex-direction: column;
+	}
+
+	/* the non-primary pane fills what is left and may shrink below its content */
+	.stuic-split-pane-pane {
+		flex: 1 1 0%;
+		min-width: 0;
+		min-height: 0;
+		overflow: auto;
+	}
+
+	/* the primary pane is exactly its (inline) width / height */
+	.stuic-split-pane-pane[data-primary] {
+		flex: 0 0 auto;
+	}
+
+	.stuic-split-pane-separator {
+		position: relative;
+		z-index: 1;
+		flex: 0 0 var(--stuic-split-pane-separator-thickness);
+		background: var(--stuic-split-pane-separator-color);
+		touch-action: none;
+		user-select: none;
+		outline: none;
+		transition: background-color
+			var(--stuic-split-pane-transition, var(--stuic-transition));
+	}
+
+	.stuic-split-pane[data-orientation="horizontal"] > .stuic-split-pane-separator {
+		cursor: col-resize;
+	}
+
+	.stuic-split-pane[data-orientation="vertical"] > .stuic-split-pane-separator {
+		cursor: row-resize;
+	}
+
+	/* grab zone: wider than the line, invisible, paints above the panes (z-index) */
+	.stuic-split-pane-separator::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+
+	.stuic-split-pane[data-orientation="horizontal"] > .stuic-split-pane-separator::before {
+		inset-inline: calc(-1 * var(--stuic-split-pane-separator-hit-area));
+	}
+
+	.stuic-split-pane[data-orientation="vertical"] > .stuic-split-pane-separator::before {
+		inset-block: calc(-1 * var(--stuic-split-pane-separator-hit-area));
+	}
+
+	/* grip: a small rounded tab centered on the line */
+	.stuic-split-pane-separator::after {
+		content: "";
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		translate: -50% -50%;
+		box-sizing: border-box;
+		border: 1px solid var(--stuic-split-pane-grip-border-color);
+		border-radius: var(--stuic-split-pane-grip-radius);
+		background: var(--stuic-split-pane-grip-color);
+		transition: background-color
+			var(--stuic-split-pane-transition, var(--stuic-transition));
+	}
+
+	.stuic-split-pane[data-orientation="horizontal"] > .stuic-split-pane-separator::after {
+		width: var(--stuic-split-pane-grip-thickness);
+		height: var(--stuic-split-pane-grip-length);
+	}
+
+	.stuic-split-pane[data-orientation="vertical"] > .stuic-split-pane-separator::after {
+		width: var(--stuic-split-pane-grip-length);
+		height: var(--stuic-split-pane-grip-thickness);
+	}
+
+	.stuic-split-pane-separator:hover,
+	.stuic-split-pane-separator:focus-visible,
+	.stuic-split-pane-separator[data-resizing] {
+		background: var(--stuic-split-pane-separator-color-hover);
+	}
+
+	.stuic-split-pane-separator:hover::after,
+	.stuic-split-pane-separator:focus-visible::after,
+	.stuic-split-pane-separator[data-resizing]::after {
+		background: var(--stuic-split-pane-grip-color-hover);
+	}
+
+	.stuic-split-pane-separator:focus-visible {
+		outline: 2px solid var(--stuic-split-pane-ring-color);
+		outline-offset: 0;
+	}
+
+	/* inert: a plain divider */
+	.stuic-split-pane[data-disabled] > .stuic-split-pane-separator {
+		cursor: default;
+		background: var(--stuic-split-pane-separator-color);
+	}
+
+	.stuic-split-pane[data-disabled] > .stuic-split-pane-separator::after {
+		display: none;
+	}
+}

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

@@ -0,0 +1,3 @@
+export { default as SplitPane, type Props as SplitPaneProps, type SplitPaneOrientation, type SplitPanePrimary, } from "./SplitPane.svelte";
+export { createSplitPaneT, SPLIT_PANE_MESSAGES_EN, type SplitPaneMessageKey, type SplitPaneMessages, } from "./i18n.js";
+export { SPLIT_PANE_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/SplitPane/index.js

@@ -0,0 +1,3 @@
+export { default as SplitPane, } from "./SplitPane.svelte";
+export { createSplitPaneT, SPLIT_PANE_MESSAGES_EN, } from "./i18n.js";
+export { SPLIT_PANE_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/WithSidePanel/README.md

@@ -7,22 +7,22 @@ auto-hides when the container width falls below a configurable threshold
 
 ## Props
 
-| Prop                 | Type                                        | Default   | Description                                      |
-| -------------------- | ------------------------------------------- | --------- | ------------------------------------------------ |
-| `children`           | `Snippet`                                   | —         | Main content                                     |
-| `side`               | `Snippet`                                   | —         | Side panel content                               |
-| `position`           | `"left" \| "right"`                         | `"left"`  | Side panel position                              |
-| `width`              | `string`                                    | `"300px"` | Side panel width (CSS value, px or %)            |
-| `threshold`          | `number`                                    | `768`     | Container width (px) below which side auto-hides |
-| `transition`         | `boolean`                                   | `true`    | Enable Svelte slide transition                   |
-| `transitionDuration` | `number`                                    | `200`     | Transition duration in ms                        |
-| `open`               | `boolean`                                   | `true`    | Desktop visibility state (bindable)              |
-| `resizable`          | `boolean \| Partial<ResizableWidthOptions>` | `false`   | Enable drag-resizable side panel                 |
-| `classMain`          | `string`                                    | —         | Custom class for main content div                |
-| `classSide`          | `string`                                    | —         | Custom class for side panel div                  |
-| `class`              | `string`                                    | —         | Custom class for wrapper div                     |
-| `unstyled`           | `boolean`                                   | `false`   | Skip all default styling                         |
-| `el`                 | `HTMLDivElement`                            | —         | Bindable wrapper element reference               |
+| Prop                 | Type                                        | Default   | Description                                                                              |
+| -------------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------------------------- |
+| `children`           | `Snippet`                                   | —         | Main content                                                                             |
+| `side`               | `Snippet`                                   | —         | Side panel content                                                                       |
+| `position`           | `"left" \| "right"`                         | `"left"`  | Side panel position                                                                      |
+| `width`              | `string`                                    | `"300px"` | Side panel width (CSS value, px or %)                                                    |
+| `threshold`          | `number`                                    | `768`     | Container width (px) below which side auto-hides                                         |
+| `transition`         | `boolean`                                   | `true`    | Enable Svelte slide transition                                                           |
+| `transitionDuration` | `number`                                    | `200`     | Transition duration in ms                                                                |
+| `open`               | `boolean`                                   | `true`    | Desktop visibility state (bindable)                                                      |
+| `resizable`          | `boolean \| Partial<ResizableWidthOptions>` | `false`   | Enable drag-resizable side panel (the edge handle is also a keyboard-operable separator) |
+| `classMain`          | `string`                                    | —         | Custom class for main content div                                                        |
+| `classSide`          | `string`                                    | —         | Custom class for side panel div                                                          |
+| `class`              | `string`                                    | —         | Custom class for wrapper div                                                             |
+| `unstyled`           | `boolean`                                   | `false`   | Skip all default styling                                                                 |
+| `el`                 | `HTMLDivElement`                            | —         | Bindable wrapper element reference                                                       |
 
 ## API (via `bind:this`)
 
@@ -67,6 +67,9 @@ auto-hides when the container width falls below a configurable threshold
 
 ### Resizable
 
+The edge handle is a focusable `role="separator"` (the `resizable` attachment's): arrow keys
+resize it (Shift ×10), Home / End go to `min` / `max`, Enter or double-click resets.
+
 ```svelte
 <WithSidePanel resizable={{ min: 200, max: 500, key: "sidebar", storage: "local" }}>
 	{#snippet side()}

package/dist/icons/index.d.ts

@@ -58,6 +58,8 @@ export { iconLucideSun as iconSun } from "@marianmeres/icons-fns/lucide/iconLuci
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
 export { iconLucideX as iconX } from "@marianmeres/icons-fns/lucide/iconLucideX.js";
 export { iconLucidePencil as iconPencil } from "@marianmeres/icons-fns/lucide/iconLucidePencil.js";
+export { iconBsStar as iconStar } from "@marianmeres/icons-fns/bootstrap/iconBsStar.js";
+export { iconBsStarFill as iconStarFill } from "@marianmeres/icons-fns/bootstrap/iconBsStarFill.js";
 export { iconLucideBold as iconBold } from "@marianmeres/icons-fns/lucide/iconLucideBold.js";
 export { iconLucideItalic as iconItalic } from "@marianmeres/icons-fns/lucide/iconLucideItalic.js";
 export { iconLucideHeading1 as iconHeading1 } from "@marianmeres/icons-fns/lucide/iconLucideHeading1.js";

package/dist/icons/index.js

@@ -63,6 +63,9 @@ export { iconLucideSun as iconSun } from "@marianmeres/icons-fns/lucide/iconLuci
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
 export { iconLucideX as iconX } from "@marianmeres/icons-fns/lucide/iconLucideX.js";
 export { iconLucidePencil as iconPencil } from "@marianmeres/icons-fns/lucide/iconLucidePencil.js";
+// Rating Icons (Bootstrap)
+export { iconBsStar as iconStar } from "@marianmeres/icons-fns/bootstrap/iconBsStar.js";
+export { iconBsStarFill as iconStarFill } from "@marianmeres/icons-fns/bootstrap/iconBsStarFill.js";
 // Markdown Editor / formatting toolbar Icons (Lucide)
 // (bullet list reuses `iconList` and horizontal rule reuses `iconMinus` above)
 export { iconLucideBold as iconBold } from "@marianmeres/icons-fns/lucide/iconLucideBold.js";

package/dist/index.css

@@ -29,6 +29,20 @@ In practice:
    These tokens provide a single point of control for cross-component properties.
    Override globally:  :root { --stuic-radius: 0; }
    Override per-component: --stuic-button-radius: 9999px; (takes precedence)
+
+   NOTE on the mirrored names. The tokens below are TIER tokens, named
+   --stuic-{property}-{tier}, and they ARE declared here. Component override tokens
+   are the transposition, --stuic-{component}-{property}, and are NEVER declared --
+   they exist only as the first argument of a var() fallback at the usage site:
+
+       border-radius: var(--stuic-button-radius, var(--stuic-radius-button));
+                          ^ component token (3)  ^ tier token (2, declared here)
+
+   So --stuic-radius-button (tier) applies to Button, SplitButton and ButtonGroupRadio,
+   while --stuic-button-radius (component) applies to Button alone. Same relationship
+   between --stuic-border-width-button and --stuic-button-border-width. "button" is the
+   only tier name that is also a component name, hence the only confusable pair -- do
+   not "fix" one into the other.
    ============================================================================ */
 :root {
 	/* Radius: three tiers */
@@ -103,11 +117,14 @@ In practice:
 @import "./components/Pill/index.css";
 @import "./components/PricingTable/index.css";
 @import "./components/Progress/index.css";
+@import "./components/RangeSlider/index.css";
+@import "./components/Rating/index.css";
 @import "./components/Separator/index.css";
 @import "./components/Skeleton/index.css";
 @import "./components/Slider/index.css";
 @import "./components/Spinner/index.css";
 @import "./components/SplitButton/index.css";
+@import "./components/SplitPane/index.css";
 @import "./components/Stat/index.css";
 @import "./components/Stepper/index.css";
 @import "./components/Switch/index.css";

package/dist/index.d.ts

@@ -73,12 +73,15 @@ export * from "./components/Pagination/index.js";
 export * from "./components/Pill/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
+export * from "./components/RangeSlider/index.js";
+export * from "./components/Rating/index.js";
 export * from "./components/Separator/index.js";
 export * from "./components/Skeleton/index.js";
 export * from "./components/Slider/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/SplitButton/index.js";
+export * from "./components/SplitPane/index.js";
 export * from "./components/Stat/index.js";
 export * from "./components/Stepper/index.js";
 export * from "./components/Switch/index.js";

package/dist/index.js

@@ -79,12 +79,15 @@ export * from "./components/Pagination/index.js";
 export * from "./components/Pill/index.js";
 export * from "./components/PricingTable/index.js";
 export * from "./components/Progress/index.js";
+export * from "./components/RangeSlider/index.js";
+export * from "./components/Rating/index.js";
 export * from "./components/Separator/index.js";
 export * from "./components/Skeleton/index.js";
 export * from "./components/Slider/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/SplitButton/index.js";
+export * from "./components/SplitPane/index.js";
 export * from "./components/Stat/index.js";
 export * from "./components/Stepper/index.js";
 export * from "./components/Switch/index.js";

package/docs/{maybe-todo.md → _archive/maybe-todo.md}

@@ -49,16 +49,27 @@ Checked first, to avoid false positives:
    reusable `longPress` attachment), Shift+F10 / menu key.
 6. ~~**EmptyState**~~ — ✅ shipped (see `src/lib/components/EmptyState/`): icon +
    title + description + CTA placeholder for empty lists/tables/search results.
-7. **Rating (stars)** — display + input variants. `FieldLikeButton` is adjacent but not
-   this.
+7. ~~**Rating (stars)**~~ — ✅ shipped (see `src/lib/components/Rating/`): input
+   (radiogroup of per-star radios, half steps, hover preview, click-again-to-clear,
+   keyboard, hidden input + `validate` with `required`) and `readonly` display
+   (`role="img"`, fractional fill); custom `icon` / `iconEmpty`, `intent`, sizes,
+   `t` texts with Slovak bundled.
 
 ## Tier 3 — common, but judge by actual app needs
 
-8. **SplitPane / resizable panels** — general two-pane draggable splitter
-   (horizontal/vertical, min/max, persisted size). `actions/resizable-width`,
-   `WithSidePanel`, and `persistent-state` already provide the pieces.
-9. **Range slider (dual-thumb)** — `Slider` is deliberately single-value; a min/max
-   range variant (price filters etc.) is a recurring ask.
+8. ~~**SplitPane / resizable panels**~~ — ✅ shipped (see `src/lib/components/SplitPane/`
+   and `src/lib/attachments/resizable.ts`): the `resizable-width` action generalised into a
+   `resizable` attachment (`axis: "x" | "y"`, `px` / `%`, `min` / `max`, `key` persistence,
+   `handle` for an own separator, `onInit` api) whose handle is an ARIA window splitter
+   (arrows / Home / End / Enter); `resizableWidth` stays as a thin wrapper over it, so
+   `WithSidePanel` got the keyboard for free. `SplitPane` wraps it: `start` / `end`
+   snippets, `orientation`, `primary`, `bind:size`, `reset()`, `disabled`, tokens, `t` with
+   Slovak bundled.
+9. ~~**Range slider (dual-thumb)**~~ — ✅ shipped (see `src/lib/components/RangeSlider/`):
+   `Slider`'s two-value sibling — `bind:start` / `bind:end` on one track with the fill
+   between them; nearest-thumb press, grab-to-drag, thumbs never cross (`minRange`),
+   per-thumb keyboard via two hidden range inputs (`nameStart` / `nameEnd`), ticks,
+   value labels, `validate` with the pair, `t` thumb names with Slovak bundled.
 10. ~~**Timeline / activity feed**~~ — ✅ shipped (see `src/lib/components/Timeline/`):
     vertical event list on a rail with dot / icon-bubble / custom (snippet) markers,
     per-item intent, `<time datetime>` support with an optional formatter, inline or

package/docs/architecture.md

@@ -36,7 +36,7 @@ Layer 4: Internal Vars        (--_bg, --_text, --_border)
 
 ```
 src/lib/
-├── components/           # 75 component directories
+├── components/           # 78 component directories
 │   └── {Name}/
 │       ├── {Name}.svelte     # Main component
 │       ├── index.ts          # Exports

package/docs/conventions.md

@@ -43,12 +43,14 @@ Global tokens in `src/lib/index.css` that control cross-component visual propert
 /* Brutalist example — 7 lines to transform everything */
 :root {
 	--stuic-radius: 0;
+	--stuic-radius-button: 0;
 	--stuic-radius-container: 0;
 	--stuic-shadow: none;
 	--stuic-shadow-hover: none;
 	--stuic-shadow-overlay: none;
 	--stuic-shadow-dialog: none;
 	--stuic-border-width: 0;
+	--stuic-border-width-button: 0;
 }
 ```
 
@@ -79,16 +81,34 @@ Component CSS must reference shared tokens as **fallbacks at usage sites**, not
 
 Per-component overrides (`--stuic-widget-radius: 0`) still take precedence over the shared fallback.
 
-### Element vs Container
+### Element vs Button vs Container
 
-Two tiers of radius for natural visual hierarchy:
+Three tiers of radius for natural visual hierarchy:
 
-| Tier      | Token                      | Default            | Use for                                               |
-| --------- | -------------------------- | ------------------ | ----------------------------------------------------- |
-| Element   | `--stuic-radius`           | `var(--radius-md)` | Buttons, inputs, badges, list items, checkboxes, tabs |
-| Container | `--stuic-radius-container` | `var(--radius-lg)` | Cards, modals, dropdowns, notifications, accordions   |
+| Tier      | Token                      | Default            | Use for                                             |
+| --------- | -------------------------- | ------------------ | --------------------------------------------------- |
+| Element   | `--stuic-radius`           | `var(--radius-md)` | Inputs, badges, list items, checkboxes, tabs        |
+| Button    | `--stuic-radius-button`    | `var(--radius-md)` | Buttons, split buttons, button groups               |
+| Container | `--stuic-radius-container` | `var(--radius-lg)` | Cards, modals, dropdowns, notifications, accordions |
 
-**Rule of thumb:** if it wraps other interactive elements, it's a container.
+**Rule of thumb:** if it wraps other interactive elements, it's a container. Buttons get
+their own tier so a flat-input theme can still have pill buttons (and vice versa);
+`--stuic-border-width-button` splits out the same way.
+
+### Tier tokens vs component tokens
+
+The two layers use mirrored names, which is easy to misread for the button tier:
+
+| Name                          | Layer               | Declared?             | Scope                         |
+| ----------------------------- | ------------------- | --------------------- | ----------------------------- |
+| `--stuic-radius-button`       | shared tier (2)     | yes, in `index.css`   | every button-family component |
+| `--stuic-button-radius`       | component token (3) | no, fallback arg only | `Button` only                 |
+| `--stuic-border-width-button` | shared tier (2)     | yes, in `index.css`   | every button-family component |
+| `--stuic-button-border-width` | component token (3) | no, fallback arg only | `Button` only                 |
+
+Read it as `--stuic-{property}-{tier}` for tier tokens and `--stuic-{component}-{property}`
+for component tokens. `button` is the only tier name that is also a component name, so it
+is the only pair that reads as a transposition.
 
 ---
 

package/docs/domains/actions.md

@@ -8,24 +8,24 @@
 
 ## Available Actions
 
-| Action                    | Purpose                                                       | File                                 |
-| ------------------------- | ------------------------------------------------------------- | ------------------------------------ |
-| `validate`                | Form field validation with i18n support                       | `validate.svelte.ts`                 |
-| `focusTrap`               | Keyboard focus containment (modals/dialogs)                   | `focus-trap.ts`                      |
-| `autogrow`                | Auto-resize textarea to content                               | `autogrow.svelte.ts`                 |
-| `autoscroll`              | Auto-scroll container to bottom                               | `autoscroll.ts`                      |
-| `dimBehind`               | Dim everything behind a target element (simplified spotlight) | `dim-behind/`                        |
-| `fileDropzone`            | Drag-and-drop file handling                                   | `file-dropzone.svelte.ts`            |
-| `highlightDragover`       | Visual feedback on drag-over                                  | `highlight-dragover.svelte.ts`       |
-| `resizableWidth`          | Draggable width resizing                                      | `resizable-width.svelte.ts`          |
-| `draggable`               | Pointer-delta drag handle (consumer owns the movement)        | `draggable.svelte.ts`                |
-| `trim`                    | Auto-trim whitespace from input                               | `trim.svelte.ts`                     |
-| `typeahead`               | Advanced autocomplete behavior                                | `typeahead.svelte.ts`                |
-| `onSubmitValidityCheck`   | Form submit validation                                        | `on-submit-validity-check.svelte.ts` |
-| `popover`                 | Popover positioning                                           | `popover/`                           |
-| `spotlight`               | Spotlight/coach mark overlay with cutout hole                 | `spotlight/`                         |
-| `tooltip`                 | Tooltip positioning and display                               | `tooltip/`                           |
-| `createTour` / `tourStep` | Multi-step onboarding tour (built on spotlight)               | `onboarding/`                        |
+| Action                    | Purpose                                                                 | File                                 |
+| ------------------------- | ----------------------------------------------------------------------- | ------------------------------------ |
+| `validate`                | Form field validation with i18n support                                 | `validate.svelte.ts`                 |
+| `focusTrap`               | Keyboard focus containment (modals/dialogs)                             | `focus-trap.ts`                      |
+| `autogrow`                | Auto-resize textarea to content                                         | `autogrow.svelte.ts`                 |
+| `autoscroll`              | Auto-scroll container to bottom                                         | `autoscroll.ts`                      |
+| `dimBehind`               | Dim everything behind a target element (simplified spotlight)           | `dim-behind/`                        |
+| `fileDropzone`            | Drag-and-drop file handling                                             | `file-dropzone.svelte.ts`            |
+| `highlightDragover`       | Visual feedback on drag-over                                            | `highlight-dragover.svelte.ts`       |
+| `resizableWidth`          | Draggable width resizing (thin wrapper over the `resizable` attachment) | `resizable-width.svelte.ts`          |
+| `draggable`               | Pointer-delta drag handle (consumer owns the movement)                  | `draggable.svelte.ts`                |
+| `trim`                    | Auto-trim whitespace from input                                         | `trim.svelte.ts`                     |
+| `typeahead`               | Advanced autocomplete behavior                                          | `typeahead.svelte.ts`                |
+| `onSubmitValidityCheck`   | Form submit validation                                                  | `on-submit-validity-check.svelte.ts` |
+| `popover`                 | Popover positioning                                                     | `popover/`                           |
+| `spotlight`               | Spotlight/coach mark overlay with cutout hole                           | `spotlight/`                         |
+| `tooltip`                 | Tooltip positioning and display                                         | `tooltip/`                           |
+| `createTour` / `tourStep` | Multi-step onboarding tour (built on spotlight)                         | `onboarding/`                        |
 
 ---