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

package/src/components/handout/basic.tsx

@@ -264,62 +264,56 @@ export const HandoutBasic: FC = () => {
 						<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" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-left" _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
-									<KolButton
-										_disabled
-										_icons={{ right: 'codicon codicon-arrow-right' }}
-										_label="secondary"
-										_variant="secondary"
-										_on={dummyEventHandler}
-									></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-right" _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-up" _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-down" _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 									<KolButton _label="ghost" _variant="ghost"></KolButton>
 									<KolButton _disabled _label="ghost" _variant="ghost"></KolButton>
-									<KolButton _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
 								</div>
 							</div>
 							<div className="grid gap-2 py-2">
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-left" _label="primary" _variant="primary"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-right" _label="secondary" _variant="secondary"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-up" _label="danger" _variant="danger"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-down" _label="normal" _variant="normal"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 									<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
 									<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 								</div>
 							</div>
 						</KolTabs>
@@ -330,8 +324,8 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="Links" _level={3} _open>
 							<div className="grid gap-2" slot="">
 								<KolLink _href="#/back-page" _label="Link text"></KolLink>
-								<KolLink _href="#/back-page" _icons="codicon codicon-home" _label="Link text with icon"></KolLink>
-								<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link text with icon only"></KolLink>
+								<KolLink _href="#/back-page" _icons="fa-solid fa-house" _label="Link text with icon"></KolLink>
+								<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link text with icon only"></KolLink>
 								<KolLink _href="/" _label="Visited link"></KolLink>
 								<p>
 									I am a <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> in the running text.
@@ -341,17 +335,17 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="ButtonLinks" _level={3}>
 							<div className="grid gap-2" slot="">
 								<KolButtonLink _label="Link text"></KolButtonLink>
-								<KolButtonLink _icons="codicon codicon-home" _label="Link text with icon"></KolButtonLink>
-								<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="Link text with icon only"></KolButtonLink>
+								<KolButtonLink _icons="fa-solid fa-house" _label="Link text with icon"></KolButtonLink>
+								<KolButtonLink _icons="fa-solid fa-house" _hideLabel _label="Link text with icon only"></KolButtonLink>
 								<p>
 									I am a <KolButtonLink _label="Link"></KolButtonLink> in the running text.
 								</p>
 								<KolButtonLink
 									_icons={{
-										left: 'codicon codicon-arrow-left',
-										right: 'codicon codicon-arrow-right',
-										top: 'codicon codicon-arrow-up',
-										bottom: 'codicon codicon-arrow-down',
+										left: 'kolicon-chevron-left',
+										right: 'kolicon-chevron-right',
+										top: 'kolicon-chevron-up',
+										bottom: 'kolicon-chevron-down',
 									}}
 									_label="Icons"
 								></KolButtonLink>
@@ -384,48 +378,48 @@ export const HandoutBasic: FC = () => {
 								_links={[
 									{
 										_label: 'Homepage',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_href: '#/back-page',
 									},
 									{
 										_label: '2 Navigation point',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_href: '#/back-page',
 									},
 									{
 										_active: true,
 										_label: '3 Navigation point',
 										_href: '#/back-page',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_children: [
 											{
 												_label: '3.1 Navigation point',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_href: '#/back-page',
 											},
 											{
 												_label: '3.2 External navigation point',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_href: '#/back-page',
 												_target: '_blank',
 											},
 											{
 												_label: '3.3 Navigation point',
 												_href: '#/back-page',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_children: [
 													{
 														_active: true,
 														_label: '3.3.1 Navigation point (active)',
-														_icons: 'codicon codicon-home',
+														_icons: 'fa-solid fa-house',
 														_href: '#/back-page',
 													},
-													{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
+													{ _label: '3.3.2 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 												],
 											},
 										],
 									},
-									{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
+									{ _label: '3 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 								]}
 								_hasCompactButton
 							/>
@@ -454,7 +448,7 @@ export const HandoutBasic: FC = () => {
 							<KolInputNumber _label={`Number input`} />
 							<KolInputDate _type="date" _label={`Date`} />
 							<KolInputEmail
-								_icons="{'left': 'codicon codicon-home'}"
+								_icons="{'left': 'fa-solid fa-house'}"
 								_msg={{ _type: 'error', _description: 'Test of an error message' }}
 								_touched
 								_label={`E-mail address`}

package/src/components/icon/basic.tsx

@@ -12,10 +12,10 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block" _label="" _icons="codicon codicon-home" />
-			<KolIcon className="block" _label="" _icons="codicon codicon-compass-active" />
-			<KolIcon className="block" _label="" _icons="codicon codicon-debug" />
-			<KolIcon className="block" _label="" _icons="codicon codicon-squirrel" />
+			<KolIcon className="block" _label="" _icons="kolicon-alert-info" />
+			<KolIcon className="block" _label="" _icons="kolicon-kolibri" />
+			<KolIcon className="block" _label="" _icons="fa-solid fa-house" />
+			<KolIcon className="block" _label="" _icons="fa-solid fa-heart" />
 
 			<KolIcon
 				className="block w-[1em] h-[1em]"
@@ -23,7 +23,7 @@ export const IconBasic: FC = () => (
 					color: 'red',
 				}}
 				_label=""
-				_icons="codicon codicon-home"
+				_icons="fa-solid fa-house"
 			/>
 		</div>
 	</>

package/src/components/icon/font-awesome.tsx

@@ -16,8 +16,8 @@ export const IconFontAwesome: FC = () => (
 			<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
 			<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
 			<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
-			<KolIcon className="block" _label="" _icons="fa-regular fa-heart"></KolIcon>
-			<KolIcon className="block" _label="" _icons="fa-regular fa-thumbs-up"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-heart"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-thumbs-up"></KolIcon>
 			<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
 
 			<KolInputText

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

@@ -11,13 +11,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _label="Not selected" _value={false} _required />
 			<KolInputCheckbox {...props} _label="Indeterminate" _value={null} _indeterminate />
 			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Selected" _tooltipAlign="right" _value={true} />
-			<KolInputCheckbox
-				{...props}
-				_checked
-				_icons={{ unchecked: 'codicon codicon-close' }}
-				_label={'With a very long label and upheavals '.repeat(5)}
-				_value={true}
-			/>
+			<KolInputCheckbox {...props} _checked _icons={{ unchecked: 'ckolicon-cross' }} _label={'With a very long label and upheavals '.repeat(5)} _value={true} />
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />

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

@@ -12,7 +12,7 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 					{...props}
 					_msg={{ _type: 'error', _description: ERROR_MSG }}
 					_icons={{
-						left: 'codicon codicon-symbol-color',
+						left: 'fa-solid fa-palette',
 					}}
 					_label="Color (Black background test)"
 					_value="#f08080"
@@ -25,9 +25,10 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
 				_touched
 			/>
-			<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Color" />
-			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" />
-			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" />
+			<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint message.' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Color" _touched />
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
 			<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>

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

@@ -21,9 +21,10 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 				_required
 				_touched
 			/>
-			<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Color" />
-			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" />
-			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" />
+			<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Date" _touched />
 			<KolInputDate {...props} _type="month" _label="Month" _required />
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
 			<KolInputDate {...props} _type="time" _label="Time (standard)" _required />

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

@@ -22,16 +22,17 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_touched
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 			/>
-			<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" />
-			<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" />
-			<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" />
+			<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" _touched />
+			<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" _touched />
+			<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" _touched />
+			<KolInputEmail {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="E-Mail" _touched />
 			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
 			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
 			<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />

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

@@ -13,7 +13,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 					_label="Upload file (Black background test)"
 					_icons={{
 						left: {
-							icon: 'codicon codicon-save',
+							icon: 'fa-solid fa-floppy-disk',
 						},
 					}}
 					_touched
@@ -27,14 +27,15 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				_label="Upload file (Black background test)"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-save',
+						icon: 'fa-solid fa-floppy-disk',
 					},
 				}}
 				_touched
 			/>
-			<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" />
-			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" />
-			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" />
+			<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Upload file" _touched />
 			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
 			<KolInputFile {...props} _label="With access key" _accessKey="c" />

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

@@ -20,10 +20,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 				_label="Number input"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-snake',
+						icon: 'kolicon-kolibri',
 					},
 					right: {
-						icon: 'codicon codicon-squirrel',
+						icon: 'kolicon-kolibri',
 					},
 				}}
 			/>

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

@@ -21,17 +21,18 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				_label="Passwort"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 				_touched
 			/>
-			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Password" />
-			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Password" />
-			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'success', _description: 'Success message' }} _label="Password" />
+			<KolInputPassword {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Passwort" _touched />
 			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />

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

@@ -16,10 +16,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 					_label="Slider (Black background test)"
 					_icons={{
 						left: {
-							icon: 'codicon codicon-arrow-left',
+							icon: 'kolicon-chevron-left',
 						},
 						right: {
-							icon: 'codicon codicon-arrow-right',
+							icon: 'kolicon-chevron-right',
 						},
 					}}
 					_touched
@@ -37,9 +37,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_label="Slider with error"
 				_touched
 			/>
-			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" />
-			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" />
-			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" />
+			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Slider" _touched />
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />

package/src/components/input-text/basic.tsx

@@ -15,7 +15,7 @@ export const InputTextBasic: FC = () => (
 			<KolInputText _label="Name" _required _hint="Enter your surname" />
 			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
 			<KolInputText _label="Name" _readOnly _value="Anderson-Clark" />
-			<KolInputText _label="Name" _icons="codicon codicon-account" _value="Anderson-Clark" />
+			<KolInputText _label="Name" _icons="fa-solid fa-user" _value="Anderson-Clark" />
 		</div>
 	</>
 );

package/src/components/input-text/expert-slot.tsx

@@ -17,7 +17,7 @@ export const InputTextExpertSlot = () => {
 				<KolInputText _label="" _type="text" _value="Complex example">
 					<div slot="expert" className="flex items-center gap-2">
 						<KolBadge _label="Premium" _color="#1a73e8" />
-						<KolIcon _icons="codicon codicon-verified-filled" _label="" />
+						<KolIcon _icons="kolicon-check" _label="" />
 						<span>Verified account with premium features</span>
 					</div>
 				</KolInputText>

package/src/components/input-text/message-types.tsx

@@ -6,14 +6,15 @@ import { SampleDescription } from '../SampleDescription';
 export const InputTextMessageTypes: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This story demonstrates all available message types for KolInputText: info, error, warning, and success.</p>
+			<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} />
+			<KolInputText _label="Default message" _value="Valid value" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />
 			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
-			<KolInputText _label="Warning message" _value="Potentially problematic value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} />
-			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} />
+			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />
+			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />
+			<KolInputText _label="Warning message" _value="Valid value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />
 		</div>
 	</>
 );

package/src/components/input-text/readonly.tsx

@@ -17,6 +17,7 @@ export const InputTextReadonly: FC = () => (
 				_value="Read-only value"
 				_msg={{ _type: 'info', _description: 'This field cannot be edited' }}
 				_readOnly
+				_touched
 			/>
 			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
 		</div>

package/src/components/input-text/smart-button.tsx

@@ -4,16 +4,16 @@ import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 const smartButtonProps = {
-	_icons: 'codicon codicon-info',
+	_icons: 'kolicon-alert-info',
 	_hideLabel: true,
 };
 
 const icons = {
 	left: {
-		icon: 'codicon codicon-search',
+		icon: 'fa-solid fa-magnifying-glass',
 	},
 	right: {
-		icon: 'codicon codicon-check',
+		icon: 'kolicon-check',
 	},
 };
 

package/src/components/link/access-key.tsx

@@ -14,7 +14,7 @@ export const LinkAccessKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S access key" _accessKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _accessKey="s" />
 			<KolLink _href="#/back-page" _label="Access key does not appear in label" _accessKey="s" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="access key without label" _accessKey="s" />
+			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="access key without label" _accessKey="s" />
 		</div>
 	</>
 );

package/src/components/link/basic.tsx

@@ -16,8 +16,8 @@ export const LinkBasic: FC = () => (
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
 			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
+			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.

package/src/components/link/icons.tsx

@@ -12,43 +12,43 @@ export const LinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" _href="#/back-page" />
+			<KolLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
-					right: 'codicon codicon-home',
-					bottom: 'codicon codicon-home',
-					left: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
+					right: 'fa-solid fa-house',
+					bottom: 'fa-solid fa-house',
+					left: 'fa-solid fa-house',
 				}}
 				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
 
-			<KolLink _icons="codicon codicon-home" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<KolLink _icons="fa-solid fa-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
 			<KolLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external linkwith an icon on the right"
@@ -56,7 +56,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with an icon at the top"
@@ -64,7 +64,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with icon below"
@@ -75,10 +75,10 @@ export const LinkIcons: FC = () => (
 				_label="I am a external link with all icons"
 				_target="_blank"
 				_icons={{
-					top: 'codicon codicon-home',
-					right: 'codicon codicon-home',
-					bottom: 'codicon codicon-home',
-					left: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
+					right: 'fa-solid fa-house',
+					bottom: 'fa-solid fa-house',
+					left: 'fa-solid fa-house',
 				}}
 			/>
 		</div>

package/src/components/link/short-key.tsx

@@ -16,7 +16,7 @@ export const LinkShortKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S short key" _shortKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _shortKey="s" />
 			<KolLink _href="#/back-page" _label="Short key does not appear in label" _shortKey="s" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="short key without label" _shortKey="s" />
+			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
 		</div>
 	</>
 );