@public-ui/themes 1.6.0-rc.23 → 1.6.0-rc.24

package/dist/index.mjs

@@ -4001,6 +4001,12 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: grid;
 		gap: var(--kolibri-spacing);
 	}
+	.msg {
+		background-color: transparent;
+	}
+	.msg > .heading {
+		place-items: flex-start;
+	}
 	.msg > .heading > kol-icon {
 		place-self: baseline;
 	}
@@ -4092,7 +4098,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-orange);
 	}
 	.card {
-		border-width: 3px;
+		border-width: 2px;
 		border-style: solid;
 		filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
 		flex-direction: column;
@@ -4100,7 +4106,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	.card > .heading {
 		padding: 0.5rem 1rem;
 	}
-	.card[_has-closer] > .heading {
+	.card.hasCloser > .heading {
 		padding-top: 0;
 		padding-bottom: 0;
 		padding-right: 0;
@@ -4123,23 +4129,46 @@ const BMF = KoliBri.createTheme("bmf", {
 	.card > .heading kol-heading-wc > * {
 		margin: auto 0;
 	}
+	.card > .heading kol-button-wc button:focus {
+		outline-color: var(--color-white);
+		outline-offset: -3px;
+		outline-style: solid;
+		outline-width: 3px;
+		transition: outline 0.1s linear;
+	}
+	.card > .heading kol-button-wc button:hover {
+		background-color: rgba(32, 32, 32, 0.2);
+	}
+	.card > .heading kol-button-wc button:active {
+		background-color: rgba(32, 32, 32, 0.4);
+	}
+	.card > .heading kol-button-wc button:hover:focus {
+		background-color: rgba(32, 32, 32, 0.1);
+	}
 	.card > .content {
-		padding: 0.5rem 1rem;
+		padding: 1rem;
+		max-height: 9.5rem;
+  	overflow-y: auto;
 	}
 	.card.default > .heading {
 		background-color: var(--color-grey);
+		border-bottom: 2px solid var(--color-grey);
 	}
 	.card.error > .heading {
 		background-color: var(--color-red);
+		border-bottom: 2px solid var(--color-red);
 	}
 	.card.info > .heading {
 		background-color: var(--color-midnight);
+		border-bottom: 2px solid var(--color-midnight);
 	}
 	.card.success > .heading {
 		background-color: var(--color-green);
+		border-bottom: 2px solid var(--color-green);
 	}
 	.card.warning > .heading {
 		background-color: var(--color-orange);
+		border-bottom: 2px solid var(--color-orange);
 	}
 	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
 		font-family: "Font Awesome 6 Free" !important;
@@ -4206,20 +4235,20 @@ const BMF = KoliBri.createTheme("bmf", {
 		background-color: rgba(0, 0, 0, 0);
 		border-color: rgba(0, 0, 0, 0);
 	}
-	.close > button.hide-label {
+	.close > button {
 		padding: 8px;
 	}
-	.close > button.hide-label kol-icon {
+	.close > button kol-icon {
 		display: flex;
 		width: 1em;
 		height: 1em;
 		font-size: 1rem;
 	}
-	.close > button.hide-label kol-icon::part(icon) {
+	.close > button kol-icon::part(icon) {
 		font-family: "Font Awesome 6 Free";
 		font-weight: 900;
 	}
-	.close > button.hide-label kol-icon::part(icon)::before {
+	.close > button kol-icon::part(icon)::before {
 		content: "\\f00d";
 	}
 	.close > button:active {
@@ -4900,8 +4929,13 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host kol-input > div.input input {
 		margin: 0px;
 	}
-	:host kol-input > label {
+	:host kol-input:not(.disabled) :is(.input, label) {
 		cursor: pointer;
+	}
+	:host kol-input.disabled :is(.input, label) {
+		cursor: not-allowed;
+	}
+	:host kol-input > label {
 		order: 3;
 	}
 	:host kol-input > kol-alert.error {
@@ -4923,7 +4957,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-weight: 700;
 	}
 	:host input {
-		cursor: pointer;
 		order: 1;
 		width: 100%;
 		border-color: var(--color-grey);
@@ -4957,15 +4990,10 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host kol-input input[type="checkbox"] {
 		appearance: none;
 		background-color: white;
-		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-midnight);
@@ -5205,7 +5233,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		margin-left: auto;
 		margin-right: unset;
 		padding: 2rem;
-		max-width: 750px;
+		max-width: 440px;
 	}
 	:host > div > kol-button-wc {
 		top: 0;
@@ -5428,8 +5456,8 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input {
-		border: none;
+	.inputs-wrapper {
+		gap: 1em;
 	}
 	input::placeholder {
 		color: var(--color-grey);
@@ -50243,468 +50271,2868 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}`
 });
 
-const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
-  GLOBAL: `:host {
-		--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;
-		--color-blau: #264f8e;
-		--color-blau-dark: #08335e;
-		--color-blau-light: #326cae;
-		--color-akzent: #ef9e48;
-		--color-akzent-dark: #da793c;
-		--color-akzent-light: #f5ba6c;
-		--color-neutral: #e3e3e3;
-		--color-neutral-dark: #646464;
-		--color-neutral-light: #f7f7f7;
-		--color-rot: #ce3033;
-		--color-gelb: #f6cd35;
-		--color-gruen: #008549;
-		--color-grau-100: hsl(0 0% 0%);
-		--color-grau-90: hsl(0 0% 10%);
-		--color-grau-80: hsl(0 0% 20%);
-		--color-grau-70: hsl(0 0% 30%);
-		--color-grau-60: hsl(0 0% 40%);
-		--color-grau-50: hsl(0 0% 50%);
-		--color-grau-40: hsl(0 0% 60%);
-		--color-grau-30: hsl(0 0% 70%);
-		--color-grau-20: hsl(0 0% 80%);
-		--color-grau-10: hsl(0 0% 90%);
-		--color-grau-0: hsl(0 0% 100%);
-		--gap: 0.25rem;
-		--spacing: 0.25rem;
-		--font-family: Roboto, Kreon, Georgia, Times New Roman, sans-serif;
-		--font-size: 16px;
-		--font-weight-bold: 700;
-		--line-height-bold: 1.2em; /* em! */
-		--line-height-regular: 1.5em; /* em! */
-	}
-	*[tabindex]:focus,
-	a:focus,
-	button:focus,
-	summary:focus,
-	kol-input:not(.checkbox, .radio) .input:focus-within,
-	kol-input:is(.checkbox, .radio) input:focus {
-		outline-color: var(--color-blau-dark);
-		outline-offset: 0.125rem;
-		outline-style: solid;
-		outline-width: 0.125rem;
-		transition: outline-offset 0.25s linear;
-	}
-	*:not(i) {
-		font-family: var(--font-family);
-	}
-	a,
-	button {
-		font-size: var(--font-size);
-		outline: none;
-	}
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-weight: var(--font-weight-bold);
-		line-height: var(--line-height-heading);
-		margin: 0;
-		padding: 0;
-	}
-	p {
-		font-weight: var(--font-weight);
-	}
-	kol-span-wc,
-	kol-span-wc > span {
-		gap: 0.5em;
-	}
-	.required label span::after,
-	.required legend span::after {
-		color: var(--color-red);
-		padding-left: 0.25em;
-	}
-	kol-tooltip .tooltip-area {
-		background-color: #f2f2f2;
-	}
-	kol-tooltip .tooltip-arrow {
-		background-color: #626262;
-	}
-	kol-tooltip .tooltip-content {
-		padding: 0.25rem 0.5rem;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		border-radius: 2px;
-		border: 1px solid #626262;
-	}`,
-  "KOL-BADGE": `:host {
-		display: inline-block;
-	}
-	:host > span {
-		border-radius: 0.3125rem;
-		display: inline-flex;
-		line-height: 1.25rem;
-	}
-	:host > span kol-span-wc {
-		padding: 0.25rem 0.5rem;
-	}
-	:host > span > kol-span-wc {
-		align-items: center;
-		font-style: normal;
-		gap: 0.5rem;
-	}
-	:host > span > kol-span-wc > span {
-		display: flex;
-		gap: 0.25rem;
-	}
-	:host button {
-		border-radius: 0 var(--spacing) var(--spacing) 0;
-	}`,
-  "KOL-HEADING": `h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-weight: var(--font-weight-bold);
-		margin: 0;
-		padding: 1rem 0;
-		text-align: left;
-	}
-	h1 {
-		font-size: 2.5rem;
-		line-height: 1.2;
-		padding: 0 0 1rem 0;
-	}
-	h2 {
-		font-size: 2rem;
-		line-height: 1.25;
-	}
-	h3 {
-		font-size: 1.75rem;
-		line-height: 1.29;
-	}
-	h4 {
-		font-size: 1.5rem;
-		line-height: 1.33;
-	}
-	h5 {
-		font-size: 1.25rem;
-		line-height: 1.4;
-	}
-	h6 {
-		font-size: 1rem;
-		line-height: 1.5;
-	}`,
-  "KOL-LINK": `:is(a, button) {
-		align-items: baseline;
-		color: var(--color-blau);
-		gap: 0.25em;
-		text-decoration-line: none;
-	}
-	a:active,
-	a:focus,
-	a:hover,
-	button:active,
-	button:focus,
-	button:hover {
-		outline-width: 0;
-		text-decoration-line: underline;
-		text-decoration-thickness: 0.1rem !important;
-	}
-	:is(a, button) > kol-span-wc {
-		order: 1;
-		gap: 0.25em;
-	}
-	:is(a, button) > kol-span-wc > span {
-		align-items: baseline;
-		gap: 0.25em;
-	}
-	.hidden {
-		display: none;
-		visibility: hidden;
-	}
-	.skip {
-		left: -99999px;
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-		line-height: 1em;
-	}
-	.skip:focus {
-		background: white;
-		left: unset;
-		position: unset;
-	}`,
-  "KOL-BUTTON-LINK": `:is(a, button) {
-		align-items: baseline;
-		color: var(--color-blau);
-		gap: 0.25em;
-		text-decoration-line: none;
-	}
-	a:active,
-	a:focus,
-	a:hover,
-	button:active,
-	button:focus,
-	button:hover {
-		outline-width: 0;
-		text-decoration-line: underline;
-		text-decoration-thickness: 0.1rem !important;
-	}
-	:is(a, button) > kol-span-wc {
-		order: 1;
-		gap: 0.25em;
-	}
-	:is(a, button) > kol-span-wc > span {
-		align-items: baseline;
-		gap: 0.25em;
-	}
-	.hidden {
-		display: none;
-		visibility: hidden;
-	}
-	.skip {
-		left: -99999px;
-		overflow: hidden;
-		position: absolute;
-		z-index: 9999999;
-		line-height: 1em;
-	}
-	.skip:focus {
-		background: white;
-		left: unset;
-		position: unset;
-	}`,
-  "KOL-SPIN": `.spin {
-		display: inline-block;
-		height: 1rem;
-		position: relative;
-		width: 3rem;
-	}
-	.spin span {
-		animation-timing-function: cubic-bezier(0, 1, 1, 0);
-		border: 0.1rem solid rgb(255, 255, 255);
-		border-radius: 50%;
-		height: 0.8rem;
-		width: 0.8rem;
-		top: 0.1rem;
-		position: absolute;
-	}
-	.spin span:nth-child(1) {
-		background-color: #fc0;
-		z-index: 0;
-		animation: 2s ease 0s infinite normal none running spin1;
-		left: 0.1rem;
-	}
-	.spin span:nth-child(2) {
-		background-color: #f00;
-		z-index: 1;
-		animation: 2s ease 0s infinite normal none running spin2;
-		left: 0.1rem;
-	}
-	.spin span:nth-child(3) {
-		background-color: #000;
-		z-index: 1;
-		animation: 2s ease 0s infinite normal none running spin2;
-		left: 1.1rem;
-	}
-	.spin span:nth-child(4) {
-		background-color: #666;
-		z-index: 0;
-		animation: 2s ease 0s infinite normal none running spin3;
-		left: 2.1rem;
-	}
-	@keyframes spin1 {
-		0% {
-			transform: scale(0);
+const css = (input) => input.join(``);
+const TOKEN_BASED = KoliBri.createTheme("token-based", {
+  GLOBAL: css`
+		:host {
+			--border-radius: var(--kolibri-border-radius, 5px);
+			--font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
+			--font-size: var(--kolibri-font-size, 16px);
+			--spacing: var(--kolibri-spacing, 0.25rem);
+			--border-width: var(--kolibri-border-width, 1px);
+			--color-primary: var(--kolibri-color-primary, #004b76);
+			--color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);
+			--color-danger: var(--kolibri-color-danger, #c0003c);
+			--color-warning: var(--kolibri-color-warning, #c44931);
+			--color-success: var(--kolibri-color-success, #005c45);
+			--color-subtle: var(--kolibri-color-subtle, #576164);
+			--color-light: var(--kolibri-color-light, #ffffff);
+			--color-text: var(--kolibri-color-text, #202020);
+			--color-mute: var(--kolibri-color-mute, #f2f3f4);
+			--color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);
 		}
-		100% {
-			transform: scale(1);
+		:host {
+			font-family: var(--font-family);
+			font-size: var(--font-size);
 		}
-	}
-	@keyframes spin2 {
-		0% {
-			transform: translate(0px, 0px);
+		* {
+			box-sizing: border-box;
 		}
-		100% {
-			transform: translate(1rem, 0px);
+		*:not(i) {
+			font-family: var(--font-family);
 		}
-	}
-	@keyframes spin3 {
-		0% {
-			transform: scale(1);
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 0;
+			padding: 0;
 		}
-		100% {
-			transform: scale(0);
+		*[tabindex]:focus,
+		kol-input:not(.checkbox, .radio) .input:focus-within,
+		kol-input:is(.checkbox, .radio) input:focus,
+		summary:focus {
+			cursor: pointer;
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
 		}
-	}`,
-  "KOL-TABLE": `caption {
-		caption-side: TOP;
-		font-size: 1.1rem; /* 1.75rem */ /* line-height: 3rem; */
-		font-weight: var(--font-weight-bold);
-		margin-bottom: 0.25rem;
-		padding: 0.75rem;
-		text-align: left;
-	}
-	table {
-		border-spacing: 0;
-		border-color: var(--color-neutral);
-		border-style: solid;
-		border-width: 0;
-		border-top-width: 1px;
-	}
-	th {
-		background-color: var(--color-neutral);
-	}
-	td,
-	th {
-		color: var(--color-neutral-dark);
-		border-color: var(--color-neutral);
-		border-style: solid;
-		border-width: 0;
-		border-bottom-width: 1px;
-		padding: 0.5rem;
-	}
-	th[data-sort] kol-button::part(icon)::before {
-		font-family: "FontAwesome";
-		color: var(--color-neutral-dark);
-	}
-	th[data-sort="sort-NOS"] kol-button::part(icon)::before,
-	th[data-sort="sort-undefined"] kol-button::part(icon)::before {
-		content: "\f0dc";
-	}
-	th[data-sort="sort-ASC"] kol-button::part(icon)::before {
-		content: "\f0de";
-	}
-	th[data-sort="sort-DESC"] kol-button::part(icon)::before {
-		content: "\f0dd";
-	}`,
-  "KOL-ACCORDION": `:host > div {
-		border-color: var(--border-color);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 1px;
-	}
-	:host > div > kol-heading-wc > * {
-		display: grid;
-		margin: -1px;
-	}
-	:host > div > kol-heading-wc button > kol-span-wc {
-		background-color: var(--color-neutral-light);
-		border-color: var(--border-color);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: 2px;
-		color: var(--color-blau);
-		font-weight: var(--font-weight-bold);
-		text-align: left;
-		padding: 1.5rem;
-	}
-	:host > div > kol-heading-wc button:hover > kol-span-wc {
-		border-color: var(--color-blau-dark);
-	}
-	:host > div > kol-heading-wc button > kol-span-wc > span {
-		gap: 0.5em;
-	}
-	.content,
-	[part*="content"] {
-		padding: 1.5rem 1.5rem 2rem 1.5rem;
-	}
-	:host > div > kol-heading-wc button kol-icon::part(icon) {
-		font-family: "Font Awesome 6 Free";
-		font-weight: 900;
-	}
-	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
-		content: "\\f077";
-	}
-	:host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
-		content: "\\f078";
-	}`,
-  "KOL-ALERT": `kol-alert-wc {
-		border-width: 2px;
-		border-style: solid;
-		border-radius: 0.25rem;
-		color: var(--color-neutral-dark);
-	}
-	kol-alert-wc .content {
-		font-style: italic;
-		font-size: 0.8rem;
-	}
-	.card {
-		display: grid;
-		gap: 0.625rem;
-		padding: 1.5rem 1.5rem 2rem 1.5rem;
-	}
-	.card .heading .heading-icon {
-		align-items: center;
-		display: inline-flex;
-		font-size: 2rem;
-		margin-right: 1.5rem;
-		padding: 0;
-	}
-	.default {
-		border-color: var(--color-neutral-dark);
-	}
-	.card.default .heading {
-		color: var(--color-neutral-dark);
-	}
-	.info {
-		border-color: var(--color-blau);
-	}
-	.card.info .heading {
-		color: var(--color-blau);
-	}
-	.warning {
-		background-color: var(--color-gelb);
-		border-color: var(--color-gelb);
-	}
-	.card.warning .heading {
-		color: var(--color-neutral-dark);
-	}
-	.error {
-		border-color: var(--color-rot);
-	}
-	.card.error .heading {
-		color: var(--color-rot);
-	}
-	.success {
-		border-color: var(--color-gruen);
-	}
-	.card.success .heading {
-		color: var(--color-gruen);
-	}
-	.card .content {
-		line-height: 1.5rem;
-		padding-left: 3.5rem;
-	}
-	.msg {
-		border-width: 0;
-		display: flex;
-		gap: calc(2 * var(--gap));
-		padding: var(--gap);
-	}
-	.msg .heading {
-		display: flex;
-		gap: var(--spacing);
-		flex-grow: 1;
-		align-items: flex-start;
-	}
-	.msg .heading > div {
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-	}
-	.info .heading kol-icon.heading-icon {
-		display: grid;
-		place-items: center;
-		background-color: var(--color-blau);
-		border-radius: 100%;
-		min-width: 2em;
-		min-height: 2em;
-	}
-	.card.info .heading kol-icon.heading-icon {
-		font-size: 1em;
-	}
+		kol-heading-wc {
+			font-weight: 700;
+		}
+		kol-tooltip .tooltip-floating {
+			border: var(--border-width) solid var(--color-subtle);
+			border-radius: var(--border-radius);
+		}
+		kol-tooltip .tooltip-arrow {
+			border: var(--border-width) solid var(--color-subtle);
+		}
+		kol-tooltip .tooltip-area {
+			background-color: var(--color-light);
+		}
+		kol-tooltip .tooltip-content {
+			border-radius: var(--border-radius);
+			line-height: 1.5;
+			padding: var(--spacing) calc(var(--spacing) * 1.5);
+		}
+		kol-span-wc,
+		kol-span-wc > span {
+			gap: var(--spacing);
+		}
+
+		@keyframes spin {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	`,
+  "KOL-BUTTON": css`
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+			transition: outline-offset 0.2s linear;
+		}
+		:is(a, button) > kol-span-wc {
+			font-weight: 700;
+			border-radius: var(--a11y-min-size);
+			border-style: solid;
+			border-width: var(--border-width);
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			padding: 8px 14px;
+			text-align: center;
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+		}
+		:is(a, button):disabled > kol-span-wc {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
+		.primary :is(a, button) > kol-span-wc,
+		.primary :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-primary);
+			border-color: var(--color-primary);
+			color: var(--color-light);
+		}
+		.secondary :is(a, button) > kol-span-wc,
+		.secondary :is(a, button):disabled:hover > kol-span-wc,
+		.normal :is(a, button) > kol-span-wc,
+		.normal :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-light);
+			border-color: var(--color-primary);
+			color: var(--color-primary);
+		}
+		.danger :is(a, button) > kol-span-wc,
+		.danger :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+			color: var(--color-light);
+		}
+		.ghost :is(a, button) > kol-span-wc,
+		.ghost :is(a, button):disabled:hover > kol-span-wc {
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+			box-shadow: none;
+			color: var(--color-primary);
+		} /*-----------*/
+		.primary :is(a, button):active > kol-span-wc,
+		.primary :is(a, button):hover > kol-span-wc,
+		.secondary :is(a, button):active > kol-span-wc,
+		.secondary :is(a, button):hover > kol-span-wc,
+		.normal :is(a, button):active > kol-span-wc,
+		.normal :is(a, button):hover > kol-span-wc,
+		.danger :is(a, button):active > kol-span-wc,
+		.danger :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-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		}
+		.danger :is(a, button):active > kol-span-wc,
+		.danger :is(a, button):hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+		}
+		:is(a, button):disabled:hover > kol-span-wc,
+		:is(a, button):focus:hover > kol-span-wc {
+			box-shadow: none;
+		}
+		.primary :is(a, button):active > kol-span-wc,
+		.secondary :is(a, button):active > kol-span-wc,
+		.normal :is(a, button):active > kol-span-wc,
+		.danger :is(a, button):active > kol-span-wc,
+		.ghost :is(a, button):active > kol-span-wc {
+			border-color: var(--color-light);
+			box-shadow: none;
+			outline: none;
+		}
+		:is(a, button).hide-label > kol-span-wc {
+			padding: calc(var(--spacing) * 2);
+			width: unset;
+		}
+		:is(a, button).hide-label > kol-span-wc > span > span {
+			display: none;
+		}
+		:is(a, button).loading > kol-span-wc kol-icon {
+			animation: spin 5s infinite linear;
+		}
+		/** small ghost button */
+		.ghost :is(a, button).small > kol-span-wc {
+			border: none;
+			background-color: transparent;
+			box-shadow: none;
+		}
+		.ghost :is(a, button).small > kol-span-wc > span {
+			border-radius: 1.5em;
+			border-style: solid;
+			border-width: var(--border-width);
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+		}
+		.ghost :is(a, button).small:active > kol-span-wc > span,
+		.ghost :is(a, button).small:hover > kol-span-wc > span,
+		.ghost :is(a, button).small.transparent:active > kol-span-wc > span,
+		.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {
+			background-color: var(--color-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		} /** :is(a,button) with transparent background */
+		:is(a, button).transparent > kol-span-wc > span,
+		.ghost :is(a, button).small.transparent > kol-span-wc > span,
+		:is(a, button).transparent > kol-span-wc {
+			background-color: transparent;
+			border-color: transparent;
+		}
+	`,
+  "KOL-INPUT-TEXT": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+		}
+	`,
+  "KOL-INPUT-PASSWORD": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(button, input, label, option, select, textarea) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, select, textarea, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-NUMBER": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-DATE": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-EMAIL": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-INPUT-FILE": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		kol-input .input input[type='file'] {
+			padding-top: calc(0.5em + 2px);
+		}
+		input {
+			border: none;
+		}
+		input[type='file'] {
+			background-color: transparent;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(button, input, label, option, select, textarea) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, select, textarea, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-TEXTAREA": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		textarea {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		textarea:read-only,
+		textarea:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		.disabled {
+			opacity: 0.33;
+		}
+		select[multiple],
+		textarea {
+			overflow: auto;
+		}
+		textarea {
+			display: block;
+		}
+		.input {
+			position: relative;
+		}
+	`,
+  "KOL-ALERT": css`
+		.msg {
+			border-width: 0;
+		}
+		kol-alert-wc {
+			border-width: var(--border-width);
+			border-style: solid;
+			border-radius: var(--border-radius);
+			display: flex;
+			width: 100%;
+			overflow: unset;
+			border-color: transparent;
+			background-color: var(--color-light);
+		}
+		kol-alert-wc > .heading {
+			display: flex;
+			gap: calc(var(--spacing) * 2);
+			place-items: center;
+		}
+		kol-alert-wc > .heading > div {
+			display: grid;
+			gap: var(--spacing);
+		}
+		.msg > .heading > kol-icon {
+			place-self: baseline;
+		}
+		kol-alert-wc > .heading > div {
+			display: grid;
+			gap: var(--spacing);
+		}
+		kol-alert-wc > .heading > kol-button-wc.close {
+			place-self: center;
+		}
+		.msg {
+			align-items: start;
+		}
+		.default {
+			border-color: var(--color-subtle);
+		}
+		.default.msg .heading-icon {
+			color: var(--color-subtle);
+		}
+		.error {
+			border-color: var(--color-danger);
+		}
+		.error.msg .heading-icon {
+			color: var(--color-danger);
+		}
+		.info {
+			border-color: var(--color-primary);
+		}
+		.info.msg .heading-icon {
+			color: var(--color-primary);
+		}
+		.success {
+			border-color: var(--color-success);
+		}
+		.success.msg .heading-icon {
+			color: var(--color-success);
+		}
+		.warning {
+			border-color: var(--color-warning);
+		}
+		.warning.msg .heading-icon {
+			color: var(--color-warning);
+		}
+		.heading-icon {
+			color: var(--color-light);
+		}
+		kol-alert-wc .heading .heading-icon {
+			padding: 0;
+		}
+		.msg > .heading > .heading-icon {
+			padding-top: 0;
+			place-items: baseline;
+		}
+		.msg > .heading > div > kol-heading-wc {
+			padding-top: calc(--var-spacing / 2);
+		}
+		.msg.default .heading > div > kol-heading-wc {
+			color: var(--color-subtle);
+		}
+		.msg.error .heading > div > kol-heading-wc {
+			color: var(--color-danger);
+		}
+		.msg.info .heading > div > kol-heading-wc {
+			color: var(--color-primary);
+		}
+		.msg.success .heading > div > kol-heading-wc {
+			color: var(--color-success);
+		}
+		.msg.warning .heading > div > kol-heading-wc {
+			color: var(--color-warning);
+		}
+		.msg.default .close .icon {
+			color: var(--color-subtle);
+		}
+		.msg.error .close .icon {
+			color: var(--color-danger);
+		}
+		.msg.info .close .icon {
+			color: var(--color-primary);
+		}
+		.msg.success .close .icon {
+			color: var(--color-success);
+		}
+		.msg.warning .close .icon {
+			color: var(--color-warning);
+		}
+		.card {
+			border-width: var(--border-width);
+			border-style: solid;
+			filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));
+			flex-direction: column;
+		}
+		.card > .heading {
+			padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+		}
+		.card[_has-closer] > .heading {
+			padding-top: 0;
+			padding-bottom: 0;
+			padding-right: 0;
+		}
+		.card > .heading > div {
+			width: 100%;
+			min-height: 1.25rem;
+		}
+		.card > .heading .heading-icon {
+			justify-self: right;
+			margin-top: -4px;
+		}
+		.card > .heading kol-heading-wc {
+			width: 100%;
+			color: var(--color-light);
+			display: flex;
+			font-size: 1.25rem;
+			line-height: 1.25rem;
+		}
+		.card > .heading kol-heading-wc > * {
+			margin: auto 0;
+		}
+		.card > .content {
+			padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+		}
+		.card.default > .heading {
+			background-color: var(--color-subtle);
+		}
+		.card.error > .heading {
+			background-color: var(--color-danger);
+		}
+		.card.info > .heading {
+			background-color: var(--color-primary);
+		}
+		.card.success > .heading {
+			background-color: var(--color-success);
+		}
+		.card.warning > .heading {
+			background-color: var(--color-warning);
+		}
+		:is(.error, .info, .success, .warning) .heading-icon {
+			font-size: 1.25rem;
+		}
+		.card > div > .content {
+			grid-row: 2;
+			grid-column: 1 / span 2;
+		}
+		.card.default .close {
+			background-color: var(--color-subtle);
+		}
+		.card.error .close {
+			background-color: var(--color-danger);
+		}
+		.card.info .close {
+			background-color: var(--color-primary);
+		}
+		.card.success .close {
+			background-color: var(--color-success);
+		}
+		.card.warning .close {
+			background-color: var(--color-warning);
+		}
+		.close > button {
+			border-radius: 50%; /* visible on focus */
+			color: var(--color-light);
+			cursor: pointer;
+			height: var(--a11y-min-size);
+			width: var(--a11y-min-size);
+		}
+		.close > button.hide-label kol-icon {
+			display: flex;
+			width: 1em;
+			height: 1em;
+			font-size: 1.2rem;
+		}
+		.close > button:active {
+			box-shadow: none;
+			outline: none;
+		}
+	`,
+  "KOL-HEADING": css`
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: inherit;
+			font-style: normal;
+		}
+		h1,
+		h2,
+		h3 {
+			font-weight: 700;
+		}
+		h1 {
+			font-size: 1.5rem;
+			line-height: 1.75rem;
+		}
+		h2 {
+			font-size: 1.25rem;
+			line-height: 1.75rem;
+		}
+		h3 {
+			font-size: 1.125rem;
+			line-height: 1.5rem;
+		}
+	`,
+  "KOL-BADGE": css`
+		:host {
+			display: inline-block;
+		}
+		:host > span {
+			border-radius: var(--border-radius);
+			display: inline-flex;
+			font-style: normal;
+			line-height: 1.25rem;
+		}
+		:host > span.smart-button {
+			align-items: center;
+		}
+		:host > span kol-button-wc:hover > button {
+			background-color: var(--color-primary-variant);
+			color: var(--color-light);
+		}
+		:host > span kol-button-wc > button {
+			color: inherit;
+			border-top-right-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+			padding: calc(var(--spacing) / 2);
+		}
+		:host > span kol-span-wc {
+			padding: calc(var(--spacing) / 2) calc(var(--spacing) * 2);
+		}
+		:host > span > kol-span-wc {
+			align-items: center;
+			font-style: normal;
+			gap: var(--spacing);
+		}
+		:host > span > kol-span-wc > span {
+			display: flex;
+			gap: calc(var(--spacing) / 2);
+		}
+	`,
+  "KOL-BUTTON-GROUP": css`
+		:host > kol-button-group-wc {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--spacing);
+		}
+	`,
+  "KOL-INDENTED-TEXT": css`
+		:host > div {
+			background-color: var(--color-light);
+			border-left: none;
+			box-shadow: -2px 0px 0px var(--color-primary-variant);
+			padding: 0 var(--spacing);
+			width: 100%;
+		}
+	`,
+  "KOL-LINK": css`
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+		}
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			border-radius: var(--border-radius);
+			outline: var(--border-width) solid;
+		}
+		:is(a, button):hover {
+			text-decoration-thickness: 0.25em;
+		}
+		:is(a, button):visited {
+			color: var(--visited);
+		}
+		.hidden {
+			display: none;
+			visibility: hidden;
+		}
+		.skip {
+			left: -99999px;
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+			line-height: 1em;
+		}
+		.skip:focus {
+			background: white;
+			left: unset;
+			position: unset;
+		}
+	`,
+  "KOL-DETAILS": css`
+		details > summary {
+			border-radius: var(--border-radius);
+		}
+		details kol-indented-text {
+			margin: var(--spacing) 0 0 calc(var(--spacing) * 3);
+		}
+		kol-icon {
+			font-size: 1.2rem;
+		}
+	`,
+  "KOL-SPIN": css`
+		.spin {
+			display: inline-block;
+			height: 1rem;
+			position: relative;
+			width: 3rem;
+		}
+		.spin span {
+			animation-timing-function: cubic-bezier(0, 1, 1, 0);
+			border: 0.1rem solid rgb(255, 255, 255);
+			border-radius: 50%;
+			height: 0.8rem;
+			width: 0.8rem;
+			top: 0.1rem;
+			position: absolute;
+		}
+		.spin span:nth-child(1) {
+			background-color: #fc0;
+			z-index: 0;
+			animation: 2s ease 0s infinite normal none running spin1;
+			left: 0.1rem;
+		}
+		.spin span:nth-child(2) {
+			background-color: #f00;
+			z-index: 1;
+			animation: 2s ease 0s infinite normal none running spin2;
+			left: 0.1rem;
+		}
+		.spin span:nth-child(3) {
+			background-color: #000;
+			z-index: 1;
+			animation: 2s ease 0s infinite normal none running spin2;
+			left: 1.1rem;
+		}
+		.spin span:nth-child(4) {
+			background-color: #666;
+			z-index: 0;
+			animation: 2s ease 0s infinite normal none running spin3;
+			left: 2.1rem;
+		}
+		@keyframes spin1 {
+			0% {
+				transform: scale(0);
+			}
+			100% {
+				transform: scale(1);
+			}
+		}
+		@keyframes spin2 {
+			0% {
+				transform: translate(0px, 0px);
+			}
+			100% {
+				transform: translate(1rem, 0px);
+			}
+		}
+		@keyframes spin3 {
+			0% {
+				transform: scale(1);
+			}
+			100% {
+				transform: scale(0);
+			}
+		}
+	`,
+  "KOL-PROGRESS": css`
+		:host progress,
+		:host span {
+			display: block;
+			height: 0px;
+			overflow: hidden;
+			width: 0px;
+		}
+		:host svg line:first-child,
+		:host svg circle:first-child {
+			fill: transparent;
+			stroke: var(--color-primary-variant);
+		}
+		:host svg line:last-child,
+		:host svg circle:last-child {
+			fill: transparent;
+			stroke: var(--color-primary);
+		}
+	`,
+  "KOL-SELECT": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		select {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 2rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input.icon-left kol-icon:first-child {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		select:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(select, label, option) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(select, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+		}
+		select[multiple] {
+			overflow: auto;
+		}
+		select option {
+			margin: 1px 0;
+			padding: 0.5em;
+			border-radius: var(--border-radius);
+			cursor: pointer;
+		}
+		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-primary-variant);
+			color: var(--color-light);
+		}
+	`,
+  "KOL-INPUT-COLOR": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input[type='color'] {
+			border: none;
+			min-height: 40px !important;
+		}
+		input[type='color'] {
+			background-color: transparent;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:is(.icon-left, .icon-right) input {
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+		}
+		.input > input:first-child {
+			padding-left: var(--spacing);
+		}
+		.input > input:last-child {
+			padding-right: var(--spacing);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(input, .input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-ACCORDION": css`
+		kol-span-wc > span {
+			display: flex;
+			place-items: baseline center;
+			text-align: left;
+		}
+		:host > div > kol-heading-wc button {
+			border-radius: var(--border-radius);
+			min-height: 2.2rem;
+			padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
+		}
+		:host > div > kol-heading-wc button kol-span-wc {
+			font-weight: 700;
+			font-size: 1.125rem;
+			line-height: 20px;
+			gap: var(--spacing);
+		}
+		:host > div > kol-heading-wc button kol-span-wc > span {
+			gap: calc(var(--spacing) * 2);
+		}
+		:host > div > kol-heading-wc button kol-icon {
+			color: var(--color-primary);
+		}
+		:host > div {
+			width: 100%;
+			height: 100%;
+			display: grid;
+		}
+		:host > div div[class='header'],
+		:host > div[class*='open'] div[class='content'] {
+			margin: 0;
+		}
+		:host > div div[class='content'] {
+			/* padding-left equals icon width + spacings */
+			padding: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 3) calc(16px + var(--spacing) * 4);
+		}
+		button:focus {
+			outline: none;
+		}
+		:host > .accordion:focus-within {
+			border-radius: var(--border-radius);
+			cursor: pointer;
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: 3px;
+			transition: outline-offset 0.2s linear;
+		}
+	`,
+  "KOL-TABLE": css`
+		:host * {
+			hyphens: var(--hyphens);
+			font-family: var(--font-family);
+			line-height: var(--line-height);
+			word-break: break-word;
+		}
+		:host > div {
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+		caption {
+			padding: calc(var(--spacing) * 2);
+		}
+		th {
+			font-weight: normal;
+			color: var(--color-primary);
+		}
+		:host table thead tr:first-child th,
+		:host table thead tr:first-child td {
+			border-width: 0;
+			border-top-width: calc(var(--border-width) * 2);
+			border-style: solid;
+			border-color: var(--color-primary-variant);
+		}
+		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: calc(var(--border-width) * 2);
+			border-style: solid;
+			border-color: var(--color-primary-variant);
+		}
+		th {
+			background-color: var(--color-light);
+		}
+		th div {
+			width: 100%;
+			display: flex;
+			gap: calc(var(--spacing) * 2);
+			grid-template-columns: 1fr auto;
+			align-items: center;
+		}
+		th div.center {
+			justify-content: center;
+		}
+		th div.right {
+			justify-content: end;
+		}
+		tr:nth-child(even) {
+			background-color: var(--color-mute);
+		}
+		th,
+		td {
+			padding: calc(var(--spacing) * 2);
+		}
+		td.center > div {
+			display: flex;
+			justify-content: center;
+		}
+		td.right > div {
+			display: flex;
+			justify-content: end;
+		}
+		th[aria-sort='ascending'],
+		th[aria-sort='descending'] {
+			font-weight: 700;
+		}
+		:host > div:last-child {
+			padding: calc(var(--spacing) * 2);
+		}
+		:host > div:last-child,
+		:host > div:last-child > div:last-child {
+			display: grid;
+			align-items: center;
+			justify-items: center;
+			gap: calc(var(--spacing) * 2);
+		}
+		@media (min-width: 1024px) {
+			:host > div:last-child,
+			:host > div:last-child > div:last-child {
+				grid-auto-flow: column;
+			}
+			:host > div:last-child kol-pagination {
+				display: flex;
+				gap: calc(var(--spacing) * 2);
+			}
+		}
+	`,
+  "KOL-NAV": css`
+		* {
+			margin: 0;
+			padding: 0;
+		}
+		nav {
+			font-family: var(--font-family);
+			font-size: var(--font-size);
+			background-color: var(--color-mute);
+			width: 100%;
+		}
+		ul {
+			list-style: none;
+		}
+		kol-link-wc,
+		a {
+			height: 100%;
+			min-height: var(--a11y-min-size);
+			display: flex;
+			place-items: center;
+		}
+		.entry > kol-span-wc > span {
+			width: 100%;
+		}
+		.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+			background-color: var(--color-light);
+			text-decoration: none;
+			color: var(--color-primary);
+			width: 100%;
+			display: flex;
+			align-items: center;
+			font-style: normal;
+			line-height: 1.5rem;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+			letter-spacing: 0.175px;
+		}
+		.entry > :is(kol-link-wc, kol-button-wc):first-child :is(a, button) {
+			color: var(--color-primary);
+			text-decoration: none;
+		}
+		.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
+			border-left-color: var(--color-primary-variant);
+			background-color: var(--color-primary-variant);
+		}
+		.entry > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover > :is(a, button, span) {
+			color: var(--color-primary-variant);
+			font-weight: 700;
+			letter-spacing: unset;
+		}
+		.selected > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+			background-color: var(--color-primary-variant);
+			color: var(--color-primary);
+			font-weight: 700;
+		}
+		.selected > :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child > :is(a, button, span) {
+			font-weight: 700;
+		}
+		.selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
+			color: var(--color-primary-variant);
+			letter-spacing: unset;
+		}
+		.entry > kol-span-wc > span,
+		.entry :is(a, button) {
+			border-left-color: transparent;
+			border-left-style: solid;
+			border-left-width: 0.5rem;
+			padding: calc(var(--spacing) * 2) var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) / 2);
+		}
+		.selected :is(a, button),
+		[exportparts*='selected'] a {
+			border-left-color: var(--color-primary);
+		} /** Compact mode */
+		.entry.compact :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+			place-items: center;
+		}
+		.entry.compact > kol-span-wc > span {
+			flex-direction: column;
+		}
+		.entry.compact > kol-span-wc > span,
+		.entry.compact :is(a, button) {
+			padding-left: 0;
+		}
+	`,
+  "KOL-CARD": css`
+		/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
+		:host > div {
+			display: grid;
+			width: 100%;
+			height: 100%;
+			background-color: var(--color-light);
+			grid-template-rows: min-content 2fr min-content;
+			box-shadow: 0 0 0.25rem var(--color-subtle);
+			border-radius: 0.25rem;
+		}
+		:host kol-heading-wc {
+			line-height: 1.75rem;
+		}
+		:host div.header {
+			padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) var(--spacing) calc(var(--spacing) * 3);
+		}
+		:host div.content {
+			padding: var(--spacing) calc(var(--spacing) * 3) calc(var(--spacing) * 3);
+			overflow: hidden;
+		}
+		:host div.footer {
+			padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+		}
+	`,
+  "KOL-INPUT-CHECKBOX": css`
+		:host kol-input {
+			display: grid;
+			align-items: center;
+			justify-items: left;
+			width: 100%;
+			min-height: var(--a11y-min-size);
+			gap: var(--spacing);
+		}
+		:host kol-input.default {
+			grid-template-columns: 1.5rem auto;
+		}
+		:host kol-input.switch {
+			grid-template-columns: 3.5rem auto;
+		}
+		:host kol-input > div.input {
+			display: inherit;
+			min-height: var(--a11y-min-size);
+			order: 2;
+		}
+		:host kol-input > div.input input {
+			margin: 0px;
+		}
+		:host kol-input > label {
+			cursor: pointer;
+			order: 3;
+		}
+		:host kol-input > kol-alert.error {
+			order: 1;
+			padding-top: calc(var(--spacing) / 2);
+			grid-column: span 2 / auto;
+		}
+		:host kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		:host kol-input.error input:focus,
+		kol-input.error select:focus,
+		kol-input.error textarea:focus {
+			outline-color: var(--color-danger) !important;
+		}
+		:host kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		:host input {
+			cursor: pointer;
+			order: 1;
+			width: 100%;
+			border-color: var(--color-subtle);
+			border-width: 2px;
+			border-style: solid;
+			border-radius: var(--border-radius);
+			line-height: 24px;
+			font-size: 1rem;
+		}
+		:host input:hover {
+			border-color: var(--color-primary);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+		}
+		:host input:focus:hover {
+			box-shadow: none;
+		}
+		:host input:active {
+			box-shadow: none;
+		}
+		:host kol-alert {
+			display: block;
+			width: 100%;
+		} /* CHECKBOX */
+		:host kol-input label span {
+			margin-top: 0.125rem;
+		}
+		:host .required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		:host kol-input input[type='checkbox'] {
+			appearance: none;
+			background-color: white;
+			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);
+		}
+		:host kol-input.default input[type='checkbox'] {
+			border-radius: var(--border-radius);
+			height: calc(6 * var(--spacing));
+			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 {
+			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 * var(--spacing));
+			transform: inherit;
+		}
+		:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
+			border-width: 0px 1px 1px 0px;
+		}
+		:host kol-input.switch input[type='checkbox'] {
+			min-width: 3.5em;
+			width: 3.5em;
+			background-color: var(--color-subtle);
+			border-width: 0;
+			height: 1.5em;
+			border-radius: 1.25em;
+			display: inline-block;
+			position: relative;
+		}
+		:host kol-input.switch input[type='checkbox']:before {
+			width: 1.25em;
+			height: 1.25em;
+			left: calc(0.25em - 2px);
+			top: calc(0.25em - 2px);
+			border-radius: 1.25em;
+			background-color: white;
+			position: absolute;
+		}
+		:host kol-input.switch input[type='checkbox']:checked {
+			background-color: var(--color-primary);
+		}
+		:host kol-input.switch input[type='checkbox']:checked:before {
+			transform: translateX(2em);
+		}
+		:host kol-input.switch input[type='checkbox']:indeterminate:before {
+			transform: translateX(1em);
+		}
+		:host .disabled {
+			opacity: 0.33;
+		}
+	`,
+  "KOL-INPUT-RADIO": css`
+		label {
+			cursor: pointer;
+			display: grid;
+			line-height: 20px;
+			gap: calc(var(--spacing) * 2);
+			width: 100%;
+		}
+		input {
+			cursor: pointer;
+			width: 100%;
+			border-color: var(--color-subtle);
+			border-width: 2px;
+			border-style: solid;
+			border-radius: 5px;
+			line-height: 24px;
+		}
+		input:hover {
+			border-color: var(--color-primary);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+		}
+		input:focus:hover {
+			box-shadow: none;
+		}
+		input:hover {
+			border-color: var(--color-primary);
+		}
+		kol-alert {
+			display: block;
+			width: 100%;
+		}
+		.required legend > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		} /* RADIO */
+		fieldset {
+			border: 0px;
+			margin: 0px;
+			padding: 0px;
+			display: grid;
+			gap: 0.25em;
+		}
+		fieldset div {
+			align-items: center;
+			cursor: pointer;
+			display: flex;
+			flex-direction: row;
+			gap: 0.5rem;
+			margin: 0;
+			min-height: var(--a11y-min-size);
+			position: relative;
+		}
+		fieldset div label {
+			cursor: pointer;
+			display: flex;
+			padding-left: calc(var(--spacing) / 2);
+			width: 100%;
+		}
+		fieldset div label span {
+			margin-top: 0.125em;
+		}
+		fieldset div input[type='radio'] {
+			appearance: none;
+			transition: 0.5s;
+			border-radius: 100%;
+			height: calc(6 * var(--spacing));
+			min-width: calc(6 * var(--spacing));
+			width: calc(6 * var(--spacing));
+		}
+		fieldset div input[type='radio']:before {
+			content: '';
+			cursor: pointer;
+			border-radius: 100%;
+			display: block;
+		}
+		fieldset div input[type='radio']:checked:before {
+			background-color: var(--color-primary);
+		}
+		fieldset div input[type='radio']:disabled {
+			cursor: not-allowed;
+			background-color: var(--color-mute-variant);
+		}
+		fieldset #error {
+			order: 1;
+		}
+		fieldset legend {
+			order: 2;
+			display: contents;
+		}
+		fieldset kol-input {
+			order: 3;
+		}
+		fieldset.error {
+			padding-left: calc(var(--spacing) * 3);
+			border-left: 3px solid var(--color-danger);
+		}
+		fieldset kol-alert#error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		fieldset.error input:focus,
+		fieldset.error select:focus,
+		fieldset.error textarea:focus {
+			outline-color: var(--color-danger) !important;
+		}
+		fieldset.error kol-alert.error {
+			margin-left: -0.25em;
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		.disabled {
+			opacity: 0.33;
+		}
+		fieldset.horizontal {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--spacing) calc(var(--spacing) * 2);
+		}
+		fieldset.horizontal legend {
+			display: inline-block;
+			margin-bottom: calc(var(--spacing) / 2);
+		}
+		fieldset [slot='input'] {
+			gap: var(--spacing);
+		}
+		fieldset div label {
+			padding-left: 0;
+		}
+	`,
+  "KOL-TOAST": css`
+		:host > div {
+			position: fixed;
+			top: 0;
+			right: 0;
+			width: 100%;
+			height: 0;
+			z-index: 200;
+		}
+		:host > div > kol-alert {
+			display: block;
+			margin-left: auto;
+			margin-right: unset;
+			padding: calc(var(--spacing) * 5);
+			max-width: 750px;
+		}
+		:host > div > kol-button-wc {
+			top: 0;
+			position: relative;
+			display: block;
+			width: 1rem;
+		}
+	`,
+  "KOL-TABS": css`
+		button:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+		:host kol-button-group-wc {
+			display: inline-flex;
+			gap: calc(var(--spacing) * 5);
+			flex-wrap: wrap;
+		}
+		button {
+			box-sizing: border-box;
+			background-color: transparent;
+			border: 0;
+			border-radius: var(--border-radius);
+			font-style: normal;
+			font-weight: 700;
+			font-size: 18px;
+			line-height: 22px;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			color: var(--color-subtle);
+			padding: 0;
+		}
+		button:hover {
+			color: var(--color-primary);
+		}
+		button.primary,
+		button.selected {
+			color: var(--color-primary);
+		}
+		button kol-span-wc > span {
+			border-bottom: 0.25em solid;
+		}
+		button kol-span-wc > span {
+			gap: calc(var(--spacing) * 2);
+		}
+		:host > div > div {
+			padding: var(--spacing) 0;
+		}
+		div[role='tabpanel'] {
+			height: 100%;
+		}
+		div.grid {
+			height: 100%;
+		}
+		:host > .tabs-align-right {
+			display: grid;
+			grid-template-columns: 1fr auto;
+		}
+		:host > .tabs-align-right kol-button-group-wc {
+			display: grid;
+			order: 2;
+		}
+		:host > .tabs-align-left {
+			display: grid;
+			grid-template-columns: auto 1fr;
+		}
+		:host > .tabs-align-left kol-button-group-wc {
+			display: grid;
+			order: 0;
+		}
+		:host > .tabs-align-bottom {
+			display: grid;
+			grid-template-rows: 1fr auto;
+		}
+		:host > .tabs-align-bottom kol-button-group-wc {
+			order: 2;
+		}
+		:host > .tabs-align-bottom kol-button-group-wc > div {
+			display: flex;
+		}
+		:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {
+			margin: 0px calc(var(--spacing) * 3) 0px 0px;
+		}
+		:host > .tabs-align-bottom > kol-button-group-wc > div > div {
+			margin: 0px calc(var(--spacing) * 3);
+		}
+		:host > .tabs-align-top {
+			display: grid;
+			grid-template-rows: auto 1fr;
+		}
+		:host > .tabs-align-top kol-button-group-wc {
+			order: 0;
+		}
+		:host > .tabs-align-top kol-button-group-wc > div {
+			display: flex;
+		}
+		:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {
+			margin: 0px calc(var(--spacing) * 3) 0px 0px;
+		}
+		:host > .tabs-align-top > kol-button-group-wc > div > div {
+			margin: 0px calc(var(--spacing) * 3);
+		}
+		:host > div {
+			display: grid;
+		}
+		:host > div.tabs-align-left {
+			grid-template-columns: auto 1fr;
+		}
+		:host > div.tabs-align-right {
+			grid-template-columns: 1fr auto;
+		}
+		:host > .tabs-align-left kol-button-group-wc,
+		:host > .tabs-align-top kol-button-group-wc {
+			order: 0;
+		}
+		:host > .tabs-align-bottom kol-button-group-wc,
+		:host > .tabs-align-right kol-button-group-wc {
+			order: 1;
+		}
+		:host > .tabs-align-left kol-button-group-wc,
+		:host > .tabs-align-right kol-button-group-wc {
+			gap: inherit;
+		}
+		:host > div.tabs-align-left kol-button-group-wc > div,
+		:host > div.tabs-align-left kol-button-group-wc > div > div,
+		:host > div.tabs-align-right kol-button-group-wc > div,
+		:host > div.tabs-align-right kol-button-group-wc > div > div {
+			display: grid;
+		}
+		:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,
+		:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {
+			width: 100%;
+		}
+		:host > div.tabs-align-bottom kol-button-group-wc div,
+		:host > div.tabs-align-top kol-button-group-wc div {
+			display: flex;
+			flex-wrap: wrap;
+		}
+		:host kol-button-group-wc button {
+			border: none;
+		}
+	`,
+  "KOL-PAGINATION": css`
+		:host {
+			display: grid;
+			gap: calc(var(--spacing) * 4);
+		}
+		:host > div {
+			display: inline-flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: calc(var(--spacing) * 2);
+		}
+		:host .selected button {
+			min-width: var(--a11y-min-size);
+			min-height: var(--a11y-min-size);
+			display: grid;
+			place-items: center;
+			font-family: var(--font-family);
+			cursor: not-allowed;
+			font-weight: 700;
+			border-radius: 50%;
+			border: none;
+			font-style: normal;
+			text-align: center;
+			width: inherit;
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+			color: var(--color-primary);
+			background-color: var(--color-mute-variant);
+		}
+		:host > div > span {
+			align-self: flex-end;
+			padding-bottom: calc(var(--spacing) * 2);
+			color: var(--color-primary);
+		}
+	`,
+  "KOL-INPUT-RANGE": css`
+		kol-input {
+			gap: var(--spacing);
+		}
+		kol-input .error {
+			order: 1;
+		}
+		kol-input label {
+			order: 2;
+		}
+		kol-input .input {
+			order: 3;
+		}
+		kol-input .hint {
+			order: 4;
+			font-size: 0.9rem;
+			font-style: italic;
+		}
+		input {
+			border: none;
+		}
+		input::placeholder {
+			color: var(--color-subtle);
+		}
+		.input {
+			background-color: var(--color-light);
+			border-color: var(--color-subtle);
+			border-radius: var(--border-radius);
+			border-style: solid;
+			border-width: 2px;
+			padding: 0 calc(var(--spacing) * 2);
+		}
+		.input > kol-icon {
+			width: 1rem;
+		}
+		.input:is(.icon-left, .icon-right) {
+			padding-left: calc(var(--spacing) * 4);
+			padding-right: calc(var(--spacing) * 4);
+		}
+		.input:hover {
+			border-color: var(--color-primary);
+		}
+		input:read-only,
+		input:disabled {
+			cursor: not-allowed;
+		}
+		.required label > span::after {
+			content: '*';
+			padding-left: 0.125em;
+		}
+		kol-input.error {
+			border-left: 3px solid var(--color-danger);
+			padding-left: calc(var(--spacing) * 2);
+		}
+		kol-input.error .input:focus-within {
+			outline-color: var(--color-danger) !important;
+		}
+		kol-input.error kol-alert.error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
+		kol-input.disabled :is(input, label) {
+			opacity: 1;
+		}
+		kol-input.disabled :is(.input) {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+	`,
+  "KOL-LINK-BUTTON": css`
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			outline-color: var(--color-primary-variant);
+			outline-offset: 2px;
+			outline-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+			transition: outline-offset 0.2s linear;
+		}
+		:is(a, button) > kol-span-wc {
+			font-weight: 700;
+			border-radius: var(--a11y-min-size);
+			border-style: solid;
+			outline-width: calc(var(--border-width) * 2);
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			padding: 8px 14px;
+			text-align: center;
+			transition-duration: 0.5s;
+			transition-property: background-color, color, border-color;
+		}
+		:is(a, button):disabled > kol-span-wc {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
+		.primary :is(a, button) > kol-span-wc,
+		.primary :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-primary);
+			border-color: var(--color-primary);
+			color: var(--color-light);
+		}
+		.secondary :is(a, button) > kol-span-wc,
+		.secondary :is(a, button):disabled:hover > kol-span-wc,
+		.normal :is(a, button) > kol-span-wc,
+		.normal :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-light);
+			border-color: var(--color-primary);
+			color: var(--color-primary);
+		}
+		.danger :is(a, button) > kol-span-wc,
+		.danger :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+			color: var(--color-light);
+		}
+		.ghost :is(a, button) > kol-span-wc,
+		.ghost :is(a, button):disabled:hover > kol-span-wc {
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+			box-shadow: none;
+			color: var(--color-primary);
+		} /*-----------*/
+		.primary :is(a, button):active > kol-span-wc,
+		.primary :is(a, button):hover > kol-span-wc,
+		.secondary :is(a, button):active > kol-span-wc,
+		.secondary :is(a, button):hover > kol-span-wc,
+		.normal :is(a, button):active > kol-span-wc,
+		.normal :is(a, button):hover > kol-span-wc,
+		.danger :is(a, button):active > kol-span-wc,
+		.danger :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-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		}
+		.danger :is(a, button):active > kol-span-wc,
+		.danger :is(a, button):hover > kol-span-wc {
+			background-color: var(--color-danger);
+			border-color: var(--color-danger);
+		}
+		:is(a, button):disabled:hover > kol-span-wc,
+		:is(a, button):focus:hover > kol-span-wc {
+			box-shadow: none;
+		}
+		.primary :is(a, button):active > kol-span-wc,
+		.secondary :is(a, button):active > kol-span-wc,
+		.normal :is(a, button):active > kol-span-wc,
+		.danger :is(a, button):active > kol-span-wc,
+		.ghost :is(a, button):active > kol-span-wc {
+			border-color: var(--color-light);
+			box-shadow: none;
+			outline: none;
+		}
+		:is(a, button).hide-label > kol-span-wc {
+			padding: calc(var(--spacing) * 2);
+			width: unset;
+		}
+		:is(a, button).hide-label > kol-span-wc > span > span {
+			display: none;
+		}
+		:is(a, button).loading > kol-span-wc kol-icon {
+			animation: spin 5s infinite linear;
+		}
+		/** small ghost button */
+		.ghost :is(a, button).small > kol-span-wc {
+			border: none;
+			background-color: transparent;
+			box-shadow: none;
+		}
+		.ghost :is(a, button).small > kol-span-wc > span {
+			border-radius: 1.5em;
+			border-style: solid;
+			border-width: var(--border-width);
+			border-color: var(--color-light);
+			background-color: var(--color-light);
+		}
+		.ghost :is(a, button).small:active > kol-span-wc > span,
+		.ghost :is(a, button).small:hover > kol-span-wc > span,
+		.ghost :is(a, button).small.transparent:active > kol-span-wc > span,
+		.ghost :is(a, button).small.transparent:hover > kol-span-wc > span {
+			background-color: var(--color-primary-variant);
+			border-color: var(--color-primary-variant);
+			box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
+			color: var(--color-light);
+		} /** :is(a,button) with transparent background */
+		:is(a, button).transparent > kol-span-wc > span,
+		.ghost :is(a, button).small.transparent > kol-span-wc > span,
+		:is(a, button).transparent > kol-span-wc {
+			background-color: transparent;
+			border-color: transparent;
+		}
+	`,
+  "KOL-BUTTON-LINK": css`
+		:is(a, button) {
+			color: var(--color-primary);
+			font-style: normal;
+			font-weight: 400;
+			text-decoration-line: underline;
+			font-size: inherit;
+		}
+		:is(a, button):focus {
+			outline: none;
+		}
+		:is(a, button):focus kol-span-wc {
+			border-radius: var(--border-radius);
+			outline: calc(var(--border-width) * 2) solid;
+		}
+		:is(a, button):hover {
+			text-decoration-thickness: 0.25em;
+		}
+		:is(a, button):visited {
+			color: var(--visited);
+		}
+		.hidden {
+			display: none;
+			visibility: hidden;
+		}
+		.skip {
+			left: -99999px;
+			overflow: hidden;
+			position: absolute;
+			z-index: 9999999;
+		}
+		.skip:focus {
+			background: white;
+			left: unset;
+			position: unset;
+		}
+	`,
+  "KOL-ABBR": css`
+		abbr {
+			border-bottom: dashed var(--color-text) 1px;
+			text-decoration: none !important;
+		}
+	`,
+  "KOL-BREADCRUMB": css`
+		li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
+			font-size: 0.75rem;
+			color: var(--color-subtle);
+		}
+		kol-link::part(icon) {
+			font-size: 1.25rem;
+		}
+		ul li > :is(span, kol-link) {
+			line-height: 1.25rem;
+			height: 20px;
+		}
+		ul li:last-child > span {
+			color: var(--color-subtle);
+		}
+	`,
+  "KOL-MODAL": css`
+		:host .overlay .modal {
+			max-height: calc(100% - 32px);
+		}
+	`,
+  "KOL-ICON": css`
+		:host {
+			width: 1em;
+			height: 1em;
+		}
+		:host > i {
+			width: 1em;
+			height: 1em;
+		}
+	`,
+  "KOL-SKIP-NAV": css`
+		kol-link-wc > a > kol-span-wc {
+			border-radius: var(--a11y-min-size);
+			border-style: solid;
+			border-width: var(--border-width);
+			gap: calc(var(--spacing) * 2);
+			line-height: 1rem;
+			padding: 8px 14px;
+			background-color: var(--color-primary-variant);
+			border-color: var(--color-primary-variant);
+			color: var(--color-light);
+			cursor: pointer;
+		}
+	`
+});
+
+const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
+  GLOBAL: `:host {
+		--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;
+		--color-blau: #264f8e;
+		--color-blau-dark: #08335e;
+		--color-blau-light: #326cae;
+		--color-akzent: #ef9e48;
+		--color-akzent-dark: #da793c;
+		--color-akzent-light: #f5ba6c;
+		--color-neutral: #e3e3e3;
+		--color-neutral-dark: #646464;
+		--color-neutral-light: #f7f7f7;
+		--color-rot: #ce3033;
+		--color-gelb: #f6cd35;
+		--color-gruen: #008549;
+		--color-grau-100: hsl(0 0% 0%);
+		--color-grau-90: hsl(0 0% 10%);
+		--color-grau-80: hsl(0 0% 20%);
+		--color-grau-70: hsl(0 0% 30%);
+		--color-grau-60: hsl(0 0% 40%);
+		--color-grau-50: hsl(0 0% 50%);
+		--color-grau-40: hsl(0 0% 60%);
+		--color-grau-30: hsl(0 0% 70%);
+		--color-grau-20: hsl(0 0% 80%);
+		--color-grau-10: hsl(0 0% 90%);
+		--color-grau-0: hsl(0 0% 100%);
+		--gap: 0.25rem;
+		--spacing: 0.25rem;
+		--font-family: Roboto, Kreon, Georgia, Times New Roman, sans-serif;
+		--font-size: 16px;
+		--font-weight-bold: 700;
+		--line-height-bold: 1.2em; /* em! */
+		--line-height-regular: 1.5em; /* em! */
+	}
+	*[tabindex]:focus,
+	a:focus,
+	button:focus,
+	summary:focus,
+	kol-input:not(.checkbox, .radio) .input:focus-within,
+	kol-input:is(.checkbox, .radio) input:focus {
+		outline-color: var(--color-blau-dark);
+		outline-offset: 0.125rem;
+		outline-style: solid;
+		outline-width: 0.125rem;
+		transition: outline-offset 0.25s linear;
+	}
+	*:not(i) {
+		font-family: var(--font-family);
+	}
+	a,
+	button {
+		font-size: var(--font-size);
+		outline: none;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-weight: var(--font-weight-bold);
+		line-height: var(--line-height-heading);
+		margin: 0;
+		padding: 0;
+	}
+	p {
+		font-weight: var(--font-weight);
+	}
+	kol-span-wc,
+	kol-span-wc > span {
+		gap: 0.5em;
+	}
+	.required label span::after,
+	.required legend span::after {
+		color: var(--color-red);
+		padding-left: 0.25em;
+	}
+	kol-tooltip .tooltip-area {
+		background-color: #f2f2f2;
+	}
+	kol-tooltip .tooltip-arrow {
+		background-color: #626262;
+	}
+	kol-tooltip .tooltip-content {
+		padding: 0.25rem 0.5rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		border-radius: 2px;
+		border: 1px solid #626262;
+	}`,
+  "KOL-BADGE": `:host {
+		display: inline-block;
+	}
+	:host > span {
+		border-radius: 0.3125rem;
+		display: inline-flex;
+		line-height: 1.25rem;
+	}
+	:host > span kol-span-wc {
+		padding: 0.25rem 0.5rem;
+	}
+	:host > span > kol-span-wc {
+		align-items: center;
+		font-style: normal;
+		gap: 0.5rem;
+	}
+	:host > span > kol-span-wc > span {
+		display: flex;
+		gap: 0.25rem;
+	}
+	:host button {
+		border-radius: 0 var(--spacing) var(--spacing) 0;
+	}`,
+  "KOL-HEADING": `h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-weight: var(--font-weight-bold);
+		margin: 0;
+		padding: 1rem 0;
+		text-align: left;
+	}
+	h1 {
+		font-size: 2.5rem;
+		line-height: 1.2;
+		padding: 0 0 1rem 0;
+	}
+	h2 {
+		font-size: 2rem;
+		line-height: 1.25;
+	}
+	h3 {
+		font-size: 1.75rem;
+		line-height: 1.29;
+	}
+	h4 {
+		font-size: 1.5rem;
+		line-height: 1.33;
+	}
+	h5 {
+		font-size: 1.25rem;
+		line-height: 1.4;
+	}
+	h6 {
+		font-size: 1rem;
+		line-height: 1.5;
+	}`,
+  "KOL-LINK": `:is(a, button) {
+		align-items: baseline;
+		color: var(--color-blau);
+		gap: 0.25em;
+		text-decoration-line: none;
+	}
+	a:active,
+	a:focus,
+	a:hover,
+	button:active,
+	button:focus,
+	button:hover {
+		outline-width: 0;
+		text-decoration-line: underline;
+		text-decoration-thickness: 0.1rem !important;
+	}
+	:is(a, button) > kol-span-wc {
+		order: 1;
+		gap: 0.25em;
+	}
+	:is(a, button) > kol-span-wc > span {
+		align-items: baseline;
+		gap: 0.25em;
+	}
+	.hidden {
+		display: none;
+		visibility: hidden;
+	}
+	.skip {
+		left: -99999px;
+		overflow: hidden;
+		position: absolute;
+		z-index: 9999999;
+		line-height: 1em;
+	}
+	.skip:focus {
+		background: white;
+		left: unset;
+		position: unset;
+	}`,
+  "KOL-BUTTON-LINK": `:is(a, button) {
+		align-items: baseline;
+		color: var(--color-blau);
+		gap: 0.25em;
+		text-decoration-line: none;
+	}
+	a:active,
+	a:focus,
+	a:hover,
+	button:active,
+	button:focus,
+	button:hover {
+		outline-width: 0;
+		text-decoration-line: underline;
+		text-decoration-thickness: 0.1rem !important;
+	}
+	:is(a, button) > kol-span-wc {
+		order: 1;
+		gap: 0.25em;
+	}
+	:is(a, button) > kol-span-wc > span {
+		align-items: baseline;
+		gap: 0.25em;
+	}
+	.hidden {
+		display: none;
+		visibility: hidden;
+	}
+	.skip {
+		left: -99999px;
+		overflow: hidden;
+		position: absolute;
+		z-index: 9999999;
+		line-height: 1em;
+	}
+	.skip:focus {
+		background: white;
+		left: unset;
+		position: unset;
+	}`,
+  "KOL-SPIN": `.spin {
+		display: inline-block;
+		height: 1rem;
+		position: relative;
+		width: 3rem;
+	}
+	.spin span {
+		animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		border: 0.1rem solid rgb(255, 255, 255);
+		border-radius: 50%;
+		height: 0.8rem;
+		width: 0.8rem;
+		top: 0.1rem;
+		position: absolute;
+	}
+	.spin span:nth-child(1) {
+		background-color: #fc0;
+		z-index: 0;
+		animation: 2s ease 0s infinite normal none running spin1;
+		left: 0.1rem;
+	}
+	.spin span:nth-child(2) {
+		background-color: #f00;
+		z-index: 1;
+		animation: 2s ease 0s infinite normal none running spin2;
+		left: 0.1rem;
+	}
+	.spin span:nth-child(3) {
+		background-color: #000;
+		z-index: 1;
+		animation: 2s ease 0s infinite normal none running spin2;
+		left: 1.1rem;
+	}
+	.spin span:nth-child(4) {
+		background-color: #666;
+		z-index: 0;
+		animation: 2s ease 0s infinite normal none running spin3;
+		left: 2.1rem;
+	}
+	@keyframes spin1 {
+		0% {
+			transform: scale(0);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+	@keyframes spin2 {
+		0% {
+			transform: translate(0px, 0px);
+		}
+		100% {
+			transform: translate(1rem, 0px);
+		}
+	}
+	@keyframes spin3 {
+		0% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(0);
+		}
+	}`,
+  "KOL-TABLE": `caption {
+		caption-side: TOP;
+		font-size: 1.1rem; /* 1.75rem */ /* line-height: 3rem; */
+		font-weight: var(--font-weight-bold);
+		margin-bottom: 0.25rem;
+		padding: 0.75rem;
+		text-align: left;
+	}
+	table {
+		border-spacing: 0;
+		border-color: var(--color-neutral);
+		border-style: solid;
+		border-width: 0;
+		border-top-width: 1px;
+	}
+	th {
+		background-color: var(--color-neutral);
+	}
+	td,
+	th {
+		color: var(--color-neutral-dark);
+		border-color: var(--color-neutral);
+		border-style: solid;
+		border-width: 0;
+		border-bottom-width: 1px;
+		padding: 0.5rem;
+	}
+	th[data-sort] kol-button::part(icon)::before {
+		font-family: "FontAwesome";
+		color: var(--color-neutral-dark);
+	}
+	th[data-sort="sort-NOS"] kol-button::part(icon)::before,
+	th[data-sort="sort-undefined"] kol-button::part(icon)::before {
+		content: "\f0dc";
+	}
+	th[data-sort="sort-ASC"] kol-button::part(icon)::before {
+		content: "\f0de";
+	}
+	th[data-sort="sort-DESC"] kol-button::part(icon)::before {
+		content: "\f0dd";
+	}`,
+  "KOL-ACCORDION": `:host > div {
+		border-color: var(--border-color);
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: 1px;
+	}
+	:host > div > kol-heading-wc > * {
+		display: grid;
+		margin: -1px;
+	}
+	:host > div > kol-heading-wc button > kol-span-wc {
+		background-color: var(--color-neutral-light);
+		border-color: var(--border-color);
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: 2px;
+		color: var(--color-blau);
+		font-weight: var(--font-weight-bold);
+		text-align: left;
+		padding: 1.5rem;
+	}
+	:host > div > kol-heading-wc button:hover > kol-span-wc {
+		border-color: var(--color-blau-dark);
+	}
+	:host > div > kol-heading-wc button > kol-span-wc > span {
+		gap: 0.5em;
+	}
+	.content,
+	[part*="content"] {
+		padding: 1.5rem 1.5rem 2rem 1.5rem;
+	}
+	:host > div > kol-heading-wc button kol-icon::part(icon) {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+	}
+	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
+		content: "\\f077";
+	}
+	:host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
+		content: "\\f078";
+	}`,
+  "KOL-ALERT": `kol-alert-wc {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 0.25rem;
+		color: var(--color-neutral-dark);
+	}
+	kol-alert-wc .content {
+		font-style: italic;
+		font-size: 0.8rem;
+	}
+	.card {
+		display: grid;
+		gap: 0.625rem;
+		padding: 1.5rem 1.5rem 2rem 1.5rem;
+	}
+	.card .heading .heading-icon {
+		align-items: center;
+		display: inline-flex;
+		font-size: 2rem;
+		margin-right: 1.5rem;
+		padding: 0;
+	}
+	.default {
+		border-color: var(--color-neutral-dark);
+	}
+	.card.default .heading {
+		color: var(--color-neutral-dark);
+	}
+	.info {
+		border-color: var(--color-blau);
+	}
+	.card.info .heading {
+		color: var(--color-blau);
+	}
+	.warning {
+		background-color: var(--color-gelb);
+		border-color: var(--color-gelb);
+	}
+	.card.warning .heading {
+		color: var(--color-neutral-dark);
+	}
+	.error {
+		border-color: var(--color-rot);
+	}
+	.card.error .heading {
+		color: var(--color-rot);
+	}
+	.success {
+		border-color: var(--color-gruen);
+	}
+	.card.success .heading {
+		color: var(--color-gruen);
+	}
+	.card .content {
+		line-height: 1.5rem;
+		padding-left: 3.5rem;
+	}
+	.msg {
+		border-width: 0;
+		display: flex;
+		gap: calc(2 * var(--gap));
+		padding: var(--gap);
+	}
+	.msg .heading {
+		display: flex;
+		gap: var(--spacing);
+		flex-grow: 1;
+		align-items: flex-start;
+	}
+	.msg .heading > div {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+	.info .heading kol-icon.heading-icon {
+		display: grid;
+		place-items: center;
+		background-color: var(--color-blau);
+		border-radius: 100%;
+		min-width: 2em;
+		min-height: 2em;
+	}
+	.card.info .heading kol-icon.heading-icon {
+		font-size: 1em;
+	}
 	.msg.info .heading kol-icon.heading-icon {
 		font-size: 0.5em;
 	}
@@ -51033,13 +53461,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		border-style: solid;
 	}
 	label {
-		cursor: pointer;
 		padding-left: 0.75rem;
 	}
-	kol-input:hover label,
-	kol-input:focus-within label {
+	kol-input:not(.disabled):hover label,
+	kol-input:not(.disabled):focus-within label {
 		text-decoration: underline;
 	}
+	: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;
@@ -51074,15 +53508,10 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	input[type="checkbox"] {
 		appearance: none;
 		background-color: white;
-		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,
 	input[type="checkbox"]:indeterminate {
@@ -51272,8 +53701,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51318,8 +53747,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51364,8 +53793,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51410,8 +53839,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51456,8 +53885,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51502,8 +53931,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51548,8 +53977,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51594,8 +54023,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51891,8 +54320,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51937,8 +54366,8 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		gap: var(--gap);
 		overflow: hidden;
 	}
-	kol-input .input:focus-within,
-	kol-input .input:hover {
+	kol-input:not(.disabled) .input:focus-within,
+	kol-input:not(.disabled) .input:hover {
 		border-color: var(--color-grau-60);
 	}
 	kol-input:not(.select, .textarea) .input {
@@ -51971,6 +54400,9 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	}
 	kol-input > kol-alert.error {
 		order: 3;
+	}
+	.inputs-wrapper {
+		gap: 1em;
 	}`,
   "KOL-ICON": `/*! * 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 {
@@ -58865,4 +61297,4 @@ const DE = KoliBri.createTranslation("de", {});
 
 const EN = KoliBri.createTranslation("en", {});
 
-export { BAMF, BMF, BZSt, DE, DESYv1, DESYv2, ECL_EC, ECL_EU, EN, ITZBund, MAPZ, MFM, ZOLLv2 };
+export { BAMF, BMF, BZSt, DE, DESYv1, DESYv2, ECL_EC, ECL_EU, EN, ITZBund, MAPZ, MFM, TOKEN_BASED, ZOLLv2 };