@marianmeres/stuic 3.115.0 → 3.116.0

package/dist/components/RegisterForm/README.md

@@ -6,80 +6,80 @@ Standalone registration form. Same conventions as [`LoginForm`](../LoginForm/REA
 
 ## Exports
 
-| Export                          | Kind      | Description                                       |
-| ------------------------------- | --------- | ------------------------------------------------- |
-| `RegisterForm`                  | component | Form component                                    |
-| `RegisterFormModal`             | component | Modal-wrapped form with optional trigger snippet  |
-| `RegisterFormProps`             | type      | Props for `RegisterForm`                          |
-| `RegisterFormModalProps`        | type      | Props for `RegisterFormModal`                     |
-| `RegisterFormData`              | type      | `{ email, password, passwordConfirm, extra }`     |
-| `RegisterFormValidationError`   | type      | `{ field, message }`                              |
-| `RegisterFieldConfig`           | type      | Declarative extra-field descriptor                |
-| `createEmptyRegisterFormData`   | function  | Factory for an empty `RegisterFormData`            |
-| `validateRegisterForm`          | function  | `(data, t, extraFields, opts) => Error[]`         |
+| Export                        | Kind      | Description                                      |
+| ----------------------------- | --------- | ------------------------------------------------ |
+| `RegisterForm`                | component | Form component                                   |
+| `RegisterFormModal`           | component | Modal-wrapped form with optional trigger snippet |
+| `RegisterFormProps`           | type      | Props for `RegisterForm`                         |
+| `RegisterFormModalProps`      | type      | Props for `RegisterFormModal`                    |
+| `RegisterFormData`            | type      | `{ email, password, passwordConfirm, extra }`    |
+| `RegisterFormValidationError` | type      | `{ field, message }`                             |
+| `RegisterFieldConfig`         | type      | Declarative extra-field descriptor               |
+| `createEmptyRegisterFormData` | function  | Factory for an empty `RegisterFormData`          |
+| `validateRegisterForm`        | function  | `(data, t, extraFields, opts) => Error[]`        |
 
 ## `RegisterFieldConfig`
 
 ```ts
 interface RegisterFieldConfig {
-	name: string;                                                  // unique key under formData.extra
-	label: string;                                                 // already-translated
+	name: string; // unique key under formData.extra
+	label: string; // already-translated
 	type?: "text" | "email" | "tel" | "url" | "password" | "number";
 	placeholder?: string;
 	required?: boolean;
 	autocomplete?: HTMLInputAttributes["autocomplete"];
 	initialValue?: unknown;
 	validate?: (value: unknown, data: RegisterFormData) => string | undefined;
-	position?: "top" | "bottom";                                   // default "bottom"
-	props?: Record<string, unknown>;                               // passthrough to FieldInput
+	position?: "top" | "bottom"; // default "bottom"
+	props?: Record<string, unknown>; // passthrough to FieldInput
 }
 ```
 
 ## RegisterForm — Props
 
-| Prop                  | Type                                              | Default  | Description                                                                          |
-| --------------------- | ------------------------------------------------- | -------- | ------------------------------------------------------------------------------------ |
-| `formData`            | `RegisterFormData`                                | empty    | Bindable form data.                                                                  |
-| `onSubmit`            | `(data: RegisterFormData) => void`                | required | Called after client-side validation passes.                                          |
-| `isSubmitting`        | `boolean`                                         | `false`  | Disables the CTA during submission.                                                  |
-| `errors`              | `RegisterFormValidationError[]`                   | `[]`     | Field-specific server errors (merged with internal validation).                       |
-| `error`               | `string`                                          | -        | General error rendered as a `DismissibleMessage` above the form.                      |
-| `showPasswordConfirm` | `boolean`                                         | `true`   | Render the password-confirm field.                                                   |
-| `passwordMinLength`   | `number`                                          | `8`      | Minimum password length (fed into both the FieldInput attribute and the validator).   |
-| `extraFields`         | `RegisterFieldConfig[]`                           | `[]`     | Declarative extra fields. Rendered as `FieldInput`s positioned top or bottom.         |
-| `extraFieldsSlot`     | `Snippet<[{ formData, fieldError }]>`             | -        | Escape hatch for non-FieldInput extras. Rendered after declarative bottom fields.    |
-| `submitLabel`         | `string`                                          | i18n     | Override the CTA label.                                                              |
-| `submittingLabel`     | `string`                                          | i18n     | Override the CTA label while submitting.                                             |
-| `submitButton`        | `Snippet<[{ isSubmitting, disabled }]>`           | -        | Override the entire CTA section.                                                     |
-| `socialLogins`        | `Snippet`                                         | -        | Social/OAuth buttons. A divider is shown above when set.                              |
-| `socialDividerLabel`  | `string \| false`                                 | i18n     | Override (or hide with `false`) the divider above social buttons.                    |
-| `footer`              | `Snippet`                                         | -        | Content below the form (e.g., "Already have an account? Log in").                    |
-| `notifications`       | `NotificationsStack`                              | -        | When set, general errors are also pushed via `notifications.error()`.                 |
-| `t`                   | `TranslateFn`                                     | English  | i18n function.                                                                       |
-| `unstyled` / `class`  | -                                                 | -        | Standard styling escape hatches.                                                     |
-| `el`                  | `HTMLFormElement`                                 | -        | Bindable form element.                                                               |
+| Prop                  | Type                                    | Default  | Description                                                                         |
+| --------------------- | --------------------------------------- | -------- | ----------------------------------------------------------------------------------- |
+| `formData`            | `RegisterFormData`                      | empty    | Bindable form data.                                                                 |
+| `onSubmit`            | `(data: RegisterFormData) => void`      | required | Called after client-side validation passes.                                         |
+| `isSubmitting`        | `boolean`                               | `false`  | Disables the CTA during submission.                                                 |
+| `errors`              | `RegisterFormValidationError[]`         | `[]`     | Field-specific server errors (merged with internal validation).                     |
+| `error`               | `string`                                | -        | General error rendered as a `DismissibleMessage` above the form.                    |
+| `showPasswordConfirm` | `boolean`                               | `true`   | Render the password-confirm field.                                                  |
+| `passwordMinLength`   | `number`                                | `8`      | Minimum password length (fed into both the FieldInput attribute and the validator). |
+| `extraFields`         | `RegisterFieldConfig[]`                 | `[]`     | Declarative extra fields. Rendered as `FieldInput`s positioned top or bottom.       |
+| `extraFieldsSlot`     | `Snippet<[{ formData, fieldError }]>`   | -        | Escape hatch for non-FieldInput extras. Rendered after declarative bottom fields.   |
+| `submitLabel`         | `string`                                | i18n     | Override the CTA label.                                                             |
+| `submittingLabel`     | `string`                                | i18n     | Override the CTA label while submitting.                                            |
+| `submitButton`        | `Snippet<[{ isSubmitting, disabled }]>` | -        | Override the entire CTA section.                                                    |
+| `socialLogins`        | `Snippet`                               | -        | Social/OAuth buttons. A divider is shown above when set.                            |
+| `socialDividerLabel`  | `string \| false`                       | i18n     | Override (or hide with `false`) the divider above social buttons.                   |
+| `footer`              | `Snippet`                               | -        | Content below the form (e.g., "Already have an account? Log in").                   |
+| `notifications`       | `NotificationsStack`                    | -        | When set, general errors are also pushed via `notifications.error()`.               |
+| `t`                   | `TranslateFn`                           | English  | i18n function.                                                                      |
+| `unstyled` / `class`  | -                                       | -        | Standard styling escape hatches.                                                    |
+| `el`                  | `HTMLFormElement`                       | -        | Bindable form element.                                                              |
 
 ### Imperative methods (via `bind:this`)
 
-| Method                         | Returns   | Purpose                                                                  |
-| ------------------------------ | --------- | ------------------------------------------------------------------------ |
-| `validate()`                   | `boolean` | Forces every inner field's validator to run. `true` if all valid.        |
-| `scrollToFirstError(opts?)`    | `boolean` | Scrolls + focuses the first invalid field. Call after `validate()`.      |
+| Method                      | Returns   | Purpose                                                             |
+| --------------------------- | --------- | ------------------------------------------------------------------- |
+| `validate()`                | `boolean` | Forces every inner field's validator to run. `true` if all valid.   |
+| `scrollToFirstError(opts?)` | `boolean` | Scrolls + focuses the first invalid field. Call after `validate()`. |
 
 ## RegisterFormModal — extra props
 
 Inherits all `RegisterForm` props, plus:
 
-| Prop          | Type                            | Default                              | Description                                                |
-| ------------- | ------------------------------- | ------------------------------------ | ---------------------------------------------------------- |
-| `title`       | `string`                        | `"Create account"` (i18n)            | Modal title.                                               |
-| `visible`     | `boolean`                       | `false`                              | Bindable modal visibility.                                 |
-| `trigger`     | `Snippet<[{ open }]>`           | -                                    | Optional trigger element rendered outside the modal.       |
-| `classModal`  | `string`                        | -                                    | Class for the Modal box.                                   |
-| `classInner`  | `string`                        | -                                    | Class for the Modal inner width container.                 |
-| `classForm`   | `string`                        | -                                    | Class forwarded to the inner `RegisterForm`.                |
-| `noXClose`    | `boolean`                       | `false`                              | Hide the close (X) button.                                 |
-| `onClose`     | `() => false \| void`           | -                                    | Pre-close hook. Return `false` to prevent close.           |
+| Prop         | Type                  | Default                   | Description                                          |
+| ------------ | --------------------- | ------------------------- | ---------------------------------------------------- |
+| `title`      | `string`              | `"Create account"` (i18n) | Modal title.                                         |
+| `visible`    | `boolean`             | `false`                   | Bindable modal visibility.                           |
+| `trigger`    | `Snippet<[{ open }]>` | -                         | Optional trigger element rendered outside the modal. |
+| `classModal` | `string`              | -                         | Class for the Modal box.                             |
+| `classInner` | `string`              | -                         | Class for the Modal inner width container.           |
+| `classForm`  | `string`              | -                         | Class forwarded to the inner `RegisterForm`.         |
+| `noXClose`   | `boolean`             | `false`                   | Hide the close (X) button.                           |
+| `onClose`    | `() => false \| void` | -                         | Pre-close hook. Return `false` to prevent close.     |
 
 **Methods:** `open(openerOrEvent?)`, `close()` — exposed via `bind:this`.
 
@@ -161,16 +161,16 @@ Inherits all `RegisterForm` props, plus:
 
 Prefix: `--stuic-register-form-*`
 
-| Variable                                              | Purpose                       |
-| ----------------------------------------------------- | ----------------------------- |
-| `--stuic-register-form-gap`                           | Vertical gap between sections |
-| `--stuic-register-form-gap-row`                       | Gap inside multi-column rows  |
-| `--stuic-register-form-social-margin-top`             | Margin above social block     |
-| `--stuic-register-form-social-gap`                    | Gap between social buttons    |
-| `--stuic-register-form-social-divider-color`          | Divider text color            |
-| `--stuic-register-form-social-divider-line-color`     | Divider line color            |
-| `--stuic-register-form-social-divider-font-size`      | Divider text size             |
-| `--stuic-register-form-social-divider-margin-bottom`  | Divider bottom margin         |
+| Variable                                             | Purpose                       |
+| ---------------------------------------------------- | ----------------------------- |
+| `--stuic-register-form-gap`                          | Vertical gap between sections |
+| `--stuic-register-form-gap-row`                      | Gap inside multi-column rows  |
+| `--stuic-register-form-social-margin-top`            | Margin above social block     |
+| `--stuic-register-form-social-gap`                   | Gap between social buttons    |
+| `--stuic-register-form-social-divider-color`         | Divider text color            |
+| `--stuic-register-form-social-divider-line-color`    | Divider line color            |
+| `--stuic-register-form-social-divider-font-size`     | Divider text size             |
+| `--stuic-register-form-social-divider-margin-bottom` | Divider bottom margin         |
 
 ## i18n keys
 

package/dist/components/RegisterForm/RegisterForm.svelte

@@ -257,13 +257,7 @@
 	}
 </script>
 
-<form
-	bind:this={formEl}
-	class={_class}
-	use:onSubmitValidityCheck
-	novalidate
-	{...rest}
->
+<form bind:this={formEl} class={_class} use:onSubmitValidityCheck novalidate {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" />
 

package/dist/components/Separator/README.md

@@ -4,14 +4,14 @@ A horizontal or vertical separator line. Renders an accessible `role="separator"
 
 ## Props
 
-| Prop          | Type                         | Default        | Description                                              |
-| ------------- | ---------------------------- | -------------- | -------------------------------------------------------- |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction. Also published as `data-orientation`.   |
+| Prop          | Type                         | Default        | Description                                                 |
+| ------------- | ---------------------------- | -------------- | ----------------------------------------------------------- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction. Also published as `data-orientation`.     |
 | `decorative`  | `boolean`                    | `false`        | Drop `role` + `aria-orientation`, set `aria-hidden="true"`. |
-| `unstyled`    | `boolean`                    | `false`        | Skip all default styling.                                |
-| `class`       | `string`                     | -              | Additional CSS classes.                                  |
-| `style`       | `string`                     | -              | Inline style.                                            |
-| `el`          | `HTMLDivElement`             | -              | Bindable root element.                                   |
+| `unstyled`    | `boolean`                    | `false`        | Skip all default styling.                                   |
+| `class`       | `string`                     | -              | Additional CSS classes.                                     |
+| `style`       | `string`                     | -              | Inline style.                                               |
+| `el`          | `HTMLDivElement`             | -              | Bindable root element.                                      |
 
 ## Usage
 

package/dist/components/TabbedMenu/index.css

@@ -46,7 +46,8 @@
 		display: block;
 		width: 100%;
 		padding: var(--stuic-tabbed-menu-padding-y) var(--stuic-tabbed-menu-padding-x);
-		border-radius: var(--stuic-tabbed-menu-radius, var(--stuic-radius)) var(--stuic-tabbed-menu-radius, var(--stuic-radius)) 0 0;
+		border-radius: var(--stuic-tabbed-menu-radius, var(--stuic-radius))
+			var(--stuic-tabbed-menu-radius, var(--stuic-radius)) 0 0;
 		border: 1px solid var(--stuic-tabbed-menu-border);
 		border-bottom: 0;
 		background: var(--stuic-tabbed-menu-tab-bg);
@@ -102,13 +103,15 @@
 	}
 
 	.stuic-tabbed-menu[data-orientation="vertical"] .stuic-tabbed-menu-tab {
-		border-radius: var(--stuic-tabbed-menu-radius, var(--stuic-radius)) 0 0 var(--stuic-tabbed-menu-radius, var(--stuic-radius));
+		border-radius: var(--stuic-tabbed-menu-radius, var(--stuic-radius)) 0 0
+			var(--stuic-tabbed-menu-radius, var(--stuic-radius));
 		border: 1px solid var(--stuic-tabbed-menu-border);
 		border-right: 0;
 		text-align: left;
 	}
 
-	.stuic-tabbed-menu[data-orientation="vertical"] .stuic-tabbed-menu-tab[aria-selected="true"] {
+	.stuic-tabbed-menu[data-orientation="vertical"]
+		.stuic-tabbed-menu-tab[aria-selected="true"] {
 		border-color: var(--stuic-tabbed-menu-border-active);
 	}
 }

package/dist/components/Tree/README.md

@@ -84,49 +84,49 @@ Collapsing a branch also collapses all of its descendants.
 
 ## Props
 
-| Prop                | Type                                                 | Default           | Description                                                              |
-| ------------------- | ---------------------------------------------------- | ----------------- | ------------------------------------------------------------------------ |
-| `items`             | `TreeNodeDTO<T>[]`                                   | required          | Tree data (e.g. from `tree.toJSON().children`)                           |
-| `activeId`          | `string`                                             | -                 | ID of the currently active/selected node                                 |
-| `isActive`          | `(item) => boolean`                                  | -                 | Alternative to `activeId` for custom active detection                    |
-| `onSelect`          | `(item) => void`                                     | -                 | Called when a node is selected (click or Enter/Space)                    |
-| `onToggle`          | `(item, expanded) => void`                           | -                 | Called when a branch is expanded/collapsed                               |
-| `sort`              | `(a, b) => number`                                   | -                 | Per-level sort comparator                                                |
-| `defaultExpanded`   | `boolean`                                            | `false`           | Default expansion state for branches                                     |
-| `expandedIds`       | `Set<string>`                                        | -                 | Initially-expanded branch IDs                                            |
-| `persistState`      | `boolean`                                            | `false`           | Persist expand/collapse to `localStorage`                                |
-| `storageKeyPrefix`  | `string`                                             | `"stuic-tree"`    | Prefix used for `localStorage` keys                                      |
-| `draggable`         | `boolean`                                            | `false`           | Enable drag-and-drop reordering                                          |
-| `isDraggable`       | `(item) => boolean`                                  | -                 | Return `false` to block dragging a specific node                         |
-| `isDropTarget`      | `(item) => boolean`                                  | -                 | Return `false` to block dropping onto a specific node                    |
-| `onMove`            | `(event) => void \| false \| Promise<void \| false>` | -                 | Called when a valid drop happens; return `false` to reject               |
-| `onError`           | `(err) => void`                                      | -                 | Called when `onMove` throws                                              |
-| `dragExpandDelay`   | `number`                                             | `800`             | ms before auto-expanding a collapsed branch hovered during drag          |
-| `t`                 | `TranslateFn`                                        | built-in          | Optional translation function (used for drag-drop a11y announcements)    |
-| `getNodeLabel`      | `(item) => string`                                   | `String(v.value)` | String used in a11y announcements when a node is moved                   |
-| `renderItem`        | `Snippet<[item, depth, isExpanded]>`                 | -                 | Custom node label renderer                                               |
-| `renderIcon`        | `Snippet<[item, depth, isExpanded]>`                 | -                 | Custom node icon renderer                                                |
-| `unstyled`          | `boolean`                                            | `false`           | Skip default styling                                                     |
-| `class`             | `string`                                             | -                 | Classes for wrapper                                                      |
-| `classItem`         | `string`                                             | -                 | Classes for each item button                                             |
-| `classItemActive`   | `string`                                             | -                 | Extra classes when an item is active                                     |
-| `classIcon`         | `string`                                             | -                 | Classes for the icon wrapper                                             |
-| `classLabel`        | `string`                                             | -                 | Classes for the label wrapper                                            |
-| `classChevron`      | `string`                                             | -                 | Classes for the expand/collapse chevron                                  |
-| `classChildren`     | `string`                                             | -                 | Classes for the children container                                       |
-| `el`                | `HTMLElement`                                        | -                 | Bindable wrapper reference                                               |
+| Prop               | Type                                                 | Default           | Description                                                           |
+| ------------------ | ---------------------------------------------------- | ----------------- | --------------------------------------------------------------------- |
+| `items`            | `TreeNodeDTO<T>[]`                                   | required          | Tree data (e.g. from `tree.toJSON().children`)                        |
+| `activeId`         | `string`                                             | -                 | ID of the currently active/selected node                              |
+| `isActive`         | `(item) => boolean`                                  | -                 | Alternative to `activeId` for custom active detection                 |
+| `onSelect`         | `(item) => void`                                     | -                 | Called when a node is selected (click or Enter/Space)                 |
+| `onToggle`         | `(item, expanded) => void`                           | -                 | Called when a branch is expanded/collapsed                            |
+| `sort`             | `(a, b) => number`                                   | -                 | Per-level sort comparator                                             |
+| `defaultExpanded`  | `boolean`                                            | `false`           | Default expansion state for branches                                  |
+| `expandedIds`      | `Set<string>`                                        | -                 | Initially-expanded branch IDs                                         |
+| `persistState`     | `boolean`                                            | `false`           | Persist expand/collapse to `localStorage`                             |
+| `storageKeyPrefix` | `string`                                             | `"stuic-tree"`    | Prefix used for `localStorage` keys                                   |
+| `draggable`        | `boolean`                                            | `false`           | Enable drag-and-drop reordering                                       |
+| `isDraggable`      | `(item) => boolean`                                  | -                 | Return `false` to block dragging a specific node                      |
+| `isDropTarget`     | `(item) => boolean`                                  | -                 | Return `false` to block dropping onto a specific node                 |
+| `onMove`           | `(event) => void \| false \| Promise<void \| false>` | -                 | Called when a valid drop happens; return `false` to reject            |
+| `onError`          | `(err) => void`                                      | -                 | Called when `onMove` throws                                           |
+| `dragExpandDelay`  | `number`                                             | `800`             | ms before auto-expanding a collapsed branch hovered during drag       |
+| `t`                | `TranslateFn`                                        | built-in          | Optional translation function (used for drag-drop a11y announcements) |
+| `getNodeLabel`     | `(item) => string`                                   | `String(v.value)` | String used in a11y announcements when a node is moved                |
+| `renderItem`       | `Snippet<[item, depth, isExpanded]>`                 | -                 | Custom node label renderer                                            |
+| `renderIcon`       | `Snippet<[item, depth, isExpanded]>`                 | -                 | Custom node icon renderer                                             |
+| `unstyled`         | `boolean`                                            | `false`           | Skip default styling                                                  |
+| `class`            | `string`                                             | -                 | Classes for wrapper                                                   |
+| `classItem`        | `string`                                             | -                 | Classes for each item button                                          |
+| `classItemActive`  | `string`                                             | -                 | Extra classes when an item is active                                  |
+| `classIcon`        | `string`                                             | -                 | Classes for the icon wrapper                                          |
+| `classLabel`       | `string`                                             | -                 | Classes for the label wrapper                                         |
+| `classChevron`     | `string`                                             | -                 | Classes for the expand/collapse chevron                               |
+| `classChildren`    | `string`                                             | -                 | Classes for the children container                                    |
+| `el`               | `HTMLElement`                                        | -                 | Bindable wrapper reference                                            |
 
 ## Keyboard Navigation
 
-| Key                   | Action                                                                |
-| --------------------- | --------------------------------------------------------------------- |
-| `ArrowDown`           | Focus next visible node                                               |
-| `ArrowUp`             | Focus previous visible node                                           |
-| `ArrowRight`          | Expand a collapsed branch, or move to first child of an expanded one  |
-| `ArrowLeft`           | Collapse an expanded branch, or move to parent                        |
-| `Home`                | Focus first visible node                                              |
-| `End`                 | Focus last visible node                                               |
-| `Enter` / `Space`     | Toggle expansion (if branch) and fire `onSelect`                      |
+| Key               | Action                                                               |
+| ----------------- | -------------------------------------------------------------------- |
+| `ArrowDown`       | Focus next visible node                                              |
+| `ArrowUp`         | Focus previous visible node                                          |
+| `ArrowRight`      | Expand a collapsed branch, or move to first child of an expanded one |
+| `ArrowLeft`       | Collapse an expanded branch, or move to parent                       |
+| `Home`            | Focus first visible node                                             |
+| `End`             | Focus last visible node                                              |
+| `Enter` / `Space` | Toggle expansion (if branch) and fire `onSelect`                     |
 
 Focus follows the **roving tabindex** pattern: only the currently-focused node has `tabindex=0`, all others are `-1`.
 
@@ -147,39 +147,39 @@ Override globally in `:root` or locally via `style=""`. Radius / border-width /
 
 ### Structure
 
-| Variable                           | Default                  | Description                       |
-| ---------------------------------- | ------------------------ | --------------------------------- |
-| `--stuic-tree-indent`              | `1.25rem`                | Indentation per depth level       |
-| `--stuic-tree-item-padding-x`      | `0.375rem`               | Item horizontal padding           |
-| `--stuic-tree-item-padding-y`      | `0.125rem`               | Item vertical padding             |
-| `--stuic-tree-item-height`         | `1.75rem`                | Item row height                   |
-| `--stuic-tree-item-font-size`      | `var(--text-sm)`         | Item font size                    |
-| `--stuic-tree-item-gap`            | `0.25rem`                | Gap between chevron, icon, label  |
-| `--stuic-tree-chevron-size`        | `14px`                   | Chevron icon size                 |
-| `--stuic-tree-chevron-opacity`     | `0.5`                    | Chevron opacity                   |
-| `--stuic-tree-icon-opacity`        | `0.7`                    | Icon opacity                      |
-| `--stuic-tree-item-radius`         | `var(--stuic-radius)`    | Item border radius                |
-| `--stuic-tree-transition`          | `var(--stuic-transition)`| Transition duration               |
+| Variable                       | Default                   | Description                      |
+| ------------------------------ | ------------------------- | -------------------------------- |
+| `--stuic-tree-indent`          | `1.25rem`                 | Indentation per depth level      |
+| `--stuic-tree-item-padding-x`  | `0.375rem`                | Item horizontal padding          |
+| `--stuic-tree-item-padding-y`  | `0.125rem`                | Item vertical padding            |
+| `--stuic-tree-item-height`     | `1.75rem`                 | Item row height                  |
+| `--stuic-tree-item-font-size`  | `var(--text-sm)`          | Item font size                   |
+| `--stuic-tree-item-gap`        | `0.25rem`                 | Gap between chevron, icon, label |
+| `--stuic-tree-chevron-size`    | `14px`                    | Chevron icon size                |
+| `--stuic-tree-chevron-opacity` | `0.5`                     | Chevron opacity                  |
+| `--stuic-tree-icon-opacity`    | `0.7`                     | Icon opacity                     |
+| `--stuic-tree-item-radius`     | `var(--stuic-radius)`     | Item border radius               |
+| `--stuic-tree-transition`      | `var(--stuic-transition)` | Transition duration              |
 
 ### Colors
 
-| Variable                             | Default                                | Description               |
-| ------------------------------------ | -------------------------------------- | ------------------------- |
-| `--stuic-tree-item-bg`               | `transparent`                          | Item background           |
-| `--stuic-tree-item-text`             | `inherit`                              | Item text color           |
-| `--stuic-tree-item-bg-hover`         | `rgb(0 0 0 / 0.06)`                    | Hover background          |
-| `--stuic-tree-item-bg-focus`         | `rgb(0 0 0 / 0.06)`                    | Keyboard-focus background |
-| `--stuic-tree-item-bg-active`        | `var(--stuic-color-primary)`           | Active/selected bg        |
-| `--stuic-tree-item-text-active`      | `var(--stuic-color-primary-foreground)`| Active/selected text      |
+| Variable                        | Default                                 | Description               |
+| ------------------------------- | --------------------------------------- | ------------------------- |
+| `--stuic-tree-item-bg`          | `transparent`                           | Item background           |
+| `--stuic-tree-item-text`        | `inherit`                               | Item text color           |
+| `--stuic-tree-item-bg-hover`    | `rgb(0 0 0 / 0.06)`                     | Hover background          |
+| `--stuic-tree-item-bg-focus`    | `rgb(0 0 0 / 0.06)`                     | Keyboard-focus background |
+| `--stuic-tree-item-bg-active`   | `var(--stuic-color-primary)`            | Active/selected bg        |
+| `--stuic-tree-item-text-active` | `var(--stuic-color-primary-foreground)` | Active/selected text      |
 
 ### Drag & drop
 
-| Variable                                | Default                            | Description                     |
-| --------------------------------------- | ---------------------------------- | ------------------------------- |
-| `--stuic-tree-item-opacity-dragging`    | `0.4`                              | Opacity of the dragged item     |
-| `--stuic-tree-drop-indicator-color`     | `var(--stuic-color-primary)`       | Before/after drop line color    |
-| `--stuic-tree-drop-indicator-height`    | `2px`                              | Before/after drop line height   |
-| `--stuic-tree-item-bg-dragover`         | `rgb(0 0 0 / 0.04)`                | "Inside"-drop highlight         |
+| Variable                             | Default                      | Description                   |
+| ------------------------------------ | ---------------------------- | ----------------------------- |
+| `--stuic-tree-item-opacity-dragging` | `0.4`                        | Opacity of the dragged item   |
+| `--stuic-tree-drop-indicator-color`  | `var(--stuic-color-primary)` | Before/after drop line color  |
+| `--stuic-tree-drop-indicator-height` | `2px`                        | Before/after drop line height |
+| `--stuic-tree-item-bg-dragover`      | `rgb(0 0 0 / 0.04)`          | "Inside"-drop highlight       |
 
 ## Limitations
 

package/dist/components/UserAvatarMenu/UserAvatarMenu.svelte

@@ -219,11 +219,7 @@
 	);
 
 	const isDark = $derived(
-		csEnabled
-			? cs.isDark
-				? cs.isDark()
-				: ColorScheme.current === "dark"
-			: false
+		csEnabled ? (cs.isDark ? cs.isDark() : ColorScheme.current === "dark") : false
 	);
 
 	function toggleColorScheme() {

package/dist/components/WithSidePanel/index.css

@@ -34,14 +34,14 @@
 
 	/* border between panels: left position */
 	.stuic-with-side-panel[data-position="left"] .stuic-with-side-panel-side {
-		border-right: var(--stuic-with-side-panel-border-width, var(--stuic-border-width)) solid
-			var(--stuic-with-side-panel-border-color);
+		border-right: var(--stuic-with-side-panel-border-width, var(--stuic-border-width))
+			solid var(--stuic-with-side-panel-border-color);
 	}
 
 	/* border between panels: right position */
 	.stuic-with-side-panel[data-position="right"] .stuic-with-side-panel-side {
-		border-left: var(--stuic-with-side-panel-border-width, var(--stuic-border-width)) solid
-			var(--stuic-with-side-panel-border-color);
+		border-left: var(--stuic-with-side-panel-border-width, var(--stuic-border-width))
+			solid var(--stuic-with-side-panel-border-color);
 	}
 
 	.stuic-with-side-panel-main {

package/dist/index.css

@@ -32,19 +32,23 @@ In practice:
    ============================================================================ */
 :root {
 	/* Radius: three tiers */
-	--stuic-radius: var(--radius-md);           /* elements: inputs, badges, list items */
-	--stuic-radius-button: var(--radius-md);    /* buttons: independent from general elements */
-	--stuic-radius-container: var(--radius-lg); /* containers: cards, modals, dropdowns, notifications */
+	--stuic-radius: var(--radius-md); /* elements: inputs, badges, list items */
+	--stuic-radius-button: var(
+		--radius-md
+	); /* buttons: independent from general elements */
+	--stuic-radius-container: var(
+		--radius-lg
+	); /* containers: cards, modals, dropdowns, notifications */
 
 	/* Shadows */
-	--stuic-shadow: var(--shadow-sm);           /* default resting shadow */
-	--stuic-shadow-hover: var(--shadow-md);     /* hover/elevated shadow */
-	--stuic-shadow-overlay: var(--shadow-lg);   /* overlays: dropdowns, notifications */
-	--stuic-shadow-dialog: var(--shadow-xl);    /* dialogs/modals */
+	--stuic-shadow: var(--shadow-sm); /* default resting shadow */
+	--stuic-shadow-hover: var(--shadow-md); /* hover/elevated shadow */
+	--stuic-shadow-overlay: var(--shadow-lg); /* overlays: dropdowns, notifications */
+	--stuic-shadow-dialog: var(--shadow-xl); /* dialogs/modals */
 
 	/* Border */
 	--stuic-border-width: 1px;
-	--stuic-border-width-button: 1px;    /* buttons: independent from general elements */
+	--stuic-border-width-button: 1px; /* buttons: independent from general elements */
 
 	/* Transition */
 	--stuic-transition: 150ms;

package/dist/utils/design-tokens.d.ts

@@ -1,2 +1,2 @@
-export { generateCssTokens, generateThemeCss, toCssString } from "@marianmeres/design-tokens";
+export { generateCssTokens, generateThemeCss, toCssString, } from "@marianmeres/design-tokens";
 export type { ColorPair, ColorValue, GeneratedTokens, IntentColorKey, RolePairedKey, RoleSingleKey, SingleColor, ThemeSchema, TokenSchema, WithOptional, WithRequired, } from "@marianmeres/design-tokens";

package/dist/utils/design-tokens.js

@@ -1,2 +1,2 @@
 // Re-export core API from @marianmeres/design-tokens
-export { generateCssTokens, generateThemeCss, toCssString } from "@marianmeres/design-tokens";
+export { generateCssTokens, generateThemeCss, toCssString, } from "@marianmeres/design-tokens";

package/docs/architecture.md

@@ -124,13 +124,13 @@ Props → Component → Data Attributes → CSS Selectors
 
 ## Key Files
 
-| File                             | Purpose                                                                     |
-| -------------------------------- | --------------------------------------------------------------------------- |
-| `src/lib/index.css`              | CSS entry point (import this)                                               |
-| `src/lib/index.ts`               | JS entry point (barrel export)                                              |
-| `@marianmeres/design-tokens/css/stone.css` | Default theme (42 themes available)                               |
-| `src/lib/utils/tw-merge.ts`      | Tailwind class merging                                                      |
-| `src/lib/utils/design-tokens.ts` | Theme types (`ThemeSchema`, `ColorPair`, etc.) and CSS generation functions |
+| File                                       | Purpose                                                                     |
+| ------------------------------------------ | --------------------------------------------------------------------------- |
+| `src/lib/index.css`                        | CSS entry point (import this)                                               |
+| `src/lib/index.ts`                         | JS entry point (barrel export)                                              |
+| `@marianmeres/design-tokens/css/stone.css` | Default theme (42 themes available)                                         |
+| `src/lib/utils/tw-merge.ts`                | Tailwind class merging                                                      |
+| `src/lib/utils/design-tokens.ts`           | Theme types (`ThemeSchema`, `ColorPair`, etc.) and CSS generation functions |
 
 ---
 

package/docs/component-testing/00-overview-and-roadmap.md

@@ -8,9 +8,9 @@ vitest-browser-svelte docs. Planning artifact; no code was changed.
 # @marianmeres/stuic — Component Testing: Overview & Roadmap
 
 > **Verdict:** the proposed stack — Vitest Browser Mode + `vitest-browser-svelte` + Playwright/Chromium
-> — is the right default for *this* library, where the value being shipped is precisely the DOM/layout/
+> — is the right default for _this_ library, where the value being shipped is precisely the DOM/layout/
 > focus/positioning behavior that the current node/server-build test setup **cannot exercise at all**.
-> The claim is *mostly* correct rather than gospel: it's not an officially-mandated singular standard
+> The claim is _mostly_ correct rather than gospel: it's not an officially-mandated singular standard
 > (svelte.dev still nominally leads with jsdom + @testing-library), and one term was dated — modern
 > spelling is `vitest-browser-svelte` + **`@vitest/browser-playwright`** + `playwright` on **Vitest 4**.
 >
@@ -32,28 +32,28 @@ vitest-browser-svelte docs. Planning artifact; no code was changed.
 
 [`docs/testing.md`](../testing.md) records a deliberate decision **not** to test component rendering
 ("50+ components × prop combos = slow suite, tiny yield; rendering is gated by svelte-check + publint +
-build"). That reasoning holds for *"does it render"* and we keep it. What changes: browser mode lets
-us test *"does it **behave**"* — events, two-way binding, aria/disabled/active state, focus traps,
+build"). That reasoning holds for _"does it render"_ and we keep it. What changes: browser mode lets
+us test _"does it **behave**"_ — events, two-way binding, aria/disabled/active state, focus traps,
 viewport-clamped positioning (cf. the `9d8c974` annotation regression) — which the build does **not**
 cover and which was **previously impossible**. Updating `docs/testing.md` to add this layer is an
 explicit sprint task so the docs don't contradict each other.
 
 ## Top recommendations across all dimensions (ranked)
 
-| Rank | Recommendation | Dimension | Value | Effort | Risk | Why now |
-|------|----------------|-----------|-------|--------|------|---------|
-| 1 | Upgrade vitest 3→4, verify 9 suites green | [01](./01-framework-setup.md) | high | S | med | Gating prerequisite; nothing installs without it |
-| 2 | Add `projects` split (node `server` + browser `client`) + Chromium | [01](./01-framework-setup.md) | high | S | med | The harness; routes by `*.svelte.test.ts` filename |
-| 3 | Separator smoke test — prove client build + `$effect` actually run | [01](./01-framework-setup.md) | high | S | med | Disproves/confirms the documented server-build blocker |
-| 4 | Reconcile `docs/testing.md` (behavior ✅, rendering still ❌) | [02](./02-test-conventions.md) | med | S | low | Keep docs internally consistent before scaling |
-| 5 | Button — flagship; sets every assertion pattern | [03](./03-component-coverage-roadmap.md) | high | S | low | Most-used primitive; template for the rest |
-| 6 | Pill, Switch — events + binding patterns | [03](./03-component-coverage-roadmap.md) | high | S | low | Cover dismiss/toggle/bind once, reuse everywhere |
-| 7 | Spinner, Skeleton, DismissibleMessage, Avatar, Progress | [03](./03-component-coverage-roadmap.md) | high | S | low | Deterministic, high-traffic; quick wins |
-| 8 | **One hard proof** — anchor-position viewport clamp (or focus trap) | [04](./04-hard-cases-and-e2e.md) | high | M | med | Guards a real recent regression; proves browser mode's worth |
-| 9 | Minimal GitHub Actions workflow | [05](./05-ci.md) | high | S | low | Stops broken tests reaching npm; once a few tests pass |
-| 10 | Tier-2 form fields (`FieldInput` first, then the family) | [03](./03-component-coverage-roadmap.md) | med | M | low | Largest component group; one pattern unlocks many |
-| 11 | Portals/focus-traps in browser mode (Modal/Drawer/Backdrop) | [04](./04-hard-cases-and-e2e.md) | med | M | med | High-value a11y contracts; after patterns settle |
-| 12 | Standalone Playwright E2E layer (drag, Milkdown, checkout flows) | [04](./04-hard-cases-and-e2e.md) | med | L | med | Separate later initiative; explicitly out of sprint 1 |
+| Rank | Recommendation                                                      | Dimension                                | Value | Effort | Risk | Why now                                                      |
+| ---- | ------------------------------------------------------------------- | ---------------------------------------- | ----- | ------ | ---- | ------------------------------------------------------------ |
+| 1    | Upgrade vitest 3→4, verify 9 suites green                           | [01](./01-framework-setup.md)            | high  | S      | med  | Gating prerequisite; nothing installs without it             |
+| 2    | Add `projects` split (node `server` + browser `client`) + Chromium  | [01](./01-framework-setup.md)            | high  | S      | med  | The harness; routes by `*.svelte.test.ts` filename           |
+| 3    | Separator smoke test — prove client build + `$effect` actually run  | [01](./01-framework-setup.md)            | high  | S      | med  | Disproves/confirms the documented server-build blocker       |
+| 4    | Reconcile `docs/testing.md` (behavior ✅, rendering still ❌)       | [02](./02-test-conventions.md)           | med   | S      | low  | Keep docs internally consistent before scaling               |
+| 5    | Button — flagship; sets every assertion pattern                     | [03](./03-component-coverage-roadmap.md) | high  | S      | low  | Most-used primitive; template for the rest                   |
+| 6    | Pill, Switch — events + binding patterns                            | [03](./03-component-coverage-roadmap.md) | high  | S      | low  | Cover dismiss/toggle/bind once, reuse everywhere             |
+| 7    | Spinner, Skeleton, DismissibleMessage, Avatar, Progress             | [03](./03-component-coverage-roadmap.md) | high  | S      | low  | Deterministic, high-traffic; quick wins                      |
+| 8    | **One hard proof** — anchor-position viewport clamp (or focus trap) | [04](./04-hard-cases-and-e2e.md)         | high  | M      | med  | Guards a real recent regression; proves browser mode's worth |
+| 9    | Minimal GitHub Actions workflow                                     | [05](./05-ci.md)                         | high  | S      | low  | Stops broken tests reaching npm; once a few tests pass       |
+| 10   | Tier-2 form fields (`FieldInput` first, then the family)            | [03](./03-component-coverage-roadmap.md) | med   | M      | low  | Largest component group; one pattern unlocks many            |
+| 11   | Portals/focus-traps in browser mode (Modal/Drawer/Backdrop)         | [04](./04-hard-cases-and-e2e.md)         | med   | M      | med  | High-value a11y contracts; after patterns settle             |
+| 12   | Standalone Playwright E2E layer (drag, Milkdown, checkout flows)    | [04](./04-hard-cases-and-e2e.md)         | med   | L      | med  | Separate later initiative; explicitly out of sprint 1        |
 
 > **Deliberately deferred as low-yield:** visual-regression / `toMatchScreenshot`, multi-browser
 > (Firefox/WebKit) matrix, and exhaustive prop-matrix coverage. Revisit only if motivated by a real bug.
@@ -65,7 +65,7 @@ Branch: `feat/component-testing`. One commit per task.
 1. **Vitest 4 upgrade (#1)** — `pnpm add -D vitest@^4`, run `pnpm test`, confirm 9 suites green. Why
    first: everything else peer-depends on it; isolating it makes the one risky bump reversible.
 2. **Browser harness (#2, #3)** — add browser deps, the `projects` config, `playwright install
-   chromium`, fix the test scripts, and land the Separator smoke test. Unblocks all component tests
+chromium`, fix the test scripts, and land the Separator smoke test. Unblocks all component tests
    and proves the server-build blocker is gone. Detail in [01](./01-framework-setup.md).
 3. **Reconcile `docs/testing.md` (#4)** — small doc edit so the philosophy matches reality.
 4. **Button (#5)** — establishes the assertion vocabulary ([02](./02-test-conventions.md)) every later