@public-ui/themes 2.0.0-rc.2 → 2.0.0-rc.3

package/dist/index.mjs

@@ -1519,14 +1519,14 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		line-height: 24px;
 		font-size: 16px;
 	}
-	:host fieldset div input[type="radio"]:hover {
+	.radio-input-wrapper input[type="radio"]:hover {
 		border-color: var(--color-midnight);
 		box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
 	}
-	:host fieldset div input[type="radio"]:focus:hover {
+	.radio-input-wrapper input[type="radio"]:focus:hover {
 		box-shadow: none;
 	}
-	:host fieldset div input[type="radio"]:active {
+	.radio-input-wrapper input[type="radio"]:active {
 		box-shadow: none;
 	}
 	kol-alert {
@@ -1545,7 +1545,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		display: grid;
 		gap: 0.25em;
 	}
-	:host fieldset div {
+	.radio-input-wrapper {
 		cursor: pointer;
 		display: flex;
 		flex-direction: row;
@@ -1553,16 +1553,16 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		position: relative;
 		min-height: 44px;
 	}
-	:host fieldset div label {
+	.radio-input-wrapper label {
 		cursor: pointer;
 		display: flex;
 		padding-left: 0.25em;
 		width: 100%;
 	}
-	:host fieldset div label span {
+	.radio-input-wrapper label span {
 		margin-top: 0.125em;
 	}
-	:host fieldset div input[type="radio"] {
+	.radio-input-wrapper input[type="radio"] {
 		appearance: none;
 		transition: 0.5s;
 		border-radius: 100%;
@@ -1570,7 +1570,7 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		min-width: 1rem;
 		width: 1rem;
 	}
-	:host fieldset div input[type="radio"]:before {
+	.radio-input-wrapper input[type="radio"]:before {
 		content: "";
 		cursor: pointer;
 		left: calc(1 * var(--spacing) - 1px);
@@ -1581,10 +1581,10 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		height: calc(2 * var(--spacing));
 		width: calc(2 * var(--spacing));
 	}
-	:host fieldset div input[type="radio"]:checked:before {
+	.radio-input-wrapper input[type="radio"]:checked:before {
 		background-color: var(--color-primary-20);
 	}
-	:host fieldset div input[type="radio"]:disabled {
+	.radio-input-wrapper input[type="radio"]:disabled {
 		cursor: not-allowed;
 		border-color: var(--border-default);
 		background-color: var(--background-light-grey);
@@ -1749,13 +1749,15 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 	}
 	select option {
 		margin: 1px 0;
-		padding: 0.5em;
 		border-radius: 0.25em;
 		cursor: pointer;
 	}
 	select option:disabled {
 		cursor: not-allowed;
 	}
+	select:not([multiple]) option {
+		padding: 0.5em;
+	}
 	option:active:not(:disabled),
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
@@ -4601,13 +4603,15 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 	}
 	select option {
 		margin: 1px 0;
-		padding: 0.5em;
 		border-radius: 0.25em;
 		cursor: pointer;
 	}
 	select option:disabled {
 		cursor: not-allowed;
 	}
+	select:not([multiple]) option {
+		padding: 0.5em;
+	}
 	option:active:not(:disabled),
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
@@ -6228,14 +6232,15 @@ const BZSt = KoliBri.createTheme("bzst", {
 	input,
 	option,
 	select,
-	summary,
 	textarea {
-		-ms-hyphens: auto;
-		-webkit-hyphens: auto;
 		hyphens: auto;
 		letter-spacing: inherit;
 		display: block;
 	} /* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */
+	summary {
+		hyphens: auto;
+		letter-spacing: inherit;
+	}
 	*[tabindex]:focus,
 	kol-input:not(.checkbox, .radio) .input:focus-within,
 	kol-input:is(.checkbox, .radio) input:focus,
@@ -7244,8 +7249,6 @@ const BZSt = KoliBri.createTheme("bzst", {
 		width: 100%;
 	}
 	summary {
-		cursor: pointer;
-		display: flow-root;
 		margin: 0;
 		padding: 0;
 	}
@@ -7259,68 +7262,11 @@ const BZSt = KoliBri.createTheme("bzst", {
 	details > kol-indented-text {
 		margin: 0.25em 0 0 0.6em;
 	}`,
-  "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-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
+			}
 	}`,
   "KOL-PROGRESS": `:host progress,
 	:host span {
@@ -7380,12 +7326,14 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}
 	select option {
 		margin: 1px 0;
-		padding: 0.5em;
 		cursor: pointer;
 	}
 	select option:disabled {
 		cursor: not-allowed;
 	}
+	select:not([multiple]) option {
+		padding: 0.5em;
+	}
 	.required label > span::after {
 		content: "*";
 		padding-left: 0.125em;
@@ -9929,70 +9877,12 @@ const BMF = KoliBri.createTheme("bmf", {
 	}
 	details kol-icon::part(icon):before {
 		content: "\\f054";
-	}
-	`,
-  "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-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
+			}
 	}`,
   "KOL-PROGRESS": `.bar > div {
 		flex-direction: column;
@@ -10128,10 +10018,12 @@ const BMF = KoliBri.createTheme("bmf", {
 	}
 	select option {
 		margin: 1px 0;
-		padding: 0.5em;
 		border-radius: 0.25em;
 		cursor: pointer;
 	}
+	select:not([multiple]) option {
+		padding: 0.5em;
+	}
 	select option:disabled {
 		cursor: not-allowed;
 	}
@@ -10811,7 +10703,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: grid;
 		gap: 0.25em;
 	}
-	fieldset div {
+	.radio-input-wrapper {
 		cursor: pointer;
 		display: flex;
 		flex-direction: row;
@@ -10821,16 +10713,16 @@ const BMF = KoliBri.createTheme("bmf", {
 		margin: 0;
 		gap: 0.5rem;
 	}
-	fieldset div label {
+	.radio-input-wrapper label {
 		cursor: pointer;
 		display: flex;
 		padding-left: 0.25em;
 		width: 100%;
 	}
-	fieldset div label span {
+	.radio-input-wrapper label span {
 		margin-top: 0.125em;
 	}
-	fieldset div input[type="radio"] {
+	.radio-input-wrapper input[type="radio"] {
 		appearance: none;
 		transition: 0.5s;
 		border-radius: 100%;
@@ -10838,16 +10730,16 @@ const BMF = KoliBri.createTheme("bmf", {
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
 	}
-	fieldset div input[type="radio"]:before {
+	.radio-input-wrapper input[type="radio"]:before {
 		content: "";
 		cursor: pointer;
 		border-radius: 100%;
 		display: block;
 	}
-	fieldset div input[type="radio"]:checked:before {
+	.radio-input-wrapper input[type="radio"]:checked:before {
 		background-color: var(--color-midnight);
 	}
-	fieldset div input[type="radio"]:disabled {
+	.radio-input-wrapper input[type="radio"]:disabled {
 		cursor: not-allowed;
 		border-color: var(--border-default);
 		background-color: var(--background-light-grey);
@@ -10895,7 +10787,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	fieldset .input-slot {
 		gap: 0.5rem;
 	}
-	fieldset div label {
+	.radio-input-wrapper label {
 		padding-left: 0;
 	}`,
   "KOL-TOAST-CONTAINER": `:host {
@@ -18475,9 +18367,10 @@ const BMF = KoliBri.createTheme("bmf", {
 	}`
 });
 
-const css$2 = (input) => input.join(``);
+const cssWithCustomLayerName = (layerName) => (input) => `@layer ${layerName} { ${input.join(``)} }`;
+const css$2 = (input) => cssWithCustomLayerName("kol-theme-component")(input);
 const DEFAULT = KoliBri.createTheme("default", {
-  GLOBAL: css$2`
+  GLOBAL: cssWithCustomLayerName("kol-theme-global")`
 		:host {
 			--border-radius: var(--kolibri-border-radius, 5px);
 			--font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);
@@ -19578,71 +19471,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			font-size: 1.2rem;
 		}
 	`,
-  "KOL-SPIN": css$2`
-		.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$2`
 		:host progress,
 		:host span {
@@ -19748,13 +19576,15 @@ const DEFAULT = KoliBri.createTheme("default", {
 		}
 		select option {
 			margin: 1px 0;
-			padding: 0.5em;
 			border-radius: var(--border-radius);
 			cursor: pointer;
 		}
 		select option:disabled {
 			cursor: not-allowed;
 		}
+		select:not([multiple]) option {
+			padding: 0.5em;
+		}
 		option:active:not(:disabled),
 		option:checked:not(:disabled),
 		option:focus:not(:disabled),
@@ -20329,7 +20159,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 			display: grid;
 			gap: 0.25em;
 		}
-		fieldset div {
+		.radio-input-wrapper {
 			align-items: center;
 			cursor: pointer;
 			display: flex;
@@ -20339,16 +20169,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-height: var(--a11y-min-size);
 			position: relative;
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			cursor: pointer;
 			display: flex;
 			padding-left: calc(var(--spacing) / 2);
 			width: 100%;
 		}
-		fieldset div label span {
+		.radio-input-wrapper label span {
 			margin-top: 0.125em;
 		}
-		fieldset div input[type='radio'] {
+		.radio-input-wrapper input[type='radio'] {
 			appearance: none;
 			transition: 0.5s;
 			border-radius: 100%;
@@ -20356,16 +20186,16 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-width: calc(6 * 0.25rem);
 			width: calc(6 * 0.25rem);
 		}
-		fieldset div input[type='radio']:before {
+		.radio-input-wrapper input[type='radio']:before {
 			content: '';
 			cursor: pointer;
 			border-radius: 100%;
 			display: block;
 		}
-		fieldset div input[type='radio']:checked:before {
+		.radio-input-wrapper input[type='radio']:checked:before {
 			background-color: var(--color-primary);
 		}
-		fieldset div input[type='radio']:disabled {
+		.radio-input-wrapper input[type='radio']:disabled {
 			cursor: not-allowed;
 			background-color: var(--color-mute-variant);
 		}
@@ -20412,7 +20242,7 @@ const DEFAULT = KoliBri.createTheme("default", {
 		fieldset .input-slot {
 			gap: var(--spacing);
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			padding-left: 0;
 		}
 	`,
@@ -20887,9 +20717,11 @@ const DEFAULT = KoliBri.createTheme("default", {
 			cursor: pointer;
 		}
 	`,
-  "KOL-SPLIT-BUTTON": `.popover {
-		background: #fff;
-	}`
+  "KOL-SPLIT-BUTTON": css$2`
+		.popover {
+			background: #fff;
+		}
+	`
 });
 
 const ECL_EC = KoliBri.createTheme("ecl-ec", {
@@ -21408,17 +21240,11 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	progress {
 		display: none;
 	}`,
-  "KOL-SPIN": `.spin span:nth-child(1) {
-		background-color: var(--color-blue-75);
-	}
-	.spin span:nth-child(2) {
-		background-color: var(--color-blue);
-	}
-	.spin span:nth-child(3) {
-		background-color: var(--color-blue-130);
-	}
-	.spin span:nth-child(4) {
-		background-color: var(--color-grey-25);
+  "KOL-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: var(--color-blue-75);
+			}
 	}`,
   "KOL-PAGINATION": `:host {
 		display: grid;
@@ -21535,21 +21361,13 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 			"hint hint"
 			"error error";
 	}
-	kol-input > .input {
-		order: 2;
-	}
-	kol-input > label {
-		order: 3;
-	}
 	kol-alert {
 		color: var(--color-red);
 		font-size: 0.875em;
 		margin-left: calc(-1 * var(--spacing-2xs));
-		order: 1;
 	}
 	.hint {
 		font-size: 0.875rem;
-		order: 4;
 	}`,
   "KOL-INPUT-COLOR": `kol-input {
 		color: var(--color-grey);
@@ -23137,21 +22955,13 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 			"hint hint"
 			"error error";
 	}
-	kol-input > .input {
-		order: 2;
-	}
-	kol-input > label {
-		order: 3;
-	}
 	kol-alert {
 		color: var(--color-red);
 		font-size: 0.875em;
 		margin-left: calc(-1 * var(--spacing-2xs));
-		order: 1;
 	}
 	.hint {
 		font-size: 0.875rem;
-		order: 4;
 	}`,
   "KOL-INPUT-COLOR": `kol-input {
 		color: var(--color-grey);
@@ -23763,17 +23573,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	button:hover {
 		color: var(--color-blue-130);
 	}`,
-  "KOL-SPIN": `.spin span:nth-child(1) {
-		background-color: var(--color-blue-80);
-	}
-	.spin span:nth-child(2) {
-		background-color: var(--color-blue);
-	}
-	.spin span:nth-child(3) {
-		background-color: var(--color-blue-130);
-	}
-	.spin span:nth-child(4) {
-		background-color: var(--color-grey-20);
+  "KOL-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: var(--color-blue-80);
+			}
 	}`,
   "KOL-INPUT-RADIO": `fieldset {
 		border: 0;
@@ -24762,68 +24566,11 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		font-weight: bold;
 		/* text-transform: uppercase; */
 	}`,
-  "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-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
+			}
 	}`,
   "KOL-PROGRESS": `:host progress,
 	:host span {
@@ -24883,6 +24630,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	}
 	option {
 		height: 2em;
+	}
+	select:not([multiple]) option {
 		padding: 0.5em;
 	}
 	kol-alert {
@@ -25387,7 +25136,7 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		width: 100%;
 		line-height: 1.5em;
 	}
-	fieldset div {
+	.radio-input-wrapper, .input {
 		cursor: pointer;
 		display: flex;
 		flex-direction: row;
@@ -25397,15 +25146,15 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		align-items: center;
 		position: relative;
 	}
-	fieldset div label {
+	.radio-label {
 		cursor: pointer;
 		display: flex;
 		width: 100%;
 	}
-	fieldset div label span {
+	.radio-label span {
 		margin-top: 0.125em;
 	}
-	fieldset div input[type="radio"] {
+	.radio-input-wrapper input[type="radio"] {
 		appearance: none;
 		transition: 0.5s;
 		border-radius: 100%;
@@ -25413,11 +25162,11 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		min-width: calc(6 * 2 * var(--spacing));
 		width: calc(6 * 2 * var(--spacing));
 	}
-	fieldset div input[type="radio"]:checked:before {
+	.radio-input-wrapper input[type="radio"]:checked:before {
 		box-shadow: 0 0 0.1rem black;
 		background-color: var(--color-petrol);
 	}
-	fieldset div input[type="radio"]:disabled {
+	.radio-input-wrapper input[type="radio"]:disabled {
 		background-color: var(--color-input-bg-default);
 		border-color: #999;
 		cursor: not-allowed;
@@ -26766,69 +26515,12 @@ const MFM = KoliBri.createTheme("mfm", {
 		details:not([open]) kol-icon::part(icon):before {
 			content: "\\f054";
 		}`,
-  "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);
+  "KOL-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
 			}
-		}
-		@keyframes spin2 {
-			0% {
-				transform: translate(0px, 0px);
-			}
-			100% {
-				transform: translate(1rem, 0px);
-			}
-		}
-		@keyframes spin3 {
-			0% {
-				transform: scale(1);
-			}
-			100% {
-				transform: scale(0);
-			}
-		}`,
+	}`,
   "KOL-PROGRESS": `:host progress,
 		:host span {
 			display: block;
@@ -26929,13 +26621,15 @@ const MFM = KoliBri.createTheme("mfm", {
 		}
 		select option {
 			margin: 1px 0;
-			padding: 0.5em;
 			border-radius: 0.25em;
 			cursor: pointer;
 		}
 		select option:disabled {
 			cursor: not-allowed;
 		}
+		select:not([multiple]) option {
+		padding: 0.5em;
+	}
 		option:active:not(:disabled),
 		option:checked:not(:disabled),
 		option:focus:not(:disabled),
@@ -27518,7 +27212,7 @@ const MFM = KoliBri.createTheme("mfm", {
 			display: grid;
 			gap: 0.25em;
 		}
-		fieldset div {
+		.radio-input-wrapper {
 			cursor: pointer;
 			display: flex;
 			flex-direction: row;
@@ -27527,16 +27221,16 @@ const MFM = KoliBri.createTheme("mfm", {
 			min-height: 44px;
 			margin: 0;
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			cursor: pointer;
 			display: flex;
 			padding-left: 0.25em;
 			width: 100%;
 		}
-		fieldset div label span {
+		.radio-input-wrapper label span {
 			margin-top: 0.125em;
 		}
-		fieldset div input[type="radio"] {
+		.radio-input-wrapper input[type="radio"] {
 			appearance: none;
 			transition: 0.5s;
 			border-radius: 100%;
@@ -27544,16 +27238,16 @@ const MFM = KoliBri.createTheme("mfm", {
 			min-width: calc(6 * var(--spacing));
 			width: calc(6 * var(--spacing));
 		}
-		fieldset div input[type="radio"]:before {
+		.radio-input-wrapper input[type="radio"]:before {
 			content: "";
 			cursor: pointer;
 			border-radius: 100%;
 			display: block;
 		}
-		fieldset div input[type="radio"]:checked:before {
+		.radio-input-wrapper input[type="radio"]:checked:before {
 			background-color: var(--color-midnight);
 		}
-		fieldset div input[type="radio"]:disabled {
+		.radio-input-wrapper input[type="radio"]:disabled {
 			cursor: not-allowed;
 			border-color: var(--border-default);
 			background-color: var(--background-light-grey);
@@ -27601,7 +27295,7 @@ const MFM = KoliBri.createTheme("mfm", {
 		fieldset .input-slot {
 			gap: 0.5rem;
 		}
-		fieldset div label {
+		.radio-input-wrapper label {
 			padding-left: 0;
 		}`,
   "KOL-TOAST": `:host > div {
@@ -36225,7 +35919,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		display: grid;
 		gap: 0.25em;
 	}
-	fieldset div {
+	.radio-input-wrapper, .input {
 		cursor: pointer;
 		display: flex;
 		flex-direction: row;
@@ -36234,16 +35928,16 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		align-items: center;
 		position: relative;
 	}
-	fieldset div label {
+	.radio-label {
 		cursor: pointer;
 		display: flex;
 		padding-left: 0.25em;
 		width: 100%;
 	}
-	fieldset div label span {
+	.radio-label span {
 		margin-top: 0.125em;
 	}
-	fieldset div input[type="radio"] {
+	.radio-input-wrapper input[type="radio"] {
 		appearance: none;
 		transition: 0.5s;
 		border-radius: 100%;
@@ -36251,7 +35945,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
 	} /* fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}*/
-	fieldset div input[type="radio"]:checked:before {
+	.radio-input-wrapper input[type="radio"]:checked:before {
 		box-shadow: 0 0 0.1rem black;
 		background-color: var(--kolibri-color-primary);
 	}
@@ -36340,68 +36034,11 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		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-SPIN": `.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
+			}
 	}`,
   "KOL-PROGRESS": `:host progress,
 	:host span {
@@ -36488,13 +36125,15 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	}
 	select option {
 		margin: 1px 0;
-		padding: 0.5em;
 		border-radius: 0.25em;
 		cursor: pointer;
 	}
 	select option:disabled {
 		cursor: not-allowed;
 	}
+	select:not([multiple]) option {
+		padding: 0.5em;
+	}
 	option:active:not(:disabled),
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
@@ -53034,67 +52673,10 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		}
 	`,
   "KOL-SPIN": css$1`
-		.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);
+		.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
 			}
 		}
 	`,
@@ -62314,67 +61896,10 @@ const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
 		}
 	`,
   "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);
+		.cycle {
+			padding: 0.125rem;
+			& span {
+				background-color: #fc0;
 			}
 		}
 	`,