@marianmeres/stuic 3.167.0 → 3.168.0

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

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

package/dist/components/Breadcrumbs/i18n.js

@@ -0,0 +1,40 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `Breadcrumbs`. Also the fallback of
+ * every other bundled locale, so a locale missing a key still renders text.
+ */
+export const BREADCRUMBS_MESSAGES_EN = {
+    // singular "Breadcrumb" is the WAI-ARIA APG recommended landmark label
+    breadcrumbs: "Breadcrumb",
+    show_all: "Show all breadcrumbs",
+};
+/**
+ * Builds the `t` prop of `Breadcrumbs` from a message catalog. Unknown or
+ * untranslated keys fall back to `fallbackMessages` (English by default), so a
+ * catalog may safely be partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Breadcrumbs, createBreadcrumbsT, BREADCRUMBS_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createBreadcrumbsT(BREADCRUMBS_MESSAGES_SK);
+ * </script>
+ *
+ * <Breadcrumbs {items} {t} />
+ * ```
+ */
+export function createBreadcrumbsT(messages, fallbackMessages = BREADCRUMBS_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values, {
+                preSearchKeyTransform: (k) => `{${k}}`,
+            })
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createBreadcrumbsT(BREADCRUMBS_MESSAGES_EN);

package/dist/components/Breadcrumbs/index.css

@@ -0,0 +1,84 @@
+/* ============================================================================
+   BREADCRUMBS COMPONENT TOKENS
+   Override globally: :root { --stuic-breadcrumbs-gap: 0.5rem; }
+   Override locally:  <Breadcrumbs style="--stuic-breadcrumbs-font-size: 1rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	--stuic-breadcrumbs-gap: 0.375rem;
+	--stuic-breadcrumbs-font-size: var(--text-sm);
+
+	/* links + plain (non-current) crumbs + inherited by the ellipsis button */
+	--stuic-breadcrumbs-text: var(--stuic-color-muted-foreground);
+	--stuic-breadcrumbs-text-hover: var(--stuic-color-foreground);
+
+	/* the current (last) crumb */
+	--stuic-breadcrumbs-text-current: var(--stuic-color-foreground);
+	--stuic-breadcrumbs-font-weight-current: 500;
+
+	--stuic-breadcrumbs-separator-text: var(--stuic-color-muted-foreground);
+}
+
+@layer components {
+	.stuic-breadcrumbs-list {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--stuic-breadcrumbs-gap);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: var(--stuic-breadcrumbs-font-size);
+	}
+
+	.stuic-breadcrumbs-item {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--stuic-breadcrumbs-gap);
+		color: var(--stuic-breadcrumbs-text);
+	}
+
+	.stuic-breadcrumbs-link {
+		color: inherit;
+		text-decoration: none;
+		transition: color var(--stuic-breadcrumbs-transition, var(--stuic-transition));
+	}
+
+	.stuic-breadcrumbs-link:hover {
+		color: var(--stuic-breadcrumbs-text-hover);
+		text-decoration: underline;
+	}
+
+	.stuic-breadcrumbs-current {
+		color: var(--stuic-breadcrumbs-text-current);
+		font-weight: var(--stuic-breadcrumbs-font-weight-current);
+	}
+
+	/* current crumb that is also a link keeps its current color on hover */
+	.stuic-breadcrumbs-link.stuic-breadcrumbs-current:hover {
+		color: var(--stuic-breadcrumbs-text-current);
+	}
+
+	.stuic-breadcrumbs-separator {
+		color: var(--stuic-breadcrumbs-separator-text);
+		user-select: none;
+	}
+
+	.stuic-breadcrumbs-ellipsis {
+		appearance: none;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+		line-height: 1;
+		transition: color var(--stuic-breadcrumbs-transition, var(--stuic-transition));
+	}
+
+	.stuic-breadcrumbs-ellipsis:hover {
+		color: var(--stuic-breadcrumbs-text-hover);
+	}
+}

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

@@ -0,0 +1,4 @@
+export { default as Breadcrumbs, type Props as BreadcrumbsProps, type BreadcrumbItem, } from "./Breadcrumbs.svelte";
+export { breadcrumbsJsonLd, breadcrumbsJsonLdScript, type BreadcrumbsJsonLdOptions, type BreadcrumbListItemJsonLd, type BreadcrumbListJsonLd, } from "./json-ld.js";
+export { createBreadcrumbsT, BREADCRUMBS_MESSAGES_EN, type BreadcrumbsMessageKey, type BreadcrumbsMessages, } from "./i18n.js";
+export { BREADCRUMBS_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,4 @@
+export { default as Breadcrumbs, } from "./Breadcrumbs.svelte";
+export { breadcrumbsJsonLd, breadcrumbsJsonLdScript, } from "./json-ld.js";
+export { createBreadcrumbsT, BREADCRUMBS_MESSAGES_EN, } from "./i18n.js";
+export { BREADCRUMBS_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/Breadcrumbs/json-ld.d.ts

@@ -0,0 +1,58 @@
+import type { BreadcrumbItem } from "./Breadcrumbs.svelte";
+/** Options for the JSON-LD helpers. */
+export interface BreadcrumbsJsonLdOptions {
+    /**
+     * Base URL to resolve relative `href`s against (e.g. `page.url.origin` in
+     * SvelteKit). Google recommends absolute URLs in `BreadcrumbList` structured
+     * data; without a base, hrefs are emitted as-is.
+     */
+    baseUrl?: string | URL;
+}
+/** One `ListItem` of a schema.org `BreadcrumbList`. */
+export interface BreadcrumbListItemJsonLd {
+    "@type": "ListItem";
+    /** 1-based position in the trail. */
+    position: number;
+    name: string;
+    /** The crumb's URL. Omitted for crumbs without `href` (typically the current page). */
+    item?: string;
+}
+/** A schema.org `BreadcrumbList` — the structured data search engines read. */
+export interface BreadcrumbListJsonLd {
+    "@context": "https://schema.org";
+    "@type": "BreadcrumbList";
+    itemListElement: BreadcrumbListItemJsonLd[];
+}
+/**
+ * Builds a schema.org `BreadcrumbList` object from `Breadcrumbs` items — the
+ * structured data Google et al. use to render breadcrumb trails in search results.
+ *
+ * Crumbs without `href` (typically the last one, the current page) are emitted
+ * without `item`, which is exactly what Google's guidelines prescribe for the
+ * final breadcrumb.
+ *
+ * @example
+ * ```ts
+ * breadcrumbsJsonLd(items, { baseUrl: "https://example.com" });
+ * // { "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: [...] }
+ * ```
+ */
+export declare function breadcrumbsJsonLd(items: BreadcrumbItem[], options?: BreadcrumbsJsonLdOptions): BreadcrumbListJsonLd;
+/**
+ * Renders the full `<script type="application/ld+json">…</script>` tag as a string,
+ * safe to inject via `{@html}` (angle brackets and ampersands inside the JSON are
+ * `\uXXXX`-escaped, so a label can never break out of the script element).
+ *
+ * In SvelteKit, put it in the head:
+ *
+ * @example
+ * ```svelte
+ * <svelte:head>
+ *   {@html breadcrumbsJsonLdScript(items, { baseUrl: page.url.origin })}
+ * </svelte:head>
+ * ```
+ *
+ * Or let the component render it inline via its `jsonLd` prop (search engines read
+ * JSON-LD anywhere in the document).
+ */
+export declare function breadcrumbsJsonLdScript(items: BreadcrumbItem[], options?: BreadcrumbsJsonLdOptions): string;

package/dist/components/Breadcrumbs/json-ld.js

@@ -0,0 +1,56 @@
+/**
+ * Builds a schema.org `BreadcrumbList` object from `Breadcrumbs` items — the
+ * structured data Google et al. use to render breadcrumb trails in search results.
+ *
+ * Crumbs without `href` (typically the last one, the current page) are emitted
+ * without `item`, which is exactly what Google's guidelines prescribe for the
+ * final breadcrumb.
+ *
+ * @example
+ * ```ts
+ * breadcrumbsJsonLd(items, { baseUrl: "https://example.com" });
+ * // { "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: [...] }
+ * ```
+ */
+export function breadcrumbsJsonLd(items, options = {}) {
+    const { baseUrl } = options;
+    return {
+        "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        itemListElement: items.map((item, i) => {
+            const out = {
+                "@type": "ListItem",
+                position: i + 1,
+                name: item.label,
+            };
+            if (item.href) {
+                out.item = baseUrl ? new URL(item.href, baseUrl).toString() : item.href;
+            }
+            return out;
+        }),
+    };
+}
+/**
+ * Renders the full `<script type="application/ld+json">…</script>` tag as a string,
+ * safe to inject via `{@html}` (angle brackets and ampersands inside the JSON are
+ * `\uXXXX`-escaped, so a label can never break out of the script element).
+ *
+ * In SvelteKit, put it in the head:
+ *
+ * @example
+ * ```svelte
+ * <svelte:head>
+ *   {@html breadcrumbsJsonLdScript(items, { baseUrl: page.url.origin })}
+ * </svelte:head>
+ * ```
+ *
+ * Or let the component render it inline via its `jsonLd` prop (search engines read
+ * JSON-LD anywhere in the document).
+ */
+export function breadcrumbsJsonLdScript(items, options = {}) {
+    const json = JSON.stringify(breadcrumbsJsonLd(items, options))
+        .replaceAll("&", "\\u0026")
+        .replaceAll("<", "\\u003c")
+        .replaceAll(">", "\\u003e");
+    return `<script type="application/ld+json">${json}</` + `script>`;
+}

package/dist/components/Collapsible/Collapsible.svelte

@@ -2,10 +2,21 @@
 	import type { Snippet } from "svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { tooltip } from "../../actions/index.js";
+	import { autoHeight } from "../../attachments/index.js";
+	import { iconChevronDown } from "../../icons/index.js";
 	import { isPlainObject } from "../../utils/is-plain-object.js";
 	import { replaceMap } from "../../utils/replace-map.js";
 	import type { TranslateFn } from "../../types.js";
 
+	/**
+	 * Vertical alignment of the toggle button relative to the content:
+	 * - `"bottom"` — always next to the last (clamped) line. Default, historical behavior.
+	 * - `"top"` — always at the top of the content, in both states.
+	 * - `"top-when-expanded"` — bottom while collapsed, top once expanded, so the toggle
+	 *   does not run away down a long expanded block.
+	 */
+	export type CollapsibleToggleAlign = "bottom" | "top" | "top-when-expanded";
+
 	export interface Props {
 		/** Content to display */
 		children: Snippet;
@@ -13,10 +24,29 @@
 		lines?: number;
 		/** Expanded state (bindable) */
 		expanded?: boolean;
-		/** Collapsed indicator character (default: "↓") */
+		/**
+		 * Collapsed indicator character. Omit both indicators (the default) to get the
+		 * rotating chevron; providing either one switches to plain text indicators
+		 * (the omitted one falls back to the legacy "↓"/"↑" arrow).
+		 */
 		collapsedIndicator?: string;
-		/** Expanded indicator character (default: "↑") */
+		/**
+		 * Expanded indicator character. Omit both indicators (the default) to get the
+		 * rotating chevron; providing either one switches to plain text indicators
+		 * (the omitted one falls back to the legacy "↓"/"↑" arrow).
+		 */
 		expandedIndicator?: string;
+		/**
+		 * Opt-in: smoothly animate the height between the collapsed and expanded state
+		 * instead of snapping. Respects `prefers-reduced-motion` (snaps when reduce is
+		 * set). Default: false.
+		 */
+		animate?: boolean;
+		/**
+		 * Opt-in: where to vertically align the toggle button. Default: `"bottom"`
+		 * (always next to the last clamped line — the historical behavior).
+		 */
+		toggleAlign?: CollapsibleToggleAlign;
 		/** Container class */
 		class?: string;
 		/** Content wrapper class */
@@ -53,8 +83,10 @@
 		children,
 		lines = 1,
 		expanded = $bindable(false),
-		collapsedIndicator = "↓",
-		expandedIndicator = "↑",
+		collapsedIndicator,
+		expandedIndicator,
+		animate = false,
+		toggleAlign = "bottom",
 		class: classProp,
 		classContent,
 		classToggle,
@@ -80,21 +112,51 @@
 		const l = Math.abs(lines);
 		return l > 10 ? 10 : l;
 	});
+
+	// The rotating chevron is the default indicator. Passing either custom indicator
+	// opts back into plain text; the unspecified one keeps its historical arrow.
+	let useChevron = $derived(
+		collapsedIndicator === undefined && expandedIndicator === undefined
+	);
+	let textIndicator = $derived(
+		expanded ? (expandedIndicator ?? "↑") : (collapsedIndicator ?? "↓")
+	);
+
+	let label = $derived(expanded ? t("less") : t("more"));
+
+	let _align = $derived(
+		toggleAlign === "top" || (toggleAlign === "top-when-expanded" && expanded)
+			? "items-start"
+			: "items-end"
+	);
 </script>
 
+{#snippet content()}
+	<div
+		bind:this={contentEl}
+		class={twMerge("flex-1", !expanded && `line-clamp-${_lines}`, classContent)}
+	>
+		{@render children()}
+	</div>
+{/snippet}
+
 <div
 	bind:this={el}
 	bind:clientWidth={containerWidth}
 	class={twMerge("stuic-collapsible", classProp)}
 	{style}
 >
-	<div class="flex items-end">
-		<div
-			bind:this={contentEl}
-			class={twMerge("flex-1", !expanded && `line-clamp-${_lines}`, classContent)}
-		>
-			{@render children()}
-		</div>
+	<div class={twMerge("flex", _align)}>
+		{#if animate}
+			<!-- Height-animated viewport: `autoHeight` drives this box to the natural
+			     height of the (un)clamped content and clips while it transits. Only
+			     rendered when the opt-in is active, so the default output is unchanged. -->
+			<div class="stuic-collapsible-viewport flex-1" {@attach autoHeight}>
+				{@render content()}
+			</div>
+		{:else}
+			{@render content()}
+		{/if}
 		{#if needsCollapse}
 			<button
 				type="button"
@@ -102,12 +164,19 @@
 					"stuic-collapsible-toggle cursor-pointer -my-1 -mr-2",
 					classToggle
 				)}
+				aria-expanded={expanded}
+				aria-label={label}
 				onclick={() => (expanded = !expanded)}
-				use:tooltip={() => ({
-					content: expanded ? t("less") : t("more"),
-				})}
+				use:tooltip={() => ({ content: label })}
 			>
-				{expanded ? expandedIndicator : collapsedIndicator}
+				{#if useChevron}
+					{@html iconChevronDown({
+						class: "stuic-collapsible-chevron",
+						"aria-hidden": "true",
+					})}
+				{:else}
+					{textIndicator}
+				{/if}
 			</button>
 		{/if}
 	</div>

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

@@ -1,5 +1,13 @@
 import type { Snippet } from "svelte";
 import type { TranslateFn } from "../../types.js";
+/**
+ * Vertical alignment of the toggle button relative to the content:
+ * - `"bottom"` — always next to the last (clamped) line. Default, historical behavior.
+ * - `"top"` — always at the top of the content, in both states.
+ * - `"top-when-expanded"` — bottom while collapsed, top once expanded, so the toggle
+ *   does not run away down a long expanded block.
+ */
+export type CollapsibleToggleAlign = "bottom" | "top" | "top-when-expanded";
 export interface Props {
     /** Content to display */
     children: Snippet;
@@ -7,10 +15,29 @@ export interface Props {
     lines?: number;
     /** Expanded state (bindable) */
     expanded?: boolean;
-    /** Collapsed indicator character (default: "↓") */
+    /**
+     * Collapsed indicator character. Omit both indicators (the default) to get the
+     * rotating chevron; providing either one switches to plain text indicators
+     * (the omitted one falls back to the legacy "↓"/"↑" arrow).
+     */
     collapsedIndicator?: string;
-    /** Expanded indicator character (default: "↑") */
+    /**
+     * Expanded indicator character. Omit both indicators (the default) to get the
+     * rotating chevron; providing either one switches to plain text indicators
+     * (the omitted one falls back to the legacy "↓"/"↑" arrow).
+     */
     expandedIndicator?: string;
+    /**
+     * Opt-in: smoothly animate the height between the collapsed and expanded state
+     * instead of snapping. Respects `prefers-reduced-motion` (snaps when reduce is
+     * set). Default: false.
+     */
+    animate?: boolean;
+    /**
+     * Opt-in: where to vertically align the toggle button. Default: `"bottom"`
+     * (always next to the last clamped line — the historical behavior).
+     */
+    toggleAlign?: CollapsibleToggleAlign;
     /** Container class */
     class?: string;
     /** Content wrapper class */

package/dist/components/Collapsible/README.md

@@ -2,21 +2,25 @@
 
 A component that truncates content to a specified number of lines with an expand/collapse toggle. Automatically detects if truncation is needed and only shows the toggle when content overflows.
 
+The toggle renders a **rotating chevron** by default (points down when collapsed, rotates 180° to point up when expanded). Height changes snap by default; pass `animate` to transition them instead.
+
 ## Props
 
-| Prop                 | Type             | Default | Description                                |
-| -------------------- | ---------------- | ------- | ------------------------------------------ |
-| `children`           | `Snippet`        | -       | Content to display                         |
-| `lines`              | `number`         | `1`     | Number of lines to show when collapsed     |
-| `expanded`           | `boolean`        | `false` | Expanded state (bindable)                  |
-| `collapsedIndicator` | `string`         | `"↓"`   | Character/text shown when collapsed        |
-| `expandedIndicator`  | `string`         | `"↑"`   | Character/text shown when expanded         |
-| `class`              | `string`         | -       | Container element class                    |
-| `classContent`       | `string`         | -       | Content wrapper class                      |
-| `classToggle`        | `string`         | -       | Toggle button class                        |
-| `style`              | `string`         | -       | Inline styles (for CSS variable overrides) |
-| `el`                 | `HTMLDivElement` | -       | Bind reference to container element        |
-| `t`                  | `TranslateFn`    | -       | Optional translate function                |
+| Prop                 | Type             | Default    | Description                                                                                          |
+| -------------------- | ---------------- | ---------- | ---------------------------------------------------------------------------------------------------- |
+| `children`           | `Snippet`        | -          | Content to display                                                                                   |
+| `lines`              | `number`         | `1`        | Number of lines to show when collapsed                                                               |
+| `expanded`           | `boolean`        | `false`    | Expanded state (bindable)                                                                            |
+| `collapsedIndicator` | `string`         | -          | Text shown when collapsed. Opts **out** of the chevron (see below)                                   |
+| `expandedIndicator`  | `string`         | -          | Text shown when expanded. Opts **out** of the chevron (see below)                                    |
+| `animate`            | `boolean`        | `false`    | Opt-in: smoothly animate the height between collapsed/expanded. Respects `prefers-reduced-motion`    |
+| `toggleAlign`        | `ToggleAlign`    | `"bottom"` | Vertical alignment of the toggle button — `"bottom"` \| `"top"` \| `"top-when-expanded"` (see below) |
+| `class`              | `string`         | -          | Container element class                                                                              |
+| `classContent`       | `string`         | -          | Content wrapper class                                                                                |
+| `classToggle`        | `string`         | -          | Toggle button class                                                                                  |
+| `style`              | `string`         | -          | Inline styles (for CSS variable overrides)                                                           |
+| `el`                 | `HTMLDivElement` | -          | Bind reference to container element                                                                  |
+| `t`                  | `TranslateFn`    | -          | Optional translate function                                                                          |
 
 ## Usage
 
@@ -42,9 +46,53 @@ A component that truncates content to a specified number of lines with an expand
 </Collapsible>
 ```
 
-### Custom Indicators
+### Animated Height (opt-in)
+
+```svelte
+<Collapsible lines={2} animate>
+	Expanding and collapsing transitions the height instead of snapping.
+</Collapsible>
+```
+
+Nothing animates unless you ask for it. With `animate`, the content is wrapped in a
+`.stuic-collapsible-viewport` element whose height is driven to the natural height of the
+(un)clamped content and transitioned; tune the duration with
+`--stuic-collapsible-transition`. Under `prefers-reduced-motion: reduce` the height snaps,
+exactly as it does without the prop.
+
+### Toggle Alignment
+
+`toggleAlign` (`CollapsibleToggleAlign`) controls where the toggle button sits vertically:
+
+| Value                 | Collapsed | Expanded |
+| --------------------- | --------- | -------- |
+| `"bottom"` (default)  | bottom    | bottom   |
+| `"top"`               | top       | top      |
+| `"top-when-expanded"` | bottom    | top      |
 
 ```svelte
+<!-- default: always next to the last clamped line -->
+<Collapsible lines={2}>Content.</Collapsible>
+
+<!-- always at the top, e.g. next to a heading-like first line -->
+<Collapsible lines={2} toggleAlign="top">Content.</Collapsible>
+
+<!-- bottom while collapsed, top once expanded — so the toggle does not run away
+     down a long expanded paragraph -->
+<Collapsible lines={2} toggleAlign="top-when-expanded">Content.</Collapsible>
+```
+
+### Indicators
+
+The default indicator is a chevron that rotates 180° between the two states. Passing
+**either** `collapsedIndicator` or `expandedIndicator` switches to plain text indicators;
+the one you omit falls back to its legacy arrow (`↓` / `↑`).
+
+```svelte
+<!-- rotating chevron (default) -->
+<Collapsible>Content.</Collapsible>
+
+<!-- plain text indicators -->
 <Collapsible collapsedIndicator="▼" expandedIndicator="▲">
 	Content with custom expand/collapse indicators.
 </Collapsible>
@@ -89,15 +137,17 @@ A component that truncates content to a specified number of lines with an expand
 
 Override to customize appearance:
 
-| Variable                                   | Default                    | Description           |
-| ------------------------------------------ | -------------------------- | --------------------- |
-| `--stuic-collapsible-toggle-opacity`       | `0.7`                      | Toggle button opacity |
-| `--stuic-collapsible-toggle-opacity-hover` | `1`                        | Hover opacity         |
-| `--stuic-collapsible-toggle-padding-x`     | `calc(var(--spacing) * 2)` | Horizontal padding    |
-| `--stuic-collapsible-toggle-padding-y`     | `0.25rem`                  | Vertical padding      |
-| `--stuic-collapsible-transition`           | `150ms`                    | Transition duration   |
-| `--stuic-collapsible-ring-width`           | `2px`                      | Focus ring width      |
-| `--stuic-collapsible-ring-color`           | `--stuic-color-ring`       | Focus ring color      |
+| Variable                                   | Default                    | Description                                                       |
+| ------------------------------------------ | -------------------------- | ----------------------------------------------------------------- |
+| `--stuic-collapsible-toggle-opacity`       | `0.7`                      | Toggle button opacity                                             |
+| `--stuic-collapsible-toggle-opacity-hover` | `1`                        | Hover opacity                                                     |
+| `--stuic-collapsible-toggle-padding-x`     | `calc(var(--spacing) * 2)` | Horizontal padding                                                |
+| `--stuic-collapsible-toggle-padding-y`     | `0.25rem`                  | Vertical padding                                                  |
+| `--stuic-collapsible-chevron-size`         | `16px`                     | Chevron width/height                                              |
+| `--stuic-collapsible-chevron-color`        | `currentColor`             | Chevron color                                                     |
+| `--stuic-collapsible-transition`           | `150ms`                    | Transition duration (opacity, chevron rotation, `animate` height) |
+| `--stuic-collapsible-ring-width`           | `2px`                      | Focus ring width                                                  |
+| `--stuic-collapsible-ring-color`           | `--stuic-color-ring`       | Focus ring color                                                  |
 
 ### Global Override
 
@@ -107,3 +157,12 @@ Override to customize appearance:
 	--stuic-collapsible-toggle-opacity-hover: 0.8;
 }
 ```
+
+## Accessibility
+
+- The toggle is a real `<button>` carrying `aria-expanded`, which is also the hook the CSS
+  uses to rotate the chevron.
+- The chevron SVG is `aria-hidden`; the button's accessible name comes from `aria-label`
+  (`t("more")` / `t("less")`), so it is announced even in chevron mode.
+- Motion (chevron rotation and the opt-in height transition) is gated behind
+  `prefers-reduced-motion: no-preference`.

package/dist/components/Collapsible/index.css

@@ -11,6 +11,10 @@
 	--stuic-collapsible-toggle-padding-x: calc(var(--spacing) * 2);
 	--stuic-collapsible-toggle-padding-y: calc(var(--spacing) * 1);
 
+	/* Chevron indicator (default) */
+	--stuic-collapsible-chevron-size: 16px;
+	--stuic-collapsible-chevron-color: currentColor;
+
 	/* Focus ring (uses theme token) */
 	--stuic-collapsible-ring-width: 2px;
 	--stuic-collapsible-ring-color: var(--stuic-color-ring);
@@ -36,4 +40,38 @@
 		outline: var(--stuic-collapsible-ring-width) solid var(--stuic-collapsible-ring-color);
 		outline-offset: 2px;
 	}
+
+	/* ============================================================================
+	   CHEVRON INDICATOR (default)
+	   ============================================================================ */
+
+	.stuic-collapsible-chevron {
+		display: block;
+		flex-shrink: 0;
+		width: var(--stuic-collapsible-chevron-size);
+		height: var(--stuic-collapsible-chevron-size);
+		color: var(--stuic-collapsible-chevron-color);
+	}
+
+	.stuic-collapsible-toggle[aria-expanded="true"] .stuic-collapsible-chevron {
+		transform: rotate(180deg);
+	}
+
+	/* ============================================================================
+	   HEIGHT-ANIMATED VIEWPORT (opt-in via the `animate` prop)
+
+	   The `autoHeight` attachment owns this element's inline `height` (and the
+	   `overflow: clip` it applies *only* while that height transitions), so the
+	   transition below is the entire opt-in. Without it the height simply snaps.
+	   ============================================================================ */
+
+	@media (prefers-reduced-motion: no-preference) {
+		.stuic-collapsible-viewport {
+			transition: height var(--stuic-collapsible-transition, var(--stuic-transition));
+		}
+
+		.stuic-collapsible-chevron {
+			transition: transform var(--stuic-collapsible-transition, var(--stuic-transition));
+		}
+	}
 }

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

@@ -1 +1 @@
-export { default as Collapsible, type Props as CollapsibleProps, } from "./Collapsible.svelte";
+export { default as Collapsible, type Props as CollapsibleProps, type CollapsibleToggleAlign, } from "./Collapsible.svelte";