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

package/src/components/table/sticky-header.tsx

@@ -1,15 +1,23 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 
+type Data = (typeof COMPLEX_DATA)[0];
+
+const selection: KoliBriTableSelection = {
+	label: (row) => `Selection for ${(row as Data).common_name}`,
+	multiple: false,
+	keyPropertyName: 'internalIdentifier',
+};
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'ID', key: 'id', textAlign: 'right', width: 160 },
+			{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },
 			{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },
 			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },
 			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },
@@ -24,12 +32,12 @@ export const TableStickyHeader: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolTableStateful with horizontal and vertical scrollbars. It should be focusable and scrollable with the keyboard. The table headline
-				should be sticky at the top of the table. The data now lists animal species with conservation-focused details.
+				This sample shows KolTableStateful with vertical scrollbar. It should be focusable and scrollable with the keyboard. The table headline should be sticky
+				at the top of the table. The data lists animal species with conservation-focused details.
 			</p>
 		</SampleDescription>
 
 		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful _label="Animal species overview" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<KolTableStateful _label="Animal species overview" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" _selection={selection} />
 	</>
 );

package/src/components/tabs/align.tsx

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

package/src/components/tabs/basic.tsx

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

package/src/components/tabs/behavior.tsx

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

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

@@ -6,25 +6,26 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'fa-solid fa-chart-pie',
-		_label: 'First Tab',
-		_hideLabel: true,
+		_icons: 'kolicon-check',
+		_label: 'First tab',
+		_on: {
+			onSelect: (event: Event) => {
+				console.log('First tab selected', event);
+			},
+		},
 	},
 	{
-		_icons: 'fa-solid fa-calendar',
+		_icons: 'kolicon-link-external',
 		_label: 'Second Tab',
-		_hideLabel: true,
 	},
 	{
 		_disabled: true,
-		_icons: 'fa-solid fa-briefcase',
+		_icons: 'kolicon-house',
 		_label: 'Disabled Tab',
-		_hideLabel: true,
 	},
 	{
-		_icons: 'fa-solid fa-address-card',
-		_label: 'Last Tab',
-		_hideLabel: true,
+		_icons: 'kolicon-eye',
+		_label: 'Last tab',
 	},
 ];
 export const TabsIconsOnly: FC = () => (

package/src/scenarios/routes.ts

@@ -15,6 +15,7 @@ import { SampleFormWithValidation } from './sample-form-with-validation';
 import { StaticForm } from './static-form';
 import { ToolbarItemOrder } from './toolbar-item-order';
 import { TooltipPositioning } from './tooltip-positioning';
+import { ZIndexScenario } from './z-index';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -33,6 +34,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'toolbar-item-order': ToolbarItemOrder,
 		'tooltip-positioning': TooltipPositioning,
+		'z-index': ZIndexScenario,
 		'performance-test': PerformanceTest,
 	},
 };

package/src/scenarios/z-index.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+import { KolButton, KolCombobox, KolDialog, KolPopoverButton } from '@public-ui/react-v19';
+import { useSearchParams } from 'react-router';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const ZIndexScenario: FC = () => {
+	const [searchParams] = useSearchParams();
+
+	const showDialog = searchParams.get('show-dialog') as string;
+
+	const cardRef = useRef<HTMLKolDialogElement>(null);
+
+	const onOpenCardDialog = {
+		onClick: () => cardRef.current?.openModal(),
+	};
+
+	useEffect(() => {
+		if (showDialog === 'true') {
+			cardRef.current?.openModal();
+		}
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows the combination of a few components overlaying content. Dialog, Popover, Tooltip</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<div>
+					<KolButton _label="Open card dialog" _on={onOpenCardDialog} />
+					<KolDialog ref={cardRef} _label="Card dialog" _variant="card" _width="30%">
+						<KolPopoverButton _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+							<div className="w-sm p-2 border border-solid border-gray">
+								<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>
+								<KolButton _hideLabel _icons="kolicon-check" _label="OK" _variant="primary" />
+							</div>
+						</KolPopoverButton>
+						<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" _hideLabel />
+					</KolDialog>
+				</div>
+			</div>
+		</>
+	);
+};

package/dist/assets/Alert-CQ_GJc9Z-DB25O78T.js

@@ -1,2 +0,0 @@
-import{_ as A}from"./tslib.es6-CxX45GIN-BGVaTf34.js";import{N as v,h as a,O as f,e as C,P as p,i as L,Q as E,F as S}from"./index-CUfhzPVQ.js";import{c as y}from"./clsx-eK3rPvPS-B-dksMZM.js";import{t as o}from"./i18n-CvQhdUrE-iixAplM4.js";import{K as T}from"./Heading-DZVP6zXi-BCiiiHiw.js";const O=o("kol-error"),B=o("kol-info"),M=o("kol-warning"),I=o("kol-success"),K=o("kol-message"),r=({ariaLabel:e,icon:t})=>a(S,null,a("span",{class:"visually-hidden"},e),a(L,{class:E,_label:"",_icons:t})),N=({type:e,label:t})=>{switch(e){case"error":return a(r,{ariaLabel:O,icon:"kolicon-alert-error",label:t});case"info":return a(r,{ariaLabel:B,icon:"kolicon-alert-info",label:t});case"warning":return a(r,{ariaLabel:M,icon:"kolicon-alert-warning",label:t});case"success":return a(r,{ariaLabel:I,icon:"kolicon-alert-success",label:t});default:return a(r,{ariaLabel:K,icon:"kolicon-alert-info",label:t})}},R=o("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,t)=>{const{class:i={},alert:c=!1,hasCloser:d=!1,label:s,level:u=0,type:_="default",variant:n="msg",onAlertTimeout:l,onCloserClick:b}=e,g=A(e,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);c&&(w(),setTimeout(()=>{l?.()},1e4));const m=v("kol-alert",{hasCloser:!!d,[`type-${_}`]:!0,[`variant-${n}`]:!0}),k=v("kol-alert","heading",{[`h${u}`]:!0}),h=Object.assign({class:y(i,m)},g);return a("div",Object.assign({role:c?"alert":void 0},h,{"data-testid":"alert"}),a("div",{class:"kol-alert__container"},a(N,{label:s,type:_}),a("div",{class:"kol-alert__container-content"},s&&a(T,{class:k,level:u,id:"heading"},s),n==="msg"&&a("span",{class:f,"aria-describedby":s?"heading":void 0},t)),d&&a(C,{class:p,"data-testid":"alert-close-button",_ariaDescription:s?.trim()||"",_hideLabel:!0,_icons:{left:{icon:"kolicon-cross"}},_label:R,_on:{onClick:b},_tooltipAlign:"left"})),n==="card"&&a("div",{class:f,"aria-describedby":s?"heading":void 0},t))};export{D as K};
-//# sourceMappingURL=Alert-CQ_GJc9Z-DB25O78T.js.map

package/dist/assets/Alert-CQ_GJc9Z-DB25O78T.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert-CQ_GJc9Z-DB25O78T.js","sources":["../../../../components/dist/esm/Alert-CQ_GJc9Z.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { _ as __rest } from './tslib.es6-CxX45GIN.js';\nimport { h, F as Fragment } from './index-Zs2j78jP.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { e as KolIconTag, d as KolButtonWcTag } from './component-names-B_kYyA8u.js';\nimport { t as translate } from './i18n-CvQhdUrE.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-De7JANRY.js';\nimport { K as KolHeadingFc } from './Heading-DZVP6zXi.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: \"kolicon-alert-error\", label: label });\n        case 'info':\n            return h(Icon, { ariaLabel: translateInfo, icon: \"kolicon-alert-info\", label: label });\n        case 'warning':\n            return h(Icon, { ariaLabel: translateWarning, icon: \"kolicon-alert-warning\", label: label });\n        case 'success':\n            return h(Icon, { ariaLabel: translateSuccess, icon: \"kolicon-alert-success\", label: label });\n        default:\n            return h(Icon, { ariaLabel: translateMessage, icon: \"kolicon-alert-info\", 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: 'kolicon-cross',\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-CQ_GJc9Z.js.map\n\n//# sourceMappingURL=Alert-CQ_GJc9Z.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/clsx-eK3rPvPS-B-dksMZM.js

@@ -1,2 +0,0 @@
-function a(r){var f,n,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var o=r.length;for(f=0;f<o;f++)r[f]&&(n=a(r[f]))&&(t&&(t+=" "),t+=n)}else for(n in r)r[n]&&(t&&(t+=" "),t+=n);return t}function i(){for(var r,f,n=0,t="",o=arguments.length;n<o;n++)(r=arguments[n])&&(f=a(r))&&(t&&(t+=" "),t+=f);return t}export{i as c};
-//# sourceMappingURL=clsx-eK3rPvPS-B-dksMZM.js.map

package/dist/assets/clsx-eK3rPvPS-B-dksMZM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clsx-eK3rPvPS-B-dksMZM.js","sources":["../../../../components/dist/esm/clsx-eK3rPvPS.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nfunction r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}\n\nexport { clsx as c };\n//# sourceMappingURL=clsx-eK3rPvPS.js.map\n\n//# sourceMappingURL=clsx-eK3rPvPS.js.map"],"names":["r","e","t","f","n","clsx"],"mappings":"AAGA,SAASA,EAAEC,EAAE,CAAC,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAa,OAAOH,GAAjB,UAA8B,OAAOA,GAAjB,SAAmBG,GAAGH,UAAoB,OAAOA,GAAjB,SAAmB,GAAG,MAAM,QAAQA,CAAC,EAAE,CAAC,IAAI,EAAEA,EAAE,OAAO,IAAIC,EAAE,EAAEA,EAAE,EAAEA,IAAID,EAAEC,CAAC,IAAIC,EAAEH,EAAEC,EAAEC,CAAC,CAAC,KAAKE,IAAIA,GAAG,KAAKA,GAAGD,EAAG,KAAM,KAAIA,KAAKF,EAAEA,EAAEE,CAAC,IAAIC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAC,SAASC,GAAM,CAAC,QAAQJ,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAG,EAAE,UAAU,OAAOD,EAAE,EAAEA,KAAKF,EAAE,UAAUE,CAAC,KAAKD,EAAEF,EAAEC,CAAC,KAAKG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC"}

package/dist/assets/custom-class-B6h_ZSR7-Vdh4Tt1S.js

@@ -1,2 +0,0 @@
-import{q as t}from"./index-CUfhzPVQ.js";const o=(a,s)=>{t(a,"_customClass",s,{defaultValue:void 0})};export{o as v};
-//# sourceMappingURL=custom-class-B6h_ZSR7-Vdh4Tt1S.js.map

package/dist/assets/disabled-D0wfAqak-71kcmPxI.js

@@ -1,2 +0,0 @@
-import{n as o,C as s}from"./index-CUfhzPVQ.js";const d=(a,t)=>{o(a,"_disabled",t,{hooks:{afterPatch:e=>{e===!0&&s()}}})};export{d as v};
-//# sourceMappingURL=disabled-D0wfAqak-71kcmPxI.js.map

package/dist/assets/has-closer-OxGfsISj-CdN5YRa9.js

@@ -1,2 +0,0 @@
-import{n as s}from"./index-CUfhzPVQ.js";const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-OxGfsISj-CdN5YRa9.js.map

package/dist/assets/has-closer-OxGfsISj-CdN5YRa9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"has-closer-OxGfsISj-CdN5YRa9.js","sources":["../../../../components/dist/esm/has-closer-OxGfsISj.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { d as watchBoolean } from './common-BXXICkFX.js';\n\nconst validateHasCloser = (component, value) => {\n    watchBoolean(component, '_hasCloser', value);\n};\n\nexport { validateHasCloser as v };\n//# sourceMappingURL=has-closer-OxGfsISj.js.map\n\n//# sourceMappingURL=has-closer-OxGfsISj.js.map"],"names":["validateHasCloser","component","value","watchBoolean"],"mappings":"wCAKK,MAACA,EAAoB,CAACC,EAAWC,IAAU,CAC5CC,EAAaF,EAAW,aAAcC,CAAK,CAC/C"}

package/dist/assets/hide-label-90DGA8H4--6e2pRRd.js

@@ -1,2 +0,0 @@
-import{n as t}from"./index-CUfhzPVQ.js";const l=(a,e,o={})=>{t(a,"_hideLabel",e,o)};export{l as v};
-//# sourceMappingURL=hide-label-90DGA8H4--6e2pRRd.js.map

package/dist/assets/href-BDekIhFd-BMHMMWBp.js

@@ -1,2 +0,0 @@
-import{q as e}from"./index-CUfhzPVQ.js";const f=(r,t,a={})=>{e(r,"_href",t,a)};export{f as v};
-//# sourceMappingURL=href-BDekIhFd-BMHMMWBp.js.map

package/dist/assets/href-BDekIhFd-BMHMMWBp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"href-BDekIhFd-BMHMMWBp.js","sources":["../../../../components/dist/esm/href-BDekIhFd.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-BXXICkFX.js';\n\nconst validateHref = (component, value, options = {}) => {\n    watchString(component, '_href', value, options);\n};\n\nexport { validateHref as v };\n//# sourceMappingURL=href-BDekIhFd.js.map\n\n//# sourceMappingURL=href-BDekIhFd.js.map"],"names":["validateHref","component","value","options","watchString"],"mappings":"wCAKK,MAACA,EAAe,CAACC,EAAWC,EAAOC,EAAU,CAAA,IAAO,CACrDC,EAAYH,EAAW,QAASC,EAAOC,CAAO,CAClD"}

package/dist/assets/i18n-CvQhdUrE-iixAplM4.js

@@ -1,2 +0,0 @@
-import{Y as e,Z as i,M as s}from"./index-CUfhzPVQ.js";let r=(t,n)=>{var a;return((a=e())!==null&&a!==void 0?a:i("de")).translate(t,n)};s()&&(r=t=>t);export{r as t};
-//# sourceMappingURL=i18n-CvQhdUrE-iixAplM4.js.map

package/dist/assets/image-source-udiqQ1zY-uujcUSGN.js

@@ -1,2 +0,0 @@
-import{q as o}from"./index-CUfhzPVQ.js";const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-udiqQ1zY-uujcUSGN.js.map

package/dist/assets/image-source-udiqQ1zY-uujcUSGN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-source-udiqQ1zY-uujcUSGN.js","sources":["../../../../components/dist/esm/image-source-udiqQ1zY.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-BXXICkFX.js';\n\nconst validateImageSource = (component, value, options) => {\n    watchString(component, '_src', value, options);\n};\n\nexport { validateImageSource as v };\n//# sourceMappingURL=image-source-udiqQ1zY.js.map\n\n//# sourceMappingURL=image-source-udiqQ1zY.js.map"],"names":["validateImageSource","component","value","options","watchString"],"mappings":"wCAKK,MAACA,EAAsB,CAACC,EAAWC,EAAOC,IAAY,CACvDC,EAAYH,EAAW,OAAQC,EAAOC,CAAO,CACjD"}

package/dist/assets/index-C00VY54b.css

@@ -1 +0,0 @@
-*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5)}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5)}.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.static{position:static}.grid{display:grid}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-6{grid-column:span 6/span 6}.grid-cols-\[4fr_4fr_1fr\]{grid-template-columns:4fr 4fr 1fr}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.mx{margin-left:calc(16rem / var(--kolibri-root-font-size, 16));margin-right:calc(16rem / var(--kolibri-root-font-size, 16))}.mx-auto{margin-left:auto;margin-right:auto}.me{margin-inline-end:calc(16rem / var(--kolibri-root-font-size, 16))}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-\[1em\]{height:1em}.ha{height:auto}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-xl{max-width:36rem}.w-\[1em\]{width:1em}.w-\[400px\]{width:400px}.w-75px{width:75px}.w-fit{width:fit-content}.w-full{width:100%}.flex{display:flex}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.items-end{align-items:flex-end}.flex-items-center,.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.flex-justify-between,.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.b,.border{border-width:1px}.border-b-1{border-bottom-width:1px}.border-dark-100{--un-border-opacity:1;border-color:rgb(60 60 60 / var(--un-border-opacity))}.border-gray{--un-border-opacity:1;border-color:rgb(156 163 175 / var(--un-border-opacity))}.rounded{border-radius:calc(4rem / var(--kolibri-root-font-size, 16))}.border-solid{border-style:solid}.border-b-solid{border-bottom-style:solid}.bg-blue-400{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity))}.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity))}.pb-sm{padding-bottom:calc(14rem / var(--kolibri-root-font-size, 16))}.text-center{text-align:center}.text-base{font-size:calc(16rem / var(--kolibri-root-font-size, 16));line-height:1.5}.text-lg{font-size:calc(18rem / var(--kolibri-root-font-size, 16));line-height:1.75}.text-sm{font-size:calc(14rem / var(--kolibri-root-font-size, 16));line-height:1.25}.text-red-600{--un-text-opacity:1;color:rgb(220 38 38 / var(--un-text-opacity))}.color-gray-5{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity))}.font-semibold{font-weight:600}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.tab-0{-moz-tab-size:0;-o-tab-size:0;tab-size:0}.tab-1{-moz-tab-size:1;-o-tab-size:1;tab-size:1}.tab-2{-moz-tab-size:2;-o-tab-size:2;tab-size:2}.tab-3{-moz-tab-size:3;-o-tab-size:3;tab-size:3}.opacity-80{opacity:.8}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.p-0{padding:calc(0rem / var(--kolibri-root-font-size, 16))}.p-2{padding:calc(8rem / var(--kolibri-root-font-size, 16))}.p-3{padding:calc(12rem / var(--kolibri-root-font-size, 16))}.p-4{padding:calc(16rem / var(--kolibri-root-font-size, 16))}.p-6{padding:calc(24rem / var(--kolibri-root-font-size, 16))}.py-2{padding-top:calc(8rem / var(--kolibri-root-font-size, 16));padding-bottom:calc(8rem / var(--kolibri-root-font-size, 16))}.pl-5{padding-left:calc(20rem / var(--kolibri-root-font-size, 16))}.m-0{margin:calc(0rem / var(--kolibri-root-font-size, 16))}.m-4{margin:calc(16rem / var(--kolibri-root-font-size, 16))}.my-2{margin-top:calc(8rem / var(--kolibri-root-font-size, 16));margin-bottom:calc(8rem / var(--kolibri-root-font-size, 16))}.my-4{margin-top:calc(16rem / var(--kolibri-root-font-size, 16));margin-bottom:calc(16rem / var(--kolibri-root-font-size, 16))}.mt,.mt-4{margin-top:calc(16rem / var(--kolibri-root-font-size, 16))}.mr{margin-right:calc(16rem / var(--kolibri-root-font-size, 16))}.mt-0{margin-top:calc(0rem / var(--kolibri-root-font-size, 16))}.m-t-2,.mt-2{margin-top:calc(8rem / var(--kolibri-root-font-size, 16))}.mt-6{margin-top:calc(24rem / var(--kolibri-root-font-size, 16))}.mb-2{margin-bottom:calc(8rem / var(--kolibri-root-font-size, 16))}.mb-3{margin-bottom:calc(12rem / var(--kolibri-root-font-size, 16))}.mb-4{margin-bottom:calc(16rem / var(--kolibri-root-font-size, 16))}.mb-8{margin-bottom:calc(32rem / var(--kolibri-root-font-size, 16))}.gap-14{gap:calc(56rem / var(--kolibri-root-font-size, 16))}.gap-2{gap:calc(8rem / var(--kolibri-root-font-size, 16))}.gap-3{gap:calc(12rem / var(--kolibri-root-font-size, 16))}.gap-4{gap:calc(16rem / var(--kolibri-root-font-size, 16))}.gap-6{gap:calc(24rem / var(--kolibri-root-font-size, 16))}.gap-8{gap:calc(32rem / var(--kolibri-root-font-size, 16))}.w-8rem{width:calc(128rem / var(--kolibri-root-font-size, 16))}.w-sm{width:calc(384rem / var(--kolibri-root-font-size, 16))}@media(min-width:640px){.sm\:col-span-6{grid-column:span 6/span 6}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:flex{display:flex}}@media(min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-6{grid-column:span 6/span 6}.md\:grid-cols-\[auto_1fr_1fr\]{grid-template-columns:auto 1fr 1fr}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:1280px){.xl\:col-span-2{grid-column:span 2/span 2}.xl\:col-span-3{grid-column:span 3/span 3}.xl\:col-span-5{grid-column:span 5/span 5}.xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}:root{--kolibri-root-font-size: 100;font-size:625%}body{margin:0;font-family:Verdana;font-size:calc(16rem / var(--kolibri-root-font-size, 16));line-height:normal}dl,hr{margin:0}.grid-cols-2{grid-template-columns:auto auto}.indented-text p{margin:0}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.black-background{background-color:#000;display:flex;padding:calc(8rem / var(--kolibri-root-font-size, 16));flex-direction:column}.w-image{width:500px}.drawer-content-vertical{width:calc(400rem / var(--kolibri-root-font-size, 16))}.list-none{margin:0;padding:0;list-style:none}.header-alert{margin-bottom:calc(16rem / var(--kolibri-root-font-size, 16))}@media(min-width:1024px){.app-container{display:grid;height:100vh;grid-template-columns:calc(360rem / var(--kolibri-root-font-size, 16)) calc(100% - 360rem / var(--kolibri-root-font-size, 16))}.app-sidebar{background-color:#fff;max-height:calc(100vh - 32px);border-right:1px solid gray}.app-sidebar .scrollable-container-wrapper{display:flex;max-height:calc(100vh - 32px);flex-direction:column}.app-sidebar .scrollable-container-wrapper .scrollable-container{overflow:auto;flex:1 auto}main{max-height:100vh;overflow:auto}}@media print{.no-print,.no-print *{display:none!important}}.expert-slot-required-label:after{content:" *"/""}.loading-overlay{background-color:#fafafa66;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;position:absolute;inset:0;align-items:center;justify-content:center}.loader{border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;width:48px;height:48px;animation:pulse 1s linear infinite;border:5px solid #333}.loader:after{transform:translate(-50%,-50%);border-radius:50%;display:inline-block;position:absolute;top:50%;left:50%;box-sizing:border-box;width:48px;height:48px;content:"";animation:scaleUp 1s linear infinite;border:5px solid #f00}@keyframes scaleUp{0%{transform:translate(-50%,-50%) scale(0)}60%,to{transform:translate(-50%,-50%) scale(1)}}@keyframes pulse{0%,60%,to{transform:scale(1)}80%{transform:scale(1.2)}}@media(prefers-reduced-motion){.loader,.loader:after{animation-duration:2s}}.mainlayout{display:grid;width:100%;min-height:calc(100vh - 32rem / var(--kolibri-root-font-size, 16));column-gap:calc(16rem / var(--kolibri-root-font-size, 16));grid-template-areas:"nav content";grid-template-columns:calc(400rem / var(--kolibri-root-font-size, 16)) calc(100% - 460rem / var(--kolibri-root-font-size, 16));grid-template-rows:1fr}.mainlayout>.nav-area{grid-area:nav}.mainlayout>.content{grid-area:content}