@public-ui/themes 1.7.0-rc.13 → 1.7.0-rc.15

package/dist/index.cjs

@@ -355,8 +355,8 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
   TagEnum2[TagEnum2["input-checkbox"] = 17] = "input-checkbox";
   TagEnum2[TagEnum2["input-color"] = 18] = "input-color";
   TagEnum2[TagEnum2["input-date"] = 19] = "input-date";
-  TagEnum2[TagEnum2["input-file"] = 20] = "input-file";
-  TagEnum2[TagEnum2["input-email"] = 21] = "input-email";
+  TagEnum2[TagEnum2["input-email"] = 20] = "input-email";
+  TagEnum2[TagEnum2["input-file"] = 21] = "input-file";
   TagEnum2[TagEnum2["input-number"] = 22] = "input-number";
   TagEnum2[TagEnum2["input-password"] = 23] = "input-password";
   TagEnum2[TagEnum2["input-radio"] = 24] = "input-radio";
@@ -374,13 +374,15 @@ var TagEnum = /* @__PURE__ */ ((TagEnum2) => {
   TagEnum2[TagEnum2["separator"] = 36] = "separator";
   TagEnum2[TagEnum2["skip-nav"] = 37] = "skip-nav";
   TagEnum2[TagEnum2["spin"] = 38] = "spin";
-  TagEnum2[TagEnum2["symbol"] = 39] = "symbol";
-  TagEnum2[TagEnum2["table"] = 40] = "table";
-  TagEnum2[TagEnum2["tabs"] = 41] = "tabs";
-  TagEnum2[TagEnum2["textarea"] = 42] = "textarea";
-  TagEnum2[TagEnum2["toast"] = 43] = "toast";
-  TagEnum2[TagEnum2["toolbar"] = 44] = "toolbar";
-  TagEnum2[TagEnum2["tooltip"] = 45] = "tooltip";
+  TagEnum2[TagEnum2["split-button"] = 39] = "split-button";
+  TagEnum2[TagEnum2["symbol"] = 40] = "symbol";
+  TagEnum2[TagEnum2["table"] = 41] = "table";
+  TagEnum2[TagEnum2["tabs"] = 42] = "tabs";
+  TagEnum2[TagEnum2["textarea"] = 43] = "textarea";
+  TagEnum2[TagEnum2["toast"] = 44] = "toast";
+  TagEnum2[TagEnum2["toast-container"] = 45] = "toast-container";
+  TagEnum2[TagEnum2["toolbar"] = 46] = "toolbar";
+  TagEnum2[TagEnum2["tooltip"] = 47] = "tooltip";
   return TagEnum2;
 })(TagEnum || {});
 
@@ -6109,7 +6111,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		--colorTextActiveBg: var(--color-white); /* signal */
 		--colorSignal: var(--color-tropic-sea);
 		--colorSignalFront: var(
-			--color-white
+		--color-white
 		); /* colorSignalFocus hat keine Frontfarbe */
 		--colorSignalFocus: var(--color-heroic-blue);
 		--colorSignalSuccess: var(--color-green);
@@ -6124,8 +6126,8 @@ const BZSt = KoliBri.createTheme("bzst", {
 	:host {
 		/* token */
 		--font-family: "BundesSans Web", system-ui, -apple-system, BlinkMacSystemFont,
-			"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-			sans-serif; /* Basis-Gr\xF6\xDFe: html, rem */
+		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+		sans-serif; /* Basis-Gr\xF6\xDFe: html, rem */
 		--font-size: 100%;
 		--line-height: 1.6875rem; /* template */ /* h1 */
 		--headline1FontSize: 2.5rem;
@@ -6248,10 +6250,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	@keyframes spin {
 		0% {
-			transform: rotate(0deg);
+		transform: rotate(0deg);
 		}
 		100% {
-			transform: rotate(360deg);
+		transform: rotate(360deg);
 		}
 	}
 	kol-tooltip .area {
@@ -6939,6 +6941,9 @@ const BZSt = KoliBri.createTheme("bzst", {
   "KOL-TEXTAREA": `kol-input {
 		gap: 0.4em;
 	}
+	kol-input .error {
+		order: 3;
+	}
 	kol-input label {
 		font-weight: 700;
 		order: 1;
@@ -6946,14 +6951,8 @@ const BZSt = KoliBri.createTheme("bzst", {
 	kol-input .input {
 		order: 2;
 	}
-	kol-input .counter {
-		order: 3;
-	}
-	kol-input .error {
-		order: 4;
-	}
 	kol-input .hint {
-		order: 5;
+		order: 4;
 		font-size: 0.875em;
 		font-style: italic;
 	}
@@ -7240,6 +7239,9 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	.icon-only {
 		padding-bottom: 0.2rem;
+	}
+	:is(a) kol-span-wc > span {
+		gap: var(--gapSmallest);
 	}`,
   "KOL-DETAILS": `details {
 		display: grid;
@@ -7302,26 +7304,26 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	@keyframes spin1 {
 		0% {
-			transform: scale(0);
+		transform: scale(0);
 		}
 		100% {
-			transform: scale(1);
+		transform: scale(1);
 		}
 	}
 	@keyframes spin2 {
 		0% {
-			transform: translate(0px, 0px);
+		transform: translate(0px, 0px);
 		}
 		100% {
-			transform: translate(1rem, 0px);
+		transform: translate(1rem, 0px);
 		}
 	}
 	@keyframes spin3 {
 		0% {
-			transform: scale(1);
+		transform: scale(1);
 		}
 		100% {
-			transform: scale(0);
+		transform: scale(0);
 		}
 	}`,
   "KOL-PROGRESS": `:host progress,
@@ -7548,21 +7550,21 @@ const BZSt = KoliBri.createTheme("bzst", {
 		font-weight: 900;
 		color: var(--color-midnight);
 	}
-	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
-		content: "\\f068";
-	}
-	:host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
+	.accordion > kol-heading-wc button kol-icon::part(icon)::before {
 		content: "\\2b";
 	}
-	:host > div {
+	.accordion.open > kol-heading-wc button kol-icon::part(icon)::before {
+		content: "\\f068";
+	}
+	.accordion {
 		width: 100%;
 		height: 100%;
 		display: grid;
 	}
-	:host > div[part*="open"] div[part="header"] {
+	.accordion[part*="open"] div[part="header"] {
 		padding-left: 2em;
 	}
-	:host > div[part*="open"] div[part="content"] {
+	.accordion[part*="open"] div[part="content"] {
 		padding-top: 1rem;
 	}
 	button {
@@ -7570,12 +7572,12 @@ const BZSt = KoliBri.createTheme("bzst", {
 		font-size: inherit;
 		line-height: inherit;
 	}
-	:host > div {
+	.accordion {
 		background: var(--color-white);
 	}
-	:host > div[part*="open"] {
+	.accordion[part*="open"] {
 		padding-bottom: 1em;
-	} /* :host > div > [part="header"] {height: 0;} */
+	} /* .accordion > [part="header"] {height: 0;} */
 	h1,
 	h2,
 	h3,
@@ -8207,41 +8209,31 @@ const BZSt = KoliBri.createTheme("bzst", {
 		border-radius: 0.25rem 0 0 0.25rem;
 	}`,
   "KOL-PAGINATION": `:host {
-		display: grid;
+		align-items: center;
+		display: flex;
 		gap: 1rem;
 	}
-	:host > div {
+	.navigation-list {
+		align-items: center;
 		display: inline-flex;
 		flex-wrap: wrap;
-		align-items: center;
-		gap: 0.5em;
+		gap: 0.5rem;
+		justify-content: center;
+		margin: 0;
+		padding: 0;
 	}
-	:host .selected button {
-		min-width: 44px;
-		min-height: 44px;
-		display: grid;
-		line-height: 1.5;
-		font-family: var(--textFont);
+	.navigation-list > li {
+		min-width: var(--a11y-min-size);
+		text-align: center;
+	}
+	.selected button {
 		cursor: not-allowed;
 		font-weight: 700;
-		padding: 10px 12px;
 		border-radius: 1.5em;
 		border: none;
-		font-size: var(--textFontSize);
-		font-style: normal;
-		text-align: center;
-		text-transform: uppercase;
-		width: inherit;
 		transition-duration: 0.5s;
 		transition-property: background-color, color, border-color;
 		color: var(--color-midnight);
-		background-color: var(--color-ice);
-		border-color: var(--color-ice);
-	}
-	:host > div > span {
-		align-self: flex-end;
-		padding-bottom: 0.5rem;
-		color: var(--color-midnight);
 	}
 	kol-button::part(icon)::before {
 		font-family: "Font Awesome 6 Free";
@@ -8589,6 +8581,9 @@ const BZSt = KoliBri.createTheme("bzst", {
 	.fa-chevron-right::before {
 		content: "\\f054";
 	}
+	.fa-download::before {
+		content: "\\f019";
+	}
 	fa-exclamation-triangle::before {
 		content: "\\f071";
 	}
@@ -8629,7 +8624,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		font-weight: 400;
 		font-display: block;
 		src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
-			url("../webfonts/fa-regular-400.ttf") format("truetype");
+		url("../webfonts/fa-regular-400.ttf") format("truetype");
 	}
 	.far,
 	.fa-regular {
@@ -8646,7 +8641,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 		font-weight: 900;
 		font-display: block;
 		src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
-			url("../webfonts/fa-solid-900.ttf") format("truetype");
+		url("../webfonts/fa-solid-900.ttf") format("truetype");
 	}
 	.fas,
 	.fa-solid {
@@ -8658,59 +8653,59 @@ const BZSt = KoliBri.createTheme("bzst", {
 		font-display: block;
 		font-weight: 400;
 		src: url("../webfonts/fa-brands-400.woff2") format("woff2"),
-			url("../webfonts/fa-brands-400.ttf") format("truetype");
+		url("../webfonts/fa-brands-400.ttf") format("truetype");
 	}
 	@font-face {
 		font-family: "Font Awesome 5 Free";
 		font-display: block;
 		font-weight: 900;
 		src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
-			url("../webfonts/fa-solid-900.ttf") format("truetype");
+		url("../webfonts/fa-solid-900.ttf") format("truetype");
 	}
 	@font-face {
 		font-family: "Font Awesome 5 Free";
 		font-display: block;
 		font-weight: 400;
 		src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
-			url("../webfonts/fa-regular-400.ttf") format("truetype");
+		url("../webfonts/fa-regular-400.ttf") format("truetype");
 	}
 	@font-face {
 		font-family: "FontAwesome";
 		font-display: block;
 		src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
-			url("../webfonts/fa-solid-900.ttf") format("truetype");
+		url("../webfonts/fa-solid-900.ttf") format("truetype");
 	}
 	@font-face {
 		font-family: "FontAwesome";
 		font-display: block;
 		src: url("../webfonts/fa-brands-400.woff2") format("woff2"),
-			url("../webfonts/fa-brands-400.ttf") format("truetype");
+		url("../webfonts/fa-brands-400.ttf") format("truetype");
 	}
 	@font-face {
 		font-family: "FontAwesome";
 		font-display: block;
 		src: url("../webfonts/fa-regular-400.woff2") format("woff2"),
-			url("../webfonts/fa-regular-400.ttf") format("truetype");
+		url("../webfonts/fa-regular-400.ttf") format("truetype");
 		unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D,
-			U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088,
-			U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5,
-			U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A,
-			U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E,
-			U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7,
-			U+F1F9, U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D,
-			U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA,
-			U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
+		U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088,
+		U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5,
+		U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A,
+		U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E,
+		U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7,
+		U+F1F9, U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D,
+		U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA,
+		U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
 	}
 	@font-face {
 		font-family: "FontAwesome";
 		font-display: block;
 		src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"),
-			url("../webfonts/fa-v4compatibility.ttf") format("truetype");
+		url("../webfonts/fa-v4compatibility.ttf") format("truetype");
 		unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B,
-			U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4,
-			U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E,
-			U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F250, U+F252,
-			U+F27A;
+		U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4,
+		U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E,
+		U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F250, U+F252,
+		U+F27A;
 	}`,
   "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
 		border-radius: var(--a11y-min-size);
@@ -9850,9 +9845,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host > span {
 		border-radius: 0.3125rem;
 		display: inline-flex;
-		font-size: 1em;
 		font-style: normal;
-		line-height: 1.25rem;
 	}
 	:host > span.smart-button {
 		align-items: center;
@@ -10267,7 +10260,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
 		content: "\\f078";
 	}
-	:host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
+	:host > div:not(.open) > kol-heading-wc button kol-icon::part(icon)::before {
 		content: "\\f054";
 	}
 	:host > div {
@@ -10544,13 +10537,14 @@ const BMF = KoliBri.createTheme("bmf", {
 		justify-items: left;
 		width: 100%;
 		min-height: 44px;
-		gap: 0.4em;
 	}
 	:host kol-input.default {
 		grid-template-columns: 1.5rem auto;
+		gap: 0.4em;
 	}
 	:host kol-input.switch {
 		grid-template-columns: 3.5rem auto;
+		gap: 0.4em;
 	}
 	:host kol-input > div.input {
 		display: inherit;
@@ -10732,15 +10726,9 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host .disabled {
 		opacity: 0.33;
 	}
+
 	:host kol-input.button {
-		cursor: inherit;
-		display: grid;
-		column-gap: 0;
-		grid-template-columns: 32px auto;
-		grid-template-areas:
-			"error error"
-			"input label"
-			"hint hint";
+		row-gap: 0.5rem;
 	}
 
 	:host kol-input.button.checked > .input,
@@ -10748,12 +10736,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		background-color: var(--color-ice);
 	}
 
-	:host kol-input.button > .error {
-		grid-area: error;
-	}
-
 	:host kol-input.button > label {
-		grid-area: label;
 		background-color: var(--color-silver);
 		border-top-right-radius: var(--border-radius);
 		border-bottom-right-radius: var(--border-radius);
@@ -10765,7 +10748,6 @@ const BMF = KoliBri.createTheme("bmf", {
 	}
 
 	:host kol-input.button > .input {
-		grid-area: input;
 		background-color: var(--color-silver);
 		border-top-left-radius: var(--border-radius);
 		border-bottom-left-radius: var(--border-radius);
@@ -10774,13 +10756,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		place-content: center;
 	}
 
-	:host kol-input.button > .hint {
-		grid-area: hint;
-	}
-
 	:host kol-input.button > .input > div {
 		display: flex;
 	}
+
+	:host kol-input.button .icon {
+		height: auto;
+	}
 `,
   "KOL-INPUT-RADIO": `/* INPUT */
 	kol-input {
@@ -10916,26 +10898,13 @@ const BMF = KoliBri.createTheme("bmf", {
 	fieldset div label {
 		padding-left: 0;
 	}`,
-  "KOL-TOAST": `: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: 2rem;
-		max-width: 440px;
-	}
-	:host > div > kol-button-wc {
-		top: 0;
-		position: relative;
-		display: block;
-		width: 1em;
+  "KOL-TOAST-CONTAINER": `:host {
+		top: 1rem;
+		right: 1rem;
+		width: 440px;
+	}`,
+  "KOL-TOAST": `.toast {
+		margin-top: 1rem;
 	}`,
   "KOL-TABS": `button:disabled {
 		opacity: 0.5;
@@ -18500,6 +18469,9 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--color-ocean);
 		color: var(--color-white);
 		cursor: pointer;
+	}`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
 	}`
 });
 
@@ -19509,12 +19481,12 @@ const DEFAULT = KoliBri.createTheme("default", {
   "KOL-BADGE": css`
 		:host {
 			display: inline-block;
+			font-size: inherit;
 		}
 		:host > span {
 			border-radius: var(--border-radius);
 			display: inline-flex;
 			font-style: normal;
-			line-height: 1.25rem;
 		}
 		:host > span.smart-button {
 			align-items: center;
@@ -20144,6 +20116,9 @@ const DEFAULT = KoliBri.createTheme("default", {
 		:host kol-input.switch {
 			grid-template-columns: 3.5rem auto;
 		}
+		:host kol-input.button {
+			gap: 0.4rem 0;
+		}
 		:host kol-input > div.input {
 			display: inherit;
 			min-height: var(--a11y-min-size);
@@ -20441,27 +20416,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			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: 2rem;
-			max-width: 750px;
+  "KOL-TOAST-CONTAINER": css`
+		:host {
+			top: 1rem;
+			right: 1rem;
+			width: 440px;
 		}
-		:host > div > kol-button-wc {
-			top: 0;
-			position: relative;
-			display: block;
-			width: 1rem;
+	`,
+  "KOL-TOAST": css`
+		.toast {
+			margin-top: 1rem;
 		}
 	`,
   "KOL-TABS": css`
@@ -20922,7 +20886,10 @@ const DEFAULT = KoliBri.createTheme("default", {
 			color: var(--color-light);
 			cursor: pointer;
 		}
-	`
+	`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
+	}`
 });
 
 const ECL_EC = KoliBri.createTheme("ecl-ec", {
@@ -21080,7 +21047,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		outline: 2px solid var(--color-blue);
 		outline-offset: -2px;
 	}
-	div[part="content"] {
+	.content {
 		padding: var(--spacing-s) var(--spacing-m);
 	}`,
   "KOL-INDENTED-TEXT": `:host > div {
@@ -21279,7 +21246,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-blue-130);
 	}`,
   "KOL-BADGE": `:host > span {
-		font: normal normal var(--font-weight) 0.875rem/1em var(--font-family);
+		font: normal normal var(--font-weight) 1em var(--font-family);
 		padding: calc(0.5rem - 1px) calc(0.75rem - 1px);
 		text-transform: uppercase;
 	}`,
@@ -21561,6 +21528,13 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	kol-input {
 		gap: var(--spacing-xs);
 	}
+	.button {
+		gap: var(--spacing-xs) 0;
+		grid-template-areas:
+			"input label"
+			"hint hint"
+			"error error";
+	}
 	kol-input > .input {
 		order: 2;
 	}
@@ -21585,7 +21559,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
 		outline: none;
 	}
 	input,
@@ -21613,6 +21586,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -21665,6 +21639,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
   "KOL-INPUT-RADIO": `fieldset {
 		border: 0;
 		gap: 0.5rem;
+		flex-wrap: wrap;
 	}
 	.input-slot {
 		gap: 0.25rem;
@@ -21681,6 +21656,13 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	fieldset kol-input {
 		order: 4;
 	}
+	.radio-input-wrapper {
+    display: flex;
+		align-items: center;
+	}
+	.radio-label {
+		padding-left: 0.5rem;
+	}
 	input[type="radio"] {
 		border: 2px solid var(--color-grey-75);
 	}
@@ -21723,6 +21705,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		font-size: 0.875em;
 		margin-left: calc(-1 * var(--spacing-xs));
 		order: 1;
+		width: 100%;
 	}
 	.hint {
 		font-size: 0.875rem;
@@ -21814,6 +21797,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -21838,7 +21822,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -21866,6 +21849,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -21890,7 +21874,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -21918,6 +21901,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -21942,7 +21926,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -21970,6 +21953,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -21994,7 +21978,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -22022,6 +22005,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -22098,7 +22082,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -22126,6 +22109,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -22150,7 +22134,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -22178,6 +22161,7 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	.counter {
 		order: 5;
@@ -22362,6 +22346,24 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		border-color: var(--color-blue);
 		color: var(--color-white);
 		cursor: pointer;
+	}`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
+	}`,
+  "KOL-TOAST-CONTAINER": `:host {
+		top: 1rem;
+		right: 1rem;
+		width: 440px;
+	}`,
+  "KOL-TOAST": `:host {
+		display: block;
+	}
+	.toast {
+		background: #fff;
+		margin-top: 1rem;
+	}
+	.alert {
+		display: block;
 	}`
 });
 
@@ -22411,6 +22413,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		--color-grey-110: #222732;
 		--color-grey-100: #262b38;
 		--color-grey-80: #515560;
+		--color-grey-75: #515560;
 		--color-grey-60: #7d8088;
 		--color-grey-40: #a8aaaf;
 		--color-grey-20: #d4d5d7;
@@ -22624,7 +22627,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	.open .headline button kol-icon::part(icon)::before {
 		content: "\\f077";
 	}
-	.close .headline button kol-icon::part(icon)::before {
+	:not(.open) .headline button kol-icon::part(icon)::before {
 		content: "\\f078";
 	}
 	.content,
@@ -23127,6 +23130,13 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	kol-input {
 		gap: var(--spacing-xs);
 	}
+	.button {
+		gap: var(--spacing-xs) 0;
+		grid-template-areas:
+			"input label"
+			"hint hint"
+			"error error";
+	}
 	kol-input > .input {
 		order: 2;
 	}
@@ -23151,7 +23161,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
 		outline: none;
 	}
 	input,
@@ -23179,6 +23188,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23255,7 +23265,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -23283,6 +23292,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23307,7 +23317,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -23335,6 +23344,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23359,7 +23369,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -23387,6 +23396,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23411,7 +23421,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
 		outline: none;
 	}
 	input,
@@ -23439,6 +23448,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23463,7 +23473,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
 		outline: none;
 	}
 	input,
@@ -23491,6 +23500,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23515,7 +23525,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -23543,6 +23552,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	input::placeholder,
 	textarea::placeholder {
@@ -23567,7 +23577,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
@@ -23595,6 +23604,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		color: var(--color-grey);
 		order: 4;
 		align-items: center;
+		padding: 1px 0.5em;
 	}
 	kol-input .counter {
 		order: 5;
@@ -23768,9 +23778,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
   "KOL-INPUT-RADIO": `fieldset {
 		border: 0;
 		gap: 0.5rem;
-	}
-	.input-slot {
-		gap: 0.25rem;
+		flex-wrap: wrap;
 	}
 	fieldset kol-alert {
 		order: 1;
@@ -23784,8 +23792,16 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	fieldset kol-input {
 		order: 4;
 	}
+	.radio-input-wrapper {
+    display: flex;
+		align-items: center;
+	}
+	.radio-label {
+		padding-left: 0.5rem;
+	}
 	input[type="radio"] {
-		border: 2px solid var(--color-grey-75);
+		outline: 2px solid var(--color-grey-75);
+		outline-offset: 2px;
 	}
 	input[type="radio"]:before {
 		display: none;
@@ -23795,8 +23811,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		border-width: 7px;
 	}
 	input[type="radio"]:focus {
-		outline: 2px solid var(--color-blue);
-		outline-offset: 2px;
+		outline-color: var(--color-blue);
 	}
 	input[type="radio"]:not(:disabled):hover {
 		border-color: var(--color-blue);
@@ -23826,11 +23841,15 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		font-size: 0.875em;
 		margin-left: calc(-1 * var(--spacing-xs));
 		order: 1;
+		width: 100%;
 	}
 	.hint {
 		font-size: 0.875rem;
 		order: 4;
 	}`,
+  "KOL-INPUT-RANGE": `.inputs-wrapper {
+		gap: 1rem;
+	}`,
   "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
 		border-radius: 4px;
 		gap: 0.5rem;
@@ -23839,6 +23858,24 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		background-color: #0e47cb;
 		color: #fff;
 		cursor: pointer;
+	}`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
+	}`,
+  "KOL-TOAST-CONTAINER": `:host {
+		top: 1rem;
+		right: 1rem;
+		width: 440px;
+	}`,
+  "KOL-TOAST": `:host {
+		display: block;
+	}
+	.toast {
+		background: #fff;
+		margin-top: 1rem;
+	}
+	.alert {
+		display: block;
 	}`
 });
 
@@ -24572,6 +24609,9 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	:host .default {
 		border-color: var(--color-anthrazit);
 	}
+	.heading {
+		gap: 0.5rem;
+	}
 	.default .heading-icon {
 		background-color: var(--color-anthrazit);
 	}
@@ -24645,7 +24685,6 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	:host > span {
 		border-radius: 0.3125rem;
 		display: inline-flex;
-		line-height: 1.25rem;
 	}
 	:host > span kol-button-wc {
 		border-left: 1px solid rgba(0, 0, 0, 0.25);
@@ -24958,6 +24997,9 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		font-size: inherit;
 		line-height: inherit;
 	}
+	.content {
+		padding: 0.5rem;
+	}
 	:host > div > kol-heading-wc button kol-icon::part(close)::before {
 		font-family: "Font Awesome 6 Free";
 		content: "\\f077";
@@ -25167,9 +25209,16 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	kol-input.default {
 		grid-template-columns: calc(6 * 2 * var(--spacing)) auto;
 	}
-	kol-input.switch {
+	.switch {
 		grid-template-columns: calc(13 * 2 * var(--spacing)) auto;
 	}
+	.button {
+		gap: 0.5rem 0;
+		grid-template-areas:
+			"input label"
+			"hint hint"
+			"error error";
+	}
 	kol-input > div.input {
 		display: inline-flex;
 		order: 1;
@@ -25328,8 +25377,10 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		border: 0px;
 		margin: 0px;
 		padding: 0px;
-		display: grid;
-		gap: 0.25em;
+		flex-wrap: wrap;
+	}
+	fieldset.horizontal {
+		gap: 1rem;
 	}
 	fieldset legend {
 		display: block;
@@ -25370,28 +25421,22 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		background-color: var(--color-input-bg-default);
 		border-color: #999;
 		cursor: not-allowed;
-	}`,
-  "KOL-TOAST": `:host > div {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 0;
-		z-index: 200;
 	}
-	:host > div > kol-alert {
-		display: block;
-		margin: auto;
-		padding: 1rem;
-		max-width: 750px;
-	}
-	:host > div > kol-button-wc {
-		top: 0;
-		position: relative;
-		display: block;
-		margin: auto;
-		width: 1em;
+	kol-alert {
+		width: 100%:
+	}`,
+  "KOL-TOAST-CONTAINER": `:host {
+		top: 1rem;
+		width: 750px;
+		left: 50%;
+		transform: translateX(-50%);
 	}`,
+  "KOL-TOAST": `
+		.toast {
+			background: #fff;
+			margin-top: 1rem;
+		}
+	`,
   "KOL-TABS": `:host > div {
 		display: block;
 		width: 100%;
@@ -25560,6 +25605,9 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		border-color: var(--color-petrol);
 		color: var(--color-weiss);
 		cursor: pointer;
+	}`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
 	}`
 });
 
@@ -36028,6 +36076,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	kol-input.switch {
 		grid-template-columns: calc(13 * var(--spacing)) auto;
 	}
+	.button {
+		gap: 0.5rem 0;
+	}
 	kol-input > div.input {
 		display: inline-flex;
 		order: 1;
@@ -36579,6 +36630,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		font-weight: inherit;
 		font-size: inherit;
 		line-height: inherit;
+	}
+	.content {
+		padding: 0.5rem;
 	}`,
   "KOL-CARD": `:host > div {
 		border-color: var(--kolibri-border-color);
@@ -36603,7 +36657,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		padding: 0.5rem;
 	}
 	:host div.content {
-		padding: 0;
+		padding: 0.5rem;
 	}
 	:host div.content,
 	:host div.content + div.footer {
@@ -36866,28 +36920,18 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	:host > div.tabs-align-right > div {
 		border-radius: 0.25rem 0 0 0.25rem;
 	}`,
-  "KOL-TOAST": `:host > div {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 0;
-		z-index: 200;
-	}
-	:host > div > kol-alert {
-		background-color: white;
-		border-radius: var(--kolibri-border-radius);
-		display: block;
-		margin: 1rem auto;
-		max-width: 750px;
-	}
-	:host > div > kol-button-wc {
-		top: 0;
-		position: relative;
-		display: block;
-		margin: auto;
-		width: 1em;
+  "KOL-TOAST-CONTAINER": `:host {
+		top: 1rem;
+		width: 750px;
+		left: 50%;
+		transform: translateX(-50%);
 	}`,
+  "KOL-TOAST": `
+		.toast {
+			background: #fff;
+			margin-top: 1rem;
+		}
+	`,
   "KOL-NAV": `:host > div {
 		gap: var(--spacing);
 	}
@@ -52737,6 +52781,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		border-color: var(--kolibri-border-color);
 		color: white;
 		cursor: pointer;
+	}`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
 	}`
 });
 
@@ -52839,7 +52886,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	:host > span {
 		border-radius: 0.3125rem;
 		display: inline-flex;
-		line-height: 1.25rem;
 	}
 	:host > span kol-span-wc {
 		padding: 0.25rem 0.5rem;
@@ -53068,13 +53114,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	}
 	th[data-sort="sort-NOS"] kol-button::part(icon)::before,
 	th[data-sort="sort-undefined"] kol-button::part(icon)::before {
-		content: "\f0dc";
+		content: "\\f0dc";
 	}
 	th[data-sort="sort-ASC"] kol-button::part(icon)::before {
-		content: "\f0de";
+		content: "\\f0de";
 	}
 	th[data-sort="sort-DESC"] kol-button::part(icon)::before {
-		content: "\f0dd";
+		content: "\\f0dd";
 	}`,
   "KOL-ACCORDION": `:host > div {
 		border-color: var(--border-color);
@@ -53114,7 +53160,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	: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 {
+	:host > div:not(.open) > kol-heading-wc button kol-icon::part(icon)::before {
 		content: "\\f078";
 	}`,
   "KOL-ALERT": `kol-alert-wc {
@@ -53184,7 +53230,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		display: flex;
 		gap: var(--spacing);
 		flex-grow: 1;
-		align-items: flex-start;
+		align-items: center;
 	}
 	.msg .heading > div {
 		display: flex;
@@ -53264,8 +53310,11 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 1px;
+		background: #fff;
 	}
-	:host > div .header {
+	:host > div .header,
+	.content,
+	.footer {
 		padding: 1.5rem;
 	}`,
   "KOL-BUTTON": `:host > kol-button-wc > button > kol-span-wc,
@@ -53492,27 +53541,18 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		padding: 0.75rem 1rem;
 		text-decoration: underline;
 	}`,
-  "KOL-TOAST": `:host > div {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 0;
-		z-index: 200;
-	}
-	:host > div > kol-alert {
-		display: block;
-		margin: auto;
-		padding: 1rem;
-		max-width: 750px;
-	}
-	:host > div > kol-button-wc {
-		top: 0;
-		position: relative;
-		display: block;
-		margin: auto;
-		width: 1em;
+  "KOL-TOAST-CONTAINER": `:host {
+		top: 1rem;
+		width: 750px;
+		left: 50%;
+		transform: translateX(-50%);
 	}`,
+  "KOL-TOAST": `
+		.toast {
+			background: #fff;
+			margin-top: 1rem;
+		}
+	`,
   "KOL-PROGRESS": `svg line:first-child,
 	svg circle:first-child {
 		stroke: var(--color-neutral);
@@ -53559,6 +53599,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	kol-input.switch {
 		grid-template-columns: calc(13 * var(--spacing)) auto;
 	}
+	.button {
+		grid-template-areas:
+			"input label"
+			"hint hint"
+			"error error";
+		gap: 0.5rem 0;
+	}
 	kol-input > div.input {
 		display: inline-flex;
 		order: 1;
@@ -53750,6 +53797,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	fieldset kol-input {
 		order: 2;
 	}
+	.radio-input-wrapper {
+    display: flex;
+		align-items: center;
+	}
+	.radio-label {
+		padding-left: 0.5rem;
+	}
 	.disabled {
 		opacity: 0.33;
 	}
@@ -61365,6 +61419,9 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		border-color: var(--color-blau-dark);
 		color: white;
 		cursor: pointer;
+	}`,
+  "KOL-SPLIT-BUTTON": `.popover {
+		background: #fff;
 	}`
 });