@marianmeres/stuic 3.72.2 → 3.74.0

package/AGENTS.md

@@ -23,7 +23,7 @@
 
 ```
 src/lib/
-├── components/     # 55 UI components
+├── components/     # 56 UI components
 ├── actions/        # 15 Svelte actions
 ├── utils/          # 43 utility modules
 ├── themes/         # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
@@ -116,7 +116,7 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 55 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 56 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [Actions](./docs/domains/actions.md) — 15 Svelte directives
 - [Utils](./docs/domains/utils.md) — 43 utility modules

package/API.md

@@ -841,6 +841,36 @@ User avatar with fallback to initials or icon.
 <!-- Shows "JD" initials -->
 ```
 
+#### `Pill`
+
+Inline rounded badge/tag/chip with intent + variant + size system. Polymorphic: renders as `<span>` (default), `<a>` (when `href` set), or `<button>` (when `onclick` set).
+
+| Prop            | Type                                                               | Default  | Description                                          |
+| --------------- | ------------------------------------------------------------------ | -------- | ---------------------------------------------------- |
+| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -        | Semantic color                                       |
+| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"` | Visual treatment                                     |
+| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`   | Pill size                                            |
+| `roundedFull`   | `boolean`                                                          | `true`   | Fully rounded (9999px). `false` → element radius     |
+| `block`         | `boolean`                                                          | `false`  | Block-level flex (full width)                        |
+| `dot`           | `boolean`                                                          | `false`  | Status dot before content                            |
+| `dismissible`   | `boolean`                                                          | `false`  | Built-in X dismiss button                            |
+| `ondismiss`     | `(e: MouseEvent) => void`                                          | -        | Called when X clicked (stops propagation)            |
+| `active`        | `boolean`                                                          | `false`  | Selected state (filter-chip)                         |
+| `muted`         | `boolean`                                                          | `false`  | Lower opacity                                        |
+| `href`, `target`| `string`                                                           | -        | Render as `<a>`                                      |
+| `onclick`       | `(e: MouseEvent) => void`                                          | -        | Render as `<button>`                                 |
+| `contentBefore` | `THC`                                                              | -        | Content before children                              |
+| `contentAfter`  | `THC`                                                              | -        | Content after children                               |
+
+```svelte
+<Pill intent="success" dot>Online</Pill>
+<Pill intent="primary" dismissible ondismiss={() => removeTag()}>tag</Pill>
+<Pill intent="accent" href="/profile">Profile</Pill>
+<Pill intent="warning" variant="outline" active onclick={toggle}>Filter</Pill>
+```
+
+CSS tokens: `--stuic-pill-radius`, `--stuic-pill-font-family`, `--stuic-pill-font-weight`, `--stuic-pill-gap`, `--stuic-pill-dot-size`, `--stuic-pill-ring-{width,color}`, `--stuic-pill-{padding-x,padding-y,font-size,min-height}-{sm,md,lg}`.
+
 #### `KbdShortcut`
 
 Keyboard shortcut display.

package/README.md

@@ -164,7 +164,7 @@ CommandMenu, DropdownMenu, TabbedMenu, TypeaheadInput, KbdShortcut
 
 ### Display & Utility
 
-Avatar, Book, BookResponsive, Card, Carousel, Circle, AnimatedElipsis, H, IconSwap, ImageCycler, Separator, ThemePreview, Tree, ColorScheme, Thc, HoverExpandableWidth, AssetsPreview, AssetsPreviewInline, DataTable
+Avatar, Pill, Book, BookResponsive, Card, Carousel, Circle, AnimatedElipsis, H, IconSwap, ImageCycler, Separator, ThemePreview, Tree, ColorScheme, Thc, HoverExpandableWidth, AssetsPreview, AssetsPreviewInline, DataTable
 
 ### E-commerce
 

package/dist/components/Book/BookResponsive.svelte

@@ -25,6 +25,7 @@
 </script>
 
 <script lang="ts">
+	import { untrack } from "svelte";
 	import {
 		iconBookOpen,
 		iconArrowRight as iconNext,
@@ -89,7 +90,7 @@
 
 	// ---- Manual mode override ----
 
-	let manualMode: "book" | "inline" | null = $state(initialMode ?? null);
+	let manualMode: "book" | "inline" | null = $state(untrack(() => initialMode ?? null));
 
 	// ---- Inline mode ----
 

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -59,7 +59,7 @@
 </script>
 
 <script lang="ts">
-	import { tick } from "svelte";
+	import { tick, untrack } from "svelte";
 	import {
 		validate as validateAction,
 		type ValidationResult,
@@ -142,9 +142,8 @@
 	});
 
 	// Selected country object (initialize once from defaultCountry prop)
-	const _initCountry = defaultCountry;
 	let selectedCountry: Country | undefined = $state(
-		_initCountry ? ISO_MAP.get(_initCountry.toUpperCase()) : undefined
+		untrack(() => (defaultCountry ? ISO_MAP.get(defaultCountry.toUpperCase()) : undefined))
 	);
 
 	// Internal local number (for controlled input)

package/dist/components/LoginForm/LoginForm.svelte

@@ -73,8 +73,6 @@
 		unstyled?: boolean;
 		class?: string;
 		el?: HTMLFormElement;
-
-		compact?: boolean;
 	}
 </script>
 
@@ -111,7 +109,6 @@
 		unstyled = false,
 		class: classProp,
 		el = $bindable(),
-		compact,
 		...rest
 	}: Props = $props();
 
@@ -158,13 +155,7 @@
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-login-form", classProp));
 </script>
 
-<form
-	bind:this={el}
-	class={_class}
-	use:onSubmitValidityCheck
-	{...rest}
-	data-compact={compact ? "" : undefined}
->
+<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" onDismiss={false} />
 
@@ -184,7 +175,6 @@
 		required
 		name="login-email"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator(val) {
 				return fieldError("email") || "";
@@ -203,7 +193,6 @@
 		required
 		name="login-password"
 		labelLeftBreakpoint={0}
-		class={compact ? "mb-4" : ""}
 		validate={{
 			customValidator(val) {
 				return fieldError("password") || "";
@@ -211,9 +200,22 @@
 		}}
 	/>
 
-	{#if compact}
-		<!-- Compact: remember me + submit in one row -->
-		<div class={unstyled ? undefined : "stuic-login-form-compact-cta"}>
+	<!-- CTA -->
+	{#if submitButton}
+		{@render submitButton({ isSubmitting, disabled: isSubmitting })}
+	{:else}
+		<div class={unstyled ? undefined : "stuic-login-form-submit"}>
+			<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">
+				{isSubmitting
+					? (submittingLabel ?? t("login_form.submitting"))
+					: (submitLabel ?? t("login_form.submit"))}
+			</Button>
+		</div>
+	{/if}
+
+	<!-- Remember me + Forgot password -->
+	{#if showRememberMe || onForgotPassword}
+		<div class={unstyled ? undefined : "stuic-login-form-options"}>
 			{#if showRememberMe}
 				<!-- svelte-ignore binding_property_non_reactive -->
 				<span use:tooltip aria-label={t("login_form.remember_me_tooltip")}>
@@ -225,58 +227,18 @@
 					/>
 				</span>
 			{/if}
-			{#if submitButton}
-				{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-			{:else}
-				<Button intent="primary" type="submit" disabled={isSubmitting} class="block">
-					{isSubmitting
-						? (submittingLabel ?? t("login_form.submitting"))
-						: (submitLabel ?? t("login_form.submit"))}
+			{#if onForgotPassword}
+				<Button
+					variant="link"
+					type="button"
+					class={unstyled ? undefined : "text-muted-foreground ml-auto"}
+					size="sm"
+					onclick={onForgotPassword}
+				>
+					{t("login_form.forgot_password")}
 				</Button>
 			{/if}
 		</div>
-	{:else}
-		<!-- Normal: remember me above submit -->
-		{#if showRememberMe}
-			<!-- svelte-ignore binding_property_non_reactive -->
-			<div class={unstyled ? undefined : "stuic-login-form-remember"}>
-				<span use:tooltip aria-label={t("login_form.remember_me_tooltip")}>
-					<FieldCheckbox
-						bind:checked={formData.rememberMe}
-						label={t("login_form.remember_me")}
-						name="login-remember-me"
-					/>
-				</span>
-			</div>
-		{/if}
-
-		<!-- CTA -->
-		{#if submitButton}
-			{@render submitButton({ isSubmitting, disabled: isSubmitting })}
-		{:else}
-			<div class={unstyled ? undefined : "stuic-login-form-submit"}>
-				<Button intent="primary" type="submit" disabled={isSubmitting} class="w-full">
-					{isSubmitting
-						? (submittingLabel ?? t("login_form.submitting"))
-						: (submitLabel ?? t("login_form.submit"))}
-				</Button>
-			</div>
-		{/if}
-	{/if}
-
-	<!-- Forgot password -->
-	{#if onForgotPassword}
-		<div class={unstyled ? undefined : "stuic-login-form-forgot"}>
-			<Button
-				variant="link"
-				type="button"
-				class="text-muted-foreground"
-				size="sm"
-				onclick={onForgotPassword}
-			>
-				{t("login_form.forgot_password")}
-			</Button>
-		</div>
 	{/if}
 
 	<!-- Social logins -->

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

@@ -57,7 +57,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children">
     unstyled?: boolean;
     class?: string;
     el?: HTMLFormElement;
-    compact?: boolean;
 }
 declare const LoginForm: import("svelte").Component<Props, {}, "el" | "formData">;
 type LoginForm = ReturnType<typeof LoginForm>;

package/dist/components/LoginForm/LoginFormModal.svelte

@@ -154,7 +154,7 @@
 	classDialog="flex items-center justify-center"
 >
 	{#snippet header()}
-		<div class="flex items-center justify-between p-4 pb-0">
+		<div class="flex items-center justify-between p-4">
 			<H level={1} renderLevel={3} class="pl-2">
 				{title ?? t("login_form.modal_title")}
 			</H>
@@ -193,7 +193,6 @@
 			t={tProp}
 			{unstyled}
 			class={classForm}
-			compact
 		/>
 	</div>
 </Modal>

package/dist/components/LoginForm/index.css

@@ -2,11 +2,9 @@
 	/* LoginForm */
 	--stuic-login-form-gap: 0rem;
 	--stuic-login-form-gap-row: 1rem;
-	--stuic-login-form-forgot-margin-y: 0.5rem;
-	--stuic-login-form-forgot-margin-x: 0.5rem;
 
 	/* Social login section */
-	--stuic-login-form-social-margin-top: 1rem;
+	--stuic-login-form-social-margin-top: 1.5rem;
 	--stuic-login-form-social-gap: 0.75rem;
 	--stuic-login-form-social-divider-color: var(--stuic-color-muted-foreground);
 	--stuic-login-form-social-divider-line-color: var(--stuic-color-border);
@@ -21,18 +19,15 @@
 		gap: var(--stuic-login-form-gap);
 	}
 
-	.stuic-login-form-forgot {
-		margin: var(--stuic-login-form-forgot-margin-y)
-			var(--stuic-login-form-forgot-margin-x) var(--stuic-login-form-forgot-margin-y)
-			var(--stuic-login-form-forgot-margin-x);
-	}
-
-	.stuic-login-form-remember {
-		margin-top: 0.25rem;
+	.stuic-login-form-submit {
+		margin-top: 1.5rem;
+		margin-bottom: 1.5rem;
 	}
 
-	.stuic-login-form-submit {
-		margin-top: 1rem;
+	.stuic-login-form-options {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
 	}
 
 	/* Social login container */
@@ -63,21 +58,9 @@
 		flex-direction: column;
 		gap: var(--stuic-login-form-social-gap);
 	}
+}
 
-	.stuic-login-form-compact-cta {
-		display: flex;
-		align-items: center;
-		/* justify-content: space-between; */
-		margin-top: 0.5rem;
-		gap: 2rem;
-	}
-
-	.stuic-login-form[data-compact] {
-		.stuic-login-form-submit {
-			margin-top: 0.5rem;
-		}
-		.stuic-button {
-			flex: 1;
-		}
-	}
+/* Tighten default FieldInput bottom margin (mb-8 → 1rem) inside the form */
+.stuic-login-form .stuic-input {
+	margin-bottom: 1rem;
 }

package/dist/components/LoginOrRegisterForm/LoginOrRegisterForm.svelte

@@ -40,8 +40,14 @@
 		/** Applied to both inner forms' submit buttons. */
 		isSubmitting?: boolean;
 
+		/**
+		 * Called when "Forgot password?" is clicked in login mode.
+		 * If undefined, the link is not rendered.
+		 */
+		onForgotPassword?: () => void;
+
 		/** Pass-through props for the inner LoginForm (spread). */
-		loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
+		loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit | "onForgotPassword">;
 
 		/** Pass-through props for the inner RegisterForm (spread). */
 		registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
@@ -137,6 +143,7 @@
 		onVerify,
 		onResendCode,
 		isSubmitting = false,
+		onForgotPassword,
 		loginProps,
 		registerProps,
 		verifyProps,
@@ -221,6 +228,7 @@
 				onSubmit={onLogin}
 				{isSubmitting}
 				{notifications}
+				{onForgotPassword}
 				t={tProp}
 				{...loginProps}
 			/>

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

@@ -22,8 +22,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     onRegister: (data: RegisterFormData) => void;
     /** Applied to both inner forms' submit buttons. */
     isSubmitting?: boolean;
+    /**
+     * Called when "Forgot password?" is clicked in login mode.
+     * If undefined, the link is not rendered.
+     */
+    onForgotPassword?: () => void;
     /** Pass-through props for the inner LoginForm (spread). */
-    loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit>;
+    loginProps?: Omit<LoginFormProps, InnerPropsCommonOmit | "onForgotPassword">;
     /** Pass-through props for the inner RegisterForm (spread). */
     registerProps?: Omit<RegisterFormProps, InnerPropsCommonOmit>;
     /**

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte

@@ -33,6 +33,12 @@
 
 		isSubmitting?: boolean;
 
+		/**
+		 * Called when "Forgot password?" is clicked in login mode.
+		 * If undefined, the link is not rendered.
+		 */
+		onForgotPassword?: () => void;
+
 		loginProps?: InnerProps["loginProps"];
 		registerProps?: InnerProps["registerProps"];
 		verifyProps?: InnerProps["verifyProps"];
@@ -101,6 +107,7 @@
 		onVerify,
 		onResendCode,
 		isSubmitting = false,
+		onForgotPassword,
 		loginProps,
 		registerProps,
 		verifyProps,
@@ -188,6 +195,7 @@
 			{onVerify}
 			{onResendCode}
 			{isSubmitting}
+			{onForgotPassword}
 			{loginProps}
 			{registerProps}
 			{verifyProps}

package/dist/components/LoginOrRegisterForm/LoginOrRegisterFormModal.svelte.d.ts

@@ -20,6 +20,11 @@ export interface Props {
     /** Called when the user clicks "Resend code" in the verify view. */
     onResendCode?: () => Promise<void> | void;
     isSubmitting?: boolean;
+    /**
+     * Called when "Forgot password?" is clicked in login mode.
+     * If undefined, the link is not rendered.
+     */
+    onForgotPassword?: () => void;
     loginProps?: InnerProps["loginProps"];
     registerProps?: InnerProps["registerProps"];
     verifyProps?: InnerProps["verifyProps"];

package/dist/components/LoginOrRegisterForm/index.css

@@ -1,10 +1,10 @@
 :root {
 	/* LoginOrRegisterForm */
-	--stuic-login-or-register-form-gap: 1rem;
-	--stuic-login-or-register-form-switcher-margin-bottom: 1rem;
+	--stuic-login-or-register-form-gap: 0rem;
+	--stuic-login-or-register-form-switcher-margin-bottom: 2rem;
 
 	/* Social login section (shared, rendered at composite level) */
-	--stuic-login-or-register-form-social-margin-top: 1rem;
+	--stuic-login-or-register-form-social-margin-top: 1.5rem;
 	--stuic-login-or-register-form-social-gap: 0.75rem;
 	--stuic-login-or-register-form-social-divider-color: var(
 		--stuic-color-muted-foreground

package/dist/components/Pill/Pill.svelte

@@ -0,0 +1,205 @@
+<script lang="ts" module>
+	import type {
+		HTMLAttributes,
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+	} from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	export type PillVariant = "solid" | "outline" | "ghost" | "soft" | "link";
+	export type PillSize = "sm" | "md" | "lg";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+		/** Color intent (semantic meaning) */
+		intent?: IntentColorKey;
+		/** Visual variant (how colors are applied) */
+		variant?: PillVariant | string;
+		/** Size preset */
+		size?: PillSize | string;
+		/** Reduce emphasis (lower opacity) */
+		muted?: boolean;
+		/** Selected/active state — useful for filter-chip behavior */
+		active?: boolean;
+		/** Pill is fully rounded by default; set false to use element radius */
+		roundedFull?: boolean;
+		/** Render as block-level flex (full width). Inline-flex by default. */
+		block?: boolean;
+		/** Skip all default styling, use only custom classes */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Render as anchor tag */
+		href?: string;
+		/** Link target (e.g. "_blank") — only relevant when href is set */
+		target?: string;
+		/** Render as button (when href not set) */
+		onclick?: (e: MouseEvent) => void;
+		/** Disabled (interactive variants only) */
+		disabled?: boolean;
+		/** Show built-in X dismiss control */
+		dismissible?: boolean;
+		/** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
+		ondismiss?: (e: MouseEvent) => void;
+		/** Status dot rendered before content (uses current intent color) */
+		dot?: boolean;
+		/** Content rendered before children */
+		contentBefore?: THC;
+		/** Content rendered after children */
+		contentAfter?: THC;
+		/** Bindable element reference */
+		el?: HTMLElement;
+		/** Content snippet */
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import { X } from "../X/index.js";
+
+	let {
+		class: classProp,
+		intent,
+		variant = "soft",
+		size = "md",
+		muted = false,
+		active = false,
+		roundedFull = true,
+		block = false,
+		unstyled = false,
+		href,
+		target,
+		onclick,
+		disabled,
+		dismissible = false,
+		ondismiss,
+		dot = false,
+		contentBefore,
+		contentAfter,
+		el = $bindable(),
+		children,
+		...rest
+	}: Props = $props();
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-pill", classProp));
+
+	function handleDismiss(e: MouseEvent) {
+		e.stopPropagation();
+		ondismiss?.(e);
+	}
+</script>
+
+{#snippet body()}
+	{#if dot}
+		<span class="stuic-pill-dot" aria-hidden="true"></span>
+	{/if}
+	{#if isTHCNotEmpty(contentBefore)}
+		<Thc thc={contentBefore as THC} />
+	{/if}
+	{@render children?.()}
+	{#if isTHCNotEmpty(contentAfter)}
+		<Thc thc={contentAfter as THC} />
+	{/if}
+{/snippet}
+
+{#snippet dismissBtn()}
+	<button
+		type="button"
+		class="stuic-pill-dismiss"
+		aria-label="Dismiss"
+		onclick={handleDismiss}
+		{disabled}
+	>
+		<X strokeWidth={2} />
+	</button>
+{/snippet}
+
+{#if dismissible}
+	<!-- Wrapper pattern: outer span carries pill styling; inner element is the
+	     interactive area (when href/onclick); X dismiss is a sibling button. -->
+	<span
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		data-dismissible="true"
+		{...rest}
+	>
+		{#if href}
+			<a {href} {target} class="stuic-pill-main">
+				{@render body()}
+			</a>
+		{:else if onclick}
+			<button type="button" class="stuic-pill-main" {onclick} {disabled}>
+				{@render body()}
+			</button>
+		{:else}
+			{@render body()}
+		{/if}
+		{@render dismissBtn()}
+	</span>
+{:else if href}
+	<a
+		{href}
+		{target}
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		data-interactive="true"
+		{...rest as HTMLAnchorAttributes}
+	>
+		{@render body()}
+	</a>
+{:else if onclick}
+	<button
+		type="button"
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		data-interactive="true"
+		{onclick}
+		{disabled}
+		{...rest as HTMLButtonAttributes}
+	>
+		{@render body()}
+	</button>
+{:else}
+	<span
+		bind:this={el}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-active={!unstyled && active ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-block={!unstyled && block ? "true" : undefined}
+		data-with-dot={!unstyled && dot ? "true" : undefined}
+		{...rest}
+	>
+		{@render body()}
+	</span>
+{/if}