@public-ui/sample-react 4.0.0-alpha.0 → 5.0.0-alpha.0

package/src/components/link/target.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

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

@@ -1,4 +1,4 @@
-import { KolLinkButton } from '@public-ui/react';
+import { KolLinkButton } from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -9,7 +9,7 @@ export const LinkButtonAriaDescription: FC = () => (
 			<p>This sample shows KolLinkButton with aria-description</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<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>
 		</div>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolLinkButton } from '@public-ui/react';
+import { KolLinkButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -15,16 +15,14 @@ export const LinkButtonBasic: FC = () => (
 			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
 		</SampleDescription>
 
-		<div className="grid gap-14">
-			<div className="flex flex-wrap gap-14">
-				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
-			</div>
+		<div className="flex flex-wrap gap-2">
+			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
 		</div>
 	</>
 );

package/src/components/modal/basic.tsx

@@ -1,76 +1,62 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
 
-import { KolButton, KolCard, KolModal } from '@public-ui/react';
+import { KolButton, KolModal } from '@public-ui/react-v19';
+import { useSearchParams } from 'react-router';
 import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
 	const [searchParams] = useSearchParams();
-	const modalState = searchParams.get('show-modal') as string;
-	const modalElement = useRef<HTMLKolModalElement>(null);
-	const stackedModalElement = useRef<HTMLKolModalElement>(null);
+
+	const showModal = searchParams.get('show-modal') as string;
+
+	const blankRef = useRef<HTMLKolModalElement>(null);
+	const cardRef = useRef<HTMLKolModalElement>(null);
+
+	const onOpenBlankModal = {
+		onClick: () => blankRef.current?.openModal(),
+	};
+	const onOpenCardModal = {
+		onClick: () => cardRef.current?.openModal(),
+	};
+	const onCloseBlankModal = {
+		onClick: () => blankRef.current?.closeModal(),
+	};
 
 	useEffect(() => {
-		if (modalState === 'true') {
-			modalElement.current?.openModal();
+		if (showModal === 'true') {
+			blankRef.current?.openModal();
+			cardRef.current?.openModal();
 		}
-	}, [modalState]);
+	}, []);
 
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					KolModal renders content in a popover, disabling interactivity with elements behind it. In the sample, the modal can be opened and closed using the
-					buttons &quot;Open modal&quot; and &quot;Close modal&quot;.
+					KolModal supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer
+					button.
 				</p>
 			</SampleDescription>
 
-			<div className="flex">
-				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-					<KolCard _label="I am a modal.">
-						<KolButton
-							_label="Open stacked modal"
-							className="mr"
-							_on={{
-								onClick: () => {
-									stackedModalElement.current?.openModal();
-								},
-							}}
-						/>
-
-						<KolButton
-							_label="Close modal"
-							_on={{
-								onClick: () => {
-									modalElement.current?.closeModal();
-								},
-							}}
-						/>
-					</KolCard>
-				</KolModal>
-
-				<KolModal _label="Stacked modal" _width="80%" ref={stackedModalElement}>
-					<KolCard _label="Stacked modal element">
-						<KolButton
-							_label="Close stacked modal"
-							_on={{
-								onClick: () => {
-									stackedModalElement.current?.closeModal();
-								},
-							}}
-						/>
-					</KolCard>
-				</KolModal>
-
-				<KolButton
-					_label="Open modal"
-					_on={{
-						onClick: () => {
-							modalElement.current?.openModal();
-						},
-					}}
-				/>
+			<div className="grid gap-8">
+				<div>
+					<KolButton _label="Open blank modal" _on={onOpenBlankModal} />
+					<KolModal ref={blankRef} _label="Blank modal" _variant="blank" _width="40%">
+						<div className="bg-white p-4 rounded shadow">
+							<p className="mt-0">You must add styling and a close button yourself.</p>
+							<KolButton _label="Open card modal" className="mr" _on={onOpenCardModal} />
+							<KolButton _label="Close" _on={onCloseBlankModal} />
+						</div>
+					</KolModal>
+				</div>
+
+				<div>
+					<KolButton _label="Open card modal" _on={onOpenCardModal} />
+					<KolModal ref={cardRef} _label="Card modal" _variant="card" _width="30%">
+						<p className="mt-0">This variant wraps content inside a KolCard.</p>
+					</KolModal>
+				</div>
 			</div>
 		</>
 	);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolNav } from '@public-ui/react';
+import { KolNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/nav/basic.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';
+import { LINKS, LINKS_WITHOUT_SUBMENU, LINKS_SUB_ACTIVE } from './links';
 
 import type { FC } from 'react';
 export const NavBasic: FC = () => {
@@ -31,11 +31,27 @@ export const NavBasic: FC = () => {
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation without submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav
+						class="block w-fit"
+						_label="Navigation without submenu"
+						_links={LINKS_WITHOUT_SUBMENU}
+						_hasCompactButton
+						_hasIconsWhenExpanded={hasIconsWhenExpanded}
+					/>
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation with submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<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" />
+					<KolNav
+						class="block w-fit"
+						_label="Navigation with submenu active"
+						_links={LINKS_SUB_ACTIVE}
+						_hasCompactButton
+						_hasIconsWhenExpanded={hasIconsWhenExpanded}
+					/>
 				</section>
 			</section>
 		</>

package/src/components/nav/links.ts

@@ -128,3 +128,64 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 		_icons: 'codicon codicon-squirrel',
 	},
 ];
+
+export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#/back-page',
+		_icons: 'codicon codicon-home',
+		_children: [
+			{
+				_label: '3.1 Navigation point',
+				_icons: 'codicon codicon-home',
+				_href: '#/back-page',
+			},
+			{
+				_label: '3.2 Navigation point',
+				_target: 'asdasd',
+			},
+			{
+				_label: '3.3 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.3.1 Navigation point',
+						_href: '#/back-page',
+						_active: true,
+					},
+					{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{
+				_label: '3.4 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.4.1 Navigation point',
+						_href: '#/back-page',
+						_children: [
+							{ _label: '3.4.1.1 Navigation point', _href: '#/back-page' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#/back-page' },
+						],
+					},
+					{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{ _label: '3.5 Navigation point', _href: '#/back-page' },
+		],
+	},
+];

package/src/components/nav/routes.ts

@@ -1,12 +1,10 @@
 import { Routes } from '../../shares/types';
 import { NavAriaCurrent } from './aria-current';
 import { NavBasic } from './basic';
-import { NavHorizontal } from './horizontal';
 
 export const NAV_ROUTES: Routes = {
 	nav: {
 		basic: NavBasic,
 		'aria-current': NavAriaCurrent,
-		horizontal: NavHorizontal,
 	},
 };

package/src/components/pagination/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolPagination } from '@public-ui/react';
+import { KolPagination } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -25,7 +25,7 @@ export const PaginationBasic: FC = () => (
 				_siblingCount={0}
 				_boundaryCount={2}
 				_hasButtons={false}
-				_label="Test pagination 4"
+				_label="Test pagination 5"
 				_on={{}}
 				_pageSizeOptions={[10, 100]}
 			/>

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

@@ -0,0 +1,62 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolPopoverButton, KolToolbar, KolHeading } from '@public-ui/react-v19';
+import { useToasterService } from '../../hooks/useToasterService';
+
+export const PopoverButtonBasic: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Edit',
+			_icons: 'codicon codicon-edit',
+			_on: dummyEventHandler,
+		},
+		{
+			_label: 'Delete',
+			_icons: 'codicon codicon-trash',
+			_on: dummyEventHandler,
+		},
+		{
+			_label: 'Duplicate',
+			_icons: 'codicon codicon-copy',
+			_on: dummyEventHandler,
+		},
+	];
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					The PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,
+					right, bottom, left) using the <code>_popoverAlign</code> prop.
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Vertical toolbar with action buttons" _level={2}></KolHeading>
+
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+				</KolPopoverButton>
+
+				<KolHeading _label="Info icon with help text" _level={2}></KolHeading>
+
+				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<div className="w-sm p-2 border border-solid border-gray">
+						<KolHeading _label="Help Information" _level={3}></KolHeading>
+						<p>
+							<u>Lorem ipsum dolor sit amet</u>, 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>
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { PopoverButtonBasic } from './basic';
+
+export const POPOVER_BUTTON_ROUTES: Routes = {
+	'popover-button': {
+		basic: PopoverButtonBasic,
+	},
+};

package/src/components/progress/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolProgress } from '@public-ui/react';
+import { KolProgress } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -11,11 +11,18 @@ export const ProgressBasic: FC = () => (
 			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
-			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
+			<fieldset title="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">
+				<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>
 		</div>
 	</>
 );

package/src/components/quote/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolQuote } from '@public-ui/react';
+import { KolQuote } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBasic: FC = () => (

package/src/components/quote/block.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolQuote } from '@public-ui/react';
+import { KolQuote } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBlock: FC = () => (

package/src/components/select/basic.tsx

@@ -11,6 +11,6 @@ export const SelectBasic: FC = () => (
 			<p>KolSelect renders a select field. The sample shows KolSelect in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={SelectVariants} />
+		<FormWrap RefComponent={SelectVariants} showButtons={false} />
 	</>
 );

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

@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react';
 
-import { KolSelect } from '@public-ui/react';
+import { KolSelect } from '@public-ui/react-v19';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components, SelectOption } from '@public-ui/components';
+import type { Components, Optgroup, SelectOption, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
-		label: 'No choice',
+		label: 'No salutation',
 		value: '',
-		disabled: true,
 	},
 	{
 		label: 'Mrs.',
@@ -27,6 +26,23 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+const SALUTATION_OPTIONS_DISABLED = SALUTATION_OPTIONS.map((option, index) =>
+	index === 0 ? { label: 'Select salutation', value: '', disabled: true } : option,
+);
+
+type GroupedOptionsType = Record<string, Optgroup<StencilUnknown>>;
+
+const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option) => {
+	const firstLetter = (option.label as string).charAt(0).toUpperCase();
+	if (!acc[firstLetter]) {
+		acc[firstLetter] = { label: firstLetter, options: [] };
+	}
+	acc[firstLetter].options.push({ label: option.label, value: option.label });
+	return acc;
+}, {} as GroupedOptionsType);
+
+const groupedOptionsArray = Object.values(groupedOptions);
+
 export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -46,7 +62,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
+			<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}
@@ -55,10 +71,13 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_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']} />
 		</div>
 	);
 });

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { SelectCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SelectCases {...props} />
@@ -14,6 +15,6 @@ export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSel
 				<legend>Text (hideLabel)</legend>
 				<SelectCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/single-select/basic.tsx

@@ -1,23 +1,17 @@
 import React from 'react';
 import type { FC } from 'react';
 import { FormWrap } from '../FormWrap';
-import { HideMenusContext } from '../../shares/HideMenusContext';
 import { SampleDescription } from '../SampleDescription';
 import { SingleSelectVariants } from './partials/variants';
-import { useContext } from 'react';
-import { KolBadge } from '@public-ui/react';
 
 export const SingleSelectBasic: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
-
 	return (
 		<>
 			<SampleDescription>
 				<p>SingleSelect provides a select field for a single value, supported by a search field.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<FormWrap RefComponent={SingleSelectVariants} />
+			<FormWrap RefComponent={SingleSelectVariants} showButtons={false} />
 		</>
 	);
 };

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

@@ -1,13 +1,15 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
-import { KolSingleSelect } from '@public-ui/react';
+import { KolSingleSelect } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components, Option, StencilUnknown } from '@public-ui/components';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
+import type { Components } from '@public-ui/components';
+import { LONG_OPTIONS } from '../../../shares/longOptions';
 
-export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectCases(props) {
+export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid gap-4">
 			<KolSingleSelect
@@ -29,6 +31,7 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 				{...props}
 				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_rows={3}
 				_touched
 				_label="Label"
 				_placeholder="Placeholder"
@@ -36,6 +39,8 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			/>
 			<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'} _hideClearButton />
 		</div>
 	);
-});
+};

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

@@ -1,19 +1,20 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { SingleSelectCases } from './cases';
-
 import type { Components } from '@public-ui/components';
-export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectVariant(props, ref) {
+import { SampleColumns } from '../../SampleColumns';
+
+export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SingleSelectCases {...props} />
 			</fieldset>
 			<fieldset>
 				<legend>Text (hideLabel)</legend>
-				<SingleSelectCases ref={ref} {...props} _hideLabel />
+				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
-});
+};

package/src/components/skip-nav/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolSkipNav } from '@public-ui/react';
+import { KolSkipNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';