includio-cms 0.24.1 → 0.26.0

package/dist/components/ui/popover/popover.stories.svelte

@@ -7,9 +7,43 @@
 		title: 'UI/Overlays/Popover',
 		component: Popover,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Niskopoziomowy popover. Pierwszy element fokusowalny otrzymuje fokus po otwarciu. Przy zamknięciu — wraca do triggera.',
+				},
+			},
+		},
+		argTypes: {
+			open: {
+				control: 'boolean',
+				description: 'Stan otwarcia.',
+			},
+			side: {
+				control: 'select',
+				options: ['top', 'right', 'bottom', 'left'],
+				description: 'Strona względem triggera.',
+			},
+			align: {
+				control: 'select',
+				options: ['start', 'center', 'end'],
+				description: 'Wyrównanie wzdłuż osi prostopadłej.',
+			},
+		},
 	});
 </script>
 
+<Story name="Simple text">
+	<Popover>
+		<PopoverTrigger>
+			<Badge variant="secondary" style="cursor:pointer;">Pokaż info</Badge>
+		</PopoverTrigger>
+		<PopoverContent>
+			<p style="margin:0;font-size:13px;">Najedź lub kliknij — to jest podstawowy popover z tekstem.</p>
+		</PopoverContent>
+	</Popover>
+</Story>
+
 <Story name="Status Popover">
 	<Popover>
 		<PopoverTrigger>

package/dist/components/ui/radio-group/radio-group.stories.svelte

@@ -0,0 +1,58 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { RadioGroup, RadioGroupItem } from './index.js';
+	import { Label } from '../label/index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Forms/RadioGroup',
+		component: RadioGroup,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Grupa wzajemnie wykluczających się opcji. W formularzu zawsze wewnątrz `Field.Root` z labelem grupy. Nie używaj dla > 5 opcji — wtedy `Select`.',
+				},
+			},
+		},
+		argTypes: {
+			value: {
+				control: 'text',
+				description: 'Aktualnie wybrana wartość.',
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Wyłącza całą grupę.',
+			},
+		},
+	});
+</script>
+
+<Story name="Default">
+	<RadioGroup value="lg">
+		<div style="display:flex;align-items:center;gap:8px;">
+			<RadioGroupItem id="rg-sm" value="sm" />
+			<Label for="rg-sm">Mały</Label>
+		</div>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<RadioGroupItem id="rg-md" value="md" />
+			<Label for="rg-md">Średni</Label>
+		</div>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<RadioGroupItem id="rg-lg" value="lg" />
+			<Label for="rg-lg">Duży</Label>
+		</div>
+	</RadioGroup>
+</Story>
+
+<Story name="Disabled">
+	<RadioGroup value="paid" disabled>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<RadioGroupItem id="rg-new" value="new" />
+			<Label for="rg-new">Nowy</Label>
+		</div>
+		<div style="display:flex;align-items:center;gap:8px;">
+			<RadioGroupItem id="rg-paid" value="paid" />
+			<Label for="rg-paid">Opłacony</Label>
+		</div>
+	</RadioGroup>
+</Story>

package/dist/components/ui/radio-group/radio-group.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default RadioGroup;
+type RadioGroup = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const RadioGroup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import { RadioGroup } from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/resizable/resizable.stories.svelte

@@ -0,0 +1,56 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Resizable from './index.js';
+	import { PaneGroup as ResizablePaneGroup } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Layout/Resizable',
+		component: ResizablePaneGroup,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Panele z draggable separatorami. Ustaw `direction="horizontal"` lub `"vertical"`. Klawiatura: strzałki na rączce zmieniają proporcje.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Two panes (horizontal)">
+	<Resizable.PaneGroup direction="horizontal" style="width:560px;height:240px;">
+		<Resizable.Pane defaultSize={50}>
+			<div style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--muted);">
+				Lewa
+			</div>
+		</Resizable.Pane>
+		<Resizable.Handle />
+		<Resizable.Pane defaultSize={50}>
+			<div style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--card);">
+				Prawa
+			</div>
+		</Resizable.Pane>
+	</Resizable.PaneGroup>
+</Story>
+
+<Story name="Three panes (vertical)">
+	<Resizable.PaneGroup direction="vertical" style="width:480px;height:320px;">
+		<Resizable.Pane defaultSize={33}>
+			<div style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--muted);">
+				Górna
+			</div>
+		</Resizable.Pane>
+		<Resizable.Handle />
+		<Resizable.Pane defaultSize={34}>
+			<div style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--card);">
+				Środkowa
+			</div>
+		</Resizable.Pane>
+		<Resizable.Handle />
+		<Resizable.Pane defaultSize={33}>
+			<div style="display:flex;align-items:center;justify-content:center;height:100%;background:var(--muted);">
+				Dolna
+			</div>
+		</Resizable.Pane>
+	</Resizable.PaneGroup>
+</Story>

package/dist/components/ui/resizable/resizable.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Resizable;
+type Resizable = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Resizable: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import * as Resizable from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/select/select.stories.svelte

@@ -6,6 +6,27 @@
 		title: 'UI/Forms/Select',
 		component: Select,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Wybór jednej opcji z listy. Z poziomu klawiatury: spacja otwiera, strzałki nawigują, Enter potwierdza. Dla > 10 opcji rozważ `Combobox` (Command + Popover).',
+				},
+			},
+		},
+		argTypes: {
+			value: {
+				control: 'text',
+				description: 'Aktualnie wybrana wartość.',
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Blokada interakcji.',
+			},
+			placeholder: {
+				control: 'text',
+				description: 'Tekst zachęty (renderowany w SelectValue).',
+			},
+		},
 	});
 </script>
 
@@ -21,3 +42,31 @@
 		</Select>
 	</div>
 </Story>
+
+<Story name="Empty (no value)">
+	<div style="max-width:240px;">
+		<Select type="single">
+			<SelectTrigger>Wybierz poziom</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="beginner">Początkujący</SelectItem>
+				<SelectItem value="mid">Średniozaawansowany</SelectItem>
+				<SelectItem value="advanced">Zaawansowany</SelectItem>
+			</SelectContent>
+		</Select>
+	</div>
+</Story>
+
+<Story name="Disabled">
+	<div style="max-width:240px;">
+		<Select type="single" value="mid" disabled>
+			<SelectTrigger>Wybierz poziom</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="beginner">Początkujący</SelectItem>
+				<SelectItem value="mid">Średniozaawansowany</SelectItem>
+			</SelectContent>
+		</Select>
+	</div>
+</Story>
+
+<!-- SUGESTIA(S3): error state requires `aria-invalid` propagation w SelectTrigger — brak na razie. -->
+

package/dist/components/ui/separator/separator.stories.svelte

@@ -6,6 +6,24 @@
 		title: 'UI/Feedback/Separator',
 		component: Separator,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Linia oddzielająca treść (poziomo lub pionowo). Domyślnie `decorative=true` — niewidoczna dla SR. Daj `decorative=false`, jeśli rozdziela sekcje semantycznie.',
+				},
+			},
+		},
+		argTypes: {
+			orientation: {
+				control: 'select',
+				options: ['horizontal', 'vertical'],
+				description: 'Kierunek linii.',
+			},
+			decorative: {
+				control: 'boolean',
+				description: 'Czy ukryta przed screen readerem (domyślnie tak).',
+			},
+		},
 	});
 </script>
 

package/dist/components/ui/sheet/sheet.stories.svelte

@@ -7,9 +7,43 @@
 		title: 'UI/Overlays/Sheet',
 		component: Sheet,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Slide-out panel z boku (drawer). Używaj dla list opcji, filtrów, side-info. Dla potwierdzeń — `AlertDialog`, dla pickerów — `Dialog`.',
+				},
+			},
+		},
+		argTypes: {
+			open: {
+				control: 'boolean',
+				description: 'Stan otwarcia.',
+			},
+			side: {
+				control: 'select',
+				options: ['top', 'right', 'bottom', 'left'],
+				description: 'Strona ekranu, z której wysuwa się panel.',
+			},
+		},
 	});
 </script>
 
+<Story name="From right (default)">
+	<Sheet>
+		<SheetTrigger>
+			<Button variant="outline">Otwórz panel</Button>
+		</SheetTrigger>
+		<SheetContent>
+			<SheetHeader>
+				<SheetTitle>Filtry</SheetTitle>
+			</SheetHeader>
+			<div style="padding:16px 0;font-size:14px;">
+				Filtruj listę po statusie, dacie, kategorii.
+			</div>
+		</SheetContent>
+	</Sheet>
+</Story>
+
 <Story name="Publish Panel">
 	<Sheet>
 		<SheetTrigger>

package/dist/components/ui/sidebar/sidebar-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "password" | "time" | "hidden" | "reset" | "submit" | "tel" | "datetime-local" | "month" | "range" | "week";
+    type?: "number" | "image" | "url" | "text" | "date" | "radio" | "color" | "button" | "checkbox" | "search" | (string & {}) | "email" | "tel" | "password" | "time" | "hidden" | "reset" | "submit" | "datetime-local" | "month" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/ui/sidebar/sidebar-menu-button.svelte

@@ -61,6 +61,7 @@
 		'data-sidebar': 'menu-button',
 		'data-size': size,
 		'data-active': isActive,
+		'aria-current': isActive ? ('page' as const) : undefined,
 		...restProps
 	});
 </script>

package/dist/components/ui/sidebar/sidebar-trigger.svelte

@@ -22,6 +22,7 @@
 	data-slot="sidebar-trigger"
 	variant="ghost"
 	size="icon"
+	aria-label="Zwiń/rozwiń panel"
 	class={cn("size-8", className)}
 	type="button"
 	onclick={(e) => {
@@ -31,5 +32,4 @@
 	{...restProps}
 >
 	<LayoutSidebarIcon class="size-[18px]" />
-	<span class="sr-only">Zwiń/rozwiń panel</span>
 </Button>

package/dist/components/ui/sidebar/sidebar.stories.svelte

@@ -0,0 +1,72 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Sidebar from './index.js';
+	import { Root as SidebarRoot } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Layout/Sidebar',
+		component: SidebarRoot,
+		// FIXME(S3): Sidebar.Provider `isMobile` undefined w vitest browser env (viewport listener brak).
+		tags: ['autodocs', 'no-test'],
+		parameters: {
+			layout: 'fullscreen',
+			docs: {
+				description: {
+					component: 'Główny nawigacyjny sidebar admina. Pełni rolę landmarka `<nav>`. Klawiatura: Tab między grupami, strzałki w obrębie grupy.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Default expanded">
+	<Sidebar.Provider>
+		<Sidebar.Root>
+			<Sidebar.Header>
+				<div style="padding:12px;font-weight:800;letter-spacing:0.1em;">AriaCMS</div>
+			</Sidebar.Header>
+			<Sidebar.Content>
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>Treści</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton>Wpisy</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton>Strony</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton>Media</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+				<Sidebar.Separator />
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>Sklep</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton>Zamówienia</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton>Produkty</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+			</Sidebar.Content>
+			<Sidebar.Footer>
+				<div style="padding:12px;font-size:13px;color:var(--muted-foreground);">v0.26.0</div>
+			</Sidebar.Footer>
+			<Sidebar.Rail />
+		</Sidebar.Root>
+		<Sidebar.Inset>
+			<main style="padding:24px;">
+				<h1>Główna treść</h1>
+				<p>Zawartość strony obok paska bocznego.</p>
+			</main>
+		</Sidebar.Inset>
+	</Sidebar.Provider>
+</Story>

package/dist/components/ui/sidebar/sidebar.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Sidebar;
+type Sidebar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import * as Sidebar from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/skeleton/skeleton.stories.svelte

@@ -0,0 +1,39 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Skeleton } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Feedback/Skeleton',
+		component: Skeleton,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Placeholder ładowania w kształcie docelowej treści. ARIA: `role="status" aria-busy="true" aria-label="Ładowanie…"`. Używaj zamiast spinnera dla list.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Single line">
+	<div role="status" aria-busy="true" aria-label="Ładowanie…">
+		<Skeleton class="h-4 w-48" />
+	</div>
+</Story>
+
+<Story name="Card placeholder">
+	<div role="status" aria-busy="true" aria-label="Ładowanie kart…" style="display:flex;flex-direction:column;gap:8px;width:320px;">
+		<Skeleton class="h-32 w-full rounded-lg" />
+		<Skeleton class="h-4 w-3/4" />
+		<Skeleton class="h-4 w-1/2" />
+	</div>
+</Story>
+
+<Story name="Table rows">
+	<div role="status" aria-busy="true" aria-label="Ładowanie listy…" style="display:flex;flex-direction:column;gap:6px;width:480px;">
+		{#each Array(5) as _, i (i)}
+			<Skeleton class="h-6 w-full" />
+		{/each}
+	</div>
+</Story>

package/dist/components/ui/skeleton/skeleton.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Skeleton;
+type Skeleton = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Skeleton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import { Skeleton } from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ui/skeleton/skeleton.svelte

@@ -5,6 +5,8 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		"aria-label": ariaLabel = "Ładowanie…",
+		role = "status",
 		...restProps
 	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
@@ -12,6 +14,10 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
+	{role}
+	aria-busy="true"
+	aria-live="polite"
+	aria-label={ariaLabel}
 	class={cn("bg-accent animate-pulse rounded-md", className)}
 	{...restProps}
 ></div>

package/dist/components/ui/sonner/index.d.ts

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

package/dist/components/ui/sonner/index.js

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

package/dist/components/ui/sonner/sonner.stories.svelte

@@ -6,6 +6,13 @@
 		title: 'UI/Feedback/Toast',
 		component: ToastDemo,
 		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Toasty (powiadomienia tymczasowe). Czas wyświetlania: success 4s, info 6s, error 10s. Krytyczne błędy nie powinny wisieć na toście — zostaw je w UI.',
+				},
+			},
+		},
 	});
 </script>
 

package/dist/components/ui/sonner/sonner.svelte

@@ -1,13 +1,29 @@
+<script lang="ts" module>
+	export const TOAST_DURATION = {
+		success: 5000,
+		info: 5000,
+		warning: 8000,
+		error: Number.POSITIVE_INFINITY,
+	} as const;
+</script>
+
 <script lang="ts">
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 
-	let { richColors = false, ...restProps }: SonnerProps = $props();
+	let {
+		richColors = false,
+		closeButton = true,
+		duration = TOAST_DURATION.success,
+		...restProps
+	}: SonnerProps = $props();
 </script>
 
 <Sonner
 	theme="light"
 	class="toaster group"
 	{richColors}
+	{closeButton}
+	{duration}
 	style="
 		--normal-bg: var(--popover, #fff);
 		--normal-text: var(--popover-foreground, #1A1A2E);

package/dist/components/ui/sonner/sonner.svelte.d.ts

@@ -1,3 +1,9 @@
+export declare const TOAST_DURATION: {
+    readonly success: 5000;
+    readonly info: 5000;
+    readonly warning: 8000;
+    readonly error: number;
+};
 import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 declare const Sonner: import("svelte").Component<SonnerProps, {}, "">;
 type Sonner = ReturnType<typeof Sonner>;

package/dist/components/ui/spinner/spinner.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Spinner } from './index.js';
+
+	const { Story } = defineMeta({
+		title: 'UI/Feedback/Spinner',
+		component: Spinner,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component: 'Wskaźnik ładowania. Dla bloków treści (lista, formularz) preferuj `Skeleton`. Spinner używaj wyłącznie dla pojedynczych przycisków lub krótkich operacji.',
+				},
+			},
+		},
+	});
+</script>
+
+<Story name="Default">
+	<div role="status" aria-label="Ładowanie…">
+		<Spinner />
+	</div>
+</Story>
+
+<Story name="Inline w tekście">
+	<p style="display:flex;align-items:center;gap:8px;">
+		<Spinner />
+		<span>Zapisuję zmiany…</span>
+	</p>
+</Story>