@public-ui/themes 1.6.2 → 1.7.0-rc.10

package/dist/index.mjs

@@ -299,7 +299,7 @@ var loglevel = {exports: {}};
 	})); 
 } (loglevel));
 
-const createTranslation=(e,t)=>o=>o(e,t),createTheme=(e,t)=>o=>o(e,t),STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};var __defProp$1=Object.defineProperty,__defNormalProp$1=(e,t,o)=>t in e?__defProp$1(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__publicField$1=(e,t,o)=>(__defNormalProp$1(e,"symbol"!=typeof t?t+"":t,o),o);const _RobustStore=class e{constructor(e,t){__publicField$1(this,"store"),this.store=this.createStore(e,t);}static getInstance(t,o){let s=e.instances.get(t);return void 0===s&&(s=new e(o,t),e.instances.set(t,s)),s}createStore(e,t){return Object.defineProperty(e,t,{enumerable:!1,value:{},writable:!1}),e[t]}recursiveSetItem(t,o,s,r=e.options){let a="object"==typeof s&&null!==s?{}:s;if(Object.defineProperty(t,o,{enumerable:!0===r.enumerable,get:()=>a,set:!0===r.immutable?void 0:e=>a=e}),"object"==typeof s&&null!==s)for(const[e,a]of Object.entries(s))this.recursiveSetItem(t[o],e,a,r);}setItem(t,o,s=e.options){return this.recursiveSetItem(this.store,t,o,s),this}getItem(e){return Array.isArray(e)?e.map((e=>this.getItem(e))):this.store[e]}};__publicField$1(_RobustStore,"options",{enumerable:!1,immutable:!1}),__publicField$1(_RobustStore,"instances",new Map);const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const a=getCssStyle(s,"PROPERTIES"),n=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,n);const i=[a,n,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}var __defProp=Object.defineProperty,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__publicField=(e,t,o)=>(__defNormalProp(e,"symbol"!=typeof t?t+"":t,o),o);class Theme{constructor(e,t,o){__publicField(this,"Prefix"),__publicField(this,"Key"),__publicField(this,"Tag"),__publicField(this,"createTheme",((e,t)=>createTheme(e,t))),__publicField(this,"createTranslation",((e,t)=>createTranslation(e,t))),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
+const createTranslation=(e,t)=>o=>o(e,t),createTheme=(e,t)=>o=>o(e,t),STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const n=getCssStyle(s,"PROPERTIES"),a=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,a);const i=[n,a,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}class Theme{constructor(e,t,o){this.createTheme=(e,t)=>createTheme(e,t),this.createTranslation=(e,t)=>createTranslation(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
 
 var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
   KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -387,7 +387,7 @@ const KoliBri = new Theme("kol", KeyEnum, TagEnum);
 const BAMF = KoliBri.createTheme("bamf", {});
 
 const BZSt = KoliBri.createTheme("bzst", {
-  GLOBAL: `/* colors */
+  GLOBAL: `/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */
 	:root,
 	:host {
 		/* token */
@@ -399,7 +399,6 @@ const BZSt = KoliBri.createTheme("bzst", {
 		--color-green-dark: #23614e;
 		--color-heroic-blue: #126dff;
 		--color-mercury: #ebebeb;
-		--color-ocean: #0077b6;
 		--color-red-epiphyllum: #d00000;
 		--color-speedwell: #595f73;
 		--color-tropic-sea: #007194;
@@ -474,21 +473,17 @@ const BZSt = KoliBri.createTheme("bzst", {
 	:root,
 	:host {
 		/* template */
-		--formBorderWidthAndStyle: 1px solid;
-		--formBorderColor: var(
-			--color-green
-		); /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */
-		--formBorder: var(--formBorderWidthAndStyle) var(--color-green);
-		--formBorderHover: var(--formBorderWidthAndStyle) var(--color-green-light);
-		--formBorderDisabled: var(--formBorderWidthAndStyle) var(--color-mercury);
-		--formBorderInvalid: var(--formBorderWidthAndStyle)
-			var(--color-red-epiphyllum);
+		--formBorderWidthAndStyle: 1px solid; /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */
+		--formBorder: var(--formBorderWidthAndStyle) var(--colorPrimarySuccess);
+		--formBorderHover: var(--formBorderWidthAndStyle) var(--colorPrimaryActive);
+		--formBorderDisabled: var(--formBorderWidthAndStyle) var(--colorDisabled);
+		--formBorderInvalid: var(--formBorderWidthAndStyle) var(--colorSignalError);
 		--focusOutline: var(--colorSignalFocus) solid 2px;
-		--formFieldBackground: var(--color-white); /*Select option */
-		--formFieldBackgroundHover: var(--color-green-dark); /* Select options */
+		--formFieldBackground: var(--colorLight); /*Select option */
+		--formFieldBackgroundHover: var(--colorPrimary); /* Select options */
 		--formFieldBackgroundEven: var(--formFieldBackground); /* Select options */
-		--formFieldBackgroundOdd: var(--color-mercury);
-		--formFieldBackgroundDisabled: var(--color-bleached-silk);
+		--formFieldBackgroundOdd: var(--colorSecondaryActive);
+		--formFieldBackgroundDisabled: var(--colorSecondarySuccess);
 		--formFieldTextColorDisabled: var(--colorTextDisabled);
 	} /* ********************************* */ /* ********************************* */ /* ********************************* */ /* ********************************* */
 	:host {
@@ -518,26 +513,33 @@ const BZSt = KoliBri.createTheme("bzst", {
 	:host * {
 		box-sizing: border-box;
 	}
-	:host h1,
-	:host h2 {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
 		font-family: var(--textFontSerif);
+	}
+	h1,
+	h2 {
 		font-weight: var(--textFontWeight);
 	}
-	:host h1 {
+	h1 {
 		font-size: var(--headline1FontSize);
 		line-height: var(--headline1LineHeight);
 	}
-	:host h2 {
+	h2 {
 		font-size: var(--headline2FontSize);
 		line-height: var(--headline2LineHeight);
 	}
-	:host h3 {
+	h3 {
 		font-size: var(--headline3FontSize);
 		line-height: var(--headline3LineHeight);
 	}
-	:host h4,
-	:host h5,
-	:host h6 {
+	h4,
+	h5,
+	h6 {
 		font-size: var(--headline4FontSize);
 		line-height: var(--headline4LineHeight);
 	}
@@ -554,17 +556,12 @@ const BZSt = KoliBri.createTheme("bzst", {
 		letter-spacing: inherit;
 		display: block;
 	} /* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */
-	a:focus,
-	button:focus,
-	input:focus,
-	select:focus,
-	summary:focus,
-	textarea:focus {
-		cursor: pointer;
-		outline-color: var(--color-focus);
+	*[tabindex]:focus,
+	kol-input:not(.checkbox, .radio) .input:focus-within,
+	kol-input:is(.checkbox, .radio) input:focus,
+	summary:focus {
+		outline: var(--focusOutline);
 		outline-offset: 2px;
-		outline-style: solid;
-		outline-width: 0;
 		transition: outline-offset 0.2s linear;
 	}
 	@keyframes spin {
@@ -574,6 +571,22 @@ const BZSt = KoliBri.createTheme("bzst", {
 		100% {
 			transform: rotate(360deg);
 		}
+	}
+	kol-tooltip .area {
+		background-color: var(--colorDark);
+		color: var(--colorLight);
+	}
+	kol-tooltip kol-span-wc {
+		line-height: 1.5em;
+		padding: 0.5rem 0.75rem;
+	}
+	kol-span-wc,
+	kol-span-wc > span {
+		gap: 0.5em;
+	}
+	kol-span-wc,
+	kol-span-wc > span {
+		gap: 0.3em;
 	}`,
   "KOL-BUTTON": `:host {
 		--background-color: var(--color-gruen-dunkel);
@@ -650,10 +663,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 		align-items: center;
 		justify-content: center;
 	}
-	button.hide-label {
+	button.icon-only {
 		padding: 0.5rem;
 	}
-	button.hide-label kol-icon {
+	button.icon-only kol-icon {
 		display: inline-block;
 		width: 1.5em;
 		height: 1.5em;
@@ -661,137 +674,93 @@ const BZSt = KoliBri.createTheme("bzst", {
 	button.loading kol-icon {
 		animation: spin 5s infinite linear;
 	}`,
-  "KOL-INPUT-DATE": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
-	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: black;
+  "KOL-INPUT-TEXT": `kol-input {
+		gap: 0.4em;
 	}
-	input:focus-within,
-	select:focus-within,
-	textarea:focus-within {
-		outline: var(--color-focus) solid 2px;
+	kol-input .error {
+		order: 3;
 	}
-	kol-input > label {
+	kol-input label {
+		font-weight: 700;
 		order: 1;
-		margin-bottom: var(--gapSmallest);
 	}
-	kol-input > label > span {
-		color: black;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
-	}
-	kol-input > div.input {
-		background-color: white;
-		display: block;
+	kol-input .input {
 		order: 2;
 	}
-	kol-input > kol-alert.error {
-		margin-top: 0.25em;
-		order: 3;
+	kol-input .hint {
+		order: 4;
+		font-size: 0.875em;
+		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		font-family: var(--textFont);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: var(--textFontSize);
-		display: inline-flex;
-		line-height: 1.5;
-		color: black;
-		border-color: var(--color-gruen);
-		border-width: 1px;
+	input {
+		border: none;
+	}
+	.input {
+		border-color: var(--color-grey);
 		border-style: solid;
-		padding: 0.5em;
-		overflow: hidden;
-		width: 100%;
+		border-width: 1px;
+		padding: 0 0.5em;
 	}
-	input:not([type="range"]),
-	select:not([multiple]) {
-		height: 2.75em;
+	.input > kol-icon {
+		width: 1.5em;
 	}
-	textarea {
-		display: inherit;
+	.input > input:first-child {
+		padding-left: 0.375em;
 	}
-	input::placeholder {
-		color: var(--color-grau-dunkel);
+	.input > input:last-child {
+		padding-right: 0.375em;
 	}
-	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+	.input:hover {
+		border-color: var(--color-gruen-hell);
+	}
+	input:not([type="color"]):read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icons > * {
-		margin: 0.75em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1;
-		margin-top: -33px;
+	kol-input.error {
+		border-left: 3px solid var(--color-rot);
+		padding-left: 1em;
 	}
-	kol-button-wc button {
-		border: 1px solid var(--color-grau-dunkel);
-		box-sizing: border-box;
-		background-color: transparent;
-		cursor: pointer;
+	kol-input.error .input:focus-within {
+		outline-color: var(--color-rot) !important;
 	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
+	kol-input.error kol-alert.error {
+		color: var(--color-rot);
+		font-weight: 700;
 	}
 	.disabled {
 		opacity: 0.33;
 	}
-	select[multiple],
-	textarea {
-		overflow: auto;
+	label {
+		color: var(--color-text);
+		line-height: 1.5;
 	}
-	textarea {
-		display: block;
+	.input {
+		font-size: var(--text-size);
+		line-height: 1.5;
+		color: var(--colorText);
+		border-color: var(--color-gruen);
+		border-style: solid;
+		width: 100%;
 	}
-	select option {
-		margin: 1px 0;
-		padding: 0.5em;
-		cursor: pointer;
+	input:not([type="range"]) {
+		height: 2.75em;
 	}
-	select option:disabled {
-		cursor: not-allowed;
+	input::placeholder {
+		color: var(--color-grau-dunkel);
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
 	}`,
-  "KOL-INPUT-TEXT": `kol-input {
+  "KOL-INPUT-PASSWORD": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
-		font-size: var(--text-size);
 	}
 	input:focus,
 	input:hover,
@@ -799,25 +768,16 @@ const BZSt = KoliBri.createTheme("bzst", {
 	select:hover,
 	textarea:focus,
 	textarea:hover {
-		border-color: var(--color-gruen-hell);
-	}
-	.error input:invalid,
-	.error select:invalid,
-	.error textarea:invalid {
-		border-color: var(--color-rot);
-	}
-	input:focus-within,
-	select:focus-within,
-	textarea:focus-within {
-		outline: var(--color-focus) solid 2px;
+		border-color: black;
 	}
 	kol-input > label {
 		order: 1;
-		margin-bottom: var(--gapSmallest);
+		margin-bottom: 0.25em;
 	}
 	kol-input > label > span {
-		color: var(--color-text);
-		line-height: 1.5;
+		color: black;
+		font-size: 0.875rem;
+		line-height: 1.5rem;
 	}
 	kol-input > div.input {
 		background-color: white;
@@ -825,7 +785,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		order: 2;
 	}
 	kol-input > kol-alert.error {
-		margin-top: 0.25rem;
+		margin-top: 0.25em;
 		order: 3;
 	}
 	input,
@@ -834,11 +794,11 @@ const BZSt = KoliBri.createTheme("bzst", {
 		font-family: var(--font-family);
 		background-color: transparent;
 		box-sizing: border-box;
-		font-size: var(--text-size);
+		font-size: 1rem;
 		display: inline-flex;
-		line-height: 1.5;
+		line-height: 1.5em;
 		color: black;
-		border-color: var(--color-gruen);
+		border-color: var(--color-grau-dunkel);
 		border-width: 1px;
 		border-style: solid;
 		padding: 0.5em 0.75em;
@@ -917,7 +877,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 	option:hover:not(:disabled) {
 		color: white;
 	}`,
-  "KOL-INPUT-PASSWORD": `kol-input {
+  "KOL-INPUT-NUMBER": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
@@ -930,11 +890,17 @@ const BZSt = KoliBri.createTheme("bzst", {
 	textarea:hover {
 		border-color: black;
 	}
-	kol-input > label {
+	input:focus-within,
+	select:focus-within,
+	textarea:focus-within {
+		outline: var(--color-focus) solid 2px;
+	}
+	kol-input label {
+		font-weight: 700;
 		order: 1;
-		margin-bottom: 0.25em;
+		margin-bottom: var(--gapSmallest);
 	}
-	kol-input > label > span {
+	kol-input label > span {
 		color: black;
 		font-size: 0.875rem;
 		line-height: 1.5rem;
@@ -951,17 +917,17 @@ const BZSt = KoliBri.createTheme("bzst", {
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
+		font-family: var(--textFont);
 		background-color: transparent;
 		box-sizing: border-box;
-		font-size: 1rem;
+		font-size: var(--textFontSize);
 		display: inline-flex;
-		line-height: 1.5em;
+		line-height: 1.5;
 		color: black;
-		border-color: var(--color-grau-dunkel);
+		border-color: var(--color-gruen);
 		border-width: 1px;
 		border-style: solid;
-		padding: 0.5em 0.75em;
+		padding: 0.5em;
 		overflow: hidden;
 		width: 100%;
 	}
@@ -1001,7 +967,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 	kol-button-wc {
 		position: relative;
 		float: right;
-		z-index: 1000;
+		z-index: 1;
 		margin-top: -33px;
 	}
 	kol-button-wc button {
@@ -1035,9 +1001,20 @@ const BZSt = KoliBri.createTheme("bzst", {
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
 	option:hover:not(:disabled) {
+		background: var(--color-ocean);
 		color: white;
 	}`,
-  "KOL-INPUT-NUMBER": `kol-input {
+  "KOL-INPUT-DATE": `kol-input label {
+		font-weight: 700;
+		margin-bottom: var(--gapSmallest);
+	}
+	input {
+		border: var(--formBorder);
+	}
+	input:hover {
+		border: var(--formBorderHover);
+	}`,
+  "KOL-INPUT-EMAIL": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
@@ -1050,14 +1027,9 @@ const BZSt = KoliBri.createTheme("bzst", {
 	textarea:hover {
 		border-color: black;
 	}
-	input:focus-within,
-	select:focus-within,
-	textarea:focus-within {
-		outline: var(--color-focus) solid 2px;
-	}
 	kol-input > label {
 		order: 1;
-		margin-bottom: var(--gapSmallest);
+		margin-bottom: 0.25em;
 	}
 	kol-input > label > span {
 		color: black;
@@ -1076,17 +1048,17 @@ const BZSt = KoliBri.createTheme("bzst", {
 	input,
 	select,
 	textarea {
-		font-family: var(--textFont);
+		font-family: var(--font-family);
 		background-color: transparent;
 		box-sizing: border-box;
-		font-size: var(--textFontSize);
+		font-size: 1rem;
 		display: inline-flex;
-		line-height: 1.5;
+		line-height: 1.5em;
 		color: black;
-		border-color: var(--color-gruen);
+		border-color: var(--color-grau-dunkel);
 		border-width: 1px;
 		border-style: solid;
-		padding: 0.5em;
+		padding: 0.5em 0.75em;
 		overflow: hidden;
 		width: 100%;
 	}
@@ -1126,7 +1098,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 	kol-button-wc {
 		position: relative;
 		float: right;
-		z-index: 1;
+		z-index: 1000;
 		margin-top: -33px;
 	}
 	kol-button-wc button {
@@ -1160,10 +1132,9 @@ const BZSt = KoliBri.createTheme("bzst", {
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
 	option:hover:not(:disabled) {
-		background: var(--color-ocean);
 		color: white;
 	}`,
-  "KOL-INPUT-EMAIL": `kol-input {
+  "KOL-INPUT-FILE": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
@@ -1283,63 +1254,48 @@ const BZSt = KoliBri.createTheme("bzst", {
 	option:hover:not(:disabled) {
 		color: white;
 	}`,
-  "KOL-INPUT-FILE": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
+  "KOL-TEXTAREA": `kol-input {
+		gap: 0.4em;
 	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: black;
+	kol-input .error {
+		order: 3;
 	}
-	kol-input > label {
+	kol-input label {
+		font-weight: 700;
 		order: 1;
-		margin-bottom: 0.25em;
 	}
-	kol-input > label > span {
-		color: black;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
-	}
-	kol-input > div.input {
-		background-color: white;
-		display: block;
+	kol-input .input {
 		order: 2;
 	}
-	kol-input > kol-alert.error {
-		margin-top: 0.25em;
-		order: 3;
+	kol-input .hint {
+		order: 4;
+		font-size: 0.875em;
+		font-style: italic;
 	}
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: 1rem;
-		display: inline-flex;
-		line-height: 1.5em;
-		color: black;
-		border-color: var(--color-grau-dunkel);
-		border-width: 1px;
-		border-style: solid;
-		padding: 0.5em 0.75em;
-		overflow: hidden;
+		border: none;
+	}
+	.input {
+		color: var(--colorText);
+		border: var(--formBorder);
+		font-size: var(--textFontSize);
+		line-height: 1.5;
+		padding: 0 0.5em;
 		width: 100%;
 	}
-	input:not([type="range"]),
-	select:not([multiple]) {
-		height: 2.75em;
+	.input > kol-icon {
+		width: 1.5em;
 	}
-	textarea {
-		display: inherit;
+	.input > input:first-child {
+		padding-left: 0.375em;
 	}
-	input::placeholder {
-		color: var(--color-grau-dunkel);
+	.input > input:last-child {
+		padding-right: 0.375em;
+	}
+	.input:hover {
+		border-color: var(--color-gruen-hell);
 	}
 	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
 		cursor: not-allowed;
@@ -1348,191 +1304,29 @@ const BZSt = KoliBri.createTheme("bzst", {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icons > * {
-		margin: 0.75em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1000;
-		margin-top: -33px;
+	kol-input.error {
+		border-left: 3px solid var(--color-rot);
+		padding-left: 1em;
 	}
-	kol-button-wc button {
-		border: 1px solid var(--color-grau-dunkel);
-		box-sizing: border-box;
-		background-color: transparent;
-		cursor: pointer;
+	kol-input.error .input:focus-within {
+		outline-color: var(--color-rot) !important;
 	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
+	kol-input.error kol-alert.error {
+		color: var(--color-rot);
+		font-weight: 700;
 	}
 	.disabled {
 		opacity: 0.33;
 	}
-	select[multiple],
-	textarea {
-		overflow: auto;
-	}
-	textarea {
-		display: block;
-	}
-	select option {
-		margin: 1px 0;
-		padding: 0.5em;
-		cursor: pointer;
-	}
-	select option:disabled {
-		cursor: not-allowed;
-	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		color: white;
-	}`,
-  "KOL-TEXTAREA": `/* input */
-	kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
-		font-size: var(--text-size);
-	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--color-gruen-hell);
-	}
-	.error input:invalid,
-	.error select:invalid,
-	.error textarea:invalid {
-		border-color: var(--color-rot);
-	}
-	input:focus-within,
-	select:focus-within,
-	textarea:focus-within {
-		outline: var(--color-focus) solid 2px;
-	}
-	kol-input > label {
-		order: 1;
-		margin-bottom: var(--gapSmallest);
-	}
-	kol-input > label > span {
+	label {
 		color: var(--color-text);
 		line-height: 1.5;
 	}
-	kol-input > div.input {
-		background-color: white;
-		display: block;
-		order: 2;
-	}
-	kol-input > kol-alert.error {
-		margin-top: 0.25rem;
-		order: 3;
-	}
-	input,
-	select,
-	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: var(--text-size);
-		display: inline-flex;
-		line-height: 1.5;
-		color: black;
-		border-color: var(--color-gruen);
-		border-width: 1px;
-		border-style: solid;
-		padding: 0.5em 0.75em;
-		overflow: hidden;
-		width: 100%;
-	}
-	input:not([type="range"]),
-	select:not([multiple]) {
-		height: 2.75em;
-	}
-	textarea {
-		display: inherit;
-	}
-	input::placeholder {
-		color: var(--color-grau-dunkel);
-	}
-	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
-		cursor: not-allowed;
+	.input {
 	}
 	.required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
-	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icons > * {
-		margin: 0.75em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1;
-		margin-top: -33px;
-	}
-	kol-button-wc button {
-		border: 1px solid var(--color-grau-dunkel);
-		box-sizing: border-box;
-		background-color: transparent;
-		cursor: pointer;
-	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
-	}
-	.disabled {
-		opacity: 0.33;
-	}
-	select[multiple],
-	textarea {
-		overflow: auto;
-	}
-	textarea {
-		display: block;
-	}
-	select option {
-		margin: 1px 0;
-		padding: 0.5em;
-		cursor: pointer;
-	}
-	select option:disabled {
-		cursor: not-allowed;
-	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		color: white;
 	}`,
   "KOL-ALERT": `:host > div {
 		background-color: white;
@@ -1679,10 +1473,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 		background-color: rgba(0, 0, 0, 0);
 		border-color: rgba(0, 0, 0, 0);
 	}
-	.close > button.hide-label {
+	.close > button.icon-only {
 		padding: 8px;
 	}
-	.close > button.hide-label kol-icon {
+	.close > button.icon-only kol-icon {
 		display: inline-block;
 		width: 1.5em;
 		height: 1.5em;
@@ -1694,6 +1488,9 @@ const BZSt = KoliBri.createTheme("bzst", {
 	.close kol-icon::part(icon)::before {
 		content: "\\f00d";
 	}`,
+  "KOL-HEADING": `.headline {
+		margin-top: 0;
+	}`,
   "KOL-BADGE": `:host {
 		display: inline-block;
 	}
@@ -1720,28 +1517,26 @@ const BZSt = KoliBri.createTheme("bzst", {
 		background: var(--color-grau-weiss);
 		box-shadow: -4px 0px 0px var(--color-gruen);
 	}`,
-  "KOL-LINK": `kol-link-wc {
-		display: inline-block;
-	}
-	a {
-		background-color: transparent;
-		border: 0;
-		cursor: pointer;
+  "KOL-LINK": `:is(a, button) {
+		/* color: var(--color-midnight); */
 		color: var(--external-link-color, var(--color-gruen));
-		display: inline-flex;
+		font-style: normal;
+		font-weight: 400;
 		padding: var(--external-link-padding, 0);
-		text-decoration-line: none !important; /* outline: none !important; */
+		text-decoration-line: none;
 	}
-	a:focus-within {
-		outline: var(--color-focus) solid 2px;
+	:is(a, button):focus {
+		/* outline: var(--color-focus) solid 2px; */
+		outline: none;
 	}
-	a:hover {
+	:is(a, button):hover {
+		/* text-decoration-thickness: 0.25em; */
 		box-shadow: inset 0 -1px 0 0 var(--external-link-color, var(--color-gruen));
 	}
-	kol-icon {
-		padding: 0 0.25rem;
-		display: inline-block;
-	}
+	.hidden {
+		display: none;
+		visibility: hidden;
+	} /*************************/ /* kol-link-wc {display: inline-block;} */ /* kol-icon {padding: 0 0.25rem;} */
 	.hidden {
 		display: none;
 		visibility: hidden;
@@ -1757,6 +1552,9 @@ const BZSt = KoliBri.createTheme("bzst", {
 		background: white;
 		left: unset;
 		position: unset;
+	}
+	.icon-only {
+		padding-bottom: 0.2rem;
 	}`,
   "KOL-DETAILS": `details {
 		display: grid;
@@ -1861,128 +1659,42 @@ const BZSt = KoliBri.createTheme("bzst", {
 	progress {
 		display: none;
 	}`,
-  "KOL-SELECT": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
-		font-size: var(--textFontSize);
-	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: var(--color-gruen-hell);
+  "KOL-SELECT": `:host {
+		--color: var(--colorText); /* --color: blue; */
 	}
-	.error input:invalid,
-	.error select:invalid,
-	.error textarea:invalid {
-		border-color: var(--color-rot);
-	}
-	input:focus-within,
-	select:focus-within,
-	textarea:focus-within {
-		outline: var(--color-focus) solid 2px;
+	kol-input {
+		color: var(--color);
+		font-size: var(--textFontSize);
+		gap: var(--gapSmallest);
 	}
-	kol-input > label {
+	label {
+		font-weight: 700;
 		order: 1;
-		margin-bottom: var(--gapSmallest);
-	}
-	kol-input > label > span {
-		color: var(--color-text);
-		line-height: 1.5;
 	}
-	kol-input > div.input {
-		background-color: white;
-		display: block;
+	.input {
 		order: 2;
 	}
-	kol-input > kol-alert.error {
-		margin-top: 0.25rem;
+	kol-alert.error {
+		color: var(--colorSignalError);
 		order: 3;
 	}
-	input,
-	select,
-	textarea {
-		font-family: var(--textFont);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: var(--textFontSize);
-		display: inline-flex;
+	select {
+		background-color: var(--colorLight);
 		line-height: 1.5;
-		color: black;
-		border-color: var(--color-gruen);
-		border-width: 1px;
-		border-style: solid;
+		color: var(--color);
+		border: var(--formBorder);
 		padding: 0.5em 0.75em;
-		overflow: hidden;
-		width: 100%;
-	}
-	select {
-		padding-top: 0.6115em;
-		padding-bottom: 0.6115em;
-	}
-	input:not([type="range"])/* ,select:not([multiple]) */ {
-		height: 2.75em;
 	}
-	textarea {
-		display: inherit;
-	}
-	input::placeholder {
-		color: var(--color-grau-dunkel);
+	select:hover,
+	select:focus {
+		border-color: var(--colorPrimaryActive);
 	}
-	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+	select:disabled {
 		cursor: not-allowed;
 	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icons > * {
-		margin: 0.6em;
-	}
-	.icons > *:last-child:not(:first-child) {
-		margin-right: 1em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1;
-		margin-top: -33px;
-	}
-	kol-button-wc button {
-		border: 1px solid var(--color-grau-dunkel);
-		box-sizing: border-box;
-		background-color: transparent;
-		cursor: pointer;
-	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
-	}
-	.disabled {
-		opacity: 0.33;
-	}
-	select[multiple],
-	textarea {
+	select[multiple] {
 		overflow: auto;
 	}
-	textarea {
-		display: block;
-	}
 	select option {
 		margin: 1px 0;
 		padding: 0.5em;
@@ -1991,13 +1703,13 @@ const BZSt = KoliBri.createTheme("bzst", {
 	select option:disabled {
 		cursor: not-allowed;
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
-	}`,
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
+	} /* kol-input.error select:invalid { */
+	kol-input.error select {
+		border-color: var(--colorSignalError);
+	} /* option:active:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {color: white;} */`,
   "KOL-INPUT-COLOR": `kol-input {
 		display: grid;
 		padding: 0;
@@ -2147,15 +1859,14 @@ const BZSt = KoliBri.createTheme("bzst", {
 		padding-left: 0;
 	}
 	:host > div > kol-heading-wc button kol-icon::part(icon) {
+		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 		color: var(--color-midnight);
 	}
-	:host > div > kol-heading-wc button kol-icon::part(close)::before {
-		font-family: "Font Awesome 6 Free";
+	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
 		content: "\\f068";
 	}
-	:host > div > kol-heading-wc button kol-icon::part(open)::before {
-		font-family: "Font Awesome 6 Free";
+	:host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
 		content: "\\2b";
 	}
 	:host > div {
@@ -2192,18 +1903,26 @@ const BZSt = KoliBri.createTheme("bzst", {
 		hyphens: var(--hyphens);
 		line-height: var(--textFontLineHeight);
 	}
-	:host > div:last-child {
+	:host > div:first-child {
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
 	table {
-		width: 100%;
 		border-collapse: collapse;
-		border-spacing: 0;
 	}
 	caption {
 		height: auto;
 		text-align: left;
+	} /* visuell verstecken */
+	caption {
+		clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
+		height: 1px;
+		width: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: absolute;
 	}
 	table,
 	tr,
@@ -2237,92 +1956,51 @@ const BZSt = KoliBri.createTheme("bzst", {
 		align-items: center;
 		gap: 0.25em;
 	}
-	:host > div.pagination {
+	.pagination {
 		padding: 0.5em;
 		font-size: var(--textFontSize);
-	}
-	:host > div:last-child,
-	:host > div.pagination > div:last-child {
-		display: grid;
-		align-items: center;
-		justify-items: center;
-		gap: var(--gapSmallest);
-	}
-	@media (min-width: 1024px) {
-		:host > div:last-child,
-		:host > div.pagination > div:last-child {
-			grid-auto-flow: column;
-			justify-content: start;
-		}
-		:host > div.pagination kol-pagination {
-			display: flex;
-			gap: 1rem;
-		}
+		gap: 1rem;
 	}
 	th kol-button button {
 		padding: 0.5rem;
-	}`,
-  "KOL-NAV": `* {
-		margin: 0;
-		padding: 0;
+	} /* default: [aria-sort="none"] */
+	[data-sort] kol-button::part(icon)::before {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+		content: "\\f0dc";
 	}
-	nav {
-		font-family: var(--font-family);
-		font-size: 18px;
-		background-color: var(--color-grau-hell);
+	[data-sort="sort-ASC"] kol-button::part(icon)::before {
+		content: "\\f0de";
 	}
-	ul {
+	[data-sort="sort-DESC"] kol-button::part(icon)::before {
+		content: "\\f0dd";
+	}`,
+  "KOL-NAV": `ul {
 		list-style: none;
 	}
 	a {
-		background-color: var(--color-white);
-		text-decoration: none;
-		color: var(--color-dunkel);
-		width: 100%;
+		color: var(--colorText);
 		display: block;
-		font-style: normal;
-		font-weight: 700;
-		padding: 0.75rem 0.5rem 0.75rem 0;
-		border-left-color: var(--color-gruen-dunkel);
-		border-left-style: solid;
-		border-left-width: 0.5rem;
-		line-height: 1.5rem;
-		min-height: 44px;
-		min-width: 44px;
+		padding: 0.3rem 0.5rem;
+		text-decoration: none;
 		transition-duration: 0.5s;
 		transition-property: background-color, color, border-color;
 	}
 	a:hover {
-		border-left-color: var(--color-gruen-dunkel);
-		background-color: var(--color-gruen-hell);
-		color: var(--color-grau-dunkel);
-	}
-	a > kol-icon {
-		display: inline-block;
-		text-align: center;
-		width: 44px;
-	}
-	button {
-		background-color: var(--color-gruen-dunkel);
-	}
-	a[part*="selected"] {
-		background-color: var(--color-ice);
-		border-left-color: var(--color-midnight);
-		color: var(--color-midnight);
+		background-color: var(--colorPrimarySuccess);
+		color: var(--colorLight);
 	}
-	.hidden {
-		display: none;
+	a:focus,
+	button:focus {
+		outline: var(--focusOutline);
+		outline-offset: 2px;
+		transition: outline-offset 0.2s linear;
 	}
-	:host > div > div:last-child {
-		margin-top: 0.5em;
-		width: 100%;
-		text-align: center;
-	} /* horizontal */
-	ul.flex {
-		display: flex;
+	.list[data-deep="0"] {
+		font-family: var(--textFontSerif);
 	}
-	li > div > div.absolute {
-		position: absolute;
+	.horizontal {
+		gap: var(--gap);
 	}`,
   "KOL-CARD": `:host > div {
 		--card-padding: var(--gap);
@@ -2407,7 +2085,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		justify-items: left;
 		width: 100%;
 	}
-	kol-input.default {
+	kol-input.checkbox {
 		grid-template-columns: calc(6 * var(--spacing)) auto;
 	}
 	kol-input.switch {
@@ -2446,19 +2124,19 @@ const BZSt = KoliBri.createTheme("bzst", {
 		background-color: var(--color-blau);
 		border-color: var(--color-blau);
 	}
-	.default input[type="checkbox"] {
+	.checkbox input[type="checkbox"] {
 		height: calc(6 * var(--spacing));
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
 	}
-	.default input[type="checkbox"]:before {
+	.checkbox input[type="checkbox"]:before {
 		background-color: transparent;
 		display: block;
 		height: calc(6 * var(--spacing));
 		position: relative;
 		width: calc(6 * var(--spacing));
 	}
-	.default input[type="checkbox"]:checked:before {
+	.checkbox input[type="checkbox"]:checked:before {
 		border-right-width: 3px;
 		border-bottom-width: 3px;
 		left: calc(1.5 * var(--spacing) - var(--border-width));
@@ -2471,7 +2149,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		height: calc(3 * var(--spacing));
 		width: calc(1.5 * var(--spacing));
 	}
-	.default input[type="checkbox"]:indeterminate:before {
+	.checkbox input[type="checkbox"]:indeterminate:before {
 		background-color: var(--color-grau-dunkel);
 		height: 0.375rem;
 		top: 0.5rem;
@@ -2539,6 +2217,8 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	input {
 		cursor: pointer;
+		display: grid;
+		align-self: center;
 		border: var(--border-width) solid var(--input-color);
 		appearance: none;
 		border-radius: 100%;
@@ -2563,12 +2243,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	input::before {
 		content: "";
-		cursor: pointer;
-		left: var(--input-inner-position);
-		top: var(--input-inner-position);
+		cursor: pointer; /* left: var(--input-inner-position);top: var(--input-inner-position); */
 		position: relative;
 		border-radius: 100%;
-		display: block;
+		display: inline-block;
 		height: var(--input-inner-size);
 		width: var(--input-inner-size);
 	}
@@ -2606,6 +2284,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		cursor: pointer;
 		display: grid;
 		font-size: var(--text-size); /* order: 2; */
+		font-weight: 700;
 	}
 	legend {
 		font-size: var(--text-size);
@@ -2846,7 +2525,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		display: grid;
 		gap: 1rem;
 	}
-	:host .navigation-list {
+	:host > div {
 		display: inline-flex;
 		flex-wrap: wrap;
 		align-items: center;
@@ -2878,6 +2557,22 @@ const BZSt = KoliBri.createTheme("bzst", {
 		align-self: flex-end;
 		padding-bottom: 0.5rem;
 		color: var(--color-midnight);
+	}
+	kol-button::part(icon)::before {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+	}
+	kol-button.first::part(icon)::before {
+		content: "\\f100";
+	}
+	kol-button.previous::part(icon)::before {
+		content: "\\f104";
+	}
+	kol-button.next::part(icon)::before {
+		content: "\\f105";
+	}
+	kol-button.last::part(icon)::before {
+		content: "\\f101";
 	}`,
   "KOL-INPUT-RANGE": `/* https://www.cssportal.com/style-input-range/ */
 	kol-input {
@@ -3079,10 +2774,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 		align-items: center;
 		justify-content: center;
 	}
-	a.hide-label {
+	a.icon-only {
 		padding: 8px;
 	}
-	a.hide-label kol-icon {
+	a.icon-only kol-icon {
 		display: inline-block;
 		width: 1.5em;
 		height: 1.5em;
@@ -3136,18 +2831,214 @@ const BZSt = KoliBri.createTheme("bzst", {
 	:host kol-icon[exportparts*="separator"] {
 		padding: 0 0.5rem;
 	}
-	:host kol-icon::part(icon separator) {
+	:host kol-icon::part(icon) {
+		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
-		font-size: 0.875rem;
+		font-size: 0.875rem !important;
 	}
-	:host kol-icon::part(icon separator)::before {
-		color: black;
-		content: "\\f054";
+	:host kol-icon::part(icon)::before {
+		color: currentColor;
 		font-family: "Font Awesome 6 Free";
 	}
+	:host ul > li:not(:first-child) kol-icon::part(icon)::before {
+		content: "\\f105";
+	}
 	:host li > kol-link > kol-link-wc > a {
 		color: red !important;
 	}`,
+  "KOL-MODAL": `:host .overlay .modal {
+		max-height: calc(100% - 32px);
+	}`,
+  "KOL-ICON": `:host {
+		color: inherit;
+	} /*! * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2022 Fonticons, Inc. */
+	.fa {
+		font-family: var(--fa-style-family, "Font Awesome 6 Free");
+		font-weight: var(--fa-style, 900);
+	}
+	.fa,
+	.fas,
+	.fa-solid,
+	.far,
+	.fa-regular,
+	.fal,
+	.fa-light,
+	.fat,
+	.fa-thin,
+	.fad,
+	.fa-duotone,
+	.fab,
+	.fa-brands {
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		display: var(--fa-display, inline-block);
+		font-style: normal;
+		font-variant: normal;
+		line-height: 1;
+		text-rendering: auto;
+	}
+	[class*="fa-"] {
+		font-style: 0.8rem;
+	} /************************************************************/
+	.fa-arrow-right::before {
+		content: "\\f061";
+	}
+	.fa-arrow-right-from-bracket::before {
+		content: "\\f08b";
+	}
+	.fa-clock::before {
+		content: "\\f017";
+	}
+	.fa-home::before {
+		content: "\\f015";
+	}
+	.fa-times-circle::before {
+		content: "\\f057";
+	}
+	.fa-exclamation-triangle::before {
+		content: "\\f071";
+	} /************************************************************/
+	.fa-chevron-left::before {
+		content: "\\f053";
+	}
+	.fa-chevron-right::before {
+		content: "\\f054";
+	}
+	fa-exclamation-triangle::before {
+		content: "\\f071";
+	}
+	.fa-file::before {
+		content: "\\f15b";
+	}
+	.fa-house::before {
+		content: "\\f015";
+	}
+	.fa-link::before {
+		content: "\\f0c1";
+	}
+	.fa-plus::before {
+		content: "\\2b";
+	}
+	.fa-search::before {
+		content: "\\f002";
+	}
+	.fa-times-circle::before {
+		content: "\\f057";
+	}
+	.fa-arrow-up-right-from-square::before {
+		content: "\\f08e";
+	}
+	.fa-user::before {
+		content: "\\f007";
+	}
+	.fa-xmark::before {
+		content: "\\f00d";
+	} /************************************************************/
+	:root,
+	:host {
+		--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
+	}
+	@font-face {
+		font-family: "Font Awesome 6 Free";
+		font-style: normal;
+		font-weight: 400;
+		font-display: block;
+		src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
+			url("../webfonts/fa-regular-400.ttf") format("truetype");
+	}
+	.far,
+	.fa-regular {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 400;
+	}
+	:root,
+	:host {
+		--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
+	}
+	@font-face {
+		font-family: "Font Awesome 6 Free";
+		font-style: normal;
+		font-weight: 900;
+		font-display: block;
+		src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
+			url("../webfonts/fa-solid-900.ttf") format("truetype");
+	}
+	.fas,
+	.fa-solid {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+	}
+	@font-face {
+		font-family: "Font Awesome 5 Brands";
+		font-display: block;
+		font-weight: 400;
+		src: url("../webfonts/fa-brands-400.woff2") format("woff2"),
+			url("../webfonts/fa-brands-400.ttf") format("truetype");
+	}
+	@font-face {
+		font-family: "Font Awesome 5 Free";
+		font-display: block;
+		font-weight: 900;
+		src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
+			url("../webfonts/fa-solid-900.ttf") format("truetype");
+	}
+	@font-face {
+		font-family: "Font Awesome 5 Free";
+		font-display: block;
+		font-weight: 400;
+		src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
+			url("../webfonts/fa-regular-400.ttf") format("truetype");
+	}
+	@font-face {
+		font-family: "FontAwesome";
+		font-display: block;
+		src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
+			url("../webfonts/fa-solid-900.ttf") format("truetype");
+	}
+	@font-face {
+		font-family: "FontAwesome";
+		font-display: block;
+		src: url("../webfonts/fa-brands-400.woff2") format("woff2"),
+			url("../webfonts/fa-brands-400.ttf") format("truetype");
+	}
+	@font-face {
+		font-family: "FontAwesome";
+		font-display: block;
+		src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
+			url("../webfonts/fa-regular-400.ttf") format("truetype");
+		unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D,
+			U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088,
+			U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5,
+			U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A,
+			U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E,
+			U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7,
+			U+F1F9, U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D,
+			U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA,
+			U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
+	}
+	@font-face {
+		font-family: "FontAwesome";
+		font-display: block;
+		src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"),
+			url("../webfonts/fa-v4compatibility.ttf") format("truetype");
+		unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B,
+			U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4,
+			U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E,
+			U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F250, U+F252,
+			U+F27A;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: var(--a11y-min-size);
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 8px 14px;
+		background-color: var(--color-ocean);
+		border-color: var(--color-ocean);
+		color: var(--color-white);
+		cursor: pointer;
+	}`,
   "KOL-LINK-GROUP": `ul {
 		list-style: none;
 		margin: 0px;
@@ -3176,17 +3067,8 @@ const BZSt = KoliBri.createTheme("bzst", {
 		list-style-type: none !important;
 		margin-left: 0;
 	}`,
-  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
-		border-radius: 2px;
-		border-style: solid;
-		border-width: 2px;
-		gap: 0.5rem;
-		line-height: 1rem;
-		padding: 0.75rem 1rem;
-		background-color: var(--colorPrimary);
-		border-color: var(--colorPrimary);
-		color: var(--colorPrimaryFront);
-		cursor: pointer;
+  "KOL-TOOLTIP": `:host {
+		--kolibri-font-size: var(--textFontSize);
 	}`
 });
 
@@ -3873,20 +3755,32 @@ const BMF = KoliBri.createTheme("bmf", {
 	}`,
   "KOL-TEXTAREA": `kol-input {
 		gap: 0.25em;
+		display: grid;
+		grid-template-areas: "error error" "label counter" "input input" "hint hint";
+		grid-template-columns: 1fr 115px;
 	}
 	kol-input .error {
 		order: 1;
+		grid-area: error;
 	}
 	kol-input label {
 		order: 2;
+		grid-area: label;
+	}
+	kol-input .counter {
+		order: 2;
+		grid-area: counter;
+		justify-self: end;
 	}
 	kol-input .input {
 		order: 3;
+		grid-area: input;
 	}
 	kol-input .hint {
 		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
+		grid-area: hint;
 	}
 	textarea {
 		border: none;
@@ -4694,33 +4588,28 @@ const BMF = KoliBri.createTheme("bmf", {
 		overflow-y: hidden;
 	}
 	caption {
-		padding: 0.5em;
-	}
-	th {
-		font-weight: normal;
-		color: var(--color-midnight);
-	}
-	:host table thead tr:first-child th,
-	:host table thead tr:first-child td {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
 		border-width: 0;
-		border-top-width: 2px;
-		border-style: solid;
-		border-color: var(--color-ice);
 	}
 	table {
 		width: 100%;
 		border-spacing: 0;
 	}
-	table,
-	:host table thead tr:last-child th,
-	:host table thead tr:last-child td {
-		border-width: 0;
-		border-bottom-width: 2px;
-		border-style: solid;
-		border-color: var(--color-ice);
+	tbody tr:last-child th,
+	tr:last-child td {
+		border-bottom-width: 0;
 	}
 	th {
-		background-color: var(--color-white);
+		padding: 0.75em 0;
+		font-weight: 700;
+		color: var(--color-black);
 	}
 	th div {
 		width: 100%;
@@ -4735,12 +4624,20 @@ const BMF = KoliBri.createTheme("bmf", {
 	th div.right {
 		justify-content: end;
 	}
-	tr:nth-child(even) {
-		background-color: #f2f2f2;
-	}
 	th,
 	td {
-		padding: 0.5em;
+		vertical-align: top;
+		border-bottom: 1px solid var(--color-granite);
+		height: 1.25rem;
+	}
+	tbody th,
+	td {
+		padding: 1em 0;
+	}
+	th kol-button,
+	td kol-button {
+		margin-top: -0.75rem;
+		margin-bottom: -0.75rem;
 	}
 	td.center > div {
 		display: flex;
@@ -4754,9 +4651,6 @@ const BMF = KoliBri.createTheme("bmf", {
 	th[aria-sort="descending"] {
 		font-weight: 700;
 	}
-	:host > div:last-child {
-		padding: 0.5em;
-	}
 	:host > div:last-child,
 	:host > div:last-child > div:last-child {
 		display: grid;
@@ -4764,6 +4658,11 @@ const BMF = KoliBri.createTheme("bmf", {
 		justify-items: center;
 		gap: 1em;
 	}
+	.pagination {
+		align-items: center;
+		justify-content: start;
+		grid-template-columns: auto 1fr;
+	}
 	@media (min-width: 1024px) {
 		:host > div:last-child,
 		:host > div:last-child > div:last-child {
@@ -4888,6 +4787,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	}
 	.entry.hide-label :is(a, button) {
 		padding: 0;
+		border-left: 0;
 	}`,
   "KOL-CARD": `/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
 	:host > div {
@@ -5224,7 +5124,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: inline-block;
 		margin-bottom: 0.25em;
 	}
-	fieldset [slot="input"] {
+	fieldset .input-slot {
 		gap: 0.5rem;
 	}
 	fieldset div label {
@@ -5399,7 +5299,9 @@ const BMF = KoliBri.createTheme("bmf", {
 	}`,
   "KOL-PAGINATION": `:host {
 		display: grid;
+		grid-template-columns: 1fr auto;
 		gap: 1rem;
+		align-items: center;
 	}
 	:host .navigation-list {
 		display: inline-flex;
@@ -19220,7 +19122,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		border: 0;
 		gap: 0.5rem;
 	}
-	div[slot="input"] {
+	.input-slot {
 		gap: 0.25rem;
 	}
 	fieldset kol-alert {
@@ -21317,7 +21219,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		border: 0;
 		gap: 0.5rem;
 	}
-	div[slot="input"] {
+	.input-slot {
 		gap: 0.25rem;
 	}
 	fieldset kol-alert {
@@ -25096,7 +24998,7 @@ const MFM = KoliBri.createTheme("mfm", {
 			display: inline-block;
 			margin-bottom: 0.25em;
 		}
-		fieldset [slot="input"] {
+		fieldset .input-slot {
 			gap: 0.5rem;
 		}
 		fieldset div label {
@@ -50375,7 +50277,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 		}
 		:is(a, button) > kol-span-wc {
 			font-weight: 700;
-			border-radius: var(--a11y-min-size);
+			border-radius: var(--border-radius);
 			border-style: solid;
 			border-width: var(--border-width);
 			min-height: var(--a11y-min-size);
@@ -52193,7 +52095,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			display: inline-block;
 			margin-bottom: calc(var(--spacing) / 2);
 		}
-		fieldset [slot='input'] {
+		fieldset .input-slot {
 			gap: var(--spacing);
 		}
 		fieldset div label {