@marianmeres/stuic 3.115.0 → 3.116.0

package/dist/components/DropdownMenu/README.md

@@ -4,32 +4,32 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 
 ## Props
 
-| Prop                     | Type                   | Default              | Description                              |
-| ------------------------ | ---------------------- | -------------------- | ---------------------------------------- |
-| `items`                  | `DropdownMenuItem[]`   | -                    | Menu items to display                    |
-| `isOpen`                 | `boolean`              | `false`              | Controlled open state (bindable)         |
-| `position`               | `DropdownMenuPosition` | `"bottom-span-right"` | Popover position relative to trigger    |
-| `offset`                 | `string`               | `"0.25rem"`          | Offset from trigger element (CSS value)  |
-| `maxHeight`              | `string`               | `"300px"`            | Max height of dropdown                   |
-| `closeOnSelect`          | `boolean`              | `true`               | Close menu when action item is selected  |
-| `closeOnClickOutside`    | `boolean`              | `true`               | Close on click outside                   |
-| `closeOnEscape`          | `boolean`              | `true`               | Close on Escape key                      |
-| `forceFallback`          | `boolean`              | `false`              | Force fallback positioning (for testing) |
-| `search`                 | `boolean \| DropdownMenuSearchConfig` | -     | Enable search/filter input (see [Search](#search)) |
-| `unstyled`               | `boolean`              | `false`              | Opt out of stuic base classes            |
-| `class`                  | `string`               | -                    | Classes for wrapper element              |
-| `classTrigger`           | `string`               | -                    | Classes for trigger button               |
-| `classDropdown`          | `string`               | -                    | Classes for dropdown container           |
-| `classItem`              | `string`               | -                    | Classes for action items                 |
-| `classItemActive`        | `string`               | -                    | Classes for active/focused item          |
-| `classItemDisabled`      | `string`               | -                    | Classes for disabled items               |
-| `classDivider`           | `string`               | -                    | Classes for dividers                     |
-| `classHeader`            | `string`               | -                    | Classes for header items                 |
-| `classExpandable`        | `string`               | -                    | Classes for expandable section header    |
-| `classExpandableContent` | `string`               | -                    | Classes for expandable section content   |
-| `el`                     | `HTMLDivElement`       | -                    | Wrapper element reference (bindable)     |
-| `triggerEl`              | `HTMLButtonElement`    | -                    | Trigger element reference (bindable)     |
-| `dropdownEl`             | `HTMLDivElement`       | -                    | Dropdown element reference (bindable)    |
+| Prop                     | Type                                  | Default               | Description                                        |
+| ------------------------ | ------------------------------------- | --------------------- | -------------------------------------------------- |
+| `items`                  | `DropdownMenuItem[]`                  | -                     | Menu items to display                              |
+| `isOpen`                 | `boolean`                             | `false`               | Controlled open state (bindable)                   |
+| `position`               | `DropdownMenuPosition`                | `"bottom-span-right"` | Popover position relative to trigger               |
+| `offset`                 | `string`                              | `"0.25rem"`           | Offset from trigger element (CSS value)            |
+| `maxHeight`              | `string`                              | `"300px"`             | Max height of dropdown                             |
+| `closeOnSelect`          | `boolean`                             | `true`                | Close menu when action item is selected            |
+| `closeOnClickOutside`    | `boolean`                             | `true`                | Close on click outside                             |
+| `closeOnEscape`          | `boolean`                             | `true`                | Close on Escape key                                |
+| `forceFallback`          | `boolean`                             | `false`               | Force fallback positioning (for testing)           |
+| `search`                 | `boolean \| DropdownMenuSearchConfig` | -                     | Enable search/filter input (see [Search](#search)) |
+| `unstyled`               | `boolean`                             | `false`               | Opt out of stuic base classes                      |
+| `class`                  | `string`                              | -                     | Classes for wrapper element                        |
+| `classTrigger`           | `string`                              | -                     | Classes for trigger button                         |
+| `classDropdown`          | `string`                              | -                     | Classes for dropdown container                     |
+| `classItem`              | `string`                              | -                     | Classes for action items                           |
+| `classItemActive`        | `string`                              | -                     | Classes for active/focused item                    |
+| `classItemDisabled`      | `string`                              | -                     | Classes for disabled items                         |
+| `classDivider`           | `string`                              | -                     | Classes for dividers                               |
+| `classHeader`            | `string`                              | -                     | Classes for header items                           |
+| `classExpandable`        | `string`                              | -                     | Classes for expandable section header              |
+| `classExpandableContent` | `string`                              | -                     | Classes for expandable section content             |
+| `el`                     | `HTMLDivElement`                      | -                     | Wrapper element reference (bindable)               |
+| `triggerEl`              | `HTMLButtonElement`                   | -                     | Trigger element reference (bindable)               |
+| `dropdownEl`             | `HTMLDivElement`                      | -                     | Dropdown element reference (bindable)              |
 
 ## Snippets
 
@@ -199,7 +199,13 @@ interface DropdownMenuSearchConfig {
 <DropdownMenu
 	items={[
 		{ type: "action", id: "docs", label: "Documentation", href: "/docs" },
-		{ type: "action", id: "github", label: "GitHub", href: "https://github.com/...", target: "_blank" },
+		{
+			type: "action",
+			id: "github",
+			label: "GitHub",
+			href: "https://github.com/...",
+			target: "_blank",
+		},
 		{ type: "divider" },
 		{ type: "action", id: "logout", label: "Logout", onSelect: () => handleLogout() },
 	]}

package/dist/components/EmailVerifyForm/EmailVerifyForm.svelte

@@ -265,15 +265,8 @@
 		{@render submitButton({ isSubmitting, disabled: submitDisabled })}
 	{:else}
 		<div class={unstyled ? undefined : "stuic-email-verify-form-submit"}>
-			<Button
-				intent="primary"
-				type="submit"
-				disabled={submitDisabled}
-				class="w-full"
-			>
-				{isSubmitting
-					? t("email_verify_form.submitting")
-					: t("email_verify_form.submit")}
+			<Button intent="primary" type="submit" disabled={submitDisabled} class="w-full">
+				{isSubmitting ? t("email_verify_form.submitting") : t("email_verify_form.submit")}
 			</Button>
 		</div>
 	{/if}

package/dist/components/EmailVerifyForm/README.md

@@ -36,39 +36,39 @@ The form owns:
 
 ## Props
 
-| Prop                    | Type                                       | Default  | Description                                              |
-| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
-| `email`                 | `string`                                   | required | Email address shown in the subhead                       |
-| `onSubmit`              | `(code: string) => void`                   | required | Called with the entered code (auto on complete + manual) |
-| `onResend`              | `() => Promise<void> \| void`              | —        | When set, renders a resend control                       |
-| `resendCooldownSeconds` | `number`                                   | `30`     | Cooldown after a successful resend                       |
-| `isSubmitting`          | `boolean`                                  | `false`  | Disables submit + OtpInput                               |
-| `error`                 | `string`                                   | —        | General error (renders alert + applies error styling)    |
-| `attemptsRemaining`     | `number`                                   | —        | Inline hint, e.g. "3 attempts remaining"                 |
-| `codeLength`            | `number`                                   | `6`      | Forwarded to OtpInput                                    |
-| `otpInputProps`         | `Partial<OtpInputProps>`                   | —        | Pass-through props for the inner OtpInput                |
-| `notifications`         | `NotificationsStack`                       | —        | Route errors to notification system                      |
-| `submitButton`          | `Snippet`                                  | —        | Override submit section                                  |
-| `footer`                | `Snippet`                                  | —        | Content below the resend control                         |
-| `heading`               | `string \| false`                          | —        | Override heading text, or `false` to suppress entirely   |
-| `t`                     | `TranslateFn`                              | built-in | Translation function                                     |
-| `unstyled`              | `boolean`                                  | `false`  | Skip default styling                                     |
-| `class`                 | `string`                                   | —        | Additional CSS classes on the form root                  |
-| `el`                    | `HTMLFormElement`                          | —        | Bindable form element                                    |
+| Prop                    | Type                          | Default  | Description                                              |
+| ----------------------- | ----------------------------- | -------- | -------------------------------------------------------- |
+| `email`                 | `string`                      | required | Email address shown in the subhead                       |
+| `onSubmit`              | `(code: string) => void`      | required | Called with the entered code (auto on complete + manual) |
+| `onResend`              | `() => Promise<void> \| void` | —        | When set, renders a resend control                       |
+| `resendCooldownSeconds` | `number`                      | `30`     | Cooldown after a successful resend                       |
+| `isSubmitting`          | `boolean`                     | `false`  | Disables submit + OtpInput                               |
+| `error`                 | `string`                      | —        | General error (renders alert + applies error styling)    |
+| `attemptsRemaining`     | `number`                      | —        | Inline hint, e.g. "3 attempts remaining"                 |
+| `codeLength`            | `number`                      | `6`      | Forwarded to OtpInput                                    |
+| `otpInputProps`         | `Partial<OtpInputProps>`      | —        | Pass-through props for the inner OtpInput                |
+| `notifications`         | `NotificationsStack`          | —        | Route errors to notification system                      |
+| `submitButton`          | `Snippet`                     | —        | Override submit section                                  |
+| `footer`                | `Snippet`                     | —        | Content below the resend control                         |
+| `heading`               | `string \| false`             | —        | Override heading text, or `false` to suppress entirely   |
+| `t`                     | `TranslateFn`                 | built-in | Translation function                                     |
+| `unstyled`              | `boolean`                     | `false`  | Skip default styling                                     |
+| `class`                 | `string`                      | —        | Additional CSS classes on the form root                  |
+| `el`                    | `HTMLFormElement`             | —        | Bindable form element                                    |
 
 ## i18n keys
 
-| Key                                       | Default                                    |
-| ----------------------------------------- | ------------------------------------------ |
-| `email_verify_form.heading`               | `Check your email`                         |
-| `email_verify_form.subheading`            | `We sent a 6-digit code to {email}`        |
-| `email_verify_form.submit`                | `Verify`                                   |
-| `email_verify_form.submitting`            | `Verifying...`                             |
-| `email_verify_form.resend_prompt`         | `Didn't receive it?`                       |
-| `email_verify_form.resend`                | `Resend code`                              |
-| `email_verify_form.resend_cooldown`       | `Resend available in {seconds}s`           |
-| `email_verify_form.resent`                | `New code sent`                            |
-| `email_verify_form.attempts_remaining`    | `{count} attempts remaining`               |
+| Key                                    | Default                             |
+| -------------------------------------- | ----------------------------------- |
+| `email_verify_form.heading`            | `Check your email`                  |
+| `email_verify_form.subheading`         | `We sent a 6-digit code to {email}` |
+| `email_verify_form.submit`             | `Verify`                            |
+| `email_verify_form.submitting`         | `Verifying...`                      |
+| `email_verify_form.resend_prompt`      | `Didn't receive it?`                |
+| `email_verify_form.resend`             | `Resend code`                       |
+| `email_verify_form.resend_cooldown`    | `Resend available in {seconds}s`    |
+| `email_verify_form.resent`             | `New code sent`                     |
+| `email_verify_form.attempts_remaining` | `{count} attempts remaining`        |
 
 ## CSS Tokens
 

package/dist/components/Header/Header.svelte

@@ -331,8 +331,7 @@
 	// trailing dropdown when collapsed). In "hide" mode: visible when not
 	// collapsed, or when collapsed and `keepLocaleOnCollapse` is set.
 	let _showLocaleSwitcher = $derived(
-		_hasLocales &&
-			(!_isCollapsed || (collapseMode === "hide" && keepLocaleOnCollapse))
+		_hasLocales && (!_isCollapsed || (collapseMode === "hide" && keepLocaleOnCollapse))
 	);
 
 	// Active locale object (for trigger label); fallback to first
@@ -473,199 +472,196 @@
 		})}
 	{:else}
 		<div bind:offsetWidth={_innerWidth} class={_classContent} style={_styleContent}>
-		<!-- Leading slot (left-side) -->
-		{#if leading}
-			<div class={_classLeading}>
-				{@render leading({ isCollapsed: _isCollapsed })}
-			</div>
-		{:else if _showLeadingHamburger}
-			<div class={_classLeading}>
-				<Button
-					variant="ghost"
-					iconButton
-					size="sm"
-					{unstyled}
-					class={twMerge(
-						!unstyled && HEADER_LEADING_HAMBURGER_CLASSES,
-						classLeadingHamburger
-					)}
-					onclick={onLeadingHamburger}
-					aria-label={leadingHamburgerLabel}
-				>
-					{#if leadingHamburgerIcon}
-						<Thc thc={leadingHamburgerIcon} />
-					{:else}
-						{@html iconMenu({ size: iconSize })}
-					{/if}
-				</Button>
-			</div>
-		{/if}
-
-		<!-- Logo / Title (flex-1) -->
-		<div class={_classLogo}>
-			{#if logo}
-				{@render logo()}
-			{:else if projectName}
-				<span class={unstyled ? undefined : "stuic-header-project-name"}>
-					{projectName}
-				</span>
-			{/if}
-		</div>
-
-		<!-- Nav items (expanded mode) -->
-		{#if !_isCollapsed && items.length > 0}
-			<nav class={_classNav}>
-				{#each items as item (item.id)}
+			<!-- Leading slot (left-side) -->
+			{#if leading}
+				<div class={_classLeading}>
+					{@render leading({ isCollapsed: _isCollapsed })}
+				</div>
+			{:else if _showLeadingHamburger}
+				<div class={_classLeading}>
 					<Button
-						variant={navVariant}
+						variant="ghost"
+						iconButton
 						size="sm"
-						href={item.href}
-						target={item.target}
-						disabled={item.disabled}
 						{unstyled}
 						class={twMerge(
-							!unstyled && HEADER_NAV_ITEM_CLASSES,
-							!unstyled && item.active && classNavItemActive,
-							classNavItem,
-							item.class
+							!unstyled && HEADER_LEADING_HAMBURGER_CLASSES,
+							classLeadingHamburger
 						)}
-						data-active={!unstyled && item.active ? "" : undefined}
-						aria-current={item.active ? "page" : undefined}
-						onclick={() => handleItemClick(item)}
+						onclick={onLeadingHamburger}
+						aria-label={leadingHamburgerLabel}
 					>
-						{#if item.icon}
-							<span class={unstyled ? undefined : "stuic-header-nav-icon"}>
-								<Thc thc={item.icon} />
-							</span>
+						{#if leadingHamburgerIcon}
+							<Thc thc={leadingHamburgerIcon} />
+						{:else}
+							{@html iconMenu({ size: iconSize })}
 						{/if}
-						<Thc thc={item.label} />
 					</Button>
-				{/each}
-			</nav>
-		{/if}
-
-		<!-- End area: locale + actions + avatar + trailing hamburger -->
-		<div class={_classEnd}>
-			<!-- Locale switcher (shown when expanded, or in "hide" mode with keepLocaleOnCollapse) -->
-			{#if _showLocaleSwitcher}
-				<DropdownMenu
-					items={_localeDropdownItems}
-					position="bottom-span-right"
-					class={_classLocale}
-				>
-					{#snippet trigger({ isOpen, toggle, triggerProps })}
+				</div>
+			{/if}
+
+			<!-- Logo / Title (flex-1) -->
+			<div class={_classLogo}>
+				{#if logo}
+					{@render logo()}
+				{:else if projectName}
+					<span class={unstyled ? undefined : "stuic-header-project-name"}>
+						{projectName}
+					</span>
+				{/if}
+			</div>
+
+			<!-- Nav items (expanded mode) -->
+			{#if !_isCollapsed && items.length > 0}
+				<nav class={_classNav}>
+					{#each items as item (item.id)}
 						<Button
 							variant={navVariant}
 							size="sm"
+							href={item.href}
+							target={item.target}
+							disabled={item.disabled}
 							{unstyled}
 							class={twMerge(
-								!unstyled && "stuic-header-locale-trigger",
-								classLocale
+								!unstyled && HEADER_NAV_ITEM_CLASSES,
+								!unstyled && item.active && classNavItemActive,
+								classNavItem,
+								item.class
 							)}
-							onclick={toggle}
-							aria-label="Change language"
-							{...triggerProps}
+							data-active={!unstyled && item.active ? "" : undefined}
+							aria-current={item.active ? "page" : undefined}
+							onclick={() => handleItemClick(item)}
 						>
-							{#if _activeLocale}
-								<Thc thc={_activeLocale.label} />
+							{#if item.icon}
+								<span class={unstyled ? undefined : "stuic-header-nav-icon"}>
+									<Thc thc={item.icon} />
+								</span>
 							{/if}
-							<span
-								class={twMerge(
-									!unstyled && "stuic-header-locale-chevron",
-									isOpen && !unstyled && "stuic-header-locale-chevron-open"
-								)}
-							>
-								{@html iconChevronDown({ size: 14 })}
-							</span>
+							<Thc thc={item.label} />
 						</Button>
-					{/snippet}
-				</DropdownMenu>
+					{/each}
+				</nav>
 			{/if}
 
-			<!-- Actions (icon buttons, always visible) -->
-			{#if actions.length > 0}
-				<div class={_classActions}>
-					{#each actions as action (action.id)}
-						{@const actionClass = twMerge(
-							!unstyled && HEADER_ACTION_CLASSES,
-							!unstyled && action.active && classActionActive,
-							classAction,
-							action.class
-						)}
-						{#if action.render}
-							{@render action.render({
-								action,
-								class: actionClass,
-								isCollapsed: _isCollapsed,
-								onclick: () => handleActionClick(action),
-							})}
-						{:else}
+			<!-- End area: locale + actions + avatar + trailing hamburger -->
+			<div class={_classEnd}>
+				<!-- Locale switcher (shown when expanded, or in "hide" mode with keepLocaleOnCollapse) -->
+				{#if _showLocaleSwitcher}
+					<DropdownMenu
+						items={_localeDropdownItems}
+						position="bottom-span-right"
+						class={_classLocale}
+					>
+						{#snippet trigger({ isOpen, toggle, triggerProps })}
 							<Button
-								variant="ghost"
-								iconButton
+								variant={navVariant}
 								size="sm"
-								href={action.href}
-								target={action.target}
-								disabled={action.disabled}
 								{unstyled}
-								class={actionClass}
-								data-active={!unstyled && action.active ? "" : undefined}
-								aria-label={typeof action.label === "string" ? action.label : undefined}
-								onclick={() => handleActionClick(action)}
+								class={twMerge(!unstyled && "stuic-header-locale-trigger", classLocale)}
+								onclick={toggle}
+								aria-label="Change language"
+								{...triggerProps}
 							>
-								{#if action.icon !== undefined}
-									<Thc thc={action.icon} />
+								{#if _activeLocale}
+									<Thc thc={_activeLocale.label} />
 								{/if}
+								<span
+									class={twMerge(
+										!unstyled && "stuic-header-locale-chevron",
+										isOpen && !unstyled && "stuic-header-locale-chevron-open"
+									)}
+								>
+									{@html iconChevronDown({ size: 14 })}
+								</span>
 							</Button>
-						{/if}
-					{/each}
-				</div>
-			{/if}
+						{/snippet}
+					</DropdownMenu>
+				{/if}
 
-			<!-- Avatar: hidden when collapsed + avatarOnClick (moves into dropdown) -->
-			{#if avatar && !(_isCollapsed && _avatarInDropdown)}
-				{#if avatarOnClick}
-					<button
-						type="button"
-						class={twMerge(!unstyled && "stuic-header-avatar", classAvatar)}
-						onclick={avatarOnClick}
-					>
-						{@render avatar()}
-					</button>
-				{:else}
-					<div class={twMerge(!unstyled && "stuic-header-avatar", classAvatar)}>
-						{@render avatar()}
+				<!-- Actions (icon buttons, always visible) -->
+				{#if actions.length > 0}
+					<div class={_classActions}>
+						{#each actions as action (action.id)}
+							{@const actionClass = twMerge(
+								!unstyled && HEADER_ACTION_CLASSES,
+								!unstyled && action.active && classActionActive,
+								classAction,
+								action.class
+							)}
+							{#if action.render}
+								{@render action.render({
+									action,
+									class: actionClass,
+									isCollapsed: _isCollapsed,
+									onclick: () => handleActionClick(action),
+								})}
+							{:else}
+								<Button
+									variant="ghost"
+									iconButton
+									size="sm"
+									href={action.href}
+									target={action.target}
+									disabled={action.disabled}
+									{unstyled}
+									class={actionClass}
+									data-active={!unstyled && action.active ? "" : undefined}
+									aria-label={typeof action.label === "string" ? action.label : undefined}
+									onclick={() => handleActionClick(action)}
+								>
+									{#if action.icon !== undefined}
+										<Thc thc={action.icon} />
+									{/if}
+								</Button>
+							{/if}
+						{/each}
 					</div>
 				{/if}
-			{/if}
 
-			{#if _isCollapsed && _dropdownItems.length > 0}
-				<DropdownMenu
-					items={_dropdownItems}
-					bind:isOpen={isMenuOpen}
-					position={dropdownPosition}
-					class={classDropdown}
-				>
-					{#snippet trigger({ isOpen, toggle, triggerProps })}
-						<Button
-							variant="ghost"
-							iconButton
-							size="sm"
-							{unstyled}
-							class={twMerge(!unstyled && HEADER_HAMBURGER_CLASSES, classHamburger)}
-							onclick={toggle}
-							aria-label={isOpen ? "Close menu" : "Open menu"}
-							{...triggerProps}
+				<!-- Avatar: hidden when collapsed + avatarOnClick (moves into dropdown) -->
+				{#if avatar && !(_isCollapsed && _avatarInDropdown)}
+					{#if avatarOnClick}
+						<button
+							type="button"
+							class={twMerge(!unstyled && "stuic-header-avatar", classAvatar)}
+							onclick={avatarOnClick}
 						>
-							<IconSwap
-								active={isOpen ? 1 : 0}
-								states={[iconMenu({ size: iconSize }), iconX({ size: iconSize })]}
-							/>
-						</Button>
-					{/snippet}
-				</DropdownMenu>
-			{/if}
-		</div>
+							{@render avatar()}
+						</button>
+					{:else}
+						<div class={twMerge(!unstyled && "stuic-header-avatar", classAvatar)}>
+							{@render avatar()}
+						</div>
+					{/if}
+				{/if}
+
+				{#if _isCollapsed && _dropdownItems.length > 0}
+					<DropdownMenu
+						items={_dropdownItems}
+						bind:isOpen={isMenuOpen}
+						position={dropdownPosition}
+						class={classDropdown}
+					>
+						{#snippet trigger({ isOpen, toggle, triggerProps })}
+							<Button
+								variant="ghost"
+								iconButton
+								size="sm"
+								{unstyled}
+								class={twMerge(!unstyled && HEADER_HAMBURGER_CLASSES, classHamburger)}
+								onclick={toggle}
+								aria-label={isOpen ? "Close menu" : "Open menu"}
+								{...triggerProps}
+							>
+								<IconSwap
+									active={isOpen ? 1 : 0}
+									states={[iconMenu({ size: iconSize }), iconX({ size: iconSize })]}
+								/>
+							</Button>
+						{/snippet}
+					</DropdownMenu>
+				{/if}
+			</div>
 		</div>
 	{/if}
 </header>

package/dist/components/Header/README.md

@@ -8,13 +8,13 @@ Top-bar component with leading slot, project logo, nav items, locale switcher, o
 
 Common "app shell" pattern: when the header collapses below `collapseThreshold`, the avatar and a few key actions (search, notifications, cart…) remain visible, the trailing hamburger is NOT shown, and the nav items + locale switcher are hidden entirely (the nav typically lives in a drawer triggered by the leading hamburger instead).
 
-| Requirement | Where it's handled | How |
-| --- | --- | --- |
-| **Avatar stays visible** | [Header.svelte:626](./Header.svelte#L626) — `{#if avatar && !(_isCollapsed && _avatarInDropdown)}` | `_avatarInDropdown` requires `collapseMode === "hamburger"`. In `"hide"` mode it's always `false`, so the avatar always renders. |
-| **Action buttons stay visible** | [Header.svelte:585](./Header.svelte#L585) — `<!-- Actions (icon buttons, always visible) -->` | The actions loop has no collapse gating — items render in both modes. |
-| **No trailing hamburger** | [Header.svelte:642](./Header.svelte#L642) — `{#if _isCollapsed && _dropdownItems.length > 0}` | In `"hide"` mode, `_dropdownItems` short-circuits to `[]`, so the `{#if}` is false → no trailing hamburger. |
-| **Nav items hidden** | [Header.svelte:516](./Header.svelte#L516) — `{#if !_isCollapsed && items.length > 0}` | Inline nav requires `!_isCollapsed`; combined with the empty `_dropdownItems` above, items don't reappear in a dropdown either. |
-| **Locale hidden** | [Header.svelte:335](./Header.svelte#L335) — `!_isCollapsed \|\| (collapseMode === "hide" && keepLocaleOnCollapse)` | Default `keepLocaleOnCollapse={false}` hides the locale switcher in collapsed mode. |
+| Requirement                     | Where it's handled                                                                                                 | How                                                                                                                              |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| **Avatar stays visible**        | [Header.svelte:626](./Header.svelte#L626) — `{#if avatar && !(_isCollapsed && _avatarInDropdown)}`                 | `_avatarInDropdown` requires `collapseMode === "hamburger"`. In `"hide"` mode it's always `false`, so the avatar always renders. |
+| **Action buttons stay visible** | [Header.svelte:585](./Header.svelte#L585) — `<!-- Actions (icon buttons, always visible) -->`                      | The actions loop has no collapse gating — items render in both modes.                                                            |
+| **No trailing hamburger**       | [Header.svelte:642](./Header.svelte#L642) — `{#if _isCollapsed && _dropdownItems.length > 0}`                      | In `"hide"` mode, `_dropdownItems` short-circuits to `[]`, so the `{#if}` is false → no trailing hamburger.                      |
+| **Nav items hidden**            | [Header.svelte:516](./Header.svelte#L516) — `{#if !_isCollapsed && items.length > 0}`                              | Inline nav requires `!_isCollapsed`; combined with the empty `_dropdownItems` above, items don't reappear in a dropdown either.  |
+| **Locale hidden**               | [Header.svelte:335](./Header.svelte#L335) — `!_isCollapsed \|\| (collapseMode === "hide" && keepLocaleOnCollapse)` | Default `keepLocaleOnCollapse={false}` hides the locale switcher in collapsed mode.                                              |
 
 Minimal config:
 

package/dist/components/IconSwap/README.md

@@ -4,16 +4,16 @@ Cross-fades between N visual states (HTML strings or Snippets) at a single posit
 
 ## Props
 
-| Prop         | Type                       | Default  | Description                                                                |
-| ------------ | -------------------------- | -------- | -------------------------------------------------------------------------- |
-| `states`     | `Array<string \| Snippet>` | required | The visual states to swap between. Strings are rendered with `{@html}`.    |
-| `active`     | `number`                   | `0`      | Bindable index of the currently visible state.                              |
-| `duration`   | `number`                   | `300`    | Transition duration in ms. Set `0` to disable.                              |
-| `easing`     | `string`                   | `"ease"` | CSS `transition-timing-function`.                                           |
-| `unstyled`   | `boolean`                  | `false`  | Skip default styling.                                                       |
-| `class`      | `string`                   | -        | Additional CSS classes for the root `<span>`.                              |
-| `stateClass` | `string`                   | -        | Additional CSS classes for each state wrapper.                              |
-| `el`         | `HTMLSpanElement`          | -        | Bindable root element.                                                      |
+| Prop         | Type                       | Default  | Description                                                             |
+| ------------ | -------------------------- | -------- | ----------------------------------------------------------------------- |
+| `states`     | `Array<string \| Snippet>` | required | The visual states to swap between. Strings are rendered with `{@html}`. |
+| `active`     | `number`                   | `0`      | Bindable index of the currently visible state.                          |
+| `duration`   | `number`                   | `300`    | Transition duration in ms. Set `0` to disable.                          |
+| `easing`     | `string`                   | `"ease"` | CSS `transition-timing-function`.                                       |
+| `unstyled`   | `boolean`                  | `false`  | Skip default styling.                                                   |
+| `class`      | `string`                   | -        | Additional CSS classes for the root `<span>`.                           |
+| `stateClass` | `string`                   | -        | Additional CSS classes for each state wrapper.                          |
+| `el`         | `HTMLSpanElement`          | -        | Bindable root element.                                                  |
 
 ## Usage
 
@@ -47,15 +47,20 @@ Cross-fades between N visual states (HTML strings or Snippets) at a single posit
 ### Custom easing/duration
 
 ```svelte
-<IconSwap states={frames} active={i} duration={500} easing="cubic-bezier(0.4, 0, 0.2, 1)" />
+<IconSwap
+	states={frames}
+	active={i}
+	duration={500}
+	easing="cubic-bezier(0.4, 0, 0.2, 1)"
+/>
 ```
 
 ## CSS Variables
 
-| Variable                      | Default | Description                |
-| ----------------------------- | ------- | -------------------------- |
-| `--stuic-icon-swap-duration`  | (prop)  | Transition duration         |
-| `--stuic-icon-swap-easing`    | (prop)  | Transition timing function  |
+| Variable                     | Default | Description                |
+| ---------------------------- | ------- | -------------------------- |
+| `--stuic-icon-swap-duration` | (prop)  | Transition duration        |
+| `--stuic-icon-swap-easing`   | (prop)  | Transition timing function |
 
 ## Data Attributes
 

package/dist/components/IconSwap/index.css

@@ -22,7 +22,8 @@
 		justify-content: center;
 		opacity: 0;
 		pointer-events: none;
-		transition: opacity var(--stuic-icon-swap-duration, var(--stuic-transition)) var(--stuic-icon-swap-easing);
+		transition: opacity var(--stuic-icon-swap-duration, var(--stuic-transition))
+			var(--stuic-icon-swap-easing);
 	}
 
 	.stuic-icon-swap > .stuic-icon-swap-state[data-visible="true"] {