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

package/src/components/table/sticky-col.tsx

@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 
@@ -37,14 +38,15 @@ export const TableStickyCol: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolHeading _level={2} _label="Sticky columns" />
-		<KolTableStateful
-			_label="Animal species overview"
-			_data={COMPLEX_DATA}
-			_headers={HEADERS_HORIZONTAL}
-			className="block"
-			_selection={selection}
-			_fixedCols={[2, 1]}
-		/>
+		<SampleBlock id="sticky-cols" heading="Sticky columns">
+			<KolTableStateful
+				_label="Animal species overview"
+				_data={COMPLEX_DATA}
+				_headers={HEADERS_HORIZONTAL}
+				className="block"
+				_selection={selection}
+				_fixedCols={[2, 1]}
+			/>
+		</SampleBlock>
 	</>
 );

package/src/components/table/sticky-header.tsx

@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 
@@ -38,14 +39,15 @@ export const TableStickyHeader: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful
-			_label="Animal species overview"
-			_data={COMPLEX_DATA}
-			_headers={HEADERS_HORIZONTAL}
-			className="block"
-			_selection={selection}
-			style={{ '--kol-table-max-height': '75vh' }}
-		/>
+		<SampleBlock id="sticky-header" heading="Sticky headers">
+			<KolTableStateful
+				_label="Animal species overview"
+				_data={COMPLEX_DATA}
+				_headers={HEADERS_HORIZONTAL}
+				className="block"
+				_selection={selection}
+				style={{ '--kol-table-max-height': '75vh' }}
+			/>
+		</SampleBlock>
 	</>
 );

package/src/components/table/variant.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 
 import { KolTableStateful } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
@@ -11,7 +12,7 @@ import { DATA } from './test-data';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import { useSearchParams } from 'react-router';
 import { fetchVariantData } from '../../shares/fetchVariantData';
-import { getCustomThemes } from '../../shares/store';
+import { getTheme } from '../../shares/store';
 
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
@@ -24,7 +25,7 @@ const HEADERS: KoliBriTableHeaders = {
 
 export const TableVariant: FC = () => {
 	const [searchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const theme = searchParams.get('theme') ?? getTheme();
 	const tableVariants = useMemo(() => (theme ? fetchVariantData(theme, 'tableVariants') : []), [theme]);
 
 	return (
@@ -33,7 +34,7 @@ export const TableVariant: FC = () => {
 				<p>This sample shows KolTableStateful with different variants controlled by the theme.</p>
 			</SampleDescription>
 
-			<section className="w-full flex flex-col gap-14">
+			<SampleBlock id="variants" className="w-full flex flex-col gap-14">
 				{!Array.isArray(tableVariants) || tableVariants.length === 0 ? (
 					<p>This theme has no variants for tables.</p>
 				) : (
@@ -58,7 +59,7 @@ export const TableVariant: FC = () => {
 						);
 					})
 				)}
-			</section>
+			</SampleBlock>
 		</div>
 	);
 };

package/src/components/table/with-footer.tsx

@@ -1,6 +1,7 @@
 import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (
@@ -9,76 +10,78 @@ export const TableWithFooter: FC = () => (
 			<p>This sample shows KolTableStateful with footer data.</p>
 		</SampleDescription>
 
-		<KolTableStateful
-			className="w-full"
-			_label="Business hours"
-			_headers={{
-				horizontal: [
-					[
-						{
-							label: 'District',
-							key: 'asp',
-							width: 160,
-						},
-						{
-							label: 'Monday',
-							key: 'monday',
-							width: 160,
-						},
-						{
-							label: 'Tuesday',
-							key: 'tuesday',
-							width: 160,
-						},
-						{
-							label: 'Wednesday',
-							key: 'wednesday',
-							width: 160,
-						},
-						{
-							label: 'Thursday',
-							key: 'thursday',
-							width: 160,
-						},
-						{
-							label: 'Friday',
-							key: 'friday',
-							width: 160,
-						},
+		<SampleBlock id="with-footer">
+			<KolTableStateful
+				className="w-full"
+				_label="Business hours"
+				_headers={{
+					horizontal: [
+						[
+							{
+								label: 'District',
+								key: 'asp',
+								width: 160,
+							},
+							{
+								label: 'Monday',
+								key: 'monday',
+								width: 160,
+							},
+							{
+								label: 'Tuesday',
+								key: 'tuesday',
+								width: 160,
+							},
+							{
+								label: 'Wednesday',
+								key: 'wednesday',
+								width: 160,
+							},
+							{
+								label: 'Thursday',
+								key: 'thursday',
+								width: 160,
+							},
+							{
+								label: 'Friday',
+								key: 'friday',
+								width: 160,
+							},
+						],
 					],
-				],
-			}}
-			_data={[
-				{
-					asp: 'Center',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-				{
-					asp: 'Tiergarten',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-				{
-					asp: 'Maxvorstadt',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-			]}
-			_dataFoot={[
-				{
-					tuesday: "Lunch break from 11 to 14 o'clock",
-				},
-			]}
-		/>
+				}}
+				_data={[
+					{
+						asp: 'Center',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+					{
+						asp: 'Tiergarten',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+					{
+						asp: 'Maxvorstadt',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+				]}
+				_dataFoot={[
+					{
+						tuesday: "Lunch break from 11 to 14 o'clock",
+					},
+				]}
+			/>
+		</SampleBlock>
 	</>
 );

package/src/components/table/with-pagination.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { KolTableStateful } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
@@ -25,8 +26,8 @@ export const TableWithPagination: FC = () => (
 		<SampleDescription>
 			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
-		<div className="w-full">
+		<SampleBlock id="with-pagination" className="w-full">
 			<KolTableStateful _label="Table description" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/tabs/basic.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTabs } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
@@ -40,18 +41,22 @@ export const TabsBasic: FC = () => (
 			<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>
 		</SampleDescription>
 
-		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
-			<div slot="tab-0">Contents of Tab 1</div>
-			<div slot="tab-1">Contents of Tab 2</div>
-			<div slot="tab-2">Contents of Tab 3</div>
-			<div slot="tab-3">Contents of Tab 4</div>
-		</KolTabs>
+		<SampleBlock id="regular" fitContent>
+			<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
+				<div slot="tab-0">Contents of Tab 1</div>
+				<div slot="tab-1">Contents of Tab 2</div>
+				<div slot="tab-2">Contents of Tab 3</div>
+				<div slot="tab-3">Contents of Tab 4</div>
+			</KolTabs>
+		</SampleBlock>
 
-		<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
-			<div slot="tab-0">Contents of Tab 1</div>
-			<div slot="tab-1">Contents of Tab 2</div>
-			<div slot="tab-2">Contents of Tab 3</div>
-			<div slot="tab-3">Contents of Tab 4</div>
-		</KolTabs>
+		<SampleBlock id="icons" fitContent>
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
+				<div slot="tab-0">Contents of Tab 1</div>
+				<div slot="tab-1">Contents of Tab 2</div>
+				<div slot="tab-2">Contents of Tab 3</div>
+				<div slot="tab-3">Contents of Tab 4</div>
+			</KolTabs>
+		</SampleBlock>
 	</>
 );

package/src/components/tabs/create-button.tsx

@@ -1,6 +1,7 @@
 import { KolTabs } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useState } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const CreateButton: FC = () => {
@@ -28,15 +29,17 @@ export const CreateButton: FC = () => {
 				<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>
 			</SampleDescription>
 
-			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
-				{tabs.map((tab, index) => (
-					<div key={`tab-${index}`} slot={`tab-${index}`}>
-						Contents of {tab._label}
-					</div>
-				))}
+			<SampleBlock id="create-button" fitContent>
+				<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
+					{tabs.map((tab, index) => (
+						<div key={`tab-${index}`} slot={`tab-${index}`}>
+							Contents of {tab._label}
+						</div>
+					))}
 
-				<div slot="tab-1">Contents of Tab 2</div>
-			</KolTabs>
+					<div slot="tab-1">Contents of Tab 2</div>
+				</KolTabs>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/tabs/icons-only.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTabs } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
@@ -38,11 +39,13 @@ export const TabsIconsOnly: FC = () => (
 			<p>This sample shows KolTabs with hidden labels.</p>
 		</SampleDescription>
 
-		<KolTabs _label="Tabs with icons" _tabs={tabs}>
-			<div slot="tab-0">Contents of Tab 1</div>
-			<div slot="tab-1">Contents of Tab 2</div>
-			<div slot="tab-2">Contents of Tab 3</div>
-			<div slot="tab-3">Contents of Tab 4</div>
-		</KolTabs>
+		<SampleBlock id="icons-only" fitContent>
+			<KolTabs _label="Tabs with icons" _tabs={tabs}>
+				<div slot="tab-0">Contents of Tab 1</div>
+				<div slot="tab-1">Contents of Tab 2</div>
+				<div slot="tab-2">Contents of Tab 3</div>
+				<div slot="tab-3">Contents of Tab 4</div>
+			</KolTabs>
+		</SampleBlock>
 	</>
 );

package/src/components/textarea/adjust-height.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolForm, KolTextarea } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
@@ -19,8 +20,10 @@ export const TextareaAdjustHeight: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm className="w-full">
-			<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
-		</KolForm>
+		<SampleBlock id="adjust-height">
+			<KolForm className="w-full">
+				<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
+			</KolForm>
+		</SampleBlock>
 	</>
 );

package/src/components/textarea/partials/cases.tsx

@@ -3,25 +3,73 @@ import { KolTextarea } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
-export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
+type TextareaCasesProps = Components.KolTextarea & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const TextareaCases = forwardRef<HTMLKolTextareaElement, TextareaCasesProps>(function TextareaCases({ blockIdPrefix, snapshotOnly, ...props }, ref) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
-			</div>
-			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} _touched />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} _touched />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} _touched />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'default', _description: 'Default message' }} _touched />
-			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
-			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
-			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
-			<KolTextarea {...props} ref={ref} _label="Text (readonly)" _rows={3} _placeholder="Placeholder" _readOnly />
-			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
-			<KolTextarea {...props} ref={ref} _label="With access key" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _accessKey="c" />
-			<KolTextarea {...props} ref={ref} _label="With short key" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolTextarea
+					{...props}
+					_placeholder="Placeholder"
+					_required
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Text"
+					_touched
+					_hint={HINT_MSG}
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'default', _description: 'Default message' }} _touched />
+			</SampleBlock>
+			<SampleBlock {...block('rows')}>
+				<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
+			</SampleBlock>
+			<SampleBlock {...block('placeholder')}>
+				<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
+			</SampleBlock>
+			<SampleBlock {...block('disabled-empty')}>
+				<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
+			</SampleBlock>
+			<SampleBlock {...block('readonly')}>
+				<KolTextarea {...props} ref={ref} _label="Text (readonly)" _rows={3} _placeholder="Placeholder" _readOnly />
+			</SampleBlock>
+			<SampleBlock {...block('disabled-value')}>
+				<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolTextarea {...props} ref={ref} _label="With access key" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolTextarea {...props} ref={ref} _label="With short key" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _shortKey="s" />
+			</SampleBlock>
 		</div>
 	);
 });

package/src/components/textarea/partials/variants.tsx

@@ -4,17 +4,16 @@ import { TextareaCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Text</legend>
-				<TextareaCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Text (hideLabel)</legend>
-				<TextareaCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Text">
+				<TextareaCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Text (hideLabel)">
+				<TextareaCases blockIdPrefix="hide-label" snapshotOnly="error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

package/src/components/textarea/resize.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 export const TextareaResize: FC = () => (
 	<>
@@ -13,11 +14,11 @@ export const TextareaResize: FC = () => (
 		</SampleDescription>
 
 		<KolForm className="w-full">
-			<div className="flex flex-col gap-4">
+			<SampleBlock id="resize" className="flex flex-col gap-4">
 				<KolTextarea _label="Text input (unset)" />
 				<KolTextarea _resize="vertical" _label="Text input (vertical)" />
 				<KolTextarea _resize="none" _label="Text input (none)" />
-			</div>
+			</SampleBlock>
 		</KolForm>
 	</>
 );

package/src/components/textarea/rows.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const TextareaRows: FC = () => (
@@ -13,8 +14,10 @@ export const TextareaRows: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm className="w-full">
-			<KolTextarea _rows={10} _label="Texteingabe" />
-		</KolForm>
+		<SampleBlock id="rows">
+			<KolForm className="w-full">
+				<KolTextarea _rows={10} _label="Texteingabe" />
+			</KolForm>
+		</SampleBlock>
 	</>
 );

package/src/components/textarea/with-counter.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTextarea } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const TextareaWithCounter: FC = () => (
@@ -13,11 +14,11 @@ export const TextareaWithCounter: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<section className="w-full flex flex-col gap-4">
+		<SampleBlock id="with-counter" className="w-full flex flex-col gap-4">
 			<KolTextarea _label="Textarea with soft max length" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} _hasCounter _maxLengthBehavior="soft" />
 			<KolTextarea _label="Textarea with max length" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} />
 			<KolTextarea _label="Textarea with max length and counter" _value={'Lorem Ipsum'} className="mt-2" _maxLength={20} _hasCounter />
 			<KolTextarea _label="Textarea with counter" _value={'Lorem Ipsum'} className="mt-2" _hasCounter />
-		</section>
+		</SampleBlock>
 	</>
 );

package/src/components/toolbar/basic.tsx

@@ -1,7 +1,8 @@
 import type { ToolbarItemsPropType } from '@public-ui/components';
-import { KolHeading, KolToolbar } from '@public-ui/react-v19';
+import { KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
@@ -61,13 +62,13 @@ export const ToolbarBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<div className="flex flex-col gap-4">
-				<KolHeading _label="Orientation horizontal" _level={2} />
+			<SampleBlock id="horizontal" heading="Orientation horizontal" fitContent narrow>
 				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+			</SampleBlock>
 
-				<KolHeading _label="Orientation vertical" _level={2} />
+			<SampleBlock id="vertical" heading="Orientation vertical" fitContent>
 				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
-			</div>
+			</SampleBlock>
 		</>
 	);
 };