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

package/src/components/progress/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolProgress } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ProgressBasic: FC = () => (
@@ -12,21 +13,21 @@ export const ProgressBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
-			<fieldset title="Percentages" className="flex flex-col gap-4">
+			<SampleBlock id="percentages" heading="Percentages" className="flex flex-col gap-4">
 				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
 				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
 				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
 				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
-			</fieldset>
-			<fieldset title="Custom units" className="flex flex-col gap-4">
+			</SampleBlock>
+			<SampleBlock id="custom-units" heading="Custom units" className="flex flex-col gap-4">
 				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
 				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
 				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
-			</fieldset>
-			<fieldset title="Min & Max" className="flex flex-col gap-4">
+			</SampleBlock>
+			<SampleBlock id="min-max" heading="Min & Max" className="flex flex-col gap-4">
 				<KolProgress _label="More than max" _variant="bar" _max={7} _value={14}></KolProgress>
 				<KolProgress _label="Less than min" _variant="bar" _max={7} _value={-7}></KolProgress>
-			</fieldset>
+			</SampleBlock>
 		</div>
 	</>
 );

package/src/components/quote/basic.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolQuote } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBasic: FC = () => (
@@ -10,6 +11,8 @@ export const QuoteBasic: FC = () => (
 			<p>KolQuote renders a quote with optional citation. This sample shows a quote in the variant &quot;inline&quot; with a link for citation.</p>
 		</SampleDescription>
 
-		<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+		<SampleBlock id="basic">
+			<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+		</SampleBlock>
 	</>
 );

package/src/components/quote/block.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolQuote } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBlock: FC = () => (
@@ -10,17 +11,19 @@ export const QuoteBlock: FC = () => (
 			<p>This sample shows a quote in the &quot;block&quot; variant.</p>
 		</SampleDescription>
 
-		<KolQuote
-			_label="RFC 1149"
-			_href="https://datatracker.ietf.org/doc/html/rfc1149"
-			_quote="Avian carriers can provide high delay, low throughput, and low altitude
+		<SampleBlock id="block">
+			<KolQuote
+				_label="RFC 1149"
+				_href="https://datatracker.ietf.org/doc/html/rfc1149"
+				_quote="Avian carriers can provide high delay, low throughput, and low altitude
 								service. The connection topology is limited to a single point-to-point path
 								for each carrier, used with standard carriers, but many carriers can be used
 								without significant interference with each other, outside early spring.
 								This is because of the 3D ether space available to the carriers, in contrast
 								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
 								avoidance system, which increases availability."
-			_variant="block"
-		></KolQuote>
+				_variant="block"
+			></KolQuote>
+		</SampleBlock>
 	</>
 );

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

@@ -6,6 +6,7 @@ import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
 import type { Components, Optgroup, SelectOption, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
+import { SampleBlock } from '../../SampleBlock';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
@@ -47,41 +48,80 @@ const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option)
 
 const groupedOptionsArray = Object.values(groupedOptions);
 
-export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
+type SelectCasesProps = Components.KolSelect & {
+	/** 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 SelectCases = forwardRef<HTMLKolSelectElement, SelectCasesProps>(function SelectCases({ 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">
-			<KolSelect
-				{...props}
-				ref={ref}
-				_accessKey="a"
-				_options={SALUTATION_OPTIONS}
-				_label="Salutation"
-				_icons={{
-					left: {
-						icon: 'kolicon-chevron-left',
-					},
-					right: {
-						icon: 'kolicon-chevron-right',
-					},
-				}}
-			/>
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS_DISABLED} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
-			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
-			<KolSelect
-				{...props}
-				_options={COUNTRY_OPTIONS}
-				_label="Multiple choice with error"
-				_multiple
-				_required
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_hint={HINT_MSG}
-				_touched
-			/>
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With access key" _accessKey="c" />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With short key" _shortKey="s" />
-			<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter" _value="Albanien" />
-			<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter (multiple)" _multiple _value={['Albanien']} />
+			<SampleBlock {...block('salutation-icons')}>
+				<KolSelect
+					{...props}
+					ref={ref}
+					_accessKey="a"
+					_options={SALUTATION_OPTIONS}
+					_label="Salutation"
+					_icons={{
+						left: {
+							icon: 'kolicon-chevron-left',
+						},
+						right: {
+							icon: 'kolicon-chevron-right',
+						},
+					}}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolSelect
+					{...props}
+					_options={SALUTATION_OPTIONS_DISABLED}
+					_label="Salutation with error"
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('multiple')}>
+				<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
+			</SampleBlock>
+			<SampleBlock {...block('multiple-error')}>
+				<KolSelect
+					{...props}
+					_options={COUNTRY_OPTIONS}
+					_label="Multiple choice with error"
+					_multiple
+					_required
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_hint={HINT_MSG}
+					_touched
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With access key" _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With short key" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('grouped')}>
+				<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter" _value="Albanien" />
+			</SampleBlock>
+			<SampleBlock {...block('grouped-multiple')}>
+				<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter (multiple)" _multiple _value={['Albanien']} />
+			</SampleBlock>
 		</div>
 	);
 });

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

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

package/src/components/single-select/partials/cases.tsx

@@ -7,123 +7,157 @@ import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import type { Components, Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
 import { LONG_OPTIONS } from '../../../shares/longOptions';
+import { SampleBlock } from '../../SampleBlock';
 
-export const SingleSelectCases = (props: Components.KolSingleSelect) => {
+type SingleSelectCasesProps = Components.KolSingleSelect & {
+	/** 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 SingleSelectCases = ({ blockIdPrefix, snapshotOnly, ...props }: SingleSelectCasesProps) => {
+	// 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">
-			<KolSingleSelect {...props} _hint={HINT_MSG} _label="Label" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} />
-			<KolSingleSelect {...props} _label="Disabled" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _disabled />
-			<KolSingleSelect
-				{...props}
-				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_rows={3}
-				_touched
-				_label="Label"
-				_placeholder="Placeholder"
-				_required
-			/>
-			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
-			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
-			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
-			<KolSingleSelect
-				{...props}
-				_label="With hidden clear button"
-				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
-				_value={'de'}
-				_hasClearButton={false}
-			/>
-			<KolSingleSelect
-				{...props}
-				_label="Boolean option values (Issue #9122)"
-				_options={
-					[
-						{ label: 'False', value: false },
-						{ label: 'True', value: true },
-					] as Option<StencilUnknown>[]
-				}
-				_value={false}
-			/>
-			<KolSingleSelect
-				{...props}
-				_hint={HINT_MSG}
-				_label="With disabled options"
-				_options={
-					[
-						{
-							value: 'bw',
-							label: 'Baden-Württemberg',
-						},
-						{
-							value: 'by',
-							label: 'Bayern',
-							disabled: true,
-						},
-						{
-							value: 'be',
-							label: 'Berlin',
-						},
-						{
-							value: 'bb',
-							label: 'Brandenburg',
-						},
-						{
-							value: 'hb',
-							label: 'Bremen',
-						},
-						{
-							value: 'hh',
-							label: 'Hamburg',
-						},
-						{
-							value: 'he',
-							label: 'Hessen',
-						},
-						{
-							value: 'mv',
-							label: 'Mecklenburg-Vorpommern',
-							disabled: true,
-						},
-						{
-							value: 'ni',
-							label: 'Niedersachsen',
-							disabled: true,
-						},
-						{
-							value: 'nw',
-							label: 'Nordrhein-Westfalen',
-						},
-						{
-							value: 'rp',
-							label: 'Rheinland-Pfalz',
-							disabled: true,
-						},
-						{
-							value: 'sl',
-							label: 'Saarland',
-						},
-						{
-							value: 'sn',
-							label: 'Sachsen',
-						},
-						{
-							value: 'st',
-							label: 'Sachsen-Anhalt',
-							disabled: true,
-						},
-						{
-							value: 'sh',
-							label: 'Schleswig-Holstein',
-							disabled: true,
-						},
-						{
-							value: 'th',
-							label: 'Thüringen',
-						},
-					] as Option<StencilUnknown>[]
-				}
-				_value={'be'}
-			/>
+			<SampleBlock {...block('hint')}>
+				<KolSingleSelect {...props} _hint={HINT_MSG} _label="Label" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolSingleSelect {...props} _label="Disabled" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _disabled />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolSingleSelect
+					{...props}
+					_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_rows={3}
+					_touched
+					_label="Label"
+					_placeholder="Placeholder"
+					_required
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('long-labels')}>
+				<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
+			</SampleBlock>
+			<SampleBlock {...block('no-clear-button')}>
+				<KolSingleSelect
+					{...props}
+					_label="With hidden clear button"
+					_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+					_value={'de'}
+					_hasClearButton={false}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('boolean-values')}>
+				<KolSingleSelect
+					{...props}
+					_label="Boolean option values (Issue #9122)"
+					_options={
+						[
+							{ label: 'False', value: false },
+							{ label: 'True', value: true },
+						] as Option<StencilUnknown>[]
+					}
+					_value={false}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('disabled-options')}>
+				<KolSingleSelect
+					{...props}
+					_hint={HINT_MSG}
+					_label="With disabled options"
+					_options={
+						[
+							{
+								value: 'bw',
+								label: 'Baden-Württemberg',
+							},
+							{
+								value: 'by',
+								label: 'Bayern',
+								disabled: true,
+							},
+							{
+								value: 'be',
+								label: 'Berlin',
+							},
+							{
+								value: 'bb',
+								label: 'Brandenburg',
+							},
+							{
+								value: 'hb',
+								label: 'Bremen',
+							},
+							{
+								value: 'hh',
+								label: 'Hamburg',
+							},
+							{
+								value: 'he',
+								label: 'Hessen',
+							},
+							{
+								value: 'mv',
+								label: 'Mecklenburg-Vorpommern',
+								disabled: true,
+							},
+							{
+								value: 'ni',
+								label: 'Niedersachsen',
+								disabled: true,
+							},
+							{
+								value: 'nw',
+								label: 'Nordrhein-Westfalen',
+							},
+							{
+								value: 'rp',
+								label: 'Rheinland-Pfalz',
+								disabled: true,
+							},
+							{
+								value: 'sl',
+								label: 'Saarland',
+							},
+							{
+								value: 'sn',
+								label: 'Sachsen',
+							},
+							{
+								value: 'st',
+								label: 'Sachsen-Anhalt',
+								disabled: true,
+							},
+							{
+								value: 'sh',
+								label: 'Schleswig-Holstein',
+								disabled: true,
+							},
+							{
+								value: 'th',
+								label: 'Thüringen',
+							},
+						] as Option<StencilUnknown>[]
+					}
+					_value={'be'}
+				/>
+			</SampleBlock>
 		</div>
 	);
 };

package/src/components/single-select/partials/variants.tsx

@@ -2,19 +2,18 @@ import React from 'react';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 import { SingleSelectCases } from './cases';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Text</legend>
-				<SingleSelectCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Text (hideLabel)</legend>
-				<SingleSelectCases {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Text">
+				<SingleSelectCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Text (hideLabel)">
+				<SingleSelectCases blockIdPrefix="hide-label" snapshotOnly="error" {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 };

package/src/components/spin/basic.tsx

@@ -1,16 +1,47 @@
 import React from 'react';
 
-import { KolSpin } from '@public-ui/react-v19';
+import { KolHeading, KolSpin } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
+import './custom.css';
 
 export const SpinBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolSpin renders a loading indicator. This sample shows the default variant &quot;dot&quot;.</p>
+			<p>
+				KolSpin renders a loading indicator. It supports the variants &quot;dot&quot; (default) and &quot;cycle&quot;. With{' '}
+				<code>_variant=&quot;none&quot;</code> and the expert slot a custom animation can be used &ndash; custom animations are not necessarily barrier-free.
+				Color and size can be changed with the CSS properties <code>--kol-spin-color</code> and <code>--kol-spin-size</code>. The label (<code>_label</code>) is
+				only exposed to assistive technology, so it does not change the visual appearance.
+			</p>
 		</SampleDescription>
 
-		<KolSpin _show />
+		<div className="grid gap-8">
+			<SampleBlock id="basic" heading="Variant dot (default)" fitContent>
+				<KolSpin _show />
+			</SampleBlock>
+
+			<SampleBlock id="cycle" heading="Variant cycle" fitContent>
+				<KolSpin _show _variant="cycle" />
+			</SampleBlock>
+
+			<SampleBlock id="custom" heading="Custom animation (expert slot)" fitContent>
+				<KolSpin _show _variant="none">
+					<span slot="expert" className="loader"></span>
+				</KolSpin>
+			</SampleBlock>
+
+			<div>
+				<KolHeading _level={2} _label="With label (screen reader only)" />
+				<KolSpin _show _label="Loading data..." />
+			</div>
+
+			<div>
+				<KolHeading _level={2} _label="Custom color and size (CSS properties)" />
+				<KolSpin _show style={{ '--kol-spin-color': 'green', '--kol-spin-size': '80' }} />
+			</div>
+		</div>
 	</>
 );

package/src/components/spin/routes.ts

@@ -1,16 +1,8 @@
 import type { Routes } from '../../shares/types';
 import { SpinBasic } from './basic';
-import { SpinCustom } from './custom';
-import { SpinCycle } from './cycle';
-import { SpinLabel } from './label';
-import { SpinVariables } from './variables';
 
 export const SPIN_ROUTES: Routes = {
 	spin: {
 		basic: SpinBasic,
-		cycle: SpinCycle,
-		custom: SpinCustom,
-		label: SpinLabel,
-		variables: SpinVariables,
 	},
 };

package/src/components/split-button/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -43,11 +44,11 @@ export const SplitButtonBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<div className="flex flex-col gap-4">
+			<SampleBlock id="basic" className="flex flex-col gap-4">
 				<KolSplitButton _label="Edit" _on={dummyEventHandler}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolSplitButton>
-			</div>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/action-columns.tsx

@@ -2,6 +2,7 @@ import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
 import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 type ProjectTask = {
@@ -98,8 +99,8 @@ export const TableActionColumns: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<section className="w-full">
+		<SampleBlock id="action-columns" className="w-full">
 			<KolTableStateful _label="Tasks with action buttons" _headers={HEADERS} _data={DATA} className="block" />
-		</section>
+		</SampleBlock>
 	</>
 );