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

package/src/components/button/basic.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 ButtonBasic: FC = () => {
@@ -21,9 +22,7 @@ export const ButtonBasic: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				{/* Button Variants */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Button Variants" />
+				<SampleBlock id="variants" heading="Button Variants" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _icons="kolicon-house" _label="Primary" _variant="primary" onClick={dummyClickEventHandler} />
 						<KolButton _icons="kolicon-kolibri" _label="Secondary" _variant="secondary" onClick={dummyClickEventHandler} />
@@ -32,31 +31,25 @@ export const ButtonBasic: FC = () => {
 						<KolButton _icons="kolicon-alert-warning" _label="Danger" _variant="danger" _on={dummyEventHandler} />
 						<KolButton _icons="kolicon-eye-closed" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				{/* Disabled State */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Disabled State" />
+				<SampleBlock id="disabled" heading="Disabled State" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _disabled _icons="kolicon-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _disabled _icons="kolicon-kolibri" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
 						<KolButton _disabled _icons="kolicon-alert-warning" _label="Danger" _variant="danger" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				{/* Hidden Label */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Hidden Label (Icon Only)" />
+				<SampleBlock id="hide-label" heading="Hidden Label (Icon Only)" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _hideLabel _icons="kolicon-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _hideLabel _icons="kolicon-kolibri" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
 						<KolButton _hideLabel _icons="kolicon-alert-warning" _label="Danger" _variant="danger" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				{/* Icon Positions */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Icon Positions" />
+				<SampleBlock id="icon-positions" heading="Icon Positions" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
@@ -81,7 +74,7 @@ export const ButtonBasic: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/disabled.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 ButtonDisabled: FC = () => {
@@ -18,8 +19,7 @@ export const ButtonDisabled: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Disabled Buttons" />
+				<SampleBlock id="disabled" heading="Disabled Buttons" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _disabled _icons="kolicon-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _disabled _icons="kolicon-kolibri" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
@@ -28,15 +28,14 @@ export const ButtonDisabled: FC = () => {
 						<KolButton _disabled _icons="kolicon-alert-warning" _label="Danger" _variant="danger" _on={dummyEventHandler} />
 						<KolButton _disabled _icons="kolicon-eye-closed" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Comparison: Enabled vs Disabled" />
+				<SampleBlock id="comparison" heading="Comparison: Enabled vs Disabled" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _icons="kolicon-house" _label="Enabled" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _disabled _icons="kolicon-house" _label="Disabled" _variant="primary" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/expert-slot.tsx

@@ -1,7 +1,8 @@
-import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';
+import { KolButton, KolIcon } 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';
 
 import './expert-slot.tooltip.scss';
@@ -25,8 +26,7 @@ export const ButtonExpertSlot: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Buttons with Expert Slot Content" />
+				<SampleBlock id="buttons-expert-slot-content" heading="Buttons with Expert Slot Content" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _icons="kolicon-house" _label="" _variant="primary" _on={dummyEventHandler}>
 							<span slot="expert">I am more than just a button</span>
@@ -42,10 +42,9 @@ export const ButtonExpertSlot: FC = () => {
 						</KolButton>
 						<KolTooltip _label="Delete with custom text" />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Disabled Buttons with Expert Slot" />
+				<SampleBlock id="disabled-buttons-expert-slot" heading="Disabled Buttons with Expert Slot" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _disabled _icons="kolicon-house" _label="" _variant="primary" _on={dummyEventHandler}>
 							<span slot="expert">Disabled expert slot</span>
@@ -54,7 +53,7 @@ export const ButtonExpertSlot: FC = () => {
 							<span slot="expert">Another disabled one</span>
 						</KolButton>
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/focus-options.tsx

@@ -1,7 +1,8 @@
 import type { KolFocusOptions, SelectOption } from '@public-ui/components';
-import { KolButton, KolHeading, KolSelect } from '@public-ui/react-v19';
+import { KolButton, KolSelect } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useCallback, useRef, useState } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const BEHAVIOR_OPTIONS: SelectOption<string>[] = [
@@ -83,8 +84,7 @@ export const ButtonFocusOptions: FC = () => {
 
 			<div className="grid gap-8">
 				{/* Scroll Into View Options */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Scroll Behavior Options" />
+				<SampleBlock id="scroll-behavior-options" heading="Scroll Behavior Options">
 					<p>
 						These options control how elements are scrolled into view. <code>preventScroll</code> and <code>focusVisible</code> are always enabled for optimal
 						focus management. Customize the scroll behavior and alignment below:
@@ -107,11 +107,10 @@ export const ButtonFocusOptions: FC = () => {
 							</div>
 						))}
 					</div>
-				</section>
+				</SampleBlock>
 
 				{/* Scroll Example */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Scroll Example" />
+				<SampleBlock id="scroll-example" heading="Scroll Example">
 					<p>The target button is positioned bottom-right. Scroll down and right to find it, then click &quot;Focus Target&quot; to apply scroll behavior.</p>
 
 					<div className="flex gap-4">
@@ -147,13 +146,12 @@ export const ButtonFocusOptions: FC = () => {
 							/>
 						</div>
 					</div>
-				</section>
+				</SampleBlock>
 
 				<hr />
 
 				{/* Description */}
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="About KolFocusOptions" />
+				<SampleBlock id="about-kol-focus-options" heading="About KolFocusOptions">
 					<div className="indented-text">
 						<p>KolFocusOptions enables advanced focus control with scroll-into-view behavior:</p>
 						<ul className="list-disc pl-5">
@@ -177,7 +175,7 @@ export const ButtonFocusOptions: FC = () => {
 							</li>
 						</ul>
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/hide-label.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 ButtonHideLabel: FC = () => {
@@ -21,8 +22,7 @@ export const ButtonHideLabel: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Buttons with Hidden Labels" />
+				<SampleBlock id="hide-label" heading="Buttons with Hidden Labels" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _hideLabel _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _hideLabel _icons="kolicon-kolibri" _label="Like" _variant="secondary" _on={dummyEventHandler} />
@@ -31,18 +31,16 @@ export const ButtonHideLabel: FC = () => {
 						<KolButton _hideLabel _icons="kolicon-alert-warning" _label="Delete" _variant="danger" _on={dummyEventHandler} />
 						<KolButton _hideLabel _icons="kolicon-eye-closed" _label="Settings" _variant="ghost" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Comparison: With and Without Hidden Label" />
+				<SampleBlock id="comparison" heading="Comparison: With and Without Hidden Label" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _hideLabel _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Disabled with Hidden Label" />
+				<SampleBlock id="disabled" heading="Disabled with Hidden Label" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _disabled _hideLabel _icons="kolicon-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
 						<KolButton _disabled _hideLabel _icons="kolicon-kolibri" _label="Like" _variant="secondary" _on={dummyEventHandler} />
@@ -50,7 +48,7 @@ export const ButtonHideLabel: FC = () => {
 						<KolButton _disabled _hideLabel _icons="kolicon-cogwheel" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
 						<KolButton _disabled _hideLabel _icons="kolicon-alert-warning" _label="Delete" _variant="danger" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/icons.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 ButtonIcons: FC = () => {
@@ -20,8 +21,7 @@ export const ButtonIcons: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Basic Icon Positions" />
+				<SampleBlock id="basic-positions" heading="Basic Icon Positions" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
@@ -52,10 +52,9 @@ export const ButtonIcons: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Multiple Icon Positions" />
+				<SampleBlock id="multiple-positions" heading="Multiple Icon Positions" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
@@ -74,10 +73,9 @@ export const ButtonIcons: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="All Icon Positions" />
+				<SampleBlock id="all-positions" heading="All Icon Positions" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
@@ -90,19 +88,17 @@ export const ButtonIcons: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Simple Icon String" />
+				<SampleBlock id="icon-string" heading="Simple Icon String" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _icons="kolicon-house" _label="Home Icon" _on={dummyEventHandler} />
 						<KolButton _icons="kolicon-kolibri" _label="Heart Icon" _on={dummyEventHandler} />
 						<KolButton _icons="kolicon-alert-warning" _label="Trash Icon" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Large Icon on Top" />
+				<SampleBlock id="large-icon" heading="Large Icon on Top" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_icons={{
@@ -117,7 +113,7 @@ export const ButtonIcons: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/row-reverse-tooltip.tsx

@@ -1,6 +1,7 @@
-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 { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonRowReverseTooltip: FC = () => {
@@ -14,12 +15,11 @@ export const ButtonRowReverseTooltip: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Button in Row-Reverse Container" />
+				<SampleBlock id="button-row-reverse-container" heading="Button in Row-Reverse Container">
 					<div className="flex flex-row-reverse">
 						<KolButton _icons="kolicon-house" _hideLabel _label="This is a very, very long tooltip text that exceeds the width." _variant="primary" />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

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

@@ -1,7 +1,8 @@
-import { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
+import { KolAlert, 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 ButtonShortKey: FC = () => {
@@ -57,24 +58,21 @@ export const ButtonShortKey: FC = () => {
 			</KolAlert>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Buttons with Short Keys" />
+				<SampleBlock id="short-keys" heading="Buttons with Short Keys" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="With S short key" _shortKey="S" _on={dummyEventHandler} />
 						<KolButton _label="Very small b" _shortKey="b" _on={dummyEventHandler} />
 						<KolButton _label="Short key does not appear in label" _shortKey="x" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Short Key with Hidden Label" />
+				<SampleBlock id="hide-label" heading="Short Key with Hidden Label" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="kolicon-cogwheel" _on={dummyEventHandler} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Short Key with Inline Icons" />
+				<SampleBlock id="inline-icons" heading="Short Key with Inline Icons" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							_label="with inline icons"
@@ -86,18 +84,15 @@ export const ButtonShortKey: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Interactive Short Key" />
-					<p>
-						This button wires the announced short key up manually: a <code>keydown</code> listener triggers the same action as a click. Press <kbd>Alt</kbd> +{' '}
-						<kbd>M</kbd> (or click the button) to open the toast.
-					</p>
-					<div className="flex flex-wrap gap-4">
-						<KolButton _label="With working M short key" _shortKey={interactiveShortKey} _on={dummyEventHandler} />
-					</div>
-				</section>
+				<p>
+					This button wires the announced short key up manually: a <code>keydown</code> listener triggers the same action as a click. Press <kbd>Alt</kbd> +{' '}
+					<kbd>M</kbd> (or click the button) to open the toast.
+				</p>
+				<div className="flex flex-wrap gap-4">
+					<KolButton _label="With working M short key" _shortKey={interactiveShortKey} _on={dummyEventHandler} />
+				</div>
 			</div>
 		</>
 	);

package/src/components/button/spinner.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 ButtonSpinner: FC = () => {
@@ -21,8 +22,7 @@ export const ButtonSpinner: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Animated Spinner Icon via CSS Part" />
+				<SampleBlock id="animated-spinner-icon-css-part" heading="Animated Spinner Icon via CSS Part" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							className="spinner-button"
@@ -55,10 +55,9 @@ export const ButtonSpinner: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Spinner with Label" />
+				<SampleBlock id="spinner-label" heading="Spinner with Label" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton
 							className="spinner-button"
@@ -79,7 +78,7 @@ export const ButtonSpinner: FC = () => {
 							_on={dummyEventHandler}
 						/>
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 
 			<style>

package/src/components/button/variants.tsx

@@ -1,15 +1,16 @@
-import { KolButton, KolHeading } from '@public-ui/react-v19';
+import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 import { useToasterService } from '../../hooks/useToasterService';
 import { fetchVariantData } from '../../shares/fetchVariantData';
-import { getCustomThemes } from '../../shares/store';
+import { getTheme } from '../../shares/store';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonVariants: FC = () => {
 	const [searchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const theme = searchParams.get('theme') ?? getTheme();
 	const data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);
 
 	const { dummyClickEventHandler } = useToasterService();
@@ -28,8 +29,7 @@ export const ButtonVariants: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="All theme exclusive button variants" />
+				<SampleBlock id="variants" heading="All theme exclusive button variants" fitContent>
 					<div className="flex flex-wrap gap-4 items-center">
 						{!Array.isArray(data) || data.length === 0 ? (
 							<p>This theme has no variants for this component.</p>
@@ -48,7 +48,7 @@ export const ButtonVariants: FC = () => {
 							})
 						)}
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/button/width.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 ButtonWidth: FC = () => {
@@ -21,8 +22,7 @@ export const ButtonWidth: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Fixed Width Buttons (8rem)" />
+				<SampleBlock id="fixed-width-buttons-8rem" heading="Fixed Width Buttons (8rem)" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="Primary" _variant="primary" {...ARGS} />
 						<KolButton _label="Secondary" _variant="secondary" {...ARGS} />
@@ -30,10 +30,9 @@ export const ButtonWidth: FC = () => {
 						<KolButton _label="Danger" _variant="danger" {...ARGS} />
 						<KolButton _label="Ghost" _variant="ghost" {...ARGS} />
 					</div>
-				</section>
+				</SampleBlock>
 
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Fixed Width Disabled Buttons (8rem)" />
+				<SampleBlock id="fixed-width-disabled-buttons" heading="Fixed Width Disabled Buttons (8rem)" fitContent>
 					<div className="flex flex-wrap gap-4">
 						<KolButton _disabled _label="Primary" _variant="primary" {...ARGS} />
 						<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS} />
@@ -41,7 +40,7 @@ export const ButtonWidth: FC = () => {
 						<KolButton _disabled _label="Danger" _variant="danger" {...ARGS} />
 						<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS} />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

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

@@ -1,6 +1,7 @@
 import { KolButtonLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkAriaDescription: FC = () => (
@@ -9,9 +10,9 @@ export const ButtonLinkAriaDescription: FC = () => (
 			<p>This sample shows KolButtonLink with aria-description</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<SampleBlock id="aria-description" className="flex flex-wrap gap-4">
 			<KolButtonLink _label="Button Text without area description"></KolButtonLink>
 			<KolButtonLink _label="Button Text" _ariaDescription="Button Area Description"></KolButtonLink>
-		</div>
+		</SampleBlock>
 	</>
 );