@public-ui/sample-react 3.0.4-rc.0 → 3.0.4-rc.2

package/src/components/modal/basic.tsx

@@ -1,91 +1,61 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import React, { useEffect, useRef } from 'react';
 
-import { KolButton, KolCard, KolModal } from '@public-ui/react-v19';
+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 defaultVariant = searchParams.get('variant') as string;
-	const modalElement = useRef<HTMLKolModalElement>(null);
-	const stackedModalElement = useRef<HTMLKolModalElement>(null);
-	const [variant, setVariant] = useState<'card' | 'blank'>('blank');
+
+	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();
 		}
-		if (defaultVariant === 'card') {
-			setVariant(defaultVariant);
-		}
-	}, [modalState, defaultVariant]);
+	}, []);
 
 	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') }} _variant={variant}>
-					<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>
-				<div className="grid gap-4">
-					<KolButton
-						_label="Open modal"
-						_on={{
-							onClick: () => {
-								setVariant('blank');
-								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>
 
-					<KolButton
-						_label="Open card modal"
-						_on={{
-							onClick: () => {
-								setVariant('card');
-								modalElement.current?.openModal();
-							},
-						}}
-					/>
+				<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/table/horizontal-scrollbar.tsx

@@ -35,42 +35,36 @@ export const TableHorizontalScrollbar: FC = () => {
 			</SampleDescription>
 
 			<section className="w-full flex flex-col gap-4">
-				<KolHeading _label="Table with scrollbar" _level={2} />
-
-				<KolTableStateful
-					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : '300px'}
-					_headers={HEADERS}
-					_data={DATA}
-					className="block"
-					style={{ width: '400px' }}
-				/>
-				<KolHeading _label="Table with scrollbar and pagination" _level={3} />
-				<KolTableStateful
-					_label="Table for demonstration horizontal scrolling with pagination."
-					_minWidth={hasWidthRestriction ? '600px' : '300px'}
-					_headers={{
-						horizontal: [
-							[
-								{ label: 'Order', key: 'order' },
-								{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+				<div className="w-[400px] flex flex-col gap-4">
+					<KolTableStateful
+						_label="Table for demonstration purposes with horizontal scrollbar."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={HEADERS}
+						_data={DATA}
+						className="block"
+					/>
+					<KolTableStateful
+						_label="Table for demonstration horizontal scrolling with pagination."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={{
+							horizontal: [
+								[
+									{ label: 'Order', key: 'order' },
+									{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+								],
 							],
-						],
-					}}
-					_data={tableData}
-					style={{ width: '400px' }}
-					_pagination
-				/>
-				<KolHeading _label="Empty Table with scrollbar" _level={3} />
-
-				<KolTableStateful
-					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : '300px'}
-					_headers={HEADERS}
-					_data={[]}
-					className="block"
-					style={{ width: '400px' }}
-				/>
+						}}
+						_data={tableData}
+						_pagination
+					/>
+					<KolTableStateful
+						_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={HEADERS}
+						_data={[]}
+						className="block"
+					/>
+				</div>
 
 				<KolInputCheckbox
 					_checked={hasWidthRestriction}

package/src/components/table/non-hidable-columns.tsx

@@ -0,0 +1,34 @@
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [
+	{ id: '1001', name: 'John', age: 30 },
+	{ id: '1002', name: 'Jane', age: 25 },
+];
+
+export const TableNonHidableColumns: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This example demonstrates a column that cannot be hidden in the settings.</p>
+		</SampleDescription>
+
+		<KolTableStateful
+			_label="Table with a non-hidable column"
+			_minWidth="auto"
+			_headers={{
+				horizontal: [
+					[
+						{ key: 'id', label: 'ID', hidable: false },
+						{ key: 'name', label: 'Name' },
+						{ key: 'age', label: 'Age' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+	</>
+);

package/src/components/table/routes.ts

@@ -1,20 +1,21 @@
 import { Routes } from '../../shares/types';
-import { PaginationPosition } from './pagination-position';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
 import { TableHorizontalScrollbar } from './horizontal-scrollbar';
+import { InteractiveChildElements } from './interactive-child-elements';
+import { MultiSortTable } from './multi-sort';
+import { TableNonHidableColumns } from './non-hidable-columns';
+import { PaginationPosition } from './pagination-position';
+import { PredefinedSettings } from './predefined-settings';
 import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
-import { TableStateless } from './stateless';
-import { TableWithFooter } from './with-footer';
 import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatefulWithSingleSelection } from './stateful-with-single-selection';
+import { TableStateless } from './stateless';
 import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
+import { TableWithFooter } from './with-footer';
 import { TableWithPagination } from './with-pagination';
-import { InteractiveChildElements } from './interactive-child-elements';
-import { MultiSortTable } from './multi-sort';
-import { PredefinedSettings } from './predefined-settings';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
@@ -23,6 +24,7 @@ export const TABLE_ROUTES: Routes = {
 		'horizontal-scrollbar': TableHorizontalScrollbar,
 		'interactive-child-elements': InteractiveChildElements,
 		'multi-sort': MultiSortTable,
+		'non-hidable-columns': TableNonHidableColumns,
 		'pagination-position': PaginationPosition,
 		'predefined-settings': PredefinedSettings,
 		'render-cell': TableRenderCell,

package/src/main.ts

@@ -1,5 +1,16 @@
 import 'uno.css'; // https://github.com/antfu/unocss
 // App style
 import './style.scss';
+
+/* Optional theme CSS (e.g. font-face declarations) */
+if (process.env.THEME_CSS) {
+	if (process.env.PLATFORM === 'win32') {
+		/* Add leading slash, required for ESBuild on Windows.
+			 Note: process.env.THEME_CSS must be used literally in the import(). Moving it to a constant breaks the import. */
+		process.env.THEME_CSS = `/${process.env.THEME_CSS}`;
+	}
+	import(/* @vite-ignore */ process.env.THEME_CSS);
+}
+
 // App
 import './react.main';

package/src/react.main.tsx

@@ -55,6 +55,8 @@ void (async () => {
 				} as any);
 			},
 			{
+				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+				reflectInputValues: true,
 				theme: process.env.THEME_MODULE
 					? undefined
 					: {
@@ -81,8 +83,6 @@ void (async () => {
 						])
 					: undefined,
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
-				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
-				reflectInputValues: true,
 			},
 		);
 

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -54,7 +54,13 @@ function TableHorizontalScrollbarAdvanced() {
 
 	return (
 		<>
-			<SampleDescription></SampleDescription>
+			<SampleDescription>
+				<p>
+					This advanced scenario demonstrates a complex layout with KolTable featuring horizontal scrollbar within a tab-based navigation system. The table
+					automatically calculates its minimum width based on column definitions and provides smooth horizontal scrolling when content exceeds the container
+					width. This example showcases real-world usage in a dashboard-like interface with sidebar navigation and tabbed content areas.
+				</p>
+			</SampleDescription>
 			<div className="mainlayout">
 				<aside className="nav-area">
 					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />

package/src/scenarios/routes.ts

@@ -8,6 +8,7 @@ import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 import { StaticForm } from './static-form';
+import { SampleFormWithValidation } from './sample-form-with-validation';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { TooltipPositioning } from './tooltip-positioning';
 
@@ -22,6 +23,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'performance-test': PerformanceTest,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
 		'static-form': StaticForm,
+		'sample-form-with-validation': SampleFormWithValidation,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'tooltip-positioning': TooltipPositioning,
 	},

package/src/scenarios/sample-form-with-validation.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import {
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolSingleSelect,
+	KolCombobox,
+	KolTextarea,
+	KolButton,
+	KolHeading,
+	KolAlert,
+	KolLink,
+} from '@public-ui/react-v19';
+
+import { SampleDescription } from '../components/SampleDescription';
+import { COUNTRY_SUGGESTIONS } from '../shares/country';
+import { useToasterService } from '../hooks/useToasterService';
+
+const formSchema = z.object({
+	date: z.preprocess(
+		(val) => (typeof val === 'string' || val instanceof Date ? new Date(val) : undefined),
+		z.date({ message: 'Date is required' }).refine((d) => !isNaN(d.getTime()), { message: 'Invalid date' }),
+	),
+
+	text: z.string({ message: 'Please enter text.' }).min(10, 'Text must be at least 10 characters long.'),
+	email: z.string({ message: 'Please enter your email.' }).min(1, 'Please enter your email.').email('Invalid email address.'),
+	password: z
+		.string({ message: 'Please enter a password.' })
+		.min(8, 'Password must be at least 8 characters.')
+		.regex(/[A-Z]/, 'Password must include at least one uppercase letter.')
+		.regex(/[0-9]/, 'Password must include at least one number.'),
+	range: z.number({ message: 'Please select a range.' }).min(30, 'Minimum value is 30.'),
+	number: z.number({ message: 'Please enter a number.' }).min(1, 'Minimum is 1.').max(10, 'Maximum is 10.'),
+	checkbox: z.boolean().refine((val: boolean) => val === true, {
+		message: 'You must accept the terms and conditions.',
+	}),
+
+	radio: z.string({ message: 'Please select a gender.' }).min(1, 'Please select a gender.'),
+	color: z.string({ message: 'Please select a color.' }).min(1, 'Please select a color.'),
+	select: z.string({ message: 'Please select a value.' }).min(1, 'Please select a value.'),
+	singleSelect: z.string({ message: 'Please select a single option.' }).min(1, 'Please select a single option.'),
+	combobox: z.string({ message: 'Please select a country.' }).min(1, 'Please select a country.'),
+	textarea: z.string({ message: 'Please enter a message.' }).min(1, 'Please enter a message.'),
+});
+
+export const SampleFormWithValidation: React.FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+	const {
+		handleSubmit,
+		formState: { errors, touchedFields },
+		reset,
+		setValue,
+		trigger,
+		watch,
+	} = useForm({
+		mode: 'onBlur',
+		reValidateMode: 'onChange',
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			range: 30,
+			number: 5,
+		},
+	});
+
+	const err = (key: keyof z.infer<typeof formSchema>) => {
+		const fieldError = errors[key];
+
+		if (!fieldError || typeof fieldError !== 'object' || !('message' in fieldError)) {
+			return undefined;
+		}
+
+		return {
+			_description: fieldError.message as string,
+			_type: 'error' as const,
+		};
+	};
+
+	const isTouched = (key: keyof z.infer<typeof formSchema>) => {
+		return !!touchedFields[key];
+	};
+
+	const bind = <K extends keyof z.infer<typeof formSchema>>(key: K) => ({
+		id: `field-${key as string}`,
+		_name: key,
+		_value: watch(key) as z.infer<typeof formSchema>[K],
+		_touched: isTouched(key),
+		_msg: err(key),
+		_on: {
+			onInput: (_: Event, v: unknown) => setValue(key, v as any, { shouldTouch: true, shouldValidate: true }),
+			onBlur: () => trigger(key),
+		},
+	});
+
+	const onReset = () => {
+		reset(undefined, {
+			keepErrors: false,
+			keepTouched: false,
+			keepDirty: false,
+		});
+	};
+
+	const allErrors = Object.entries(errors)
+		.map(([key, value]) => [key, (value as FieldError).message] as const)
+		.filter(([, msg]) => Boolean(msg));
+
+	return (
+		<section className="w-full max-w-3xl mx-auto p-6">
+			<KolHeading _level={2} _label="Sample Form with Validation (Zod)" />
+			<SampleDescription>
+				<p>
+					This example shows validation with <code>react-hook-form</code>, <code>Zod</code>, and an error list.
+				</p>
+			</SampleDescription>
+
+			{allErrors.length > 0 && (
+				<KolAlert _type="error" _label="Please fix the following:" _alert _variant="card">
+					<ul className="list-disc pl-5">
+						{allErrors.map(([key, msg], i) => (
+							<li key={i}>
+								<KolLink
+									_label={msg}
+									_href={`#field-${key}`}
+									_on={{
+										onClick: (e: Event) => {
+											e.preventDefault();
+											const input = document.getElementById(`field-${key}`);
+											input?.focus();
+										},
+									}}
+								/>
+							</li>
+						))}
+					</ul>
+				</KolAlert>
+			)}
+
+			<form onSubmit={handleSubmit(dummyClickEventHandler)} noValidate className="grid gap-4 mt-6">
+				<KolInputDate _label="Date" {...bind('date')} />
+				<KolInputText _label="Text (≥ 10 chars)" {...bind('text')} />
+				<KolInputEmail _label="Email" {...bind('email')} />
+				<KolInputPassword _label="Password" {...bind('password')} />
+				<KolInputRange _label="Range (≥ 30)" _min={0} _max={100} {...bind('range')} />
+				<KolInputNumber _label="Number (1 – 10)" {...bind('number')} />
+				<KolInputCheckbox _label="Accept terms" {...bind('checkbox')} />
+				<KolInputRadio
+					_label="Gender"
+					_options={[
+						{ label: 'Female', value: 'f' },
+						{ label: 'Male', value: 'm' },
+					]}
+					{...bind('radio')}
+				/>
+				<KolInputColor _label="Favorite Color" {...bind('color')} />
+				<KolSelect
+					_label="Select"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					{...bind('select')}
+				/>
+				<KolSingleSelect
+					_label="Single Select"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					{...bind('singleSelect')}
+				/>
+				<KolCombobox _label="Country" _suggestions={COUNTRY_SUGGESTIONS} {...bind('combobox')} />
+				<KolTextarea _label="Message" _rows={4} {...bind('textarea')} />
+
+				<div className="flex gap-4 mt-4">
+					<KolButton _label="Submit" _type="submit" _variant="primary" />
+					<KolButton _label="Reset" _type="reset" onClick={onReset} />
+				</div>
+			</form>
+		</section>
+	);
+};

package/src/style.scss

@@ -35,7 +35,6 @@ hr {
 	overflow: hidden;
 
 	white-space: nowrap;
-	clip: rect(0 0 0 0);
 	clip-path: inset(50%);
 }
 

package/vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
 	define: {
 		'process.env.THEME_MODULE': JSON.stringify(process.env.THEME_MODULE || ''),
 		'process.env.THEME_EXPORT': JSON.stringify(process.env.THEME_EXPORT || ''),
+		'process.env.THEME_CSS': JSON.stringify(process.env.THEME_CSS || ''),
 		'process.env.ENABLE_I18N_OVERWRITING': JSON.stringify(process.env.ENABLE_I18N_OVERWRITING || ''),
 		'process.env.ENABLE_TAG_NAME_TRANSFORMER': JSON.stringify(process.env.ENABLE_TAG_NAME_TRANSFORMER || ''),
 		'process.env.ENABLE_THEME_PATCHING': JSON.stringify(process.env.ENABLE_THEME_PATCHING || ''),
@@ -31,7 +32,11 @@ export default defineConfig({
 	server: {
 		port: 9191,
 		fs: {
-			allow: [path.resolve(__dirname), ...(process.env.THEME_MODULE ? [path.resolve(process.env.THEME_MODULE)] : [])],
+			allow: [
+				path.resolve(__dirname),
+				...(process.env.THEME_MODULE ? [path.resolve(process.env.THEME_MODULE)] : []),
+				...(process.env.THEME_CSS ? [path.resolve(process.env.THEME_CSS, '..')] : []),
+			],
 		},
 	},
 });

package/dist/assets/Alert-BDx1u40I-BwykKU87.js

@@ -1,4 +0,0 @@
-import{_ as C,K as p}from"./Heading-DjO0rS4X-Cc1-Zfqr.js";import{W as v,h as a,X as f,e as L,Y as k,i as E,Z as S,F as y}from"./index-DoiVX6kR.js";import{c as T}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{t as s}from"./i18n-yBVLeHdv-UtMRXdQ6.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const O=s("kol-error"),B=s("kol-info"),M=s("kol-warning"),I=s("kol-success"),K=s("kol-message"),n=({ariaLabel:e,icon:o})=>a(y,null,a("span",{class:"visually-hidden"},e),a(E,{class:S,_label:"",_icons:o})),N=({type:e,label:o})=>{switch(e){case"error":return a(n,{ariaLabel:O,icon:"codicon codicon-error",label:o});case"info":return a(n,{ariaLabel:B,icon:"codicon codicon-info",label:o});case"warning":return a(n,{ariaLabel:M,icon:"codicon codicon-warning",label:o});case"success":return a(n,{ariaLabel:I,icon:"codicon codicon-pass",label:o});default:return a(n,{ariaLabel:K,icon:"codicon codicon-comment",label:o})}},R=s("kol-close-alert"),w=()=>{if(typeof navigator>"u"||typeof navigator.vibrate!="function")return;const e=navigator.userActivation;if((e!=null&&e.isActive||e!=null&&e.hasBeenActive)&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch{}},j=(e,o)=>{const{class:c={},alert:d=!1,hasCloser:u=!1,label:t,level:_=0,type:r="default",variant:i="msg",onAlertTimeout:l,onCloserClick:b}=e,g=C(e,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);d&&(w(),setTimeout(()=>{l==null||l()},1e4));const m=v("kol-alert",{hasCloser:!!u,[`type-${r}`]:!0,[`variant-${i}`]:!0}),h=v("kol-alert","heading",{[`h${_}`]:!0}),A=Object.assign({class:T(c,m),role:d?r==="error"?"alert":"status":void 0},g);return a("div",Object.assign({},A,{"data-testid":"alert"}),a("div",{class:"kol-alert__container"},a(N,{label:t,type:r}),a("div",{class:"kol-alert__container-content"},t&&a(p,{class:h,level:_,id:"heading"},t),i==="msg"&&a("span",{class:f,"aria-describedby":t?"heading":void 0},o)),u&&a(L,{class:k,"data-testid":"alert-close-button",_ariaDescription:(t==null?void 0:t.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:R,_on:{onClick:b},_tooltipAlign:"left"})),i==="card"&&a("div",{class:f,"aria-describedby":t?"heading":void 0},o))};export{j as K};
-//# sourceMappingURL=Alert-BDx1u40I-BwykKU87.js.map

package/dist/assets/Collapsible-BVHowVxs-CtQfQoUO.js

@@ -1,4 +0,0 @@
-import{_ as m,K as f}from"./Heading-DjO0rS4X-Cc1-Zfqr.js";import{h as s,e as g}from"./index-DoiVX6kR.js";import{c as a}from"./clsx-eK3rPvPS-BT_IL7Fz.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const H=(d,r)=>{const{id:n,class:t,label:p,level:v=1,disabled:c,open:e,onClick:_,HeadingProps:i={},HeadingButtonProps:l={},ContentProps:o={}}=d,b=m(d,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),u=e?"remove":"add";return s("div",Object.assign({id:n,class:a("collapsible",{"collapsible--disabled":c===!0,"collapsible--open":e===!0},t)},b),s(f,{ref:i==null?void 0:i.ref,level:v,class:a("collapsible__heading",i==null?void 0:i.class)},s(g,{class:a("collapsible__heading-button",l==null?void 0:l.class),ref:l==null?void 0:l.ref,slot:"expert",_ariaControls:`${n}-control`,_ariaExpanded:e,_disabled:c,_icons:(l==null?void 0:l._icons)||`codicon codicon-${u}`,_label:p,_on:{onClick:_}})),s("div",{class:a("collapsible__wrapper",o==null?void 0:o.wrapperClass)},s("div",{class:a("collapsible__wrapper-animation",o==null?void 0:o.animationClass)},s("div",{"aria-hidden":e===!1?"true":void 0,class:a("collapsible__content",o==null?void 0:o.class),id:`${n}-control`},r))))};export{H as K};
-//# sourceMappingURL=Collapsible-BVHowVxs-CtQfQoUO.js.map

package/dist/assets/CustomSuggestionsToggle-B3tvLP2v-BNAu7Bht.js

@@ -1,4 +0,0 @@
-import{h as t,i as b}from"./index-DoiVX6kR.js";import{c as f}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{t as w}from"./i18n-yBVLeHdv-UtMRXdQ6.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const F=({index:o,ref:s,selected:e,onClick:i,onMouseOver:c,onFocus:g,onKeyDown:a,option:p,searchTerm:d})=>{const m=(l,n)=>{if(!(n!=null&&n.trim()))return l;const u=new RegExp(`(${n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return l.split(u).map((r,k)=>u.test(r)?t("mark",{key:k},r):r)};return t("li",{id:`option-${o}`,key:`-${o}`,ref:s,"data-index":o,tabIndex:-1,role:"option","aria-selected":e?"true":void 0,onClick:i,onMouseOver:c,onFocus:g,class:"kol-custom-suggestions-option",onKeyDown:a},m(String(p),d||""))},h=({blockSuggestionMouseOver:o,onKeyDown:s,style:e},i)=>t("ul",{role:"listbox",style:e,class:f("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":o}),onKeyDown:s},i),C=w("kol-dropdown"),v=({onClick:o,disabled:s})=>t("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:o,disabled:s},t(b,{_icons:"codicon codicon-triangle-down",_label:C}));export{v as C,h as a,F as b};
-//# sourceMappingURL=CustomSuggestionsToggle-B3tvLP2v-BNAu7Bht.js.map

package/dist/assets/FieldControlStateWrapper-BpSEIOuI-BpL1BJzc.js

@@ -1,4 +0,0 @@
-import{_ as b}from"./Heading-DjO0rS4X-Cc1-Zfqr.js";import{h as e,x as H,F as S,y as q}from"./index-DoiVX6kR.js";import{c}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{c as I,a as w,b as M,K as E,d as $}from"./FormFieldStateWrapper-BaUJkKkj-BZu6RzU2.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const W=(o,l)=>{var{class:n}=o,i=b(o,["class"]);return e("div",Object.assign({class:c("kol-field-control__input",n)},i),l)},z=(o,l)=>{const{class:n,id:i,disabled:_,label:t,hideLabel:s,labelAlign:d,renderNoTooltip:m,hint:y,renderNoHint:C,tooltipAlign:F,accessKey:h,shortKey:p,msg:r,touched:f,required:K,readonly:k,fieldControlInputProps:v,fieldControlLabelProps:a,fieldControlTooltipProps:T,fieldControlHintProps:O}=o,x=b(o,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),B=!C,L=!m,P=w(r,f),g=q(t),N=L&&!g&&s,j=H(h,p),u=[e(S,null,e(W,Object.assign({},v),l),N&&e(M,Object.assign({},T||{},{id:i,label:t,hideLabel:s,align:F,badgeText:j}))),e(E,Object.assign({},a||{},{id:i,baseClassName:"kol-field-control",class:c(a==null?void 0:a.class,{"kol-field-control__label--visually-hidden":!!s}),hasExpertSlot:g,label:t,accessKey:h,shortKey:p}))];d==="left"&&u.reverse();const A={"kol-field-control--disabled":!!_,"kol-field-control--required":!!K,"kol-field-control--touched":!!f,"kol-field-control--hide-label":!!s,"kol-field-control--read-only":!!k,[`kol-field-control--${(r==null?void 0:r.type)||"error"}`]:!!P,[`kol-field-control--label-align-${d}`]:!!d};return e("div",Object.assign({class:c("kol-field-control",A,n)},x),u,B&&e($,Object.assign({},O||{},{baseClassName:"kol-field-control",id:i,hint:y})))};function D(o){const l={id:o._id,disabled:o._disabled,msg:I(o._msg),hint:o._hint,label:o._label,hideLabel:o._hideLabel,touched:o._touched};return"_required"in o&&(l.required=o._required),"_readOnly"in o&&(l.readonly=o._readOnly),"_labelAlign"in o&&(l.labelAlign=o._labelAlign),"_accessKey"in o&&(l.accessKey=o._accessKey),"_shortKey"in o&&(l.shortKey=o._shortKey),l}const U=(o,l)=>{var{state:n}=o,i=b(o,["state"]);return e(z,Object.assign({},D(n),i),l)};export{U as F};
-//# sourceMappingURL=FieldControlStateWrapper-BpSEIOuI-BpL1BJzc.js.map

package/dist/assets/FieldControlStateWrapper-BpSEIOuI-BpL1BJzc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldControlStateWrapper-BpSEIOuI-BpL1BJzc.js","sources":["../../../../components/dist/esm/FieldControlStateWrapper-BpSEIOuI.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { _ as __rest } from './Heading-DjO0rS4X.js';\nimport { h, F as Fragment } from './index-CuRbHMox.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { k as buildBadgeTextString, l as showExpertSlot } from './common-7RW_NFNf.js';\nimport { b as FormFieldTooltipFc, K as KolFormFieldLabelFc, d as KolFormFieldHintFc, c as checkHasMsg, a as convertMsgToInternMsg } from './FormFieldStateWrapper-BaUJkKkj.js';\n\nconst InputContainer = (_a, children) => {\n    var { class: classNames } = _a, other = __rest(_a, [\"class\"]);\n    return (h(\"div\", Object.assign({ class: clsx('kol-field-control__input', classNames) }, other), children));\n};\nconst KolFieldControlFc = (props, children) => {\n    const { class: classNames, id, disabled, label, hideLabel, labelAlign, renderNoTooltip, hint, renderNoHint, tooltipAlign, accessKey, shortKey, msg, touched, required, readonly, fieldControlInputProps, fieldControlLabelProps, fieldControlTooltipProps, fieldControlHintProps } = props, other = __rest(props, [\"class\", \"id\", \"disabled\", \"label\", \"hideLabel\", \"labelAlign\", \"renderNoTooltip\", \"hint\", \"renderNoHint\", \"tooltipAlign\", \"accessKey\", \"shortKey\", \"msg\", \"touched\", \"required\", \"readonly\", \"fieldControlInputProps\", \"fieldControlLabelProps\", \"fieldControlTooltipProps\", \"fieldControlHintProps\"]);\n    const canShowHint = !renderNoHint;\n    const canShowTooltip = !renderNoTooltip;\n    const showMsg = checkHasMsg(msg, touched);\n    const hasExpertSlot = showExpertSlot(label);\n    const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;\n    const badgeText = buildBadgeTextString(accessKey, shortKey);\n    const components = [\n        h(Fragment, null,\n            h(InputContainer, Object.assign({}, fieldControlInputProps), children),\n            useTooltipInsteadOfLabel && (h(FormFieldTooltipFc, Object.assign({}, (fieldControlTooltipProps || {}), { id: id, label: label, hideLabel: hideLabel, align: tooltipAlign, badgeText: badgeText })))),\n        h(KolFormFieldLabelFc, Object.assign({}, (fieldControlLabelProps || {}), { id: id, baseClassName: \"kol-field-control\", class: clsx(fieldControlLabelProps === null || fieldControlLabelProps === void 0 ? void 0 : fieldControlLabelProps.class, {\n                ['kol-field-control__label--visually-hidden']: Boolean(hideLabel),\n            }), hasExpertSlot: hasExpertSlot, label: label, accessKey: accessKey, shortKey: shortKey })),\n    ];\n    if (labelAlign === 'left') {\n        components.reverse();\n    }\n    const stateCssClasses = {\n        ['kol-field-control--disabled']: Boolean(disabled),\n        ['kol-field-control--required']: Boolean(required),\n        ['kol-field-control--touched']: Boolean(touched),\n        ['kol-field-control--hide-label']: Boolean(hideLabel),\n        ['kol-field-control--read-only']: Boolean(readonly),\n        [`kol-field-control--${(msg === null || msg === void 0 ? void 0 : msg.type) || 'error'}`]: Boolean(showMsg),\n        [`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),\n    };\n    return (h(\"div\", Object.assign({ class: clsx('kol-field-control', stateCssClasses, classNames) }, other),\n        components,\n        canShowHint && h(KolFormFieldHintFc, Object.assign({}, (fieldControlHintProps || {}), { baseClassName: \"kol-field-control\", id: id, hint: hint }))));\n};\n\nfunction getFieldControlProps(state) {\n    const props = {\n        id: state._id,\n        disabled: state._disabled,\n        msg: convertMsgToInternMsg(state._msg),\n        hint: state._hint,\n        label: state._label,\n        hideLabel: state._hideLabel,\n        touched: state._touched,\n    };\n    if ('_required' in state) {\n        props.required = state._required;\n    }\n    if ('_readOnly' in state) {\n        props.readonly = state._readOnly;\n    }\n    if ('_labelAlign' in state) {\n        props.labelAlign = state._labelAlign;\n    }\n    if ('_accessKey' in state) {\n        props.accessKey = state._accessKey;\n    }\n    if ('_shortKey' in state) {\n        props.shortKey = state._shortKey;\n    }\n    return props;\n}\nconst FieldControlStateWrapper = (_a, children) => {\n    var { state } = _a, other = __rest(_a, [\"state\"]);\n    return (h(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));\n};\n\nexport { FieldControlStateWrapper as F };\n//# sourceMappingURL=FieldControlStateWrapper-BpSEIOuI.js.map\n\n//# sourceMappingURL=FieldControlStateWrapper-BpSEIOuI.js.map"],"names":["InputContainer","_a","children","classNames","other","__rest","h","clsx","KolFieldControlFc","props","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps","canShowHint","canShowTooltip","showMsg","checkHasMsg","hasExpertSlot","showExpertSlot","useTooltipInsteadOfLabel","badgeText","buildBadgeTextString","components","Fragment","FormFieldTooltipFc","KolFormFieldLabelFc","stateCssClasses","KolFormFieldHintFc","getFieldControlProps","state","convertMsgToInternMsg","FieldControlStateWrapper"],"mappings":"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"}