@public-ui/themes 1.7.6-rc.2 → 1.7.7

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:{};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;}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);}}
+const N=(e,t)=>s=>s(e,t),P=(e,t)=>s=>s(e,t,{append:!1}),o=typeof window=="object"?window:typeof global=="object"?global:typeof self=="object"?self:{};const c=new Map,C=[],v=new Set,h=new Map,B=/--[^;]+/g,G=/:/;(typeof o.A11yUi!="object"||o.A11yUi===null)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:C,STYLING_TASK_QUEUE:c});const K=(e,t)=>{let s=t.match(B);if(Array.isArray(s)){s=s.filter(r=>G.test(r));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}v.add(e);},d=(e,t)=>typeof o.A11yUi=="object"&&o.A11yUi!==null&&typeof o.A11yUi.Themes=="object"&&o.A11yUi.Themes!==null&&typeof o.A11yUi.Themes[e]=="object"&&o.A11yUi.Themes[e]!==null&&typeof o.A11yUi.Themes[e][t]=="string"?o.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE")e.removeChild(t);else break},F=(e,t)=>{try{const s=[];t.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),e.adoptedStyleSheets=s;}catch{t.reverse().forEach(s=>{const a=document.createElement("style");a.innerHTML=s,e.insertBefore(a,e.firstChild);});}},Q=(e,t,s)=>{if(s!==!1){const a=[...Array.from(e.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>t.unshift(n.innerHTML)),r.reverse().forEach(n=>t.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>t.push(n.innerHTML)),r.forEach(n=>t.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},L=(e,t,s)=>{const a=t.name||"default";let r;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch{r=e;}if(h.get(a)?.has(e.tagName))M(e,r,h.get(a)?.get(e.tagName),s);else {const n=d(a,"PROPERTIES"),i=d(a,"GLOBAL"),H=d(a,e.tagName);v.has(a)===!1&&K(a,i);const m=[n,i,H];Q(r,m,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,m),t.cache===!0&&(h.has(a)===!1&&h.set(a,new Map),h.get(a)?.set(e.tagName,m)),M(e,r,m,s);}},M=(e,t,s,a)=>{q(t),F(t,s),e.style.display=a;},$=e=>{e.loglevel==="debug"&&C.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},O=(e,t)=>{W(e),$(t);},X=e=>{for(const t of e)if(c.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=c.get(t.target);L(t.target,a,s),O(t.target,a);}};let f;try{f=new MutationObserver(X);}catch{f=null;}class te{constructor(t,s,a){this.createTheme=(r,n)=>P(r,n),this.createTranslation=(r,n)=>N(r,n),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
 
 var KeyEnum = /* @__PURE__ */ ((KeyEnum2) => {
   KeyEnum2[KeyEnum2["error"] = 0] = "error";
@@ -383,7 +383,7 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
   return TagEnum2;
 })(TagEnum || {});
 
-const KoliBri = new Theme("kol", KeyEnum, TagEnum);
+const KoliBri = new te("kol", KeyEnum, TagEnum);
 
 const BAMF = KoliBri.createTheme("bamf", {});
 
@@ -411,7 +411,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		--spacing: 0.25em;
 	}
 	:host {
-		color: var(--color-black);
+		background-color: transparent; /* Reset global background-color defined by components */
 	}
 	:host * {
 		box-sizing: border-box;
@@ -1590,7 +1590,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		border-color: var(--border-default);
 		background-color: var(--background-light-grey);
 	}
-	:host fieldset #error {
+	kol-alert.error {
 		order: 3;
 	}
 	:host fieldset legend {
@@ -1600,7 +1600,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 	:host fieldset kol-input {
 		order: 2;
 	}
-	:host fieldset kol-alert#error {
+	kol-alert.error {
 		padding-left: 0.5em;
 		color: var(--color-warning);
 	}
@@ -3250,7 +3250,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 		--spacing: 0.25em;
 	}
 	:host {
-		color: var(--color-black);
+		background-color: transparent; /* Reset global background-color defined by components */
 	}
 	:host * {
 		box-sizing: border-box;
@@ -4344,10 +4344,10 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 			height: 1.25em;
 			left: 2px;
 		}
-		&:has(input:checked) .icon {
+		&.checked .icon {
 			transform: translate(2em, -50%);
 		}
-		&:has(input:indeterminate) .icon {
+		&.indeterminate .icon {
 			transform: translate(1em, -50%);
 		}
 	}
@@ -4442,7 +4442,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 		border-color: var(--border-default);
 		background-color: var(--background-light-grey);
 	}
-	:host fieldset #error {
+	kol-alert.error {
 		order: 3;
 	}
 	:host fieldset legend {
@@ -4452,7 +4452,7 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 	:host fieldset kol-input {
 		order: 2;
 	}
-	:host fieldset kol-alert#error {
+	kol-alert.error {
 		padding-left: 0.5em;
 		color: var(--color-warning);
 	}
@@ -7875,6 +7875,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	.disabled {
 		opacity: 0.33;
+	}
+	.button:focus-within {
+		outline: var(--focusOutline);
+		outline-offset: 2px;
 	}`,
   "KOL-INPUT-RADIO": `:host {
 		--border-width: 1px;
@@ -8791,6 +8795,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		--spacing: 0.25em;
 	}
 	:host {
+		background-color: transparent; /* Reset global background-color defined by components */
 		font-family: var(--font-family); /* font-size: var(--font-size); */
 	}
 	* {
@@ -8841,7 +8846,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	}
 	kol-tooltip-wc .tooltip-area {
 		background-color: var(--color-white);
-		color: var(--color-metal);
+		color: var(--color-black);
 	}
 	kol-tooltip-wc .tooltip-content {
 		border-radius: var(--border-radius);
@@ -8901,6 +8906,12 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--color-red);
 		color: var(--color-white);
 	}
+	.success :is(a, button) > kol-span-wc,
+	.success :is(a, button):disabled:hover > kol-span-wc {
+		background-color: var(--color-green);
+		border-color: var(--color-green);
+		color: var(--color-white);
+	}
 	.ghost :is(a, button) > kol-span-wc,
 	.ghost :is(a, button):disabled:hover > kol-span-wc {
 		border-color: var(--color-white);
@@ -8916,6 +8927,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.normal :is(a, button):hover > kol-span-wc,
 	.danger :is(a, button):active > kol-span-wc,
 	.danger :is(a, button):hover > kol-span-wc,
+	.success :is(a, button):active > kol-span-wc,
+	.success :is(a, button):hover > kol-span-wc,
 	.ghost :is(a, button):active > kol-span-wc,
 	.ghost :is(a, button):hover > kol-span-wc {
 		background-color: var(--color-ocean);
@@ -8936,6 +8949,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	.secondary :is(a, button):active > kol-span-wc,
 	.normal :is(a, button):active > kol-span-wc,
 	.danger :is(a, button):active > kol-span-wc,
+	.success :is(a, button):active > kol-span-wc,
 	.ghost :is(a, button):active > kol-span-wc {
 		border-color: var(--color-white);
 		box-shadow: none;
@@ -8961,6 +8975,14 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(a, button).transparent > kol-span-wc {
 		background-color: transparent;
 		border-color: transparent;
+	}
+	/** CUSTOM_CLASS */
+	:is(a, button).icon-only > kol-span-wc {
+		padding: 8px;
+		width: unset;
+	}
+	:is(a, button).icon-only > kol-span-wc > span > span {
+		display: block;
 	}`,
   "KOL-INPUT-TEXT": `kol-input {
 		gap: 0.25em;
@@ -10538,11 +10560,11 @@ const BMF = KoliBri.createTheme("bmf", {
 		width: 100%;
 		min-height: 44px;
 	}
-	:host kol-input.default {
+	:host kol-input.default:not(.hide-label) {
 		grid-template-columns: 1.5rem auto;
 		gap: 0.4em;
 	}
-	:host kol-input.switch {
+	:host kol-input.switch:not(.hide-label) {
 		grid-template-columns: 3.5rem auto;
 		gap: 0.4em;
 	}
@@ -10591,6 +10613,17 @@ const BMF = KoliBri.createTheme("bmf", {
 		line-height: 24px;
 		font-size: 1rem;
 	}
+	:host kol-input.default .checkbox-container {
+		justify-content: flex-start;
+	}
+	:host kol-input.default input[type='checkbox']:indeterminate {
+		background-color: var(--color-midnight);
+		border-color: var(--color-midnight);
+	}
+	:host kol-input.default .icon {
+		color: var(--color-white);
+		margin: -0.125rem 0 0 0.25rem; /* visually align */
+	}
 	:host input:hover {
 		border-color: var(--color-midnight);
 		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
@@ -10630,42 +10663,17 @@ const BMF = KoliBri.createTheme("bmf", {
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
 	}
-	:host kol-input.default input[type="checkbox"]:before {
-		border-radius: 1.5em;
-		background-color: transparent;
-		display: block;
-		height: calc(6 * var(--spacing));
-		position: relative;
-		width: calc(6 * var(--spacing));
-	}
-	:host kol-input.default input[type="checkbox"]:checked:before {
-		border-right-width: 3px;
-		border-bottom-width: 3px;
-		left: calc(1.5 * var(--spacing) - 2px);
-		top: calc(2.85 * var(--spacing) - 2px);
-		transform: rotate(40deg) translate(-50%, -50%);
-		background-color: transparent;
-		border-width: 0px 3px 3px 0px;
-		border-color: white;
-		border-radius: 1px;
-		border-style: solid;
-		height: calc(3 * var(--spacing));
-		width: calc(1.5 * var(--spacing));
-	}
-	:host kol-input.default input[type="checkbox"]:indeterminate {
-		--tw-bg-opacity: 1;
-		background-color: var(--color-midnight);
-	}
-	:host kol-input.default input[type="checkbox"]:indeterminate:before {
-		background-color: var(--color-white);
-		height: 0.125rem;
-		top: 0.6rem;
-		left: 0.25rem;
-		width: calc(3 * var(--spacing));
-		transform: inherit;
-	}
-	:host kol-input.default input[type="checkbox"]:checked:indeterminate:before {
-		border-width: 0px 1px 1px 0px;
+	.default {
+		.icon::part(icon) {
+			font-family: 'Font Awesome 6 Free';
+			font-weight: 900;
+		}
+		&.checked .icon::part(icon)::before {
+			content: '\\f00c';
+		}
+		&.indeterminate .icon::part(icon)::before {
+			content: '\\f068';
+		}
 	}
 	:host kol-input.switch input[type="checkbox"] {
 		min-width: 3.5em;
@@ -10674,7 +10682,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-width: 0;
 		height: 1.5em;
 		border-radius: 1.25em;
-		display: inline-block;
 		position: relative;
 	}
 	:host kol-input.switch input[type="checkbox"]:before {
@@ -10710,6 +10717,9 @@ const BMF = KoliBri.createTheme("bmf", {
 		transform: translateX(1em);
 	}
 	.switch {
+		& .checkbox-input-element {
+			display: block;
+		}
 		& .icon {
 			width: 1.25em;
 			height: 1.25em;
@@ -10723,13 +10733,13 @@ const BMF = KoliBri.createTheme("bmf", {
 				content: "\\2b";
 			}
 		}
-		&:has(input:checked) .icon {
+		&.checked .icon {
 			transform: translate(2em, -50%);
 			&::part(icon)::before {
 				content: "\\f00c";
 			}
 		}
-		&:has(input:indeterminate) .icon {
+		&.indeterminate .icon {
 			transform: translate(1em, -50%);
 			&::part(icon)::before {
 				content: "\\f068";
@@ -10764,11 +10774,22 @@ const BMF = KoliBri.createTheme("bmf", {
 		min-width: 32px;
 		place-content: center;
 	}
+	:host kol-input.button.hide-label > .input {
+		border-top-right-radius: var(--border-radius);
+		border-bottom-right-radius: var(--border-radius);
+	}
 	:host kol-input.button > .input > div {
 		display: flex;
 	}
 	:host kol-input.button .icon {
 		height: auto;
+	}
+	.button:focus-within {
+		border-radius: var(--a11y-min-size);
+		outline-color: var(--color-ocean);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 3px;
 	}`,
   "KOL-INPUT-RADIO": `/* INPUT */
 	kol-input {
@@ -10858,7 +10879,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--border-default);
 		background-color: var(--background-light-grey);
 	}
-	fieldset #error {
+	kol-alert.error {
 		order: 1;
 	}
 	fieldset legend {
@@ -10872,7 +10893,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		padding-left: 1em;
 		border-left: 3px solid var(--color-red);
 	}
-	fieldset kol-alert#error {
+	kol-alert.error {
 		color: var(--color-red);
 		font-weight: 700;
 	}
@@ -18505,6 +18526,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			--color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
 		}
 		:host {
+			background-color: transparent; /* Reset global background-color defined by components */
 			font-family: var(--font-family);
 			font-size: var(--font-size);
 		}
@@ -20128,6 +20150,9 @@ const DEFAULT = KoliBri.createTheme("default", {
 		:host kol-input.button {
 			gap: 0.4rem 0;
 		}
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		:host kol-input > div.input {
 			display: inherit;
 			min-height: var(--a11y-min-size);
@@ -20196,13 +20221,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			cursor: pointer;
 			transition: 0.5s;
 		}
-		:host kol-input input[type='checkbox'].kol-disabled:before {
-			cursor: not-allowed;
-		}
-		:host kol-input input[type='checkbox']:before {
-			content: '';
-			cursor: pointer;
-		}
 		:host kol-input input[type='checkbox']:checked {
 			background-color: var(--color-primary);
 			border-color: var(--color-primary);
@@ -20213,51 +20231,22 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-width: calc(6 * 0.25rem);
 			width: calc(6 * 0.25rem);
 		}
-		:host kol-input.default input[type='checkbox']:before {
-			border-radius: 1.5em;
-			background-color: transparent;
-			display: block;
-			height: calc(6 * 0.25rem);
-			position: relative;
-			width: calc(6 * 0.25rem);
-		}
-		:host kol-input.default input[type='checkbox']:checked:before {
-			border-right-width: 3px;
-			border-bottom-width: 3px;
-			left: calc(1.5 * 0.25rem - 2px);
-			top: calc(2.85 * 0.25rem - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			background-color: transparent;
-			border-width: 0px 3px 3px 0px;
-			border-color: white;
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * 0.25rem);
-			width: calc(1.5 * 0.25rem);
-		}
 		:host kol-input.default input[type='checkbox']:indeterminate {
 			background-color: var(--color-primary);
 		}
-		:host kol-input.default input[type='checkbox']:indeterminate:before {
-			background-color: var(--color-light);
-			height: 0.125rem;
-			top: 0.6rem;
-			left: 0.25rem;
-			width: calc(3 * 0.25rem);
-			transform: inherit;
-		}
-		:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
-			border-width: 0px 1px 1px 0px;
+		:host kol-input.default .icon {
+			color: var(--color-light);
+			margin-left: 0.25rem;
 		}
 		:host kol-input.switch input[type='checkbox'] {
-			min-width: 3.5em;
-			width: 3.5em;
 			background-color: var(--color-subtle);
+			border-radius: 1.25em;
 			border-width: 0;
+			display: block;
 			height: 1.5em;
-			border-radius: 1.25em;
-			display: inline-block;
+			min-width: 3.5em;
 			position: relative;
+			width: 3.5em;
 		}
 		:host kol-input.switch input[type='checkbox']:before {
 			width: 1.25em;
@@ -20284,17 +20273,24 @@ const DEFAULT = KoliBri.createTheme("default", {
 				left: 2px;
 			}
 
-			&:has(input:checked) .icon {
+			&.checked .icon {
 				transform: translate(2em, -50%);
 			}
 
-			&:has(input:indeterminate) .icon {
+			&.indeterminate .icon {
 				transform: translate(1em, -50%);
 			}
 		}
 		:host .disabled {
 			opacity: 0.33;
 		}
+		.button:focus-within {
+			border-radius: var(--border-radius);
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+		}
 	`,
   "KOL-INPUT-RADIO": css$1`
 		label {
@@ -20378,7 +20374,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			cursor: not-allowed;
 			background-color: var(--color-mute-variant);
 		}
-		fieldset #error {
+		kol-alert.error {
 			order: 1;
 		}
 		fieldset legend {
@@ -20392,7 +20388,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			padding-left: 1rem;
 			border-left: 3px solid var(--color-danger);
 		}
-		fieldset kol-alert#error {
+		kol-alert.error {
 			color: var(--color-danger);
 			font-weight: 700;
 		}
@@ -20966,6 +20962,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		--spacing-2xs: 4px; /* ?! */
 	}
 	:host {
+		background-color: transparent; /* Reset global background-color defined by components */
 		display: inline-block;
 		font-family: var(--font-family);
 	}
@@ -21459,7 +21456,11 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		background-color: var(--color-blue);
 		border-color: var(--color-blue);
 	}`,
-  "KOL-INPUT-CHECKBOX": `input[type="checkbox"] {
+  "KOL-INPUT-CHECKBOX": `
+	.checkbox-container {
+		justify-content: flex-start;
+	}
+	input[type="checkbox"] {
 		background-color: var(--color-white);
 		border-width: 2px;
 		border-style: solid;
@@ -21487,12 +21488,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		background-color: var(--color-blue-130);
 		border-color: var(--color-blue-130);
 	}
-	input[type="checkbox"]:checked::before {
-		border-color: var(--color-white);
-	}
-	input[type="checkbox"]:indeterminate:hover::before {
-		background-color: var(--color-blue-130);
-	}
 	.error input[type="checkbox"] {
 		border-color: var(--color-red);
 	}
@@ -21507,12 +21502,18 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		background-color: var(--color-red-1xx);
 		border-color: var(--color-red-1xx);
 	}
-	.error input[type="checkbox"]:indeterminate:hover::before {
-		background-color: var(--color-red-1xx);
-	}
 	.error.required label > span::after {
 		color: var(--color-red);
 	}
+	.default .icon {
+		margin-left: 0.2rem;
+	}
+	.default.checked .icon {
+		color: var(--color-white);
+	}
+	.switch input[type='checkbox'] {
+		display: block;
+	}
 	.switch input[type="checkbox"]::before,
 	.switch input[type="checkbox"]:indeterminate::before {
 		background-color: var(--color-grey-75);
@@ -21559,6 +21560,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	.hint {
 		font-size: 0.875rem;
 		order: 4;
+	}
+	.button:focus-within {
+		outline-color: var(--color-blue);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 2px;
 	}`,
   "KOL-INPUT-COLOR": `kol-input {
 		color: var(--color-grey);
@@ -22498,6 +22505,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		--spacing-2xs: 4px; /* ?! */
 	}
 	:host {
+		background-color: transparent; /* Reset global background-color defined by components */
 		display: inline-block;
 		font-family: var(--font-family);
 	}
@@ -23061,7 +23069,10 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	:host > div > div.content + div.footer {
 		border-top: 2px solid var(--color-blue);
 	}`,
-  "KOL-INPUT-CHECKBOX": `input[type="checkbox"] {
+  "KOL-INPUT-CHECKBOX": `.checkbox-container {
+			justify-content: flex-start;
+		}
+	input[type="checkbox"] {
 		background-color: var(--color-white);
 		border-width: 2px;
 		border-style: solid;
@@ -23089,12 +23100,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		background-color: var(--color-blue-130);
 		border-color: var(--color-blue-130);
 	}
-	input[type="checkbox"]:checked::before {
-		border-color: var(--color-white);
-	}
-	input[type="checkbox"]:indeterminate:hover::before {
-		background-color: var(--color-blue-130);
-	}
 	.error input[type="checkbox"] {
 		border-color: var(--color-red);
 	}
@@ -23109,12 +23114,18 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		background-color: var(--color-red-1xx);
 		border-color: var(--color-red-1xx);
 	}
-	.error input[type="checkbox"]:indeterminate:hover::before {
-		background-color: var(--color-red-1xx);
-	}
 	.error.required label > span::after {
 		color: var(--color-red);
 	}
+	.default .icon {
+		margin-left: 0.2rem;
+	}
+	.default.checked .icon {
+		color: var(--color-white);
+	}
+	.switch input[type='checkbox'] {
+		display: block;
+	}
 	.switch input[type="checkbox"]::before,
 	.switch input[type="checkbox"]:indeterminate::before {
 		background-color: var(--color-grey-75);
@@ -23213,6 +23224,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	}
 	.error .input {
 		border-color: var(--color-red);
+	}
+	.button:focus-within {
+		outline-color: var(--color-blue-130);
+		outline-style: solid;
+		outline-width: 2px;
 	}`,
   "KOL-INPUT-FILE": `kol-input {
 		color: var(--color-grey);
@@ -23926,6 +23942,7 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		--kolibri-spacing: calc(2 * var(--spacing));
 	}
 	:host {
+		background-color: transparent; /* Reset global background-color defined by components */
 		font-family: var(--font-family); /* font-size: var(--font-size); */
 	}
 	* {
@@ -25190,7 +25207,11 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		border-top-color: var(--color-achat);
 		border-top-width: 1px;
 	}`,
-  "KOL-INPUT-CHECKBOX": `/* ALL INPUT, SELECT, TEXTAREA */
+  "KOL-INPUT-CHECKBOX": `
+	.checkbox-container {
+		justify-content: flex-start;
+	}
+	/* ALL INPUT, SELECT, TEXTAREA */
 	label {
 		cursor: pointer;
 	}
@@ -25250,13 +25271,6 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		cursor: pointer;
 		transition: 0.5s;
 	}
-	input[type="checkbox"].kol-disabled:before {
-		cursor: not-allowed;
-	}
-	input[type="checkbox"]:before {
-		content: "";
-		cursor: pointer;
-	}
 	input[type="checkbox"]:checked {
 		background-color: var(--color-petrol);
 		border-color: var(--color-petrol);
@@ -25267,41 +25281,17 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		min-width: calc(6 * 2 * var(--spacing));
 		width: calc(6 * 2 * var(--spacing));
 	}
-	.default input[type="checkbox"]:before {
-		/* border-radius: 0.25em; */
-		background-color: transparent;
-		display: block;
-		height: calc(6 * 2 * var(--spacing));
-		position: relative;
-		width: calc(6 * 2 * var(--spacing));
-	}
-	.default input[type="checkbox"]:checked:before {
-		border-right-width: 3px;
-		border-bottom-width: 3px;
-		left: calc(1.5 * 2 * var(--spacing) - 2px);
-		top: calc(2.85 * 2 * var(--spacing) - 2px);
-		transform: rotate(40deg) translate(-50%, -50%);
-		background-color: transparent;
-		border-width: 0px 3px 3px 0px;
-		border-color: white;
-		border-radius: 1px;
-		border-style: solid;
-		height: calc(3 * 2 * var(--spacing));
-		width: calc(1.5 * 2 * var(--spacing));
+	.default .icon {
+		margin-left: 0.25rem;
 	}
-	.default input[type="checkbox"]:indeterminate:before {
-		background-color: var(--kolibri-color-normal);
-		height: 0.375rem;
-		top: 0.45rem;
-		left: 0.15rem;
-		width: calc(4 * 2 * var(--spacing));
+	.default.checked .icon {
+		color: var(--color-weiss);
 	}
 	.switch input[type="checkbox"] {
-		/* border-radius: 0.25em; */
+		display: block;
 		min-width: 3.2em;
 		width: 3.2em;
 		height: 1.7em;
-		display: inline-block;
 		position: relative;
 	}
 	.switch input[type="checkbox"]:before {
@@ -25331,15 +25321,12 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		transform: translateX(0.75em);
 		background-color: var(--color-petrol);
 	}
-	.switch:has(input:not(:checked), input:indeterminate) .icon {
+	.switch:is(:not(.checked), .indeterminate) .icon {
 		color: #fff;
 	}
 	.disabled {
 		opacity: 0.33;
 	}
-	.default kol-icon {
-		display: none;
-	}
 	kol-input span.hint {
 		grid-column: span 2;
 		font-style: italic;
@@ -25347,6 +25334,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		display: block;
 		order: 3;
 		padding: 0 var(--spacing);
+	}
+	.button:focus-within {
+		border-radius: 2rem;
+		outline-color: var(--color-achat) !important;
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 3px;
 	}`,
   "KOL-INPUT-RADIO": `/* INPUT */
 	:host input:focus {
@@ -25662,6 +25656,7 @@ const MFM = KoliBri.createTheme("mfm", {
 			--spacing: 0.25em;
 		}
 		:host {
+			background-color: transparent; /* Reset global background-color defined by components */
 			font-family: var(--font-family); /* font-size: var(--font-size); */
 		}
 		* {
@@ -27479,6 +27474,13 @@ const MFM = KoliBri.createTheme("mfm", {
 		}
 		:host .disabled {
 			opacity: 0.33;
+		}
+		.button:focus-within {
+			border-radius: 0.25rem;
+			outline-color: var(--color-ocean);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
 		}`,
   "KOL-INPUT-RADIO": `/* INPUT */
 		kol-input {
@@ -27567,7 +27569,7 @@ const MFM = KoliBri.createTheme("mfm", {
 			border-color: var(--border-default);
 			background-color: var(--background-light-grey);
 		}
-		fieldset #error {
+		kol-alert.error {
 			order: 1;
 		}
 		fieldset legend {
@@ -27581,7 +27583,7 @@ const MFM = KoliBri.createTheme("mfm", {
 			padding-left: 1em;
 			border-left: 3px solid var(--color-red);
 		}
-		fieldset kol-alert#error {
+		kol-alert.error {
 			color: var(--color-red);
 			font-weight: 700;
 		}
@@ -35237,6 +35239,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		--font-size: 16px;
 	}
 	:host {
+		background-color: transparent; /* Reset global background-color defined by components */1
 		font-family: var(--font-family); /* font-size: var(--font-size); */
 	}
 	* {
@@ -36070,6 +36073,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		content: "*";
 		padding-left: 0.125em;
 	}
+	.checkbox-container {
+		justify-content: flex-start;
+	}
 	input:hover {
 		border-color: var(--kolibri-color-primary);
 	} /* NEU */
@@ -36110,13 +36116,6 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		cursor: pointer;
 		transition: 0.5s;
 	}
-	input[type="checkbox"].kol-disabled:before {
-		cursor: not-allowed;
-	}
-	input[type="checkbox"]:before {
-		content: "";
-		cursor: pointer;
-	}
 	input[type="checkbox"]:checked {
 		background-color: var(--kolibri-color-primary);
 		border-color: var(--kolibri-color-primary);
@@ -36127,41 +36126,21 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		min-width: calc(6 * var(--kolibri-spacing));
 		width: calc(6 * var(--kolibri-spacing));
 	}
-	.default input[type="checkbox"]:before {
-		border-radius: 0.25em;
-		background-color: transparent;
-		display: block;
-		height: calc(6 * var(--kolibri-spacing));
-		position: relative;
-		width: calc(6 * var(--kolibri-spacing));
+	.default .icon {
+		margin-left: 0.25rem;
 	}
-	.default input[type="checkbox"]:checked:before {
-		border-right-width: 3px;
-		border-bottom-width: 3px;
-		left: calc(1.5 * var(--kolibri-spacing) - 2px);
-		top: calc(2.85 * var(--kolibri-spacing) - 2px);
-		transform: rotate(40deg) translate(-50%, -50%);
-		background-color: transparent;
-		border-width: 0px 3px 3px 0px;
-		border-color: white;
-		border-radius: 1px;
-		border-style: solid;
-		height: calc(3 * var(--kolibri-spacing));
-		width: calc(1.5 * var(--kolibri-spacing));
+	.default.checked .icon {
+		color: #fff;
 	}
-	.default input[type="checkbox"]:indeterminate:before {
-		background-color: var(--kolibri-color-normal);
-		height: 0.375rem;
-		top: 0.45rem;
-		left: 0.15rem;
-		width: calc(4 * var(--kolibri-spacing));
+	.default.indeterminate .icon {
+		color: var(--kolibri-color-normal);
 	}
 	.switch input[type="checkbox"] {
+		display: block;
 		min-width: 3.2em;
 		width: 3.2em;
 		height: 1.7em;
 		border-radius: 0.25em;
-		display: inline-block;
 		position: relative;
 	}
 	.switch input[type="checkbox"]:before {
@@ -36191,11 +36170,18 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		transform: translateX(0.75em);
 		background-color: var(--kolibri-color-primary);
 	}
-	.switch:has(input:not(:checked), input:indeterminate) .icon {
+	.switch:is(.checked, .indeterminate) .icon {
 		color: #fff;
 	}
 	.disabled {
 		opacity: 0.33;
+	}
+	.button:focus-within {
+		border-radius: var(--kolibri-border-radius);
+		outline-color: var(--kolibri-color-outline);
+		outline-offset: 2px;
+		outline-style: solid;
+		outline-width: 3px;
 	}`,
   "KOL-INPUT-RADIO": `label {
 		cursor: pointer;
@@ -36264,7 +36250,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		box-shadow: 0 0 0.1rem black;
 		background-color: var(--kolibri-color-primary);
 	}
-	fieldset #error {
+	kol-alert.error {
 		margin: 0.4em 0;
 		order: 3;
 	}
@@ -52801,6 +52787,7 @@ const css = (input) => input.join(``);
 const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
   GLOBAL: css`
 		:host {
+			background-color: transparent; /* Reset global background-color defined by components */
 			--border-color: var(--color-neutral);
 			--border-radius: 0.25rem;
 			--box-shadow: rgba(0, 0, 0, 0.12) 0 12px 12px -4px, rgba(0, 0, 0, 0.04) 0 4px 4px -4px;
@@ -53617,12 +53604,16 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		:host {
 			--spacing: 0.25rem;
 		}
+
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		input {
 			border-color: var(--color-neutral-dark);
 			border-width: 2px;
 			border-style: solid;
 		}
-		label {
+		.input-label {
 			padding-left: 0.75rem;
 		}
 		kol-input:not(.disabled):hover label,
@@ -53635,10 +53626,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		:host kol-input:not(.disabled) :is(.input, label) {
 			cursor: pointer;
 		}
-		:host kol-input.disabled :is(.input, label),
-		:host kol-input.disabled input[type='checkbox']::before {
-			cursor: not-allowed;
-		}
 		.required label > span::after {
 			content: '*';
 			padding-left: 0.125em;
@@ -53682,9 +53669,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			background-color: white;
 			transition: 0.5s;
 		}
-		input[type='checkbox']:before {
-			content: '';
-		}
 		input[type='checkbox']:checked,
 		input[type='checkbox']:indeterminate {
 			background-color: var(--color-blau);
@@ -53696,44 +53680,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			min-width: calc(6 * var(--spacing));
 			width: calc(6 * var(--spacing));
 		}
-		.default input[type='checkbox']:before {
-			border-radius: 0.25em;
-			background-color: transparent;
-			display: block;
-			height: calc(6 * var(--spacing));
-			position: relative;
-			width: calc(6 * var(--spacing));
-		}
-		.default input[type='checkbox']:checked:before {
-			border-right-width: 3px;
-			border-bottom-width: 3px;
-			left: calc(1.5 * var(--spacing) - 2px);
-			top: calc(2.85 * var(--spacing) - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			background-color: transparent;
-			border-width: 0px 3px 3px 0px;
-			border-color: white;
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * var(--spacing));
-			width: calc(1.5 * var(--spacing));
-		}
 		.default input[type='checkbox']:indeterminate {
 			background-color: var(--color-blau);
 		}
-		.default input[type='checkbox']:indeterminate:before {
-			background-color: white;
-			height: 0.25rem;
-			top: 0.5rem;
-			left: 0.25rem;
-			width: 0.75rem;
+		.default .icon {
+			color: #fff;
+			margin-left: 0.25rem;
 		}
 		.switch input[type='checkbox'] {
+			display: block;
 			min-width: 3.2em;
 			width: 3.2em;
 			height: 1.7em;
 			border-radius: 0.25em;
-			display: inline-block;
 			position: relative;
 		}
 		.switch input[type='checkbox']:before {
@@ -53766,12 +53725,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			transform: translateX(0.75em);
 			background-color: white;
 		}
-		.switch:has(input:not(:checked, :indeterminate)) .icon {
+		.switch:not(.checked):not(.indeterminate) .icon {
 			color: #fff;
 		}
 		.disabled {
 			opacity: 0.33;
 		}
+		.button:focus-within {
+			border-radius: var(--border-radius);
+			outline-color: var(--color-blau-dark);
+			outline-offset: 0.125rem;
+			outline-style: solid;
+			outline-width: 0.125rem;
+		}
 	`,
   "KOL-INPUT-RADIO": css`
 		/* ALL INPUT, SELECT, TEXTAREA */
@@ -53787,12 +53753,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			border-width: 2px;
 			border-style: solid;
 		}
-		kol-input:has(input:disabled) input,
-		kol-input:has(input:disabled) label {
+
+		kol-input.disabled input,
+		kol-input.disabled label {
 			cursor: not-allowed !important;
 			opacity: 0.5;
 		}
-		kol-input:hover:has(input:not(:disabled)) label,
+		kol-input:hover:not(.disabled) label,
 		kol-input:focus-within {
 			text-decoration: underline;
 		}
@@ -53847,7 +53814,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			box-shadow: 0 0 0.1rem black;
 			background-color: var(--color-blau);
 		}
-		fieldset #error {
+		kol-alert.error {
 			margin: 0.4em 0;
 			order: 3;
 		}