@public-ui/sample-react 1.7.2 → 2.0.0-rc.0

package/src/components/handout/basic.tsx

@@ -3,7 +3,6 @@ import {
 	KolAbbr,
 	KolAccordion,
 	KolAlert,
-	KolBadge,
 	KolBreadcrumb,
 	KolButton,
 	KolButtonLink,
@@ -11,9 +10,6 @@ import {
 	KolDetails,
 	KolForm,
 	KolHeading,
-	KolIcon,
-	KolImage,
-	KolIndentedText,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -27,22 +23,15 @@ import {
 	KolKolibri,
 	KolLink,
 	KolLinkButton,
-	KolLinkGroup,
 	KolLogo,
-	KolModal,
 	KolNav,
-	KolPagination,
 	KolProgress,
-	KolQuote,
 	KolSelect,
-	KolSkipNav,
-	KolSpin,
 	KolTable,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react';
-import PackageJson from '../../../package.json';
 import React, { FC } from 'react';
 import { getTheme, getThemeName } from '../../shares/store';
 
@@ -702,7 +691,7 @@ export const HandoutBasic: FC = () => (
 			<KolHeading _label="" _level={1}>
 				Kolibri-Handout <small>for {getThemeName(getTheme())}</small>
 			</KolHeading>
-			<KolDetails _summary="Abstract" _open>
+			<KolDetails _label="Abstract" _open>
 				The handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,
 				accessible web components that can be customized to your own corporate design using theming, you don&#39;t have to develop these components yourself.
 				For more information read our documentation and follow us (
@@ -711,8 +700,8 @@ export const HandoutBasic: FC = () => (
 			</KolDetails>
 		</div>
 		<div className="grid gap-4 grid-cols-12">
-			<KolCard className="col-span-2" _heading="Heading" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
+			<KolCard className="col-span-2" _label="Heading" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
 					<KolHeading _label="Überschrift Stufe 1" _level={1}></KolHeading>
 					<KolHeading _label="Überschrift Stufe 2" _level={2}></KolHeading>
 					<KolHeading _label="Überschrift Stufe 3" _level={3}></KolHeading>
@@ -722,54 +711,54 @@ export const HandoutBasic: FC = () => (
 					<KolHeading _label="Überschrift Stufe 6" _secondaryHeadline="Unterüberricht" _level={6}></KolHeading>
 				</div>
 			</KolCard>
-			{/* <KolCard className="col-span-3" _heading="Accordion" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
-					<KolAccordion _heading="Überschrift Level 1" _level={1} _open>
-						<div slot="content">Inhalt Accordion Tab 1</div>
+			{/* <KolCard className="col-span-3" _label="Accordion" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
+					<KolAccordion _label="Überschrift Level 1" _level={1} _open>
+						<div slot="">Inhalt Accordion Tab 1</div>
 					</KolAccordion>
-					<KolAccordion _heading="Überschrift Level 2" _level={2}>
-						<div slot="content">Inhalt Accordion Tab 2</div>
+					<KolAccordion _label="Überschrift Level 2" _level={2}>
+						<div slot="">Inhalt Accordion Tab 2</div>
 					</KolAccordion>
-					<KolAccordion _heading="Überschrift Level 3" _level={3}>
-						<div slot="content">Inhalt Accordion Tab 3</div>
+					<KolAccordion _label="Überschrift Level 3" _level={3}>
+						<div slot="">Inhalt Accordion Tab 3</div>
 					</KolAccordion>
-					<KolAccordion _heading="Überschrift Level 4" _level={4}>
-						<div slot="content">Inhalt Accordion Tab 4</div>
+					<KolAccordion _label="Überschrift Level 4" _level={4}>
+						<div slot="">Inhalt Accordion Tab 4</div>
 					</KolAccordion>
-					<KolAccordion _heading="Überschrift Level 5" _level={5}>
-						<div slot="content">Inhalt Accordion Tab 5</div>
+					<KolAccordion _label="Überschrift Level 5" _level={5}>
+						<div slot="">Inhalt Accordion Tab 5</div>
 					</KolAccordion>
-					<KolAccordion _heading="Überschrift Level 6" _level={6}>
-						<div slot="content">Inhalt Accordion Tab 6</div>
+					<KolAccordion _label="Überschrift Level 6" _level={6}>
+						<div slot="">Inhalt Accordion Tab 6</div>
 					</KolAccordion>
 				</div>
 			</KolCard> */}
-			<KolCard className="col-span-2" _heading="Abbreviation and Progress" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
+			<KolCard className="col-span-2" _label="Abbreviation and Progress" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
 					<p>
 						Ich bin eine{' '}
-						<KolAbbr _title="Ausführliche Beschreibung" _tooltipAlign="top">
+						<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="top">
 							ABB
 						</KolAbbr>{' '}
 						mit Tooltip oben
 					</p>
 					<p>
 						Ich bin eine{' '}
-						<KolAbbr _title="Ausführliche Beschreibung" _tooltipAlign="right">
+						<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="right">
 							ABB
 						</KolAbbr>{' '}
 						mit Tooltip rechts
 					</p>
 					<p>
 						Ich bin eine{' '}
-						<KolAbbr _title="Ausführliche Beschreibung" _tooltipAlign="bottom">
+						<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="bottom">
 							ABB
 						</KolAbbr>{' '}
 						mit Tooltip unten
 					</p>
 					<p>
 						Ich bin eine{' '}
-						<KolAbbr _title="Ausführliche Beschreibung" _tooltipAlign="left">
+						<KolAbbr _label="Ausführliche Beschreibung" _tooltipAlign="left">
 							ABB
 						</KolAbbr>{' '}
 						mit Tooltip links
@@ -780,9 +769,9 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _heading="Button, LinkButton and Tab" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
-					<KolTabs _ariaLabel="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
+			<KolCard className="col-span-3" _label="Button, LinkButton and Tab" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
+					<KolTabs _label="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 						<div className="grid gap-2 py-2">
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
@@ -813,37 +802,37 @@ export const HandoutBasic: FC = () => (
 						<div className="grid gap-2 py-2">
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
 								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
 								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
 								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
 								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _label="ghost" _variant="ghost"></KolLinkButton>
+								<KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
 								<KolLinkButton _href="#" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 							</div>
 						</div>
 					</KolTabs>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _heading="Accordion, Link and ButtonLink" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
-					<KolAccordion _heading="Links" _level={3} _open>
-						<div className="grid gap-2" slot="content">
+			<KolCard className="col-span-2" _label="Accordion, Link and ButtonLink" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
+					<KolAccordion _label="Links" _level={3} _open>
+						<div className="grid gap-2" slot="">
 							<KolLink _href="#" _label="Linktext"></KolLink>
 							<KolLink _href="#" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
 							<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
@@ -851,20 +840,20 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolLink _href="#" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
 							</p>
-							<KolLink _ariaLabel="Zurück zur Startseite" _href="#" _label="">
+							<KolLink _href="#" _label="">
 								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
 							</KolLink>
 						</div>
 					</KolAccordion>
-					<KolAccordion _heading="ButtonLinks" _level={3}>
-						<div className="grid gap-2" slot="content">
+					<KolAccordion _label="ButtonLinks" _level={3}>
+						<div className="grid gap-2" slot="">
 							<KolButtonLink _label="Linktext"></KolButtonLink>
 							<KolButtonLink _icons="codicon codicon-home" _label="Linktext mit Icon"></KolButtonLink>
 							<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolButtonLink>
 							<p>
 								Ich bin ein <KolButtonLink _label="Link"></KolButtonLink> im Fließtext.
 							</p>
-							<KolButtonLink _ariaLabel="Zurück zur Startseite" _label="">
+							<KolButtonLink _label="">
 								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
 							</KolButtonLink>
 							<KolButtonLink
@@ -880,28 +869,28 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _heading="Alert" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
-					<KolAlert _heading="Default message" _type="default">
+			<KolCard className="col-span-3" _label="Alert" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
+					<KolAlert _label="Default message" _type="default">
 						This is the text of the alert.
 					</KolAlert>
 					<KolAlert _type="success">Success message text</KolAlert>
 					<KolAlert _type="error" _hasCloser>
 						This is a error message text.
 					</KolAlert>
-					<KolAlert _heading="Info card" _type="info" _variant="card">
+					<KolAlert _label="Info card" _type="info" _variant="card">
 						This is the text of the alert.
 					</KolAlert>
-					<KolAlert _heading="Warning card" _type="warning" _hasCloser _variant="card">
+					<KolAlert _label="Warning card" _type="warning" _hasCloser _variant="card">
 						This is the text of the alert.
 					</KolAlert>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _heading="Nav and Breadcrumb" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
+			<KolCard className="col-span-2" _label="Nav and Breadcrumb" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
 					<div>
 						<KolNav
-							_ariaLabel="Main navigation"
+							_label="Main navigation"
 							_links={[
 								{
 									_label: 'Homepage',
@@ -952,10 +941,10 @@ export const HandoutBasic: FC = () => (
 						/>
 					</div>
 					{/* <KolSkipNav></KolSkipNav> */}
-					{/* <KolLinkGroup></KolLinkGroup> */}
+					{/* <KolLinkGroup _label=""></KolLinkGroup> */}
 					<div>
 						<KolBreadcrumb
-							_ariaLabel="Breadcrumb aus Text-Links"
+							_label="Breadcrumb aus Text-Links"
 							_links={[
 								{ _label: 'Startseite', _href: '#/' },
 								{ _label: 'Unterseite der Startseite', _href: '#/unterseite' },
@@ -968,44 +957,36 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-5" _heading="Input" _level={2}>
-				<KolForm slot="content">
+			<KolCard className="col-span-5" _label="Input" _level={2}>
+				<KolForm slot="">
 					<div className="grid gap-4 grid-cols-3 p-2">
-						<KolInputColor>Farbe</KolInputColor>
-						<KolInputFile>Datei hochladen</KolInputFile>
-						<KolInputNumber>Zahleneingabe</KolInputNumber>
-						<KolInputDate _type="date">Datum</KolInputDate>
-						<KolInputEmail _icons="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched>
-							E-Mail-Adresse
-						</KolInputEmail>
-						<KolInputText _hint="Ich bin ein Hinweis.">Vorname</KolInputText>
-						<KolInputPassword>Passwort</KolInputPassword>
-						<KolSelect _list="[{'label':'Herr','value':0},{'label':'Frau','value':1}]">Stimmung</KolSelect>
-						<KolInputRange _min={0} _max={50} _value={25}>
-							Schieberegler
-						</KolInputRange>
-						<KolInputRadio className="herr-frau" _list="[{'label':'Herr','value':0},{'label':'Frau','value':1}]" _value="1">
-							Anrede
-						</KolInputRadio>
+						<KolInputColor _label={`Farbe`} />
+						<KolInputFile _label={`Datei hochladen`} />
+						<KolInputNumber _label={`Zahleneingabe`} />
+						<KolInputDate _type="date" _label={`Datum`} />
+						<KolInputEmail _icons="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched _label={`E-Mail-Adresse`} />
+						<KolInputText _hint="Ich bin ein Hinweis." _label={`Vorname`} />
+						<KolInputPassword _label={`Passwort`} />
+						<KolSelect _options="[{'label':'Herr','value':0},{'label':'Frau','value':1}]" _label={`Stimmung`} />
+						<KolInputRange _min={0} _max={50} _value={25} _label={`Schieberegler`} />
+						<KolInputRadio className="herr-frau" _options="[{'label':'Herr','value':0},{'label':'Frau','value':1}]" _value="1" _label={`Anrede`} />
 						<div className="grid gap-4">
-							<KolInputRadio _orientation="horizontal" _list="[{'label':'Herr','value':0},{'label':'Frau','value':1}]" _value="0">
-								Anrede
-							</KolInputRadio>
-							<KolInputCheckbox _variant="checkbox">
-								Ich akzeptiere die <KolAbbr _title="Allgemeine Geschäftsbedingungen">AGB</KolAbbr>.
+							<KolInputRadio _orientation="horizontal" _options="[{'label':'Herr','value':0},{'label':'Frau','value':1}]" _value="0" _label={`Anrede`} />
+							<KolInputCheckbox _label="">
+								Ich akzeptiere die <KolAbbr _label="Allgemeine Geschäftsbedingungen">AGB</KolAbbr>.
 							</KolInputCheckbox>
 						</div>
-						<KolTextarea _rows={4}>Textarea</KolTextarea>
+						<KolTextarea _rows={4} _label={`Textarea`} />
 					</div>
 				</KolForm>
 			</KolCard>
-			<KolCard className="col-span-5" _heading="Table with Pagination" _level={2}>
-				<div slot="content" className="grid gap-2 p-2">
-					<KolTable _caption="Tabelle" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
+			<KolCard className="col-span-5" _label="Table with Pagination" _level={2}>
+				<div slot="" className="grid gap-2 p-2">
+					<KolTable _label="Tabelle" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
 				</div>
 			</KolCard>
 		</div>
-		<KolVersion _version="5.0.2-test.2"></KolVersion>
+		<KolVersion _label="5.0.2-test.2"></KolVersion>
 		{/* <KolImage _src="assets/images/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}

package/src/components/icon/basic.tsx

@@ -5,12 +5,12 @@ import { FC } from 'react';
 
 export const IconBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolIcon _ariaLabel="" _icons="codicon codicon-home" />
+		<KolIcon _label="" _icons="codicon codicon-home" />
 		<KolIcon
 			style={{
 				color: 'red',
 			}}
-			_ariaLabel=""
+			_label=""
 			_icons="codicon codicon-home"
 		/>
 	</div>

package/src/components/input-email/partials/cases.tsx

@@ -13,7 +13,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				{...props}
 				ref={ref}
 				_placeholder="elke@mustermann.de"
-				_list="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
+				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (Liste)"
 				_error={ERROR_MSG}
 				_touched

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

@@ -6,4 +6,4 @@ const links = [
 	{ _label: 'Link 2', _href: 'https://www.w3.org' },
 	{ _label: 'Link 3', _href: 'https://www.w3.org' },
 ];
-export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} />;
+export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} _label="" />;

package/src/components/link-group/horizontal.tsx

@@ -6,4 +6,4 @@ const links = [
 	{ _label: 'Link 2', _href: 'https://www.w3.org' },
 	{ _label: 'Link 3', _href: 'https://www.w3.org' },
 ];
-export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" />;
+export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" _label="" />;

package/src/components/modal/basic.tsx

@@ -6,9 +6,9 @@ export const ModalBasic: FC = () => {
 
 	return (
 		<div>
-			<KolModal _ariaLabel="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
-					<div slot="content">
+			<KolModal _label="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
+				<KolCard _label="Ich bin ein Modal" style={{ width: '100%' }}>
+					<div>
 						<KolButton
 							_label="Schließen"
 							_on={{

package/src/components/nav/active.tsx

@@ -84,5 +84,5 @@ export const NavActive: FC = () => {
 		]);
 	}, []);
 
-	return <KolNav _ariaLabel="Main navigation" _links={links} />;
+	return <KolNav _label="Main navigation" _links={links} />;
 };

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

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const NavAriaCurrent: FC = () => (
 	<KolNav
-		_ariaLabel="Main navigation"
+		_label="Main navigation"
 		_links={[
 			{
 				_label: 'Homepage',

package/src/components/nav/basic.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const NavBasic: FC = () => (
 	<KolNav
-		_ariaLabel="Main navigation"
+		_label="Main navigation"
 		_links={[
 			{
 				_label: 'Homepage',

package/src/components/nav/horizontal.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const NavHorizontal: FC = () => (
 	<KolNav
-		_ariaLabel="Main navigation"
+		_label="Main navigation"
 		_links={[
 			{
 				_label: 'Homepage',

package/src/components/popover/basic.tsx

@@ -28,8 +28,8 @@ export const PopoverBasic: FC = () => {
 			</KolPopover>
 			<KolButton _label="PR starten" _icons="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
 			<KolPopover _show={login}>
-				<KolInputText>Benutzername</KolInputText>
-				<KolInputPassword>Passwort</KolInputPassword>
+				<KolInputText _label={`Benutzername`} />
+				<KolInputPassword _label={`Passwort`} />
 			</KolPopover>
 		</div>
 	);

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

@@ -13,7 +13,7 @@ export const SkipNavBasic: FC = () => (
 			</p>
 		</KolIndentedText>
 		<KolSkipNav
-			_ariaLabel="Versteckte Navigation"
+			_label="Versteckte Navigation"
 			_links={[
 				{
 					_label: 'Zum Anfang',

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

@@ -10,9 +10,6 @@ export const SplitButtonBasic: FC = () => {
 			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request">
 				Drowndown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="schon offen" _show>
-				Dropdown initial sichtbar
-			</KolSplitButton>
 		</div>
 	);
 };

package/src/components/table/badge-size.tsx

@@ -48,4 +48,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

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

@@ -45,4 +45,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableRenderCell: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/sort-date.tsx

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTable: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortTable: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/version/basic.tsx

@@ -3,4 +3,4 @@ import { KolVersion } from '@public-ui/react';
 
 import { FC } from 'react';
 
-export const VersionBasic: FC = () => <KolVersion _version="1.1.1" />;
+export const VersionBasic: FC = () => <KolVersion _label="1.1.1" />;

package/src/components/version/context.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const VersionContext: FC = () => (
 	<p>
-		<KolVersion _version="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+		<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
 		aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
 		ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
 	</p>

package/dist/1159.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1159.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1159],{1159:(i,t,o)=>{o.r(t),o.d(t,{kol_icon_icofont:()=>r});var s=o(8269);const r=class{constructor(i){(0,s.r)(this,i),this._ariaLabel=void 0,this._icon=void 0,this._part=void 0}render(){return(0,s.h)("kol-icon",{exportparts:"icon"+("string"==typeof this._part?`,${this._part}`:""),_ariaLabel:this._ariaLabel,_icon:"string"==typeof this._icon?`icofont-${this._icon}`:void 0})}}}}]);

package/dist/1531.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1531.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1531],{4487:(e,t,r)=>{r.d(t,{a:()=>s,b:()=>g,c:()=>v,d:()=>l,e:()=>c,f:()=>h,g:()=>p,h:()=>u,u:()=>b});var n=r(817);const o=new Set,s=(e,t)=>{(!1===o.has(e)||(null==t?void 0:t.force))&&(o.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",overwriteStyle:"; background-color: #09f"}))},i=new Set,c=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",overwriteStyle:"; background-color: #f00"}))},a=new Set,l=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},u=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},d=new Set,h=(e,t=!1,r)=>{(!1===d.has(e)||(null==r?void 0:r.force))&&(d.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==r?void 0:r.details)||[]),{classifier:"🌟 feature",overwriteStyle:"; background-color: #309"}))};l("Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!");const f=new Set,b=(e,t)=>{(!1===f.has(e)||(null==t?void 0:t.force))&&(f.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",overwriteStyle:"; background-color: #060;"}))},p=()=>{s('"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},g=e=>{"string"==typeof e&&""!==e||s("Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},v=(e,t=8)=>{t>7&&b(`[${e}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.\n\nLinks:\n- https://de.ryte.com/wiki/Millersche_Zahl\n- https://de.wikipedia.org/wiki/Millersche_Zahl`)}},1531:(e,t,r)=>{r.d(t,{K:()=>Me,a:()=>ie,b:()=>Q,c:()=>le,d:()=>ce,e:()=>ae,f:()=>re,g:()=>te,h:()=>Oe,i:()=>ve,j:()=>Ae,k:()=>ye,l:()=>me,m:()=>fe,n:()=>Le,o:()=>ee,p:()=>ge,q:()=>_e,r:()=>l,s:()=>ne,t:()=>we,u:()=>Ne,v:()=>be,w:()=>se});var n=r(4487),o=r(817),s=r(4913);const i=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},c=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;i(r,t.querySelectorAll(e));const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;i(r,c(e,"object"==typeof o&&null!==o?o:n[t]))}return Array.from(r)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},a=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let r=t.querySelector(e);if(null===r){const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;if(r=a(e,"object"==typeof o&&null!==o?o:n[t]),null!==r)break}}return r}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")};var l=d,u=d;function d(e){var t=h(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function h(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),r=t.length;if(3==r||4==r){var n=b(t[0]),o=b(t[1]),s=b(t[2]),i=3==r?255:b(t[3]);if(isNaN(n)||isNaN(o)||isNaN(s)||isNaN(i))return;return[n,o,s,i]}}(e)||function(e){var t=e.replace(/^#/,""),r=t.length;if(6==r||8==r){var n=b(t.slice(0,2)),o=b(t.slice(2,4)),s=b(t.slice(4,6)),i=6==r?255:b(t.slice(6,8));if(isNaN(n)||isNaN(o)||isNaN(s)||isNaN(i))return;return[n,o,s,i]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=p(t[0],!0),n=p(t[1],!0),o=p(t[2],!0);if(-1!=r&&-1!=n&&-1!=o)return[r,n,o,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=p(t[0],!0),n=p(t[1],!0),o=p(t[2],!0),s=p(255*t[3]);if(-1!=r&&-1!=n&&-1!=o&&-1!=s)return[r,n,o,s]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=p(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=p(null!=e.g?e.g:null!=e.green?e.green:0,!0),n=p(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),o=p(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=r&&-1!=n&&-1!=o)return[t,r,n,o]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=p(e[0],!0),r=p(e[1],!0),n=p(e[2],!0),o=p(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=r&&-1!=n&&-1!=o)return[t,r,n,o]}}(e)||function(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}(e)||[0,0,0,255];var t}function f(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function b(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function p(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function g(e){return"function"==typeof e}function v(e){const t=e((e=>{Error.call(e),e.stack=(new Error).stack}));return t.prototype=Object.create(Error.prototype),t.prototype.constructor=t,t}l.arr=u,l.obj=function(e){var t=h(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},l.css=function(e){var t=h(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"},l.hex=function(e){3==(s=h(e)).length&&s.push(255);var t=255==s[3],r=f(s[0]),n=f(s[1]),o=f(s[2]),s=f(Math.round(s[3])),i=function(e,t,r,n){var o=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=o.indexOf(e)&&-1!=o.indexOf(t)&&-1!=o.indexOf(r)&&-1!=o.indexOf(n)}(r,n,o,s);return t?i?"#"+r.charAt(0)+n.charAt(0)+o.charAt(0):"#"+r+n+o:i?"#"+r.charAt(0)+n.charAt(0)+o.charAt(0)+s.charAt(0):"#"+r+n+o+s},l.num=function(e){var t=h(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0};const m=v((e=>function(t){e(this),this.message=t?`${t.length} errors occurred during unsubscription:\n${t.map(((e,t)=>`${t+1}) ${e.toString()}`)).join("\n  ")}`:"",this.name="UnsubscriptionError",this.errors=t}));function y(e,t){if(e){const r=e.indexOf(t);0<=r&&e.splice(r,1)}}class w{constructor(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}unsubscribe(){let e;if(!this.closed){this.closed=!0;const{_parentage:t}=this;if(t)if(this._parentage=null,Array.isArray(t))for(const e of t)e.remove(this);else t.remove(this);const{initialTeardown:r}=this;if(g(r))try{r()}catch(t){e=t instanceof m?t.errors:[t]}const{_finalizers:n}=this;if(n){this._finalizers=null;for(const t of n)try{x(t)}catch(t){e=null!=e?e:[],t instanceof m?e=[...e,...t.errors]:e.push(t)}}if(e)throw new m(e)}}add(e){var t;if(e&&e!==this)if(this.closed)x(e);else{if(e instanceof w){if(e.closed||e._hasParent(this))return;e._addParent(this)}(this._finalizers=null!==(t=this._finalizers)&&void 0!==t?t:[]).push(e)}}_hasParent(e){const{_parentage:t}=this;return t===e||Array.isArray(t)&&t.includes(e)}_addParent(e){const{_parentage:t}=this;this._parentage=Array.isArray(t)?(t.push(e),t):t?[t,e]:e}_removeParent(e){const{_parentage:t}=this;t===e?this._parentage=null:Array.isArray(t)&&y(t,e)}remove(e){const{_finalizers:t}=this;t&&y(t,e),e instanceof w&&e._removeParent(this)}}w.EMPTY=(()=>{const e=new w;return e.closed=!0,e})();const S=w.EMPTY;function k(e){return e instanceof w||e&&"closed"in e&&g(e.remove)&&g(e.add)&&g(e.unsubscribe)}function x(e){g(e)?e():e.unsubscribe()}const _={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},N={setTimeout(e,t,...r){const{delegate:n}=N;return(null==n?void 0:n.setTimeout)?n.setTimeout(e,t,...r):setTimeout(e,t,...r)},clearTimeout(e){const{delegate:t}=N;return((null==t?void 0:t.clearTimeout)||clearTimeout)(e)},delegate:void 0};function E(){}const A=L("C",void 0,void 0);function L(e,t,r){return{kind:e,value:t,error:r}}function O(e){e()}class M extends w{constructor(e){super(),this.isStopped=!1,e?(this.destination=e,k(e)&&e.add(this)):this.destination=z}static create(e,t,r){return new H(e,t,r)}next(e){this.isStopped?D(function(e){return L("N",e,void 0)}(e),this):this._next(e)}error(e){this.isStopped?D(L("E",void 0,e),this):(this.isStopped=!0,this._error(e))}complete(){this.isStopped?D(A,this):(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe(),this.destination=null)}_next(e){this.destination.next(e)}_error(e){try{this.destination.error(e)}finally{this.unsubscribe()}}_complete(){try{this.destination.complete()}finally{this.unsubscribe()}}}const T=Function.prototype.bind;function C(e,t){return T.call(e,t)}class P{constructor(e){this.partialObserver=e}next(e){const{partialObserver:t}=this;if(t.next)try{t.next(e)}catch(e){j(e)}}error(e){const{partialObserver:t}=this;if(t.error)try{t.error(e)}catch(e){j(e)}else j(e)}complete(){const{partialObserver:e}=this;if(e.complete)try{e.complete()}catch(e){j(e)}}}class H extends M{constructor(e,t,r){let n;if(super(),g(e)||!e)n={next:null!=e?e:void 0,error:null!=t?t:void 0,complete:null!=r?r:void 0};else{let t;this&&_.useDeprecatedNextContext?(t=Object.create(e),t.unsubscribe=()=>this.unsubscribe(),n={next:e.next&&C(e.next,t),error:e.error&&C(e.error,t),complete:e.complete&&C(e.complete,t)}):n=e}this.destination=new P(n)}}function j(e){var t;t=e,N.setTimeout((()=>{const{onUnhandledError:e}=_;if(!e)throw t;e(t)}))}function D(e,t){const{onStoppedNotification:r}=_;r&&N.setTimeout((()=>r(e,t)))}const z={closed:!0,next:E,error:function(e){throw e},complete:E},$="function"==typeof Symbol&&Symbol.observable||"@@observable";function q(e){return e}class I{constructor(e){e&&(this._subscribe=e)}lift(e){const t=new I;return t.source=this,t.operator=e,t}subscribe(e,t,r){const n=(o=e)&&o instanceof M||function(e){return e&&g(e.next)&&g(e.error)&&g(e.complete)}(o)&&k(o)?e:new H(e,t,r);var o;return O((()=>{const{operator:e,source:t}=this;n.add(e?e.call(n,t):t?this._subscribe(n):this._trySubscribe(n))})),n}_trySubscribe(e){try{return this._subscribe(e)}catch(t){e.error(t)}}forEach(e,t){return new(t=R(t))(((t,r)=>{const n=new H({next:t=>{try{e(t)}catch(e){r(e),n.unsubscribe()}},error:r,complete:t});this.subscribe(n)}))}_subscribe(e){var t;return null===(t=this.source)||void 0===t?void 0:t.subscribe(e)}[$](){return this}pipe(...e){return(0===(t=e).length?q:1===t.length?t[0]:function(e){return t.reduce(((e,t)=>t(e)),e)})(this);var t}toPromise(e){return new(e=R(e))(((e,t)=>{let r;this.subscribe((e=>r=e),(e=>t(e)),(()=>e(r)))}))}}function R(e){var t;return null!==(t=null!=e?e:_.Promise)&&void 0!==t?t:Promise}I.create=e=>new I(e);const B=v((e=>function(){e(this),this.name="ObjectUnsubscribedError",this.message="object unsubscribed"}));class J extends I{constructor(){super(),this.closed=!1,this.currentObservers=null,this.observers=[],this.isStopped=!1,this.hasError=!1,this.thrownError=null}lift(e){const t=new W(this,this);return t.operator=e,t}_throwIfClosed(){if(this.closed)throw new B}next(e){O((()=>{if(this._throwIfClosed(),!this.isStopped){this.currentObservers||(this.currentObservers=Array.from(this.observers));for(const t of this.currentObservers)t.next(e)}}))}error(e){O((()=>{if(this._throwIfClosed(),!this.isStopped){this.hasError=this.isStopped=!0,this.thrownError=e;const{observers:t}=this;for(;t.length;)t.shift().error(e)}}))}complete(){O((()=>{if(this._throwIfClosed(),!this.isStopped){this.isStopped=!0;const{observers:e}=this;for(;e.length;)e.shift().complete()}}))}unsubscribe(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null}get observed(){var e;return(null===(e=this.observers)||void 0===e?void 0:e.length)>0}_trySubscribe(e){return this._throwIfClosed(),super._trySubscribe(e)}_subscribe(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)}_innerSubscribe(e){const{hasError:t,isStopped:r,observers:n}=this;return t||r?S:(this.currentObservers=null,n.push(e),new w((()=>{this.currentObservers=null,y(n,e)})))}_checkFinalizedStatuses(e){const{hasError:t,thrownError:r,isStopped:n}=this;t?e.error(r):n&&e.complete()}asObservable(){const e=new I;return e.source=this,e}}J.create=(e,t)=>new W(e,t);class W extends J{constructor(e,t){super(),this.destination=e,this.source=t}next(e){var t,r;null===(r=null===(t=this.destination)||void 0===t?void 0:t.next)||void 0===r||r.call(t,e)}error(e){var t,r;null===(r=null===(t=this.destination)||void 0===t?void 0:t.error)||void 0===r||r.call(t,e)}complete(){var e,t;null===(t=null===(e=this.destination)||void 0===e?void 0:e.complete)||void 0===t||t.call(e)}_subscribe(e){var t,r;return null!==(r=null===(t=this.source)||void 0===t?void 0:t.subscribe(e))&&void 0!==r?r:S}}var F=.2126,U=.7152,K=.0722,Y=1/12.92;function Z(e){return Math.pow((e+.055)/1.055,2.4)}function V(e){var t=e[0]/255,r=e[1]/255,n=e[2]/255,o=t<=.03928?t*Y:Z(t),s=r<=.03928?r*Y:Z(r),i=n<=.03928?n*Y:Z(n);return o*F+s*U+i*K}function G(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var r=parseInt(e,16);return[r>>16,r>>8&255,255&r,t]}function Q(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(V(e),V(t))}(G(e),G(t))}const X=/\[object Object\]/,ee=(e,t)=>{"string"==typeof e&&X.test(e)||t()},te=(e,t)=>{"string"==typeof e&&""===e||t()},re=(e,t)=>{(0,o.b)()&&(o.L.debug([e,t]),o.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},ne=(e,t,r,n={})=>{var o,s;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextState.get(t)!==r&&(e.nextHooks.get(t)instanceof Map==0&&e.nextHooks.set(t,new Map),"function"==typeof n.afterPatch&&(null===(o=e.nextHooks.get(t))||void 0===o||o.set("afterPatch",n.afterPatch)),"function"==typeof n.beforePatch&&(null===(s=e.nextHooks.get(t))||void 0===s||s.set("beforePatch",n.beforePatch)),e.nextState.set(t,r),(e=>{var t,r,n;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,r)=>{var n;const o=t.get("beforePatch");"function"==typeof o&&o(null===(n=e.nextState)||void 0===n?void 0:n.get(r),e.nextState,e,r)})),(null===(r=e.nextState)||void 0===r?void 0:r.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(n=e.nextHooks)||void 0===n||n.forEach(((t,r)=>{const n=t.get("afterPatch");"function"==typeof n&&n(e.state[r],e.state,e,r)}))),delete e.nextHooks})(e))},oe=(e,t,r,o)=>{(0,n.d)(`[${e.constructor.name}] Der Property-Wert (${r}) für '${t}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(o).join(", ")}`)};function se(e,t,r,n,o,s={}){r(o)?ne(e,t,o,s.hooks):null!=o||s.required?(s.required||n.add(null),oe(e,t,o,n)):ne(e,t,s.defaultValue,s.hooks)}const ie=(e,t,r,n)=>{se(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,n)},ce=(e,t,r,n={})=>{const o="number"==typeof n.minLength?null==n?void 0:n.minLength:0;se(e,t,(e=>"string"==typeof e&&e.length>=o&&(void 0===(null==n?void 0:n.maxLength)||e.length<=n.maxLength)),new Set(["String"]),r,n)},ae=(e,t,r,n)=>{se(e,t,(e=>"number"==typeof e&&(void 0===(null==n?void 0:n.min)||"number"==typeof(null==n?void 0:n.min)&&e>=n.min)&&(void 0===(null==n?void 0:n.max)||"number"==typeof(null==n?void 0:n.max)&&e<=n.max)),new Set(["Number"]),r,n)},le=(e,t,r,n,s=(e=>e==e),i={})=>{te(n,(()=>{ee(n,(()=>{void 0===n&&(n=[]);try{try{n=ge(n)}catch(e){}if(Array.isArray(n)){const c=n.find((e=>!r(e)));void 0===c&&s(n)?ne(e,t,n,i.hooks):ee(c,(()=>{throw o.L.debug(c),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else ee(n,(()=>{throw o.L.debug(n),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){o.L.debug(e)}}))}))},ue=/^(true|false)$/,de=/^-?(0|[1-9]\d*)$/,he=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,fe=e=>{const t=typeof e,r=`${e}`;if("string"==typeof e)if(ue.test(e))e="true"===e;else if(de.test(e))e=parseInt(e);else if(he.test(e))e=parseFloat(e);else if(pe.test(e))try{e=ge(e)}catch(e){}return t!==typeof e&&(0,n.d)(`You have used a stringified property value (${r} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},be=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw o.L.warn(["stringifyJson",e]),o.L.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},pe=/^[{[]/,ge=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(pe.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){o.L.warn(["parseJson",e]),o.L.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},ve=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,me=e=>"string"==typeof e?e:ve(e),ye=(e,t)=>a(e,t||(0,o.g)()),we=(e,t)=>c(e,t||(0,o.g)());let Se=null;const ke=()=>(Se=Se||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,o.g)().body,level:"Fail",score:1},Se),xe=/(\d+, ){3}0\)/,_e=(e,t=ke())=>{const r=getComputedStyle(e),n=xe.test(r.backgroundColor)?t.backgroundColor:l.hex(r.backgroundColor),s=xe.test(r.color)?t.color:l.hex(r.color),i=Q(n,s),c={backgroundColor:n,color:s,domNode:e,level:(a=i,a>=7?"AAA":a>=4.5?"AA":a>=3?"AA Large":"Fail"),score:i};var a;return i<4.5&&o.L.error(["Color-Contrast-Error",{backgroundColor:c.backgroundColor,color:c.color,level:c.level,score:c.score},c.domNode]),c},Ne=(e,t=ke())=>{t.domNode instanceof HTMLElement&&(t=_e(t.domNode,t));const r=t.domNode.querySelector(e);if(null===r){const r=t.domNode.querySelectorAll('[class="hydrated"]');for(let n=0;n<r.length&&(t.domNode=r[n],null===(t=Ne(e,t)).domNode);n++);return t}return _e(r,t)},Ee=(e,t=window)=>{e instanceof HTMLElement?(t.scrollTo({behavior:"smooth",top:e.getBoundingClientRect().top+(0,o.a)().pageYOffset-50}),e.focus()):(0,n.d)("Das HTMLElement ist nicht valide, zu dem gescrollt werden soll.")},Ae=(e,t)=>{if((e instanceof Document||e instanceof HTMLElement||e instanceof ShadowRoot)&&"string"==typeof t){(0,n.d)("Bei der Methode querySelectorAll wurden die Parameter document, selector in selector, document getauscht, da der Parameter selector nicht, allerdings der Parameter document optional sein kann.");const r=`${t}`;t=e,e=r}if("string"==typeof e){const r=ye(e,t);r instanceof HTMLElement?Ee(r):(0,n.d)(`Es konnte kein HTMLElement mit dem Selector (${e}) gefunden werden, zu dem gescrollt werden soll.`)}else(0,n.d)("Der Selector ist nicht valide, zu dem gescrollt werden soll.")};class Le{static queryHtmlElementColors(e,t,r=!1,n=!0){let s=null;if(!0===r||!1===Le.executionLock)if(!1===r&&(Le.cache.clear(),Le.cache.set(t.domNode,t),Le.executionLock=!0,!0===n&&o.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)s=t;else{const r=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)r.add(e[t])}const n=t.domNode;if("function"==typeof n.assignedNodes){const e=n.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&r.add(e[t])}const o=t.domNode.children;for(let e=0;e<o.length;e++)r.add(o[e]);const i=Array.from(r);for(let r=0;r<i.length;r++){let n=Le.cache.get(i[r]);void 0===n&&(n=_e(i[r],t)),Le.cache.set(i[r],n);const o=Le.queryHtmlElementColors(e,n,!0,!1);if(null!==o){s=o;break}}}else o.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===r&&(!0===n&&o.L.debug(`[KoliBriUtils] Color contrast analysis finished (${Le.cache.size} DOM elements are analysed).`),Le.executionLock=!1,Le.cache.clear()),s}}Le.executionLock=!1,Le.cache=new Map;const Oe=new J;class Me{}Me.ariaCurrentSubject=Oe,Me.patchTheme=s.p,Me.patchThemeTag=s.a,Me.querySelector=ye,Me.querySelectorAll=we,Me.scrollByHTMLElement=Ee,Me.scrollBySelector=Ae,Me.stringifyJson=be}}]);

package/dist/1932.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1932.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1932],{1932:(t,e,i)=>{i.r(e),i.d(e,{initialize:()=>s});var l=i(817),r=i(1531);function n(t,e){try{Object.defineProperty(l.K,t,{get:function(){return e}})}catch(e){l.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>l.L.debug(`${t} ${e?"":"not "}activated`),s=()=>{if((0,l.i)(),(0,l.e)()){(0,l.r)(),n("a11yColorContrast",r.q),n("querySelector",r.k),n("querySelectorAll",r.t),n("querySelectorColors",r.u),n("utils",(function(){return r.n})),n("parseJson",r.p),n("stringifyJson",r.v);const t=(0,l.g)().body,e=(0,l.g)().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,l.g)().body.appendChild(e),o("Development mode",(0,l.e)()),o("Experimental mode",(0,l.b)()),o("Color contrast analysis",(0,l.f)()),(0,l.f)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.n.queryHtmlElementColors((0,l.g)().createElement("div"),(0,r.q)(t),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/3059.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3059.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3059],{3734:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(1531),i=o(4487);const s=(0,o(817).b)();class a{constructor(t,e,o){var n,a;if(this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.d)(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(t);this.syncValue(t,n,this.formAssociated),this.syncValue(t,n,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.name=e,s){switch(null===(n=this.host)||void 0===n||n.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(a=this.host)||void 0===a||a.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(s)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.h)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){o&&("select"===this.name?(o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}))):"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value=""))}validateName(t){((t,e,o)=>{(0,n.d)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.d)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(s&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},7940:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>h,v:()=>d});var n=o(1531),i=o(6590),s=o(6737),a=o(4487),l=o(9865),r=o(1087),c=o(3734);const h=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}},d=(t,e,o)=>{(0,n.a)(t,"_hideError",e,o)};class u extends c.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.a)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,n.a)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class p extends u{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){(0,n.d)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,n.a)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,n.a)(this.component,"_disabled",t),!0===t&&(0,a.g)()}validateError(t){(0,n.d)(this.component,"_error",t)}validateHideLabel(t){(0,i.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,a.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.d)(this.component,"_hint",t)}validateId(t){(0,n.d)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,a.d)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,s.a)(this.component,t)}validateOn(t){"object"==typeof t&&(0,n.s)(this.component,"_on",t)}validateSmartButton(t){(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(t){}(0,n.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,r.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,l.s)(t),(0,l.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;(0,l.s)(t),(0,l.t)("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;(0,l.s)(t),(0,l.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,l.s)(t),(0,l.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},3059:(t,e,o)=>{o.d(e,{I:()=>r});var n=o(605),i=o(1531),s=o(2180),a=o(7940);const l=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,s.i)(o.right,1)&&(o.right={icon:o.right}),(0,s.i)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class r extends a.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.o)(t,(()=>{try{t=(0,i.p)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,n.i)(t.left)||(0,s.i)(t.right,1)||(0,n.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},9865:(t,e,o)=>{function n(t){t.stopImmediatePropagation(),t.stopPropagation()}function i(t,e,o){e&&function(t,e,o){const n=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}o.d(e,{s:()=>n,t:()=>i})},6590:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(1531);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},605:(t,e,o)=>{o.d(e,{i:()=>l,v:()=>r,w:()=>c});var n=o(1531),i=o(2180);const s=(t,e,o)=>{(0,i.c)(o)?t[e]=o:(0,i.i)(o,1)&&(t[e]={icon:o})},a=t=>{var e,o,n,a,l,r,c;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(o=t.nextState)||void 0===o?void 0:o.get("_icons"),l=(null===(n=t.nextState)||void 0===n?void 0:n.get("_iconAlign"))||t.state._iconAlign;null===(a=t.nextState)||void 0===a||a.set("_icons",((t,e)=>{let o={};return(0,i.i)(t,1)?o="right"===e?{right:{icon:t}}:{left:{icon:t}}:"object"==typeof t&&null!==t&&(s(o,"top",t.top),s(o,"right",t.right),s(o,"bottom",t.bottom),s(o,"left",t.left)),o})(e,l))}else if(null===(l=t.nextState)||void 0===l?void 0:l.has("_iconAlign")){const e=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icons",{[e]:void 0,[null===(c=t.nextState)||void 0===c?void 0:c.get("_iconAlign")]:t.state._icons[e]})}},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.b)(t.style))&&(0,i.i)(t.icon,1),r=(t,e)=>{(0,n.o)(e,(()=>{try{e=(0,n.p)(e)}catch(t){}(0,n.w)(t,"_icons",(t=>null===t||(0,i.i)(t,1)||"object"==typeof t&&null!==t&&((0,i.i)(t.left,1)||l(t.left)||(0,i.i)(t.right,1)||l(t.right)||(0,i.i)(t.top,1)||l(t.top)||(0,i.i)(t.bottom,1)||l(t.bottom))),new Set(["KoliBriIcon"]),e,{hooks:{beforePatch:(e,o)=>{null===e&&o.set("_icons",{}),a(t)}},required:!0})}))},c=(t,e)=>{(0,n.w)(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),e,{hooks:{beforePatch:()=>{a(t)}}})}},6737:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>r,h:()=>l,v:()=>h});var n=o(4487),i=o(1531);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function l(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function r(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return{hooks:{afterPatch:(e,o,i,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,i,s)),"string"==typeof e&&!1===l(e,3)&&!1===r(e)&&(0,n.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}}}(o))},d=h},1087:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(4487),i=o(1531);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,n.a)("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(t,e)=>{(0,i.e)(t,"_tabIndex",e,s)}}}]);

package/dist/4477.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4477.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4477],{4487:(e,i,t)=>{t.d(i,{a:()=>o,b:()=>p,c:()=>f,d:()=>l,e:()=>a,f:()=>h,g:()=>v,h:()=>u,u:()=>b});var n=t(817);const r=new Set,o=(e,i)=>{(!1===r.has(e)||(null==i?void 0:i.force))&&(r.add(e),n.L.debug([e].concat((null==i?void 0:i.details)||[]),{classifier:"✋ a11y",overwriteStyle:"; background-color: #09f"}))},d=new Set,a=(e,i)=>{(!1===d.has(e)||(null==i?void 0:i.force))&&(d.add(e),n.L.warn([e].concat((null==i?void 0:i.details)||[]),{classifier:"🔥 deprecated",overwriteStyle:"; background-color: #f00"}))},s=new Set,l=(e,i)=>{(!1===s.has(e)||(null==i?void 0:i.force))&&(s.add(e),n.L.debug([e].concat((null==i?void 0:i.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},u=(e,i)=>{(!1===s.has(e)||(null==i?void 0:i.force))&&(s.add(e),n.L.warn([e].concat((null==i?void 0:i.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},c=new Set,h=(e,i=!1,t)=>{(!1===c.has(e)||(null==t?void 0:t.force))&&(c.add(e),e+=!0===i?" ✅":"",n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"🌟 feature",overwriteStyle:"; background-color: #309"}))};l("Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!");const _=new Set,b=(e,i)=>{(!1===_.has(e)||(null==i?void 0:i.force))&&(_.add(e),n.L.debug([e].concat((null==i?void 0:i.details)||[]),{classifier:"📑 ui/ux",overwriteStyle:"; background-color: #060;"}))},v=()=>{o('"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},p=e=>{"string"==typeof e&&""!==e||o("Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},f=(e,i=8)=>{i>7&&b(`[${e}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.\n\nLinks:\n- https://de.ryte.com/wiki/Millersche_Zahl\n- https://de.wikipedia.org/wiki/Millersche_Zahl`)}},4477:(e,i,t)=>{t.r(i),t.d(i,{kol_input_radio_group:()=>o});var n=t(8269),r=t(4487);const o=class{constructor(e){(0,n.r)(this,e),this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=!1,this._tabIndex=void 0,this._touched=!1,this._value=void 0}render(){return(0,r.e)("[KolInputRadioGroup] Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Wir empfehlen den Tag <kol-input-radio> statt <kol-input-radio-group> zu verwenden.\n\nMit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek entfernt."),(0,n.h)("kol-input-radio",{_accessKey:this._accessKey,_disabled:this._disabled,_error:this._error,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_list:this._list,_name:this._name,_on:this._on,_orientation:this._orientation,_required:this._required,_tabIndex:this._tabIndex,_touched:this._touched,_value:this._value},(0,n.h)("slot",null))}}}}]);