@public-ui/sample-react 4.0.0-alpha.10 → 4.0.0-alpha.11

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

@@ -17,19 +17,19 @@ export const PopoverButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Edit',
-			_icons: 'codicon codicon-edit',
+			_icons: 'fa-solid fa-pen',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'codicon codicon-trash',
+			_icons: 'fa-solid fa-trash',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Duplicate',
-			_icons: 'codicon codicon-copy',
+			_icons: 'fa-solid fa-copy',
 			_on: dummyEventHandler,
 		},
 	];
@@ -51,10 +51,10 @@ export const PopoverButtonBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<div className="flex flex-col gap-4">
-				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
-				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+				<KolPopoverButton _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>
 						<p>

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

@@ -17,7 +17,7 @@ export const PopoverButtonInline: FC = () => {
 				<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.
-					<KolPopoverButton _inline={true} _label="Help" _icons="codicon codicon-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<KolPopoverButton _inline={true} _label="Help" _icons="fa-solid fa-circle-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 						<div className="w-sm p-2 border border-solid border-gray">
 							<KolHeading _label="Help Information" _level={0}></KolHeading>
 							<p>

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

@@ -54,10 +54,10 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_label="Salutation"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 			/>

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

@@ -39,7 +39,13 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			<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 />
+			<KolSingleSelect
+				{...props}
+				_label="With hidden clear button"
+				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+				_value={'de'}
+				_hasClearButton={false}
+			/>
 			<KolSingleSelect
 				{...props}
 				_hint={HINT_MSG}

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

@@ -16,19 +16,19 @@ export const SplitButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Save',
-			_icons: 'codicon codicon-save',
+			_icons: 'fa-solid fa-floppy-disk',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Move',
-			_icons: 'codicon codicon-move',
+			_icons: 'fa-solid fa-arrows-up-down-left-right',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'codicon codicon-trash',
+			_icons: 'fa-solid fa-trash',
 			_on: dummyEventHandler,
 		},
 	];

package/src/components/table/interactive-child-elements.tsx

@@ -26,7 +26,7 @@ const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeader
 			const commonProps = {
 				_label: capitalizedVariant,
 				_variant: variant,
-				_icons: { right: 'codicon codicon-squirrel' },
+				_icons: { right: 'kolicon-kolibri' },
 			};
 			getRoot(createReactRenderElement(element)).render(
 				cell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
@@ -91,7 +91,7 @@ export const InteractiveChildElements: FC = () => (
 								render: (element: HTMLElement, cell: KoliBriTableCell) => {
 									const commonProps = {
 										_label: cell.label,
-										_icons: { right: 'codicon codicon-squirrel' },
+										_icons: { right: 'kolicon-kolibri' },
 									};
 									getRoot(createReactRenderElement(element)).render(
 										cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,

package/src/components/table/render-cell.tsx

@@ -99,7 +99,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButtonWrapper label="Save" icons={{ left: 'codicon codicon-save' }} />
+							<KolButtonWrapper label="Save" icons={{ left: 'fa-solid fa-floppy-disk' }} />
 						</div>,
 					);
 				},

package/src/components/tabs/align.tsx

@@ -7,7 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -16,16 +16,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/basic.tsx

@@ -6,7 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -15,16 +15,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/behavior.tsx

@@ -6,7 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -15,16 +15,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/icons-only.tsx

@@ -6,23 +6,23 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First Tab',
 		_hideLabel: true,
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 		_hideLabel: true,
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 		_hideLabel: true,
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last Tab',
 		_hideLabel: true,
 	},

package/src/components/toast/basic.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
-import { KolButton } from '@public-ui/react-v19';
+import { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -75,9 +75,15 @@ export const ToastBasic: FC = () => {
 
 	return (
 		<>
+			<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
+				For more information, please refer&nbsp;
+				<KolLink _href="https://public-ui.github.io/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
+			</KolAlert>
+
 			<SampleDescription>
 				<p>This sample demonstrates the toast service with all its options.</p>
 			</SampleDescription>
+
 			<section className="grid gap-4">
 				<div className="flex flex-wrap gap-2">
 					<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>

package/src/components/toast/configurator.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
-import { KolButton, KolInputRadio } from '@public-ui/react-v19';
+import { KolAlert, KolButton, KolInputRadio, KolLink } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -66,6 +66,10 @@ export const ToastConfigurator: FC = () => {
 
 	return (
 		<>
+			<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
+				For more information, please refer&nbsp;
+				<KolLink _href="https://public-ui.github.io/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
+			</KolAlert>
 			<SampleDescription>
 				<p>
 					This sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card

package/src/components/toolbar/basic.tsx

@@ -12,7 +12,7 @@ export const ToolbarBasic: FC = () => {
 			_hideLabel: true,
 			_icons: {
 				left: {
-					icon: 'codicon codicon-arrow-left',
+					icon: 'kolicon-chevron-left',
 				},
 			},
 		},
@@ -22,7 +22,7 @@ export const ToolbarBasic: FC = () => {
 			_hideLabel: true,
 			_icons: {
 				right: {
-					icon: 'codicon codicon-arrow-right',
+					icon: 'kolicon-chevron-right',
 				},
 			},
 		},

package/src/components/toolbar/disabled.tsx

@@ -21,7 +21,7 @@ export const ToolbarDisabled: FC = () => {
 						_hideLabel: true,
 						_icons: {
 							left: {
-								icon: 'codicon codicon-arrow-left',
+								icon: 'kolicon-chevron-left',
 							},
 						},
 					},
@@ -31,7 +31,7 @@ export const ToolbarDisabled: FC = () => {
 						_hideLabel: true,
 						_icons: {
 							right: {
-								icon: 'codicon codicon-arrow-right',
+								icon: 'kolicon-chevron-right',
 							},
 						},
 					},

package/src/scenarios/custom-tooltip-css-properties.tsx

@@ -26,16 +26,10 @@ export const CustomTooltipCssProperties: FC = () => {
 					_label="Custom duration"
 					_hideLabel
 					style={{ '--kolibri-tooltip-animation-duration': '2500ms' }}
-					_icons="codicon codicon-clock"
-					_on={dummyEventHandler}
-				></KolButton>
-				<KolButton
-					_label="Custom width"
-					_hideLabel
-					style={{ '--kol-tooltip-width': '400px' }}
-					_icons="codicon codicon-arrow-both"
+					_icons="fa-solid fa-clock"
 					_on={dummyEventHandler}
 				></KolButton>
+				<KolButton _label="Custom width" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="kolicon-chevron-up" _on={dummyEventHandler}></KolButton>
 			</div>
 		</>
 	);

package/src/scenarios/disabled-interactive-elements.tsx

@@ -63,32 +63,32 @@ export const DisabledInteractiveElements: FC = () => {
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="Label" _on={dummyEventHandler} />
 						<KolButton _disabled _label="Label" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
-						<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Label" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-house" _label="Label" _on={dummyEventHandler} />
 					</div>
 				</KolCard>
 				<KolCard _label="ButtonLink" _level={0}>
 					<div className="flex flex-wrap gap-4">
 						<KolButtonLink _label="Label" />
 						<KolButtonLink _disabled _label="Label" />
-						<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
-						<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
+						<KolButtonLink _hideLabel _icons="fa-solid fa-house" _label="Label" />
+						<KolButtonLink _hideLabel _icons="fa-solid fa-house" _disabled _label="Label" />
 					</div>
 				</KolCard>
 				<KolCard _label="Link" _level={0}>
 					<div className="flex flex-wrap gap-4">
 						<KolLink _href="#" _label="Label" />
 						<KolLink _disabled _href="#" _label="Label" />
-						<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-						<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLink _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
+						<KolLink _disabled _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
 					</div>
 				</KolCard>
 				<KolCard _label="LinkButton" _level={0}>
 					<div className="flex flex-wrap gap-4">
 						<KolLinkButton _href="#" _label="Label" />
 						<KolLinkButton _disabled _href="#" _label="Label" />
-						<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-						<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLinkButton _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
+						<KolLinkButton _disabled _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
 					</div>
 				</KolCard>
 				<KolCard _label="Accordion" _level={0}>

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

@@ -9,21 +9,21 @@ import './layout.scss';
 
 const TABS: TabButtonProps[] = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'Erster Tab',
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Zweiter Tab',
 		_disabled: true,
 	},
 	{
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Deaktivierter Tab',
 		_disabled: true,
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Letzter Tab',
 		_disabled: true,
 	},

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -34,28 +34,28 @@ export const SameHeightOfAllInteractiveElements: FC = () => {
 				</p>
 			</SampleDescription>
 			<div className="w-full flex flex-wrap gap-4">
-				<KolButton _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
-				<KolButton _hideLabel _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
-				<KolLinkButton _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
-				<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
-				<KolCombobox _hideLabel _icons="codicon codicon-home" _label="Combobox" _suggestions={[]} />
+				<KolButton _icons="fa-solid fa-house" _label="Button" _on={dummyEventHandler} />
+				<KolButton _hideLabel _icons="fa-solid fa-house" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton _href="#" _icons="fa-solid fa-house" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _hideLabel _href="#" _icons="fa-solid fa-house" _label="Link-Button" _on={dummyEventHandler} />
+				<KolCombobox _hideLabel _icons="fa-solid fa-house" _label="Combobox" _suggestions={[]} />
 				<KolInputColor
 					_hideLabel
 					_icons={{
-						left: 'codicon codicon-home',
+						left: 'fa-solid fa-house',
 					}}
 					_label="Input-Color"
 				/>
-				<KolInputFile _hideLabel _icons="codicon codicon-home" _label="Input-File" />
-				<KolInputDate _hideLabel _icons="codicon codicon-home" _label="Input-Date" />
-				<KolInputEmail _hideLabel _icons="codicon codicon-home" _label="Input-Email" />
-				<KolInputNumber _hideLabel _icons="codicon codicon-home" _label="Input-Number" />
-				<KolInputPassword _hideLabel _icons="codicon codicon-home" _label="Input-Password" />
-				<KolInputRange _hideLabel _icons="codicon codicon-home" _label="Input-Range" />
-				<KolInputText _hideLabel _icons="codicon codicon-home" _label="Input-Text" />
-				<KolSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
-				<KolSingleSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
-				<KolTextarea _hideLabel _icons="codicon codicon-home" _label="Combobox" />
+				<KolInputFile _hideLabel _icons="fa-solid fa-house" _label="Input-File" />
+				<KolInputDate _hideLabel _icons="fa-solid fa-house" _label="Input-Date" />
+				<KolInputEmail _hideLabel _icons="fa-solid fa-house" _label="Input-Email" />
+				<KolInputNumber _hideLabel _icons="fa-solid fa-house" _label="Input-Number" />
+				<KolInputPassword _hideLabel _icons="fa-solid fa-house" _label="Input-Password" />
+				<KolInputRange _hideLabel _icons="fa-solid fa-house" _label="Input-Range" />
+				<KolInputText _hideLabel _icons="fa-solid fa-house" _label="Input-Text" />
+				<KolSelect _hideLabel _icons="fa-solid fa-house" _label="Combobox" _options={[]} />
+				<KolSingleSelect _hideLabel _icons="fa-solid fa-house" _label="Combobox" _options={[]} />
+				<KolTextarea _hideLabel _icons="fa-solid fa-house" _label="Combobox" />
 			</div>
 		</>
 	);

package/src/scenarios/toolbar-item-order.tsx

@@ -35,7 +35,7 @@ export const ToolbarItemOrder: FC = () => {
 			type: 'button',
 			_label: `Button ${index + 1}`,
 			_on: { onClick: handleSubmit },
-			_icons: isSubmitting ? 'codicon codicon-loading codicon-modifier-spin' : void 0,
+			_icons: isSubmitting ? 'fa-solid fa-spinner fa-spin' : void 0,
 			_disabled: isSubmitting,
 		}));
 		return items;
@@ -47,7 +47,7 @@ export const ToolbarItemOrder: FC = () => {
 			_label: `Button ${index + 1}`,
 			_on: { onClick: handleSubmit2 },
 			_disabled: isSubmitting2,
-			_icons: isSubmitting2 ? 'codicon codicon-loading codicon-modifier-spin' : void 0,
+			_icons: isSubmitting2 ? 'fa-solid fa-spinner fa-spin' : void 0,
 		}));
 		return items;
 	}, [isSubmitting2]);

package/src/scenarios/tooltip-positioning.tsx

@@ -20,7 +20,7 @@ export const TooltipPositioning: FC = () => {
 					contain: 'layout',
 				}}
 			>
-				<KolPopoverButton _label="Sample PopoverButton—Click for Popover" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+				<KolPopoverButton _label="Sample PopoverButton—Click for Popover" _icons="kolicon-alert-info" _tooltipAlign="right" _hideLabel>
 					This is an explanation shown on click.
 				</KolPopoverButton>
 			</div>

package/src/style.scss

@@ -60,6 +60,10 @@ hr {
 	list-style: none;
 }
 
+.header-alert {
+	margin-bottom: rem(16);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;

package/dist/assets/Alert-DzpS4CJD-CznI58Av.js

@@ -1,2 +0,0 @@
-import{_ as p}from"./tslib.es6-CxX45GIN-BGVaTf34.js";import{N as v,h as a,O as f,e as C,P as L,i as k,Q as E,F as S}from"./index-D9ygQgpL.js";import{c as y}from"./clsx-eK3rPvPS-B-dksMZM.js";import{t as n}from"./i18n-CQxlBXNV-Bs_gON2P.js";import{K as T}from"./Heading-ClZtMSvA-B-SEEyYN.js";const O=n("kol-error"),B=n("kol-info"),M=n("kol-warning"),I=n("kol-success"),K=n("kol-message"),s=({ariaLabel:e,icon:o})=>a(S,null,a("span",{class:"visually-hidden"},e),a(k,{class:E,_label:"",_icons:o})),N=({type:e,label:o})=>{switch(e){case"error":return a(s,{ariaLabel:O,icon:"codicon codicon-error",label:o});case"info":return a(s,{ariaLabel:B,icon:"codicon codicon-info",label:o});case"warning":return a(s,{ariaLabel:M,icon:"codicon codicon-warning",label:o});case"success":return a(s,{ariaLabel:I,icon:"codicon codicon-pass",label:o});default:return a(s,{ariaLabel:K,icon:"codicon codicon-comment",label:o})}},R=n("kol-close-alert"),w=()=>{if(typeof navigator>"u"||typeof navigator.vibrate!="function")return;const e=navigator.userActivation;if((e?.isActive||e?.hasBeenActive)&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch{}},D=(e,o)=>{const{class:l={},alert:c=!1,hasCloser:d=!1,label:t,level:u=0,type:_="default",variant:r="msg",onAlertTimeout:i,onCloserClick:m}=e,b=p(e,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);c&&(w(),setTimeout(()=>{i?.()},1e4));const g=v("kol-alert",{hasCloser:!!d,[`type-${_}`]:!0,[`variant-${r}`]:!0}),h=v("kol-alert","heading",{[`h${u}`]:!0}),A=Object.assign({class:y(l,g)},b);return a("div",Object.assign({role:c?"alert":void 0},A,{"data-testid":"alert"}),a("div",{class:"kol-alert__container"},a(N,{label:t,type:_}),a("div",{class:"kol-alert__container-content"},t&&a(T,{class:h,level:u,id:"heading"},t),r==="msg"&&a("span",{class:f,"aria-describedby":t?"heading":void 0},o)),d&&a(C,{class:L,"data-testid":"alert-close-button",_ariaDescription:t?.trim()||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:R,_on:{onClick:m},_tooltipAlign:"left"})),r==="card"&&a("div",{class:f,"aria-describedby":t?"heading":void 0},o))};export{D as K};
-//# sourceMappingURL=Alert-DzpS4CJD-CznI58Av.js.map

package/dist/assets/Alert-DzpS4CJD-CznI58Av.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert-DzpS4CJD-CznI58Av.js","sources":["../../../../components/dist/esm/Alert-DzpS4CJD.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { _ as __rest } from './tslib.es6-CxX45GIN.js';\nimport { h, F as Fragment } from './index-DXabIfEM.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { e as KolIconTag, d as KolButtonWcTag } from './component-names-CkE54Ym7.js';\nimport { t as translate } from './i18n-CQxlBXNV.js';\nimport { a as BEM_CLASS_ALERT__ICON, b as bem, c as BEM_CLASS_ALERT__CONTENT, d as BEM_CLASS_ALERT__CLOSER } from './bem-CIn1qsbp.js';\nimport { K as KolHeadingFc } from './Heading-ClZtMSvA.js';\n\nconst translateError = translate('kol-error');\nconst translateInfo = translate('kol-info');\nconst translateWarning = translate('kol-warning');\nconst translateSuccess = translate('kol-success');\nconst translateMessage = translate('kol-message');\nconst Icon = ({ ariaLabel, icon }) => {\n    return (h(Fragment, null, h(\"span\", { class: \"visually-hidden\" }, ariaLabel), h(KolIconTag, { class: BEM_CLASS_ALERT__ICON, _label: \"\", _icons: icon })));\n};\nconst AlertIcon = ({ type, label }) => {\n    switch (type) {\n        case 'error':\n            return h(Icon, { ariaLabel: translateError, icon: \"codicon codicon-error\", label: label });\n        case 'info':\n            return h(Icon, { ariaLabel: translateInfo, icon: \"codicon codicon-info\", label: label });\n        case 'warning':\n            return h(Icon, { ariaLabel: translateWarning, icon: \"codicon codicon-warning\", label: label });\n        case 'success':\n            return h(Icon, { ariaLabel: translateSuccess, icon: \"codicon codicon-pass\", label: label });\n        default:\n            return h(Icon, { ariaLabel: translateMessage, icon: \"codicon codicon-comment\", label: label });\n    }\n};\n\nconst translateCloseAlert = translate('kol-close-alert');\nconst vibrateOnError = () => {\n    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {\n        return;\n    }\n    const ua = navigator.userActivation;\n    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);\n    if (!hasGesture) {\n        return;\n    }\n    if (!matchMedia('(any-pointer: coarse)').matches) {\n        return;\n    }\n    try {\n        navigator.vibrate([100, 75, 100, 75, 100]);\n    }\n    catch (_a) {\n    }\n};\nconst KolAlertFc = (props, children) => {\n    const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, [\"class\", \"alert\", \"hasCloser\", \"label\", \"level\", \"type\", \"variant\", \"onAlertTimeout\", \"onCloserClick\"]);\n    if (alert) {\n        vibrateOnError();\n        setTimeout(() => {\n            onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();\n        }, 10000);\n    }\n    const BEM_CLASS_ROOT = bem('kol-alert', {\n        hasCloser: !!hasCloser,\n        [`type-${type}`]: true,\n        [`variant-${variant}`]: true,\n    });\n    const BEM_CLASS__HEADING = bem('kol-alert', 'heading', {\n        [`h${level}`]: true,\n    });\n    const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);\n    return (h(\"div\", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { \"data-testid\": \"alert\" }), h(\"div\", { class: \"kol-alert__container\" }, h(AlertIcon, { label: label, type: type }), h(\"div\", { class: \"kol-alert__container-content\" }, label && (h(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: \"heading\" }, label)), variant === 'msg' && (h(\"span\", { class: BEM_CLASS_ALERT__CONTENT, \"aria-describedby\": label ? 'heading' : undefined }, children))), hasCloser && (h(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER, \"data-testid\": \"alert-close-button\", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {\n            left: {\n                icon: 'codicon codicon-close',\n            },\n        }, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: \"left\" }))), variant === 'card' && (h(\"div\", { class: BEM_CLASS_ALERT__CONTENT, \"aria-describedby\": label ? 'heading' : undefined }, children))));\n};\n\nexport { KolAlertFc as K };\n//# sourceMappingURL=Alert-DzpS4CJD.js.map\n\n//# sourceMappingURL=Alert-DzpS4CJD.js.map"],"names":["translateError","translate","translateInfo","translateWarning","translateSuccess","translateMessage","Icon","ariaLabel","icon","h","Fragment","KolIconTag","BEM_CLASS_ALERT__ICON","AlertIcon","type","label","translateCloseAlert","vibrateOnError","ua","KolAlertFc","props","children","classNames","alert","hasCloser","level","variant","onAlertTimeout","onCloserClick","other","__rest","BEM_CLASS_ROOT","bem","BEM_CLASS__HEADING","rootProps","clsx","KolHeadingFc","BEM_CLASS_ALERT__CONTENT","KolButtonWcTag","BEM_CLASS_ALERT__CLOSER"],"mappings":"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"}

package/dist/assets/Collapsible-CIER1XyD-CCVXz7W8.js

@@ -1,2 +0,0 @@
-import{_ as m}from"./tslib.es6-CxX45GIN-BGVaTf34.js";import{h as s,e as f}from"./index-D9ygQgpL.js";import{c as a}from"./clsx-eK3rPvPS-B-dksMZM.js";import{K as g}from"./Heading-ClZtMSvA-B-SEEyYN.js";const K=(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(g,{ref:i?.ref,level:v,class:a("collapsible__heading",i?.class)},s(f,{class:a("collapsible__heading-button",l?.class),ref:l?.ref,slot:"expert",_ariaControls:`${n}-control`,_ariaExpanded:e,_disabled:c,_icons:l?._icons||`codicon codicon-${u}`,_label:p,_on:{onClick:_}})),s("div",{class:a("collapsible__wrapper",o?.wrapperClass)},s("div",{class:a("collapsible__wrapper-animation",o?.animationClass)},s("div",{"aria-hidden":e===!1?"true":void 0,class:a("collapsible__content",o?.class),id:`${n}-control`},r))))};export{K};
-//# sourceMappingURL=Collapsible-CIER1XyD-CCVXz7W8.js.map

package/dist/assets/Collapsible-CIER1XyD-CCVXz7W8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collapsible-CIER1XyD-CCVXz7W8.js","sources":["../../../../components/dist/esm/Collapsible-CIER1XyD.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { _ as __rest } from './tslib.es6-CxX45GIN.js';\nimport { h } from './index-DXabIfEM.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { d as KolButtonWcTag } from './component-names-CkE54Ym7.js';\nimport { K as KolHeadingFc } from './Heading-ClZtMSvA.js';\n\nconst KolCollapsibleFc = (props, children) => {\n    const { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {} } = props, other = __rest(props, [\"id\", \"class\", \"label\", \"level\", \"disabled\", \"open\", \"onClick\", \"HeadingProps\", \"HeadingButtonProps\", \"ContentProps\"]);\n    const icon = open ? 'remove' : 'add';\n    return (h(\"div\", Object.assign({ id: id, class: clsx('collapsible', {\n            'collapsible--disabled': disabled === true,\n            'collapsible--open': open === true,\n        }, classNames) }, other), h(KolHeadingFc, { ref: HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.ref, level: level, class: clsx('collapsible__heading', HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.class) }, h(KolButtonWcTag, { class: clsx('collapsible__heading-button', HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.class), ref: HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.ref, slot: \"expert\", _ariaControls: `${id}-control`, _ariaExpanded: open, _disabled: disabled, _icons: (HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps._icons) || `codicon codicon-${icon}`, _label: label, _on: { onClick } })), h(\"div\", { class: clsx('collapsible__wrapper', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.wrapperClass) }, h(\"div\", { class: clsx('collapsible__wrapper-animation', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.animationClass) }, h(\"div\", { \"aria-hidden\": open === false ? 'true' : undefined, class: clsx('collapsible__content', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.class), id: `${id}-control` }, children)))));\n};\n\nexport { KolCollapsibleFc as K };\n//# sourceMappingURL=Collapsible-CIER1XyD.js.map\n\n//# sourceMappingURL=Collapsible-CIER1XyD.js.map"],"names":["KolCollapsibleFc","props","children","id","classNames","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps","other","__rest","icon","h","clsx","KolHeadingFc","KolButtonWcTag"],"mappings":"uMASK,MAACA,EAAmB,CAACC,EAAOC,IAAa,CAC1C,KAAM,CAAE,GAAAC,EAAI,MAAOC,EAAY,MAAAC,EAAO,MAAAC,EAAQ,EAAG,SAAAC,EAAU,KAAAC,EAAM,QAAAC,EAAS,aAAAC,EAAe,CAAA,EAAI,mBAAAC,EAAqB,CAAA,EAAI,aAAAC,EAAe,CAAA,CAAE,EAAKX,EAAOY,EAAQC,EAAOb,EAAO,CAAC,KAAM,QAAS,QAAS,QAAS,WAAY,OAAQ,UAAW,eAAgB,qBAAsB,cAAc,CAAC,EACzRc,EAAOP,EAAO,SAAW,MAC/B,OAAQQ,EAAE,MAAO,OAAO,OAAO,CAAE,GAAIb,EAAI,MAAOc,EAAK,cAAe,CAC5D,wBAAyBV,IAAa,GACtC,oBAAqBC,IAAS,EAC1C,EAAWJ,CAAU,CAAC,EAAIS,CAAK,EAAGG,EAAEE,EAAc,CAAE,IAAiER,GAAa,IAAK,MAAOJ,EAAO,MAAOW,EAAK,uBAAoFP,GAAa,KAAK,CAAC,EAAIM,EAAEG,EAAgB,CAAE,MAAOF,EAAK,8BAAuGN,GAAmB,KAAK,EAAG,IAA6EA,GAAmB,IAAK,KAAM,SAAU,cAAe,GAAGR,CAAE,WAAY,cAAeK,EAAM,UAAWD,EAAU,OAAiFI,GAAmB,QAAW,mBAAmBI,CAAI,GAAI,OAAQV,EAAO,IAAK,CAAE,QAAAI,CAAO,CAAE,CAAE,CAAC,EAAGO,EAAE,MAAO,CAAE,MAAOC,EAAK,uBAAoFL,GAAa,YAAY,CAAC,EAAII,EAAE,MAAO,CAAE,MAAOC,EAAK,iCAA8FL,GAAa,cAAc,CAAC,EAAII,EAAE,MAAO,CAAE,cAAeR,IAAS,GAAQ,OAAS,OAAW,MAAOS,EAAK,uBAAoFL,GAAa,KAAK,EAAG,GAAI,GAAGT,CAAE,UAAU,EAAID,CAAQ,CAAC,CAAC,CAAC,CAChxC"}