@marianmeres/stuic 3.115.0 → 3.116.0

package/dist/components/ImageCycler/ImageCycler.svelte

@@ -17,8 +17,12 @@
 		minWait?: number;
 		transitionDuration?: number;
 		onclick?: (image: ImageCyclerImage, index: number) => void;
-		title?: Snippet<[{ image: ImageCyclerImage; index: number; onclick: (() => void) | undefined }]>;
-		description?: Snippet<[{ image: ImageCyclerImage; index: number; onclick: (() => void) | undefined }]>;
+		title?: Snippet<
+			[{ image: ImageCyclerImage; index: number; onclick: (() => void) | undefined }]
+		>;
+		description?: Snippet<
+			[{ image: ImageCyclerImage; index: number; onclick: (() => void) | undefined }]
+		>;
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLElement;
@@ -47,7 +51,9 @@
 
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-image-cycler", classProp));
 
-	let _onclick = $derived(onclick ? () => onclick(images[currentIndex], currentIndex) : undefined);
+	let _onclick = $derived(
+		onclick ? () => onclick(images[currentIndex], currentIndex) : undefined
+	);
 
 	$effect(() => {
 		const idx = currentIndex;
@@ -87,10 +93,18 @@
 				out:fade={{ duration: transitionDuration }}
 			>
 				{#if title}
-					{@render title({ image: images[currentIndex], index: currentIndex, onclick: _onclick })}
+					{@render title({
+						image: images[currentIndex],
+						index: currentIndex,
+						onclick: _onclick,
+					})}
 				{/if}
 				{#if description}
-					{@render description({ image: images[currentIndex], index: currentIndex, onclick: _onclick })}
+					{@render description({
+						image: images[currentIndex],
+						index: currentIndex,
+						onclick: _onclick,
+					})}
 				{/if}
 			</div>
 		{/key}

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

@@ -13,16 +13,20 @@ export interface Props {
     minWait?: number;
     transitionDuration?: number;
     onclick?: (image: ImageCyclerImage, index: number) => void;
-    title?: Snippet<[{
-        image: ImageCyclerImage;
-        index: number;
-        onclick: (() => void) | undefined;
-    }]>;
-    description?: Snippet<[{
-        image: ImageCyclerImage;
-        index: number;
-        onclick: (() => void) | undefined;
-    }]>;
+    title?: Snippet<[
+        {
+            image: ImageCyclerImage;
+            index: number;
+            onclick: (() => void) | undefined;
+        }
+    ]>;
+    description?: Snippet<[
+        {
+            image: ImageCyclerImage;
+            index: number;
+            onclick: (() => void) | undefined;
+        }
+    ]>;
     unstyled?: boolean;
     class?: string;
     el?: HTMLElement;

package/dist/components/ImageCycler/README.md

@@ -4,18 +4,18 @@ Auto-cycling background-image carousel with fade transitions. Preloads the next
 
 ## Props
 
-| Prop                 | Type                                                              | Default   | Description                                                            |
-| -------------------- | ----------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- |
-| `images`             | `ImageCyclerImage[]`                                              | required  | Images to cycle through.                                               |
-| `fit`                | `"cover" \| "contain" \| "fill"`                                  | `"cover"` | Background-size mode. Set via `data-fit` on the image layer.            |
-| `minWait`            | `number`                                                          | `3000`    | Minimum wait (ms) on each image before advancing.                       |
-| `transitionDuration` | `number`                                                          | `500`     | Fade duration in ms (for both the image and the meta layer).            |
-| `onclick`            | `(image, index) => void`                                          | -         | Click handler. The snippets receive a forwarded version.                |
-| `title`              | `Snippet<[{ image, index, onclick }]>`                            | -         | Title overlay snippet.                                                  |
-| `description`        | `Snippet<[{ image, index, onclick }]>`                            | -         | Description overlay snippet.                                            |
-| `unstyled`           | `boolean`                                                         | `false`   | Skip default styling.                                                   |
-| `class`              | `string`                                                          | -         | Additional CSS classes.                                                 |
-| `el`                 | `HTMLElement`                                                     | -         | Bindable root element.                                                  |
+| Prop                 | Type                                   | Default   | Description                                                  |
+| -------------------- | -------------------------------------- | --------- | ------------------------------------------------------------ |
+| `images`             | `ImageCyclerImage[]`                   | required  | Images to cycle through.                                     |
+| `fit`                | `"cover" \| "contain" \| "fill"`       | `"cover"` | Background-size mode. Set via `data-fit` on the image layer. |
+| `minWait`            | `number`                               | `3000`    | Minimum wait (ms) on each image before advancing.            |
+| `transitionDuration` | `number`                               | `500`     | Fade duration in ms (for both the image and the meta layer). |
+| `onclick`            | `(image, index) => void`               | -         | Click handler. The snippets receive a forwarded version.     |
+| `title`              | `Snippet<[{ image, index, onclick }]>` | -         | Title overlay snippet.                                       |
+| `description`        | `Snippet<[{ image, index, onclick }]>` | -         | Description overlay snippet.                                 |
+| `unstyled`           | `boolean`                              | `false`   | Skip default styling.                                        |
+| `class`              | `string`                               | -         | Additional CSS classes.                                      |
+| `el`                 | `HTMLElement`                          | -         | Bindable root element.                                       |
 
 ## `ImageCyclerImage`
 
@@ -71,9 +71,9 @@ interface ImageCyclerImage {
 
 ## CSS Variables
 
-| Variable                                    | Default | Description           |
-| ------------------------------------------- | ------- | --------------------- |
-| `--stuic-image-cycler-transition-duration`  | `500ms` | (informational; the active transition duration comes from the `transitionDuration` prop) |
+| Variable                                   | Default | Description                                                                              |
+| ------------------------------------------ | ------- | ---------------------------------------------------------------------------------------- |
+| `--stuic-image-cycler-transition-duration` | `500ms` | (informational; the active transition duration comes from the `transitionDuration` prop) |
 
 ## Notes
 

package/dist/components/ImageCycler/index.css

@@ -1,28 +1,34 @@
 :root {
-  --stuic-image-cycler-transition-duration: 500ms;
+	--stuic-image-cycler-transition-duration: 500ms;
 }
 
 @layer components {
-  .stuic-image-cycler {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
+	.stuic-image-cycler {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
 
-  .stuic-image-cycler-bg {
-    position: absolute;
-    inset: 0;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
+	.stuic-image-cycler-bg {
+		position: absolute;
+		inset: 0;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
 
-  .stuic-image-cycler-bg[data-fit="cover"]   { background-size: cover; }
-  .stuic-image-cycler-bg[data-fit="contain"] { background-size: contain; }
-  .stuic-image-cycler-bg[data-fit="fill"]    { background-size: 100% 100%; }
+	.stuic-image-cycler-bg[data-fit="cover"] {
+		background-size: cover;
+	}
+	.stuic-image-cycler-bg[data-fit="contain"] {
+		background-size: contain;
+	}
+	.stuic-image-cycler-bg[data-fit="fill"] {
+		background-size: 100% 100%;
+	}
 
-  .stuic-image-cycler-meta {
-    position: absolute;
-    inset: 0;
-  }
+	.stuic-image-cycler-meta {
+		position: absolute;
+		inset: 0;
+	}
 }

package/dist/components/Input/FieldFile.svelte

@@ -8,9 +8,7 @@
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
 	export interface Props
-		extends HTMLInputAttributes,
-			InputWrapClassProps,
-			Record<string, any> {
+		extends HTMLInputAttributes, InputWrapClassProps, Record<string, any> {
 		input?: HTMLInputElement;
 		files?: FileList;
 		multiple?: boolean;

package/dist/components/Input/FieldInput.svelte

@@ -9,9 +9,7 @@
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
 	export interface Props
-		extends HTMLInputAttributes,
-			InputWrapClassProps,
-			Record<string, any> {
+		extends HTMLInputAttributes, InputWrapClassProps, Record<string, any> {
 		input?: HTMLInputElement;
 		value?: string | number;
 		label?: SnippetWithId | THC;

package/dist/components/Input/FieldKeyValues.svelte

@@ -445,13 +445,9 @@
 									<span
 										class={twMerge(
 											"pointer-events-none absolute top-1.5 right-1.5",
-											st === "valid"
-												? "opacity-40"
-												: "text-amber-500 opacity-80"
+											st === "valid" ? "opacity-40" : "text-amber-500 opacity-80"
 										)}
-										title={st === "valid"
-											? t("json_detected")
-											: t("invalid_json_syntax")}
+										title={st === "valid" ? t("json_detected") : t("invalid_json_syntax")}
 										aria-hidden="true"
 									>
 										{@html st === "valid"

package/dist/components/Input/FieldObject.svelte

@@ -354,7 +354,8 @@
 	{value}
 	bind:this={hiddenInputEl}
 	use:validateAction={() => {
-		const customOpts = typeof validateProp === "object" && validateProp ? validateProp : {};
+		const customOpts =
+			typeof validateProp === "object" && validateProp ? validateProp : {};
 		const userValidator = customOpts.customValidator;
 		return {
 			enabled: validateProp !== false,

package/dist/components/Input/README.md

@@ -52,17 +52,17 @@ A comprehensive form input system with multiple field components, validation sup
 
 Every `Field*` component that uses the shared label/input/description scaffolding accepts **the same 9 class props**, exported as the `InputWrapClassProps` interface from `@marianmeres/stuic`. Each Field extends that interface in its own `Props`, so the shape stays in sync and new wrapper targets are added in one place.
 
-| Prop                        | Target                                                             |
-| --------------------------- | ------------------------------------------------------------------ |
-| `classLabel`                | `<label>` element                                                  |
-| `classLabelBox`             | Wrapper around the label area                                      |
-| `classInputBox`             | Wrapper around the whole input area                                |
-| `classInputBoxWrap`         | Inner input wrap (sibling to description/validation/below)         |
-| `classInputBoxWrapInvalid`  | Added to `classInputBoxWrap` when validation fails                 |
-| `classDescBox`              | Description/help text box                                          |
-| `classDescBoxToggle`        | Collapsible description's toggle button                            |
-| `classBelowBox`             | "Below" slot (rendered under the description)                      |
-| `classValidationBox`        | Validation message box                                             |
+| Prop                       | Target                                                     |
+| -------------------------- | ---------------------------------------------------------- |
+| `classLabel`               | `<label>` element                                          |
+| `classLabelBox`            | Wrapper around the label area                              |
+| `classInputBox`            | Wrapper around the whole input area                        |
+| `classInputBoxWrap`        | Inner input wrap (sibling to description/validation/below) |
+| `classInputBoxWrapInvalid` | Added to `classInputBoxWrap` when validation fails         |
+| `classDescBox`             | Description/help text box                                  |
+| `classDescBoxToggle`       | Collapsible description's toggle button                    |
+| `classBelowBox`            | "Below" slot (rendered under the description)              |
+| `classValidationBox`       | Validation message box                                     |
 
 Component-specific targets (e.g. `classInput` for the inner `<input>`/`<select>`/`<textarea>`, `classFileList` on `FieldFile`, `classOption`/`classOptgroup` on `FieldOptions`, `classPrefixTrigger` on `FieldPhoneNumber`, etc.) live on the component itself alongside these shared props.
 

package/dist/components/KbdShortcut/index.css

@@ -37,7 +37,8 @@
 		/* Box model */
 		padding: var(--stuic-kbd-padding-y) var(--stuic-kbd-padding-x);
 		border-radius: var(--stuic-kbd-radius, var(--stuic-radius));
-		border: var(--stuic-kbd-border-width, var(--stuic-border-width)) solid var(--stuic-kbd-border-color);
+		border: var(--stuic-kbd-border-width, var(--stuic-border-width)) solid
+			var(--stuic-kbd-border-color);
 	}
 
 	/* Symbol styling (⌘, ⇧, ⌥, ⌃, ⊞) */

package/dist/components/LoginForm/LoginForm.svelte

@@ -247,13 +247,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/LoginForm/README.md

@@ -6,47 +6,47 @@ Standalone login form with email/password fields, optional social/OAuth buttons,
 
 ## Exports
 
-| Export                     | Kind      | Description                                       |
-| -------------------------- | --------- | ------------------------------------------------- |
-| `LoginForm`                | component | Form component                                    |
-| `LoginFormModal`           | component | Modal-wrapped form with optional trigger snippet  |
-| `LoginFormProps`           | type      | Props for `LoginForm`                             |
-| `LoginFormModalProps`      | type      | Props for `LoginFormModal`                        |
-| `LoginFormData`            | type      | `{ email, password, rememberMe }`                 |
-| `LoginFormValidationError` | type      | `{ field, message }`                              |
-| `createEmptyLoginFormData` | function  | Factory for an empty `LoginFormData`               |
-| `validateLoginForm`        | function  | `(data, t) => LoginFormValidationError[]`         |
+| Export                     | Kind      | Description                                      |
+| -------------------------- | --------- | ------------------------------------------------ |
+| `LoginForm`                | component | Form component                                   |
+| `LoginFormModal`           | component | Modal-wrapped form with optional trigger snippet |
+| `LoginFormProps`           | type      | Props for `LoginForm`                            |
+| `LoginFormModalProps`      | type      | Props for `LoginFormModal`                       |
+| `LoginFormData`            | type      | `{ email, password, rememberMe }`                |
+| `LoginFormValidationError` | type      | `{ field, message }`                             |
+| `createEmptyLoginFormData` | function  | Factory for an empty `LoginFormData`             |
+| `validateLoginForm`        | function  | `(data, t) => LoginFormValidationError[]`        |
 
 ## LoginForm — Props
 
-| Prop                  | Type                                              | Default  | Description                                                                          |
-| --------------------- | ------------------------------------------------- | -------- | ------------------------------------------------------------------------------------ |
-| `formData`            | `LoginFormData`                                   | empty    | Bindable form data.                                                                  |
-| `onSubmit`            | `(data: LoginFormData) => void`                   | required | Called when client-side validation passes.                                            |
-| `isSubmitting`        | `boolean`                                         | `false`  | Disables the CTA during submission.                                                  |
-| `errors`              | `LoginFormValidationError[]`                      | `[]`     | Field-specific server errors (merged with internal validation).                       |
-| `error`               | `string`                                          | -        | General error rendered as a `DismissibleMessage` above the form.                      |
-| `onForgotPassword`    | `() => void`                                      | -        | Click handler for the "Forgot password?" link. Link is hidden when undefined.         |
-| `showRememberMe`      | `boolean`                                         | `true`   | Render the remember-me checkbox.                                                     |
-| `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 rendered below the form. 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., sign-up links).                                        |
-| `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`           | `LoginFormData`                         | empty    | Bindable form data.                                                              |
+| `onSubmit`           | `(data: LoginFormData) => void`         | required | Called when client-side validation passes.                                       |
+| `isSubmitting`       | `boolean`                               | `false`  | Disables the CTA during submission.                                              |
+| `errors`             | `LoginFormValidationError[]`            | `[]`     | Field-specific server errors (merged with internal validation).                  |
+| `error`              | `string`                                | -        | General error rendered as a `DismissibleMessage` above the form.                 |
+| `onForgotPassword`   | `() => void`                            | -        | Click handler for the "Forgot password?" link. Link is hidden when undefined.    |
+| `showRememberMe`     | `boolean`                               | `true`   | Render the remember-me checkbox.                                                 |
+| `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 rendered below the form. 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., sign-up links).                                    |
+| `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
 
 `bind:this` exposes:
 
-| 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()`. |
 
 These are essential for pristine-form errors (server errors set via the `errors` prop won't render until the user touches each field). See [`docs/domains/components.md#imperative-validate-api`](../../../docs/domains/components.md#imperative-validate-api) for the full pattern.
 
@@ -54,17 +54,17 @@ These are essential for pristine-form errors (server errors set via the `errors`
 
 Inherits all `LoginForm` props, plus:
 
-| Prop                  | Type                                | Default                                | Description                                                                   |
-| --------------------- | ----------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
-| `title`               | `string`                            | `"Log In"` (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 `LoginForm`.                                     |
-| `noXClose`            | `boolean`                           | `false`                                | Hide the close (X) button.                                                    |
-| `onClose`             | `() => false \| void`               | -                                      | Pre-close hook. Return `false` to prevent close.                              |
-| `noClickOutsideClose` | `boolean`                           | `true`                                 | Disable backdrop-click close (default-on to protect typed credentials).        |
+| Prop                  | Type                  | Default           | Description                                                             |
+| --------------------- | --------------------- | ----------------- | ----------------------------------------------------------------------- |
+| `title`               | `string`              | `"Log In"` (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 `LoginForm`.                               |
+| `noXClose`            | `boolean`             | `false`           | Hide the close (X) button.                                              |
+| `onClose`             | `() => false \| void` | -                 | Pre-close hook. Return `false` to prevent close.                        |
+| `noClickOutsideClose` | `boolean`             | `true`            | Disable backdrop-click close (default-on to protect typed credentials). |
 
 **Methods:** `open(openerOrEvent?)`, `close()` — exposed via `bind:this`.
 
@@ -137,8 +137,8 @@ Prefix: `--stuic-login-form-*`
 | `--stuic-login-form-gap-row`                      | Gap inside multi-column rows           |
 | `--stuic-login-form-forgot-margin-y`              | Forgot-password link vertical margin   |
 | `--stuic-login-form-forgot-margin-x`              | Forgot-password link horizontal margin |
-| `--stuic-login-form-social-margin-top`            | Margin above social buttons block       |
-| `--stuic-login-form-social-gap`                   | Gap between social buttons              |
+| `--stuic-login-form-social-margin-top`            | Margin above social buttons block      |
+| `--stuic-login-form-social-gap`                   | Gap between social buttons             |
 | `--stuic-login-form-social-divider-color`         | Divider text color                     |
 | `--stuic-login-form-social-divider-font-size`     | Divider text size                      |
 | `--stuic-login-form-social-divider-margin-bottom` | Divider bottom margin                  |

package/dist/components/ModalDialog/index.css

@@ -42,7 +42,8 @@
 	   ============================================================================ */
 
 	.stuic-modal-dialog[open]::backdrop {
-		animation: stuic-modal-dialog-fadeIn var(--stuic-modal-dialog-transition, var(--stuic-transition)) ease-out;
+		animation: stuic-modal-dialog-fadeIn
+			var(--stuic-modal-dialog-transition, var(--stuic-transition)) ease-out;
 	}
 
 	@keyframes stuic-modal-dialog-fadeIn {

package/dist/components/Notifications/index.css

@@ -152,8 +152,14 @@
 		align-items: center;
 		justify-content: center;
 		padding: 0 calc(var(--spacing) * 3);
-		border-top-right-radius: var(--stuic-notification-radius, var(--stuic-radius-container));
-		border-bottom-right-radius: var(--stuic-notification-radius, var(--stuic-radius-container));
+		border-top-right-radius: var(
+			--stuic-notification-radius,
+			var(--stuic-radius-container)
+		);
+		border-bottom-right-radius: var(
+			--stuic-notification-radius,
+			var(--stuic-radius-container)
+		);
 		color: var(--_text);
 		opacity: 0.75;
 		transition: opacity var(--stuic-notification-transition, var(--stuic-transition));
@@ -198,8 +204,14 @@
 		position: absolute;
 		inset: 0;
 		background: transparent;
-		border-bottom-left-radius: var(--stuic-notification-radius, var(--stuic-radius-container));
-		border-bottom-right-radius: var(--stuic-notification-radius, var(--stuic-radius-container));
+		border-bottom-left-radius: var(
+			--stuic-notification-radius,
+			var(--stuic-radius-container)
+		);
+		border-bottom-right-radius: var(
+			--stuic-notification-radius,
+			var(--stuic-radius-container)
+		);
 		overflow: hidden;
 		pointer-events: none;
 	}
@@ -208,7 +220,13 @@
 		width: 100%;
 		height: 100%;
 		/* background: rgb(255 255 255 / 0.5); */
-		border-bottom-left-radius: var(--stuic-notification-radius, var(--stuic-radius-container));
-		border-bottom-right-radius: var(--stuic-notification-radius, var(--stuic-radius-container));
+		border-bottom-left-radius: var(
+			--stuic-notification-radius,
+			var(--stuic-radius-container)
+		);
+		border-bottom-right-radius: var(
+			--stuic-notification-radius,
+			var(--stuic-radius-container)
+		);
 	}
 }

package/dist/components/OtpInput/README.md

@@ -11,29 +11,25 @@ Generic N-slot one-time-code input. 6 digits by default, configurable. Building
 	let code = $state("");
 </script>
 
-<OtpInput
-	bind:value={code}
-	length={6}
-	onComplete={(c) => console.log("Got code:", c)}
-/>
+<OtpInput bind:value={code} length={6} onComplete={(c) => console.log("Got code:", c)} />
 ```
 
 ## Props
 
-| Prop           | Type                            | Default            | Description                                                       |
-| -------------- | ------------------------------- | ------------------ | ----------------------------------------------------------------- |
-| `value`        | `string`                        | `""`               | Bindable concatenated value                                       |
-| `length`       | `number`                        | `6`                | Number of slots                                                   |
-| `onComplete`   | `(code: string) => void`        | —                  | Fired when all slots are filled                                   |
-| `oninput`      | `(value: string) => void`       | —                  | Fired on every change                                             |
-| `error`        | `boolean`                       | `false`            | Renders error styling + `aria-invalid`                            |
-| `disabled`     | `boolean`                       | `false`            | Disables all slots                                                |
-| `autoFocus`    | `boolean`                       | `true`             | Auto-focus the first empty slot on mount                          |
-| `mode`         | `"numeric" \| "alphanumeric"`   | `"numeric"`        | Restrict input characters                                         |
-| `autocomplete` | `string`                        | `"one-time-code"`  | Pass-through to first slot for browser/iOS auto-fill              |
-| `unstyled`     | `boolean`                       | `false`            | Skip default styling                                              |
-| `class`        | `string`                        | —                  | Additional CSS classes on the root                                |
-| `el`           | `HTMLDivElement`                | —                  | Bindable root element ref                                         |
+| Prop           | Type                          | Default           | Description                                          |
+| -------------- | ----------------------------- | ----------------- | ---------------------------------------------------- |
+| `value`        | `string`                      | `""`              | Bindable concatenated value                          |
+| `length`       | `number`                      | `6`               | Number of slots                                      |
+| `onComplete`   | `(code: string) => void`      | —                 | Fired when all slots are filled                      |
+| `oninput`      | `(value: string) => void`     | —                 | Fired on every change                                |
+| `error`        | `boolean`                     | `false`           | Renders error styling + `aria-invalid`               |
+| `disabled`     | `boolean`                     | `false`           | Disables all slots                                   |
+| `autoFocus`    | `boolean`                     | `true`            | Auto-focus the first empty slot on mount             |
+| `mode`         | `"numeric" \| "alphanumeric"` | `"numeric"`       | Restrict input characters                            |
+| `autocomplete` | `string`                      | `"one-time-code"` | Pass-through to first slot for browser/iOS auto-fill |
+| `unstyled`     | `boolean`                     | `false`           | Skip default styling                                 |
+| `class`        | `string`                      | —                 | Additional CSS classes on the root                   |
+| `el`           | `HTMLDivElement`              | —                 | Bindable root element ref                            |
 
 ## Behavior
 

package/dist/components/OtpInput/index.css

@@ -20,10 +20,7 @@
 	}
 
 	.stuic-otp-input-slot:focus {
-		border-color: var(
-			--stuic-otp-input-border-color-focus,
-			var(--stuic-color-primary)
-		);
+		border-color: var(--stuic-otp-input-border-color-focus, var(--stuic-color-primary));
 		outline: none;
 	}
 

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

@@ -1 +1 @@
-export { default as OtpInput, type Props as OtpInputProps, } from "./OtpInput.svelte";
+export { default as OtpInput, type Props as OtpInputProps } from "./OtpInput.svelte";

package/dist/components/OtpInput/index.js

@@ -1 +1 @@
-export { default as OtpInput, } from "./OtpInput.svelte";
+export { default as OtpInput } from "./OtpInput.svelte";