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

package/src/components/kolibri/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { KolHeading, KolKolibri } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const KolibriBasic: FC = () => (
@@ -11,11 +12,13 @@ export const KolibriBasic: FC = () => (
 			<p>KolKolibri renders the KoliBri logo. The sample show the logo with and without label and with a custom color.</p>
 		</SampleDescription>
 
-		<KolHeading class="block" _level={3} _label="Regular" />
-		<KolKolibri class="block" style={{ width: 300 }} />
-		<KolHeading class="block" _level={3} _label="Without Label" />
-		<KolKolibri class="block" style={{ width: 300 }} _labeled={false} />
-		<KolHeading class="block" _level={3} _label="Customized color" />
-		<KolKolibri class="block" style={{ width: 300 }} _color="#cc006e" />
+		<SampleBlock id="basic">
+			<KolHeading class="block" _level={3} _label="Regular" />
+			<KolKolibri class="block" style={{ width: 300 }} />
+			<KolHeading class="block" _level={3} _label="Without Label" />
+			<KolKolibri class="block" style={{ width: 300 }} _labeled={false} />
+			<KolHeading class="block" _level={3} _label="Customized color" />
+			<KolKolibri class="block" style={{ width: 300 }} _color="#cc006e" />
+		</SampleBlock>
 	</>
 );

package/src/components/link/basic.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolLink } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
@@ -13,7 +14,7 @@ export const LinkBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="basic">
 			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
 			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
 			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _inline={false} _label="Icon Link" />
@@ -32,6 +33,6 @@ export const LinkBasic: FC = () => (
 				the entire width of the parent element, causing a line break.
 			</p>
 			<KolLink _href="#/back-page" _inline={false} _label="Special Variant Link" _variant="theme-link" />
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/link/icons.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkIcons: FC = () => (
@@ -11,7 +12,7 @@ export const LinkIcons: FC = () => (
 			<p>This sample shows KolLink with icons in different alignments and combinations.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="icons">
 			<KolLink _icons="kolicon-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
@@ -81,6 +82,6 @@ export const LinkIcons: FC = () => (
 					left: 'kolicon-house',
 				}}
 			/>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/link/image.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolImage, KolLink } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkImage: FC = () => (
@@ -10,7 +11,7 @@ export const LinkImage: FC = () => (
 			<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="image">
 			<KolLink _href="#/back-page" _label="I am a link that is rendered as text" />
 			<KolLink _href="#/back-page" _label="">
 				<KolImage
@@ -20,6 +21,6 @@ export const LinkImage: FC = () => (
 					slot="expert"
 				/>
 			</KolLink>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/link/target.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkTarget: FC = () => (
@@ -13,7 +14,7 @@ export const LinkTarget: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="text-base d-flex gap-4">
+		<SampleBlock id="target" className="text-base d-flex gap-4">
 			<ul>
 				<li>
 					<KolLink _href="#/back-page" _label="Link without target" />
@@ -34,6 +35,6 @@ export const LinkTarget: FC = () => (
 					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/link/variant.tsx

@@ -3,14 +3,15 @@ import { useSearchParams } from 'react-router';
 
 import { KolLink } from '@public-ui/react-v19';
 import { fetchVariantData } from '../../shares/fetchVariantData';
-import { getCustomThemes } from '../../shares/store';
+import { getTheme } from '../../shares/store';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const LinkVariant: FC = () => {
 	const [searchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const theme = searchParams.get('theme') ?? getTheme();
 	const data = useMemo(() => (theme ? fetchVariantData(theme, 'linkVariants') : []), [theme]);
 
 	return (
@@ -19,7 +20,7 @@ export const LinkVariant: FC = () => {
 				<p>This sample shows the theme specific variants of KolLink.</p>
 			</SampleDescription>
 
-			<div className="grid gap-4">
+			<SampleBlock id="variants">
 				<KolLink _href="#/back-page" _label="Normal link without a variant" />
 				{!Array.isArray(data) || data.length === 0 ? (
 					<p>This theme has no variants for this component.</p>
@@ -28,7 +29,7 @@ export const LinkVariant: FC = () => {
 						return <KolLink _href="#/back-page" _label={`Theme exclusive variant: ${element}`} _variant={element} key={element} />;
 					})
 				)}
-			</div>
+			</SampleBlock>
 		</>
 	);
 };

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

@@ -11,7 +11,13 @@ export const LinkButtonAriaDescription: FC = () => (
 
 		<div className="flex flex-wrap gap-2">
 			<KolLinkButton _href="#/back-page" _label="Link Button Text without area description"></KolLinkButton>
-			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Area Description"></KolLinkButton>
+			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Aria Description"></KolLinkButton>
+			<KolLinkButton
+				_href="#/back-page"
+				_label="Link Button Text"
+				_ariaDescription="Link Button Aria Description with external Link"
+				_target="_blank"
+			></KolLinkButton>
 		</div>
 	</>
 );

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

@@ -6,12 +6,13 @@ import type { FC } 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 LinkButtonBasic: 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();
@@ -26,7 +27,7 @@ export const LinkButtonBasic: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
+				<SampleBlock id="variants">
 					<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>
@@ -57,7 +58,7 @@ export const LinkButtonBasic: FC = () => {
 							})
 						)}
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/link-button/routes.ts

@@ -1,10 +1,12 @@
 import type { Routes } from '../../shares/types';
 import { LinkButtonAriaDescription } from './aria-description';
 import { LinkButtonBasic } from './basic';
+import { LinkButtonTarget } from './target';
 
 export const LINK_BUTTON_ROUTES: Routes = {
 	'link-button': {
 		basic: LinkButtonBasic,
 		'aria-description': LinkButtonAriaDescription,
+		target: LinkButtonTarget,
 	},
 };

package/src/components/link-button/target.tsx

@@ -0,0 +1,19 @@
+import { KolLinkButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleBlock } from '../SampleBlock';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkButtonTarget: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolLinkButton with diffrent Targets</p>
+		</SampleDescription>
+
+		<SampleBlock id="target" className="flex flex-wrap gap-2">
+			<KolLinkButton _href="#/back-page" _label="Link Button Target default"></KolLinkButton>
+			<KolLinkButton _href="#/back-page" _label="Link Button Target _self" _target="_blank"></KolLinkButton>
+			<KolLinkButton _href="#/back-page" _label="Link Button Target _blank" _target="_blank"></KolLinkButton>
+		</SampleBlock>
+	</>
+);

package/src/components/meter/basic.tsx

@@ -1,6 +1,7 @@
-import { KolHeading, KolMeter } from '@public-ui/react-v19';
+import { KolMeter } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const MeterBasic: FC = () => (
@@ -10,14 +11,13 @@ export const MeterBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-8">
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Basic" />
+			<SampleBlock id="basic" heading="Basic">
 				<div className="flex flex-col gap-4">
 					<KolMeter _label="Storage used" _value={0.5} />
 					<KolMeter _label="Weight" _max={100} _value={75} _unit="kg" />
 					<KolMeter _label="Temperature" _min={-100} _max={100} _value={-50} _unit="°C" />
 				</div>
-			</section>
+			</SampleBlock>
 		</div>
 	</>
 );

package/src/components/meter/dynamic.tsx

@@ -1,6 +1,7 @@
-import { KolButton, KolHeading, KolMeter } from '@public-ui/react-v19';
+import { KolButton, KolMeter } 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 MeterDynamic: FC = () => {
@@ -13,8 +14,7 @@ export const MeterDynamic: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-8">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Dynamic value" />
+				<SampleBlock id="dynamic-value" heading="Dynamic value">
 					<KolMeter _label="Used hard disk space" _max={500} _min={0} _unit="GB" _value={usedStorage} />
 					<div className="flex gap-4">
 						<KolButton _label="120 GB" _on={{ onClick: () => setUsedStorage(120) }} _variant="secondary" />
@@ -22,7 +22,7 @@ export const MeterDynamic: FC = () => {
 						<KolButton _label="360 GB" _on={{ onClick: () => setUsedStorage(360) }} _variant="secondary" />
 						<KolButton _label="480 GB" _on={{ onClick: () => setUsedStorage(480) }} _variant="secondary" />
 					</div>
-				</section>
+				</SampleBlock>
 			</div>
 		</>
 	);

package/src/components/meter/optimum.tsx

@@ -1,6 +1,7 @@
-import { KolHeading, KolMeter } from '@public-ui/react-v19';
+import { KolMeter } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const MeterOptimum: FC = () => (
@@ -13,32 +14,29 @@ export const MeterOptimum: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-8">
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Optimum in medium zone (good = medium)" />
+			<SampleBlock id="optimum-medium-zone-good" heading="Optimum in medium zone (good = medium)">
 				<div className="flex flex-col gap-4">
 					<KolMeter _label="Temperature is nice" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={20} _unit="°C" />
 					<KolMeter _label="It's too cold" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={-10} _unit="°C" />
 					<KolMeter _label="It's too hot" _min={-20} _max={60} _low={10} _high={30} _optimum={20} _value={50} _unit="°C" />
 				</div>
-			</section>
+			</SampleBlock>
 
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Optimum in low zone (good = low)" />
+			<SampleBlock id="optimum-low-zone-good-low" heading="Optimum in low zone (good = low)">
 				<div className="flex flex-col gap-4">
 					<KolMeter _label="Memory Usage" _max={100} _value={10} _low={25} _high={75} _optimum={10} />
 					<KolMeter _label="Memory Usage" _max={100} _value={50} _low={25} _high={75} _optimum={10} />
 					<KolMeter _label="Memory Usage" _max={100} _value={90} _low={25} _high={75} _optimum={10} />
 				</div>
-			</section>
+			</SampleBlock>
 
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Optimum in high zone (good = high)" />
+			<SampleBlock id="optimum-high-zone-good-high" heading="Optimum in high zone (good = high)">
 				<div className="flex flex-col gap-4">
 					<KolMeter _label="Battery level" _max={100} _value={10} _low={25} _high={75} _optimum={90} />
 					<KolMeter _label="Battery level" _max={100} _value={50} _low={25} _high={75} _optimum={90} />
 					<KolMeter _label="Battery level" _max={100} _value={90} _low={25} _high={75} _optimum={90} />
 				</div>
-			</section>
+			</SampleBlock>
 		</div>
 	</>
 );

package/src/components/meter/orientation.tsx

@@ -1,6 +1,7 @@
-import { KolHeading, KolMeter } from '@public-ui/react-v19';
+import { KolMeter } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const MeterOrientation: FC = () => (
@@ -13,23 +14,21 @@ export const MeterOrientation: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-8">
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Vertical" />
+			<SampleBlock id="vertical" heading="Vertical">
 				<div className="flex flex-row gap-8 items-end">
 					<KolMeter style={{ '--kol-meter-vertical-height': '100' }} _label="Tank 100l" _max={100} _value={50} _orientation="vertical" _unit="l" />
 					<KolMeter style={{ '--kol-meter-vertical-height': '150' }} _label="Tank 150l" _max={150} _value={50} _orientation="vertical" _unit="l" />
 					<KolMeter style={{ '--kol-meter-vertical-height': '200' }} _label="Tank 200l" _max={200} _value={150} _orientation="vertical" _unit="l" />
 				</div>
-			</section>
+			</SampleBlock>
 
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Vertical with ranges and optimum" />
+			<SampleBlock id="vertical-ranges-optimum" heading="Vertical with ranges and optimum">
 				<div className="flex flex-row gap-8">
 					<KolMeter _label="Low" _max={100} _value={10} _low={25} _high={75} _optimum={50} _orientation="vertical" />
 					<KolMeter _label="OK" _max={100} _value={50} _low={25} _high={75} _optimum={50} _orientation="vertical" />
 					<KolMeter _label="High" _max={100} _value={90} _low={25} _high={75} _optimum={50} _orientation="vertical" />
 				</div>
-			</section>
+			</SampleBlock>
 		</div>
 	</>
 );

package/src/components/nav/aria-current.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { KolNav } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -14,20 +15,22 @@ export const NavAriaCurrent: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolNav
-			class="block w-sm"
-			_label="Main navigation"
-			_links={[
-				{
-					_label: 'Homepage',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'Nav - aria-current (Current page)',
-					_href: '#/nav/aria-current', // Please don't change this link. It's necessary to be the "current page" for the sample.
-					_active: true,
-				},
-			]}
-		/>
+		<SampleBlock id="aria-current">
+			<KolNav
+				class="block w-sm"
+				_label="Main navigation"
+				_links={[
+					{
+						_label: 'Homepage',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'Nav - aria-current (Current page)',
+						_href: '#/nav/aria-current', // Please don't change this link. It's necessary to be the "current page" for the sample.
+						_active: true,
+					},
+				]}
+			/>
+		</SampleBlock>
 	</>
 );

package/src/components/nav/basic.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';
+import { KolInputCheckbox, KolNav } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { LINKS, LINKS_SUB_ACTIVE, LINKS_WITHOUT_SUBMENU } from './links';
 
@@ -29,8 +30,7 @@ export const NavBasic: FC = () => {
 						}}
 					></KolInputCheckbox>
 				</section>
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Navigation without submenu" />
+				<SampleBlock id="navigation-submenu" heading="Navigation without submenu" fitContent>
 					<KolNav
 						class="block w-fit"
 						_label="Navigation without submenu"
@@ -38,13 +38,11 @@ export const NavBasic: FC = () => {
 						_hasCompactButton
 						_hasIconsWhenExpanded={hasIconsWhenExpanded}
 					/>
-				</section>
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Navigation with submenu" />
+				</SampleBlock>
+				<SampleBlock id="navigation-submenu-2" heading="Navigation with submenu" fitContent>
 					<KolNav class="block w-fit" _label="Navigation with submenu" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
-				</section>
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Navigation with submenu active" />
+				</SampleBlock>
+				<SampleBlock id="navigation-submenu-active" heading="Navigation with submenu active" fitContent>
 					<KolNav
 						class="block w-fit"
 						_label="Navigation with submenu active"
@@ -52,7 +50,7 @@ export const NavBasic: FC = () => {
 						_hasCompactButton
 						_hasIconsWhenExpanded={hasIconsWhenExpanded}
 					/>
-				</section>
+				</SampleBlock>
 			</section>
 		</>
 	);

package/src/components/pagination/basic.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolPagination } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const PaginationBasic: FC = () => (
@@ -14,7 +15,7 @@ export const PaginationBasic: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="basic" narrow>
 			<KolPagination
 				_max={316514}
 				_page={15475}
@@ -101,6 +102,6 @@ export const PaginationBasic: FC = () => (
 				_label="No boundary buttons, sibling count 2 (Entries 61 to 90 of 250)"
 				_on={{}}
 			/>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/pagination/button-visibility.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolPagination } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const PaginationButtonVisibility: FC = () => (
@@ -14,7 +15,8 @@ export const PaginationButtonVisibility: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		{/* Snapshotted: the three distinct shapes the button group can take – full, inner buttons only, none at all. */}
+		<SampleBlock id="button-visibility">
 			{/* Default: All buttons visible */}
 			<KolPagination
 				_max={100}
@@ -26,40 +28,43 @@ export const PaginationButtonVisibility: FC = () => (
 				_on={{}}
 			/>
 
-			{/* Only first and last buttons */}
+			{/* Only previous and next buttons */}
 			<KolPagination
 				_max={100}
 				_page={5}
 				_pageSize={10}
 				_siblingCount={2}
 				_boundaryCount={1}
-				_label="Only first and last buttons"
+				_label="Only previous and next buttons"
 				_on={{}}
-				_hasButtons={{ first: true, last: true, next: false, previous: false }}
+				_hasButtons={{ first: false, last: false, next: true, previous: true }}
 			/>
 
-			{/* Only previous and next buttons */}
+			{/* No navigation buttons, only page numbers */}
 			<KolPagination
 				_max={100}
 				_page={5}
 				_pageSize={10}
 				_siblingCount={2}
 				_boundaryCount={1}
-				_label="Only previous and next buttons"
+				_label="No navigation buttons, only page numbers"
 				_on={{}}
-				_hasButtons={{ first: false, last: false, next: true, previous: true }}
+				_hasButtons={false}
 			/>
+		</SampleBlock>
 
-			{/* No navigation buttons, only page numbers */}
+		{/* Not snapshotted: these combinations only differ in which button is missing – prop logic, no additional theme styling. */}
+		<SampleBlock id="button-combinations" skipSnapshot>
+			{/* Only first and last buttons */}
 			<KolPagination
 				_max={100}
 				_page={5}
 				_pageSize={10}
 				_siblingCount={2}
 				_boundaryCount={1}
-				_label="No navigation buttons, only page numbers"
+				_label="Only first and last buttons"
 				_on={{}}
-				_hasButtons={false}
+				_hasButtons={{ first: true, last: true, next: false, previous: false }}
 			/>
 
 			{/* All buttons except first */}
@@ -109,6 +114,6 @@ export const PaginationButtonVisibility: FC = () => (
 				_on={{}}
 				_hasButtons={{ first: true, last: true, next: false, previous: true }}
 			/>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/pagination/sibling-boundary.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolPagination } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const PaginationSiblingBoundary: FC = () => (
@@ -15,7 +16,7 @@ export const PaginationSiblingBoundary: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="sibling-boundary">
 			{/* Default: siblingCount=1, boundaryCount=1 */}
 			<KolPagination _max={20} _page={5} _pageSize={1} _label="Default: siblingCount=1, boundaryCount=1 (shows pages 1, 4, 5, 6, 20)" _on={{}} />
 
@@ -117,6 +118,6 @@ export const PaginationSiblingBoundary: FC = () => (
 				_label="Larger dataset: _max=100, _page=50, siblingCount=3, boundaryCount=2"
 				_on={{}}
 			/>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/popover-button/inline.tsx

@@ -1,6 +1,7 @@
 import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonInline: FC = () => {
@@ -13,10 +14,9 @@ export const PopoverButtonInline: FC = () => {
 					than 44px by 44px.
 				</p>
 			</SampleDescription>
-			<div className="flex flex-col gap-4">
+			<SampleBlock id="inline" className="flex flex-col gap-4">
 				<p>
-					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
-					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium.
 					<KolPopoverButton _inline={true} _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 						<div className="w-sm p-2 border border-solid border-gray">
 							<KolHeading _label="Help Information" _level={0}></KolHeading>
@@ -27,10 +27,9 @@ export const PopoverButtonInline: FC = () => {
 						</div>
 					</KolPopoverButton>
 					<br />
-					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
 					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
 				</p>
-			</div>
+			</SampleBlock>
 		</>
 	);
 };