@public-ui/sample-react 4.3.1-rc.1 → 4.3.1-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.1-rc.1",
+  "version": "4.3.1-rc.5",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -9,26 +9,26 @@
     "url": "https://github.com/public-ui/kolibri"
   },
   "dependencies": {
-    "@hookform/resolvers": "5.7.1",
+    "@hookform/resolvers": "5.9.1",
     "@stencil/core": "4.38.3",
-    "@types/node": "26.2.0",
+    "@types/node": "26.4.0",
     "@types/papaparse": "5.5.2",
-    "papaparse": "5.5.4",
-    "react-hook-form": "7.85.0",
+    "papaparse": "5.7.0",
+    "react-hook-form": "7.86.0",
     "react-number-format": "5.4.5",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/react-hook-form-adapter": "4.3.1-rc.1",
-    "@public-ui/react-v19": "4.3.1-rc.1"
+    "@public-ui/react-hook-form-adapter": "4.3.1-rc.5",
+    "@public-ui/react-v19": "4.3.1-rc.5"
   },
   "devDependencies": {
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "adopted-style-sheets": "1.1.9-rc.25",
     "eslint": "9.39.5",
-    "knip": "6.32.1",
+    "knip": "6.32.3",
     "prettier": "3.9.6",
     "prettier-plugin-organize-imports": "4.3.0",
     "stylelint": "17.14.1"
@@ -37,7 +37,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-router": "8.3.0",
-    "@public-ui/components": "4.3.1-rc.1"
+    "@public-ui/components": "4.3.1-rc.5"
   },
   "files": [
     "assets",

package/src/App.tsx

@@ -7,6 +7,7 @@ import PackageJson from '@public-ui/components/package.json';
 import { BackPage } from './components/BackPage';
 import { Sidebar } from './components/Sidebar';
 import { useSetCurrentLocation } from './hooks/useSetCurrentLocation';
+import { useVisualBlockOutline } from './hooks/useVisualBlockOutline';
 import { HideMenusContext } from './shares/HideMenusContext';
 import { ROUTES } from './shares/routes';
 import { sampleAppDataService } from './shares/sampleAppDataService';
@@ -140,6 +141,7 @@ export const App: FC<Props> = ({ customThemes }) => {
 
 	setTheme(theme); // set for `getTheme` usages within the application
 	useSetCurrentLocation();
+	useVisualBlockOutline();
 
 	useEffect(() => {
 		document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;

package/src/components/InputEventValueDemo.tsx

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from 'react';
 import React, { useMemo, useState } from 'react';
+import { SampleBlock, toKebabCase } from './SampleBlock';
 
 type EventHandlers = {
 	onChange: (_event: Event, value: unknown) => void;
@@ -8,10 +9,12 @@ type EventHandlers = {
 
 type Props = {
 	label: string;
+	/** Overrides the visual block id derived from `label`. */
+	blockId?: string;
 	renderInput: (handlers: EventHandlers) => ReactNode;
 };
 
-export const InputEventValueDemo: FC<Props> = ({ label, renderInput }) => {
+export const InputEventValueDemo: FC<Props> = ({ label, blockId, renderInput }) => {
 	const [changeValue, setChangeValue] = useState<unknown>(null);
 	const [inputValue, setInputValue] = useState<unknown>(null);
 
@@ -28,7 +31,7 @@ export const InputEventValueDemo: FC<Props> = ({ label, renderInput }) => {
 	);
 
 	return (
-		<section className="grid gap-4 mb-6" aria-label={`Event callback demo: ${label}`}>
+		<SampleBlock id={blockId ?? toKebabCase(label)} className="grid gap-4 mb-6" aria-label={`Event callback demo: ${label}`}>
 			{renderInput(handlers)}
 			<div className="grid gap-2">
 				<p>
@@ -38,6 +41,6 @@ export const InputEventValueDemo: FC<Props> = ({ label, renderInput }) => {
 					<strong>onChange value:</strong> <code>{JSON.stringify(changeValue)}</code>
 				</p>
 			</div>
-		</section>
+		</SampleBlock>
 	);
 };

package/src/components/SampleBlock.tsx

@@ -0,0 +1,81 @@
+import { KolHeading } from '@public-ui/react-v19';
+import type { CSSProperties, FC, HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
+
+/**
+ * Converts an arbitrary label into a kebab-case block id, e.g. `Text (hideLabel)` → `text-hide-label`.
+ * Use this only for data-driven blocks; prefer hard-coded ids so label changes don't rename snapshots.
+ */
+export function toKebabCase(value: string): string {
+	return value
+		.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+}
+
+type SampleBlockProps = PropsWithChildren<
+	{
+		/**
+		 * Unique within the route, kebab-case, max. 30 characters.
+		 * Becomes part of the visual snapshot file name — renaming it renames the snapshot.
+		 */
+		id: string;
+		/** Optional heading rendered above the block content. */
+		heading?: string;
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		/** Overrides the default `grid gap-4` container layout. */
+		className?: string;
+		/**
+		 * Shrinks the snapshot container to the width its content actually needs (`width: fit-content`)
+		 * instead of stretching it across the full sample width. Use it for narrow, inline-ish samples
+		 * (abbr, badge, link, …) so the snapshot doesn't consist mostly of empty space.
+		 * Don't use it for components that rely on the available width (tables, form fields, cards).
+		 */
+		fitContent?: boolean;
+		/**
+		 * Captures a second element screenshot of this block at 320 px viewport width
+		 * (`<route-slug>--<block-id>-320.png`) to guard the reflow behaviour required by
+		 * WCAG 1.4.10. Opt in only where narrow width actually changes the layout —
+		 * every flagged block doubles its snapshot count.
+		 */
+		narrow?: boolean;
+		/**
+		 * Excludes this block from the visual tests without turning it back into a plain `div`:
+		 * heading, layout and the debug outline stay, only `data-visual-block` is dropped so no
+		 * screenshot is taken. Use it for samples that can't be captured deterministically
+		 * (animations, timestamps, random data) or that are only there to be looked at.
+		 * The outline marks such blocks **red** instead of blue, and `narrow` has no effect on them.
+		 */
+		skipSnapshot?: boolean;
+	} & Omit<HTMLAttributes<HTMLElement>, 'className' | 'id'>
+>;
+
+const FIT_CONTENT_STYLE: CSSProperties = { width: 'fit-content' };
+
+/**
+ * Wraps a sample variant block in a container addressable by the visual tests.
+ * Each `data-visual-block` container is captured as an individual element screenshot
+ * instead of one full-page screenshot per route. This component is the only place
+ * that sets `data-visual-block` — samples must not set the attribute directly.
+ * The blocks can be made visible while developing (`?visualBlocks` or `Ctrl+Alt+B`),
+ * see `shares/visualBlockOutline`.
+ * See packages/tools/visual-tests/README.md.
+ */
+export const SampleBlock: FC<SampleBlockProps> = ({ id, heading, level = 2, className, fitContent, narrow, skipSnapshot, children, ...rest }) => (
+	<section {...rest}>
+		{/* The heading is sample chrome, not component content: it stays outside the captured block so heading changes never invalidate snapshots. */}
+		{heading ? <KolHeading _level={level} _label={heading} /> : null}
+		<div
+			/* Excluded blocks keep their id under a different attribute: the tests only look for
+			   `data-visual-block`, while the debug outline can still find and mark them. */
+			data-visual-block={skipSnapshot ? undefined : id}
+			data-visual-block-skipped={skipSnapshot ? id : undefined}
+			data-visual-narrow={narrow && !skipSnapshot ? '' : undefined}
+			className={className ?? 'grid gap-4'}
+			style={fitContent ? FIT_CONTENT_STYLE : undefined}
+		>
+			{children}
+		</div>
+	</section>
+);

package/src/components/SampleGroup.tsx

@@ -0,0 +1,27 @@
+import { KolHeading } from '@public-ui/react-v19';
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
+
+type SampleGroupProps = PropsWithChildren<
+	{
+		/** Optional heading rendered above the group content. */
+		heading?: string;
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} & HTMLAttributes<HTMLElement>
+>;
+
+/**
+ * Groups several {@link SampleBlock}s under a common heading.
+ *
+ * Unlike `SampleBlock` it renders no `data-visual-block` container, so the nested blocks stay
+ * individual element screenshots instead of being captured together as one. Use it wherever a
+ * sample renders the same set of cases more than once (e.g. with and without `_hideLabel`) – the
+ * group supplies the heading, the cases supply the blocks.
+ */
+export const SampleGroup: FC<SampleGroupProps> = ({ heading, level = 2, children, ...rest }) => (
+	<section {...rest}>
+		{/* The heading is sample chrome, not component content: it stays outside the captured blocks so heading changes never invalidate snapshots. */}
+		{heading ? <KolHeading _level={level} _label={heading} /> : null}
+		{children}
+	</section>
+);

package/src/components/abbr/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { KolAbbr } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -10,8 +11,10 @@ export const AbbrBasic: FC = () => (
 			<p>KolAbbr shows an abbreviation.</p>
 		</SampleDescription>
 
-		<p>
-			I am <KolAbbr>e.g.</KolAbbr> an abbreviation.
-		</p>
+		<SampleBlock id="basic" fitContent>
+			<span>
+				I am <KolAbbr>e.g.</KolAbbr> an abbreviation.
+			</span>
+		</SampleBlock>
 	</>
 );

package/src/components/accordion/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { KolAccordion } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -14,7 +15,7 @@ export const AccordionBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="basic">
 			<KolAccordion _label="Heading Accordion Tab 1 (open)" _open>
 				<p>Contents Accordion Tab 1</p>
 			</KolAccordion>
@@ -27,6 +28,6 @@ export const AccordionBasic: FC = () => (
 			<KolAccordion _label="Heading Accordion Tab 4 (disabled and open)" _disabled _open>
 				<p>Contents Accordion Tab 4</p>
 			</KolAccordion>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/accordion/headlines.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolAccordion } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const AccordionHeadlines: FC = () => (
@@ -10,7 +11,7 @@ export const AccordionHeadlines: FC = () => (
 			<p>This sample shows KolAccordion with the different heading levels from 1-6.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="headlines">
 			<KolAccordion _label="Heading Level 1" _level={1}>
 				<p>Contents Accordion Tab 1</p>
 			</KolAccordion>
@@ -29,6 +30,6 @@ export const AccordionHeadlines: FC = () => (
 			<KolAccordion _label="Heading Level 6" _level={6}>
 				<p>Contents Accordion Tab 6</p>
 			</KolAccordion>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/alert/basic.tsx

@@ -2,6 +2,7 @@ import type { AlertTypePropType, AlertVariantPropType, HeadingLevel } from '@pub
 import { KolAlert } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 type PropsByType = {
@@ -15,29 +16,31 @@ type PropsBasic = {
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	<>
-		<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>
-			This is the text of the alert.
-		</KolAlert>
-		<KolAlert _type={type} _variant={variant}>
-			In this alert, only the text without the heading is used.
-		</KolAlert>
-		<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>
-			This is the text of the alert. With close button.
-		</KolAlert>
-		<KolAlert _type={type} _variant={variant} _hasCloser>
-			In this alert, only the text without the heading is used. With close button.
-		</KolAlert>
+		<SampleBlock id={type} className="flex flex-col gap-2">
+			<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>
+				This is the text of the alert.
+			</KolAlert>
+			<KolAlert _type={type} _variant={variant}>
+				In this alert, only the text without the heading is used.
+			</KolAlert>
+			<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>
+				This is the text of the alert. With close button.
+			</KolAlert>
+			<KolAlert _type={type} _variant={variant} _hasCloser>
+				In this alert, only the text without the heading is used. With close button.
+			</KolAlert>
+		</SampleBlock>
 	</>
 );
 
 export const AlertVariants: FC<PropsBasic> = ({ variant = 'msg' }) => (
-	<div className="grid gap-4">
+	<>
 		<AlertByType level={1} type="default" variant={variant} />
 		<AlertByType level={2} type="error" variant={variant} />
 		<AlertByType level={3} type="info" variant={variant} />
 		<AlertByType level={4} type="success" variant={variant} />
 		<AlertByType level={5} type="warning" variant={variant} />
-	</div>
+	</>
 );
 
 export const AlertBasic: FC<PropsBasic> = () => (

package/src/components/avatar/basic.tsx

@@ -1,6 +1,7 @@
 import { KolAvatar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const AvatarBasic: FC = () => (
@@ -12,13 +13,13 @@ export const AvatarBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<SampleBlock className="flex gap-2" id="basic" fitContent>
 			<KolAvatar _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
 
 			{/* intentional trailing space   👇 - it's supposed to be trimmed */}
 			<KolAvatar _label="Elke Mustermann " />
 			<KolAvatar _label="Marianne" />
 			<KolAvatar _color="#0000FF" _label="Christian" />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/avatar/size.tsx

@@ -1,6 +1,7 @@
 import { KolAvatar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const AvatarSize: FC = () => (
@@ -15,12 +16,12 @@ export const AvatarSize: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap items-center gap-4">
+		<SampleBlock className="flex flex-wrap items-center gap-4" id="size" fitContent>
 			<KolAvatar style={{ width: '30px' }} _label="Elke Mustermann" />
 			<KolAvatar style={{ width: '30px', height: '45px' }} _label="Marianne" />
 			<KolAvatar style={{ width: '60px', height: '30px' }} _color="#0000FF" _label="Christian" />
 			<KolAvatar _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
 			<KolAvatar style={{ width: '150px' }} _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/badge/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { KolBadge } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -8,15 +9,55 @@ import type { FC } from 'react';
 export const BadgeBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolBadge shows badges with a label, background color and optional icon.</p>
+			<p>
+				KolBadge shows badges with a label, background color and optional icon. The label supports markdown syntax and the badge can host an optional{' '}
+				<code>smartButton</code> &ndash; here a &quot;remove&quot; button with X-icon and a click event listener.
+			</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-2">
-			<KolBadge _label="black"></KolBadge>
-			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
-			<KolBadge _color="#06539e" _label="blue"></KolBadge>
-			<KolBadge _color="#ae0000" _label="red with icon" _icons="kolicon-house"></KolBadge>
-			<KolBadge _color="#8b008b" _label="purple with icon" _icons="kolicon-kolibri"></KolBadge>
+		<div className="grid gap-8">
+			<SampleBlock id="basic-vertical" heading="Basic Badges vertical" className="flex flex-col gap-2" fitContent>
+				<KolBadge _label="black (default)"></KolBadge>
+				<KolBadge _color="#06539e" _label="blue"></KolBadge>
+				<KolBadge _color="#ae0000" _label="red with icon" _icons="kolicon-house"></KolBadge>
+				<KolBadge _color="#8b008b" _label="purple with icon" _icons="kolicon-kolibri"></KolBadge>
+			</SampleBlock>
+
+			<SampleBlock id="basic-horizontal" heading="Basic Badges horizontal" className="flex flex-wrap gap-2" fitContent>
+				<KolBadge _label="black"></KolBadge>
+				<KolBadge _color="#06539e" _label="blue"></KolBadge>
+				<KolBadge _color="#ae0000" _label="red with icon" _icons="kolicon-kolibri"></KolBadge>
+			</SampleBlock>
+
+			<SampleBlock id="smart-button" heading="Badges with Smart Button" className="flex flex-col gap-2" fitContent>
+				<KolBadge
+					_color="#06539e"
+					_label="blue"
+					_smartButton={{
+						_ariaDescription: 'blue',
+						_icons: 'kolicon-cross',
+						_label: 'Remove',
+						_on: { onClick: () => alert('clicked') },
+					}}
+				></KolBadge>
+				<KolBadge
+					_color="#8b008b"
+					_icons="kolicon-kolibri"
+					_label="purple with icon"
+					_smartButton={{
+						_ariaDescription: 'purple with icon',
+						_icons: 'kolicon-cross',
+						_label: 'Remove',
+						_on: { onClick: () => alert('clicked') },
+					}}
+				></KolBadge>
+			</SampleBlock>
+
+			<SampleBlock id="formatted-label" heading="Formatted Label" className="flex flex-col gap-2" fitContent>
+				<KolBadge _color="#7db4ebff" _label="**Bold** and _italic_ Markdown label" />
+				<KolBadge _color="#8feb7dff" _label="This is ~~strikethrough~~ text" />
+				<KolBadge _color="#e6ee8eff" _label="Source code like `y = mx + n` is possible" />
+			</SampleBlock>
 		</div>
 	</>
 );

package/src/components/badge/routes.ts

@@ -1,12 +1,8 @@
 import type { Routes } from '../../shares/types';
 import { BadgeBasic } from './basic';
-import { BadgeButton } from './button';
-import { FormattedLabel } from './formatted-label';
 
 export const BADGE_ROUTES: Routes = {
 	badge: {
 		basic: BadgeBasic,
-		button: BadgeButton,
-		'formatted-label': FormattedLabel,
 	},
 };

package/src/components/breadcrumb/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { KolBreadcrumb } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -11,7 +12,7 @@ export const BreadcrumbBasic: FC = () => (
 			<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="basic" narrow>
 			<KolBreadcrumb
 				_label="Breadcrumb aus Text-Links"
 				_links={[
@@ -57,6 +58,6 @@ export const BreadcrumbBasic: FC = () => (
 				]}
 			></KolBreadcrumb>
 			<KolBreadcrumb _label="Minimal Breadcrumb" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/button/access-key.tsx

@@ -1,7 +1,8 @@
-import { KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
+import { KolButton, KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonAccessKey: FC = () => {
@@ -22,24 +23,21 @@ export const ButtonAccessKey: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Buttons with Access Keys" />
+				<SampleBlock id="buttons-access-keys" heading="Buttons with Access Keys" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="With S access key" _accessKey="S" _on={dummyEventHandler} />
 						<KolButton _label="Very small b" _accessKey="b" _on={dummyEventHandler} />
 						<KolButton _label="Access key does not appear in label" _accessKey="x" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Access Key with Hidden Label" />
+				<SampleBlock id="access-key-hidden-label" heading="Access Key with Hidden Label" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="access key without label" _hideLabel _accessKey="a" _icons="kolicon-cogwheel" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Access Key with Inline Icons" />
+				<SampleBlock id="access-key-inline-icons" heading="Access Key with Inline Icons" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_label="with inline icons"
@@ -51,7 +49,7 @@ export const ButtonAccessKey: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/aria-description.tsx

@@ -1,7 +1,8 @@
-import { KolButton, KolHeading } from '@public-ui/react-v19';
+import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonAriaDescription: FC = () => {
@@ -21,13 +22,12 @@ export const ButtonAriaDescription: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Buttons with and without ARIA Description" />
+				<SampleBlock id="buttons-aria-description" heading="Buttons with and without ARIA Description" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="Button without ARIA description" _on={dummyEventHandler} />
 						<KolButton _label="Button with ARIA description" _ariaDescription="This button performs an important action" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/baselined.tsx

@@ -1,7 +1,8 @@
-import { KolButton, KolHeading } from '@public-ui/react-v19';
+import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonBaselined: FC = () => {
@@ -21,13 +22,12 @@ export const ButtonBaselined: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Vertically Aligned Buttons" />
+				<SampleBlock id="vertically-aligned-buttons" heading="Vertically Aligned Buttons" fitContent>
 					<div className="flex flex-wrap gap-2">
 						<KolButton _label="Label-Text" _on={dummyEventHandler} />
 						<KolButton _icons="kolicon-cogwheel" _label="Label-Text with Icon" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);