@public-ui/themes 2.0.0-rc.12 → 2.0.0-rc.13

package/dist/index.mjs

@@ -4332,10 +4332,10 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 			height: 1.25em;
 			left: 2px;
 		}
-		&:has(input:checked) .icon {
+		&.checked .icon {
 			transform: translate(2em, -50%);
 		}
-		&:has(input:indeterminate) .icon {
+		&.indeterminate .icon {
 			transform: translate(1em, -50%);
 		}
 	}
@@ -6072,7 +6072,7 @@ var css_248z$p = "@layer kol-theme-component {\n  :host {\n    color: inherit;\n
 
 var css_248z$o = "@layer kol-theme-component {\n  :host > div {\n    padding: 0.9375rem;\n    background-color: var(--color-secondary-20);\n    border-left: 6px solid var(--color-primary);\n  }\n}";
 
-var css_248z$n = "@layer kol-theme-component {\n  :host {\n    --border-width: 1px;\n    --spacing: 0.25rem;\n  }\n  kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n  }\n  kol-input:not(.hide-label) {\n    grid-template-columns: calc(6 * var(--spacing)) auto;\n  }\n  kol-input.switch:not(.hide-label) {\n    grid-template-columns: calc(13 * var(--spacing)) auto;\n  }\n  kol-input:has(input:focus) {\n    outline: 2px solid var(--color-blue);\n    outline-offset: 2px;\n  }\n  label {\n    font-size: 1.125rem;\n    font-weight: bold;\n    opacity: 1;\n  }\n  kol-input.disabled label {\n    color: var(--color-disabled-gray);\n  }\n  .input {\n    display: inline-flex;\n    order: 1;\n  }\n  input {\n    appearance: none;\n    background-color: var(--color-white);\n    opacity: 1;\n    outline: none;\n    transition: none;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .input-label {\n    order: 2;\n    padding-left: calc(2 * var(--spacing));\n  }\n  .error {\n    order: 3;\n    padding-top: 0.25em;\n    grid-column: span 2/auto;\n  }\n  /* variant default */\n  .default input[type=checkbox] {\n    border-radius: 2px;\n    border: var(--border-width) solid var(--color-primary);\n    height: calc(6 * var(--spacing));\n    min-width: calc(6 * var(--spacing));\n    width: calc(6 * var(--spacing));\n  }\n  .default input[type=checkbox]:is(:checked, :indeterminate) {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .default input[type=checkbox]:disabled {\n    border-color: var(--color-disabled-gray);\n    background-color: var(--color-secondary-40);\n  }\n  .default input[type=checkbox]:enabled:hover {\n    outline: 1px solid var(--color-primary); /* Increase visual border-width without shifting contents */\n  }\n  .default input[type=checkbox]:enabled:hover:is(:checked, :indeterminate) {\n    background: var(--color-white);\n    outline-color: var(--color-primary-60);\n    border-color: var(--color-primary-60);\n  }\n  .default input[type=checkbox]:checked::before {\n    left: calc(1.5 * var(--spacing) - var(--border-width));\n    top: calc(2.85 * var(--spacing) - var(--border-width));\n    transform: rotate(40deg) translate(-50%, -50%);\n    background-color: transparent;\n    border-width: 0 3px 3px 0;\n    border-color: var(--color-white);\n    border-style: solid;\n    height: calc(3 * var(--spacing));\n    width: calc(1.5 * var(--spacing));\n  }\n  .default input[type=checkbox]:checked:enabled:hover::before {\n    border-color: var(--color-primary-60);\n  }\n  .default input[type=checkbox]:checked:disabled::before {\n    border-color: var(--color-disabled-gray);\n  }\n  .default input[type=checkbox]:indeterminate::before {\n    background-color: var(--color-white);\n    height: 0.3rem;\n    top: 0.5rem;\n    left: 0.2rem;\n    width: calc(4 * var(--spacing));\n    transform: rotate(45deg);\n  }\n  .default input[type=checkbox]:indeterminate:enabled:hover::before {\n    background-color: var(--color-primary-60);\n  }\n  .default input[type=checkbox]:indeterminate:disabled::before {\n    background-color: var(--color-disabled-gray);\n  }\n  /* variant switch */\n  .switch input[type=checkbox] {\n    border-radius: 1.7em;\n    border-width: 1px;\n    border-color: var(--color-primary);\n    transition: 0.5s background-color, border-color;\n  }\n  .switch input[type=checkbox]:enabled:hover {\n    border-color: var(--color-primary-60);\n  }\n  .switch input[type=checkbox]:is(:checked, :indeterminate):enabled {\n    background: var(--color-primary);\n  }\n  .switch input[type=checkbox]:is(:checked, :indeterminate):enabled:hover {\n    background: var(--color-primary-60);\n  }\n  .switch input[type=checkbox]:disabled {\n    border-color: var(--color-secondary);\n  }\n  .switch input[type=checkbox]:is(:checked, :indeterminate):disabled {\n    background: var(--color-secondary-40);\n  }\n  .switch input[type=checkbox]::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-primary);\n    border-radius: 50%;\n    height: 1.55em;\n    width: 1.55em;\n    left: 0;\n    top: -1px;\n    transform: translateX(-1px);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(calc(50% - 2px));\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(calc(100% - 4px));\n  }\n  .switch input[type=checkbox]:enabled:hover::before {\n    border-color: var(--color-primary-60);\n  }\n  .switch input[type=checkbox]:disabled::before {\n    background: var(--color-secondary-40);\n    border-color: var(--color-secondary);\n  }\n  .switch .icon {\n    display: none;\n  }\n}";
+var css_248z$n = "@layer kol-theme-component {\n  :host {\n    --border-width: 1px;\n    --spacing: 0.25rem;\n  }\n  kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n  }\n  kol-input:not(.hide-label) {\n    grid-template-columns: calc(6 * var(--spacing)) auto;\n  }\n  kol-input.switch:not(.hide-label) {\n    grid-template-columns: calc(13 * var(--spacing)) auto;\n  }\n  kol-input:focus-within {\n    outline: 2px solid var(--color-blue);\n    outline-offset: 2px;\n  }\n  .input-label {\n    font-size: 1.125rem;\n    font-weight: bold;\n    opacity: 1;\n  }\n  kol-input.disabled .input-label {\n    color: var(--color-disabled-gray);\n  }\n  .input {\n    display: inline-flex;\n    order: 1;\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  input {\n    appearance: none;\n    background-color: var(--color-white);\n    opacity: 1;\n    outline: none;\n    transition: none;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .input-label {\n    order: 2;\n    padding-left: calc(2 * var(--spacing));\n  }\n  .error {\n    order: 3;\n    padding-top: 0.25em;\n    grid-column: span 2/auto;\n  }\n  /* variant default */\n  .default .checkbox-input-element {\n    border-radius: 2px;\n    border: var(--border-width) solid var(--color-primary);\n    height: calc(6 * var(--spacing));\n    min-width: calc(6 * var(--spacing));\n    width: calc(6 * var(--spacing));\n  }\n  .default .checkbox-input-element:is(:checked, :indeterminate) {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .default .checkbox-input-element:disabled {\n    border-color: var(--color-disabled-gray);\n    background-color: var(--color-secondary-40);\n  }\n  .default:not(.disabled):hover .checkbox-input-element {\n    outline: 1px solid var(--color-primary); /* Increase visual border-width without shifting contents */\n  }\n  .default:not(.disabled):hover:is(.checked, .indeterminate) .checkbox-input-element {\n    background: var(--color-white);\n    outline-color: var(--color-primary-60);\n    border-color: var(--color-primary-60);\n  }\n  .default .icon {\n    margin-left: 0.25rem;\n  }\n  .default.indeterminate .icon::part(icon) {\n    transform: translateY(-0.1875rem);\n  }\n  .default.indeterminate .icon::part(icon)::before {\n    content: \"\\\\\";\n    font-family: var(--font-family);\n  }\n  .default:is(.checked, .indeterminate) .icon {\n    color: var(--color-white);\n  }\n  .default:is(.checked, .indeterminate):not(.disabled):hover .icon {\n    color: var(--color-primary-60);\n  }\n  .default:is(.checked, .indeterminate).disabled .icon {\n    color: var(--color-disabled-gray);\n  }\n  /* variant switch */\n  .switch input[type=checkbox] {\n    border-color: var(--color-primary);\n    border-radius: 1.7em;\n    border-width: 1px;\n    display: block;\n    transition: 0.5s background-color, border-color;\n  }\n  .switch input[type=checkbox]:enabled:hover {\n    border-color: var(--color-primary-60);\n  }\n  .switch input[type=checkbox]:is(:checked, :indeterminate):enabled {\n    background: var(--color-primary);\n  }\n  .switch input[type=checkbox]:is(:checked, :indeterminate):enabled:hover {\n    background: var(--color-primary-60);\n  }\n  .switch input[type=checkbox]:disabled {\n    border-color: var(--color-secondary);\n  }\n  .switch input[type=checkbox]:is(:checked, :indeterminate):disabled {\n    background: var(--color-secondary-40);\n  }\n  .switch input[type=checkbox]::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-primary);\n    border-radius: 50%;\n    height: 1.55em;\n    width: 1.55em;\n    left: 0;\n    top: -1px;\n    transform: translateX(-1px);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(calc(50% - 2px));\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(calc(100% - 4px));\n  }\n  .switch input[type=checkbox]:enabled:hover::before {\n    border-color: var(--color-primary-60);\n  }\n  .switch input[type=checkbox]:disabled::before {\n    background: var(--color-secondary-40);\n    border-color: var(--color-secondary);\n  }\n  .switch .icon {\n    display: none;\n  }\n}";
 
 var css_248z$m = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n  kol-input {\n    gap: 0.625rem;\n  }\n  kol-input.error {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1rem;\n  }\n  kol-alert.error {\n    color: var(--color-red);\n    font-weight: 700;\n    order: 3;\n  }\n  .input-label {\n    font-weight: 700;\n    opacity: 1;\n    order: 1;\n  }\n  .input {\n    border: 1px solid var(--color-primary);\n    order: 2;\n    padding: 0 0.5rem;\n  }\n  .input:hover {\n    border-color: var(--color-primary-60);\n  }\n  kol-input.error .input {\n    border-color: var(--color-red);\n  }\n  kol-input.disabled .input {\n    border-color: var(--color-disabled-gray);\n    background: var(--color-secondary-40);\n  }\n  .hint {\n    order: 4;\n    font-size: 0.875rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n    opacity: 1;\n    background: transparent;\n  }\n  input:first-child {\n    padding-left: 0.375rem;\n  }\n  input:last-child {\n    padding-right: 0.375rem;\n  }\n  .input > kol-icon {\n    width: 1.5rem;\n  }\n}";
 
@@ -6086,7 +6086,7 @@ var css_248z$i = "/* Common styles for all type of inputs */\n@layer kol-theme-c
 
 var css_248z$h = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n  kol-input {\n    gap: 0.625rem;\n  }\n  kol-input.error {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1rem;\n  }\n  kol-alert.error {\n    color: var(--color-red);\n    font-weight: 700;\n    order: 3;\n  }\n  .input-label {\n    font-weight: 700;\n    opacity: 1;\n    order: 1;\n  }\n  .input {\n    border: 1px solid var(--color-primary);\n    order: 2;\n    padding: 0 0.5rem;\n  }\n  .input:hover {\n    border-color: var(--color-primary-60);\n  }\n  kol-input.error .input {\n    border-color: var(--color-red);\n  }\n  kol-input.disabled .input {\n    border-color: var(--color-disabled-gray);\n    background: var(--color-secondary-40);\n  }\n  .hint {\n    order: 4;\n    font-size: 0.875rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n    opacity: 1;\n    background: transparent;\n  }\n  input:first-child {\n    padding-left: 0.375rem;\n  }\n  input:last-child {\n    padding-right: 0.375rem;\n  }\n  .input > kol-icon {\n    width: 1.5rem;\n  }\n}";
 
-var css_248z$g = "@layer kol-theme-component {\n  kol-input:has(input:focus) {\n    outline: 2px solid var(--color-blue);\n    outline-offset: 2px;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    display: flex;\n    min-height: var(--a11y-min-size);\n  }\n  .fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem 0.75rem;\n  }\n  .error {\n    width: 100%;\n  }\n  input {\n    border-width: 1px;\n    opacity: 1;\n  }\n  input:enabled {\n    border-color: var(--color-primary);\n  }\n  input:enabled:hover {\n    border-width: 2px;\n  }\n  input:checked:enabled:hover {\n    border-color: var(--color-primary-60);\n  }\n  input:disabled {\n    border-color: var(--color-disabled-gray);\n    background: var(--color-secondary-40);\n  }\n  input:checked:enabled::before {\n    background-color: var(--color-primary);\n  }\n  input:checked:disabled::before {\n    background-color: var(--color-disabled-gray);\n  }\n  input:checked:enabled:hover::before {\n    background-color: var(--color-primary-60);\n  }\n  .radio-label {\n    font-size: 1.125rem;\n    font-weight: bold;\n    padding-left: 0.75rem;\n    opacity: 1;\n  }\n  .disabled .radio-label {\n    color: var(--color-disabled-gray);\n  }\n  .required .radio-label-span-inner::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n}";
+var css_248z$g = "@layer kol-theme-component {\n  kol-input:focus-within {\n    outline: 2px solid var(--color-blue);\n    outline-offset: 2px;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    display: flex;\n    min-height: var(--a11y-min-size);\n  }\n  .fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem 0.75rem;\n  }\n  .error {\n    width: 100%;\n  }\n  input {\n    border-width: 1px;\n    opacity: 1;\n  }\n  input:enabled {\n    border-color: var(--color-primary);\n  }\n  input:enabled:hover {\n    border-width: 2px;\n  }\n  input:checked:enabled:hover {\n    border-color: var(--color-primary-60);\n  }\n  input:disabled {\n    border-color: var(--color-disabled-gray);\n    background: var(--color-secondary-40);\n  }\n  input:checked:enabled::before {\n    background-color: var(--color-primary);\n  }\n  input:checked:disabled::before {\n    background-color: var(--color-disabled-gray);\n  }\n  input:checked:enabled:hover::before {\n    background-color: var(--color-primary-60);\n  }\n  .radio-label {\n    font-size: 1.125rem;\n    font-weight: bold;\n    padding-left: 0.75rem;\n    opacity: 1;\n  }\n  .disabled .radio-label {\n    color: var(--color-disabled-gray);\n  }\n  .required .radio-label-span-inner::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n}";
 
 var css_248z$f = "/* https://www.cssportal.com/style-input-range/ */\n/* Common styles for all type of inputs */\n@layer kol-theme-component {\n  kol-input {\n    gap: 0.625rem;\n  }\n  kol-input.error {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1rem;\n  }\n  kol-alert.error {\n    color: var(--color-red);\n    font-weight: 700;\n    order: 3;\n  }\n  .input-label {\n    font-weight: 700;\n    opacity: 1;\n    order: 1;\n  }\n  .input {\n    border: 1px solid var(--color-primary);\n    order: 2;\n    padding: 0 0.5rem;\n  }\n  .input:hover {\n    border-color: var(--color-primary-60);\n  }\n  kol-input.error .input {\n    border-color: var(--color-red);\n  }\n  kol-input.disabled .input {\n    border-color: var(--color-disabled-gray);\n    background: var(--color-secondary-40);\n  }\n  .hint {\n    order: 4;\n    font-size: 0.875rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n    opacity: 1;\n    background: transparent;\n  }\n  input:first-child {\n    padding-left: 0.375rem;\n  }\n  input:last-child {\n    padding-right: 0.375rem;\n  }\n  .input > kol-icon {\n    width: 1.5rem;\n  }\n  input {\n    border: 1px solid var(--color-primary);\n  }\n  input:focus {\n    outline: none;\n  }\n  input:hover {\n    border-color: var(--color-primary-60);\n  }\n  .inputs-wrapper {\n    gap: 0.5rem;\n  }\n}";
 
@@ -6255,7 +6255,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		}
 		kol-tooltip-wc .tooltip-area {
 			background-color: var(--color-white);
-			color: var(--color-metal);
+			color: var(--color-black);
 		}
 		kol-tooltip-wc .tooltip-content {
 			border-radius: var(--border-radius);
@@ -6317,6 +6317,12 @@ const BMF = KoliBri.createTheme("bmf", {
 			border-color: var(--color-red);
 			color: var(--color-white);
 		}
+		.success :is(a, button) > kol-span-wc,
+		.success :is(a, button):disabled:hover > kol-span-wc {
+			background-color: var(--color-green);
+			border-color: var(--color-green);
+			color: var(--color-white);
+		}
 		.ghost :is(a, button) > kol-span-wc,
 		.ghost :is(a, button):disabled:hover > kol-span-wc {
 			border-color: var(--color-white);
@@ -6332,6 +6338,8 @@ const BMF = KoliBri.createTheme("bmf", {
 		.normal :is(a, button):hover > kol-span-wc,
 		.danger :is(a, button):active > kol-span-wc,
 		.danger :is(a, button):hover > kol-span-wc,
+		.success :is(a, button):active > kol-span-wc,
+		.success :is(a, button):hover > kol-span-wc,
 		.ghost :is(a, button):active > kol-span-wc,
 		.ghost :is(a, button):hover > kol-span-wc {
 			background-color: var(--color-ocean);
@@ -6352,6 +6360,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		.secondary :is(a, button):active > kol-span-wc,
 		.normal :is(a, button):active > kol-span-wc,
 		.danger :is(a, button):active > kol-span-wc,
+		.success :is(a, button):active > kol-span-wc,
 		.ghost :is(a, button):active > kol-span-wc {
 			border-color: var(--color-white);
 			box-shadow: none;
@@ -6378,6 +6387,14 @@ const BMF = KoliBri.createTheme("bmf", {
 			background-color: transparent;
 			border-color: transparent;
 		}
+		/** CUSTOM_CLASS */
+		:is(a, button).icon-only > kol-span-wc {
+			padding: 8px;
+			width: unset;
+		}
+		:is(a, button).icon-only > kol-span-wc > span > span {
+			display: block;
+		}
 	`,
   "KOL-INPUT-TEXT": css$4`
 		kol-input {
@@ -7921,11 +7938,11 @@ const BMF = KoliBri.createTheme("bmf", {
 			width: 100%;
 			min-height: 44px;
 		}
-		:host kol-input.default {
+		:host kol-input.default:not(.hide-label) {
 			grid-template-columns: 1.5rem auto;
 			gap: 0.4em;
 		}
-		:host kol-input.switch {
+		:host kol-input.switch:not(.hide-label) {
 			grid-template-columns: 3.5rem auto;
 			gap: 0.4em;
 		}
@@ -7970,7 +7987,7 @@ const BMF = KoliBri.createTheme("bmf", {
 			border-color: var(--color-grey);
 			border-width: 2px;
 			border-style: solid;
-			border-radius: 5px; /* padding: 10px 14px; */
+			border-radius: 5px;
 			line-height: 24px;
 			font-size: 1rem;
 		}
@@ -8007,48 +8024,36 @@ const BMF = KoliBri.createTheme("bmf", {
 			background-color: var(--color-midnight);
 			border-color: var(--color-midnight);
 		}
+		:host kol-input.default .checkbox-container {
+			justify-content: flex-start;
+		}
+		:host kol-input.default input[type='checkbox']:indeterminate {
+			background-color: var(--color-midnight);
+			border-color: var(--color-midnight);
+		}
+		:host kol-input.default .icon {
+			color: var(--color-white);
+			margin: -0.125rem 0 0 0.25rem; /* visually align */
+		}
 		:host 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 {
-			--tw-bg-opacity: 1;
-			background-color: var(--color-midnight);
-		}
-		:host kol-input.default input[type='checkbox']:indeterminate:before {
-			background-color: var(--color-white);
-			height: 0.125rem;
-			top: 0.6rem;
-			left: 0.25rem;
-			width: calc(3 * var(--spacing));
-			transform: inherit;
-		}
-		:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
-			border-width: 0px 1px 1px 0px;
+		.default {
+			.icon::part(icon) {
+				font-family: 'Font Awesome 6 Free';
+				font-weight: 900;
+			}
+
+			&.checked .icon::part(icon)::before {
+				content: '\\f00c';
+			}
+
+			&.indeterminate .icon::part(icon)::before {
+				content: '\\f068';
+			}
 		}
 		:host kol-input.switch input[type='checkbox'] {
 			min-width: 3.5em;
@@ -8057,13 +8062,9 @@ const BMF = KoliBri.createTheme("bmf", {
 			border-width: 0;
 			height: 1.5em;
 			border-radius: 1.25em;
-			display: inline-block;
 			position: relative;
 		}
 		:host kol-input.switch input[type='checkbox']:before {
-			-webkit-transition: 0.5s;
-			-moz-transition: 0.5s;
-			-ms-transition: 0.5s;
 			transition: 0.5;
 			width: 1.25em;
 			height: 1.25em;
@@ -8077,9 +8078,6 @@ const BMF = KoliBri.createTheme("bmf", {
 			background-color: var(--color-midnight);
 		}
 		:host kol-input.switch input[type='checkbox']:checked:before {
-			-webkit-transform: translateX(2em);
-			-moz-transform: translateX(2em);
-			-ms-transform: translateX(2em);
 			transform: translateX(2em);
 			--tw-bg-opacity: 1;
 		}
@@ -8087,12 +8085,12 @@ const BMF = KoliBri.createTheme("bmf", {
 			--tw-bg-opacity: 1;
 		}
 		:host kol-input.switch input[type='checkbox']:indeterminate:before {
-			-webkit-transform: translateX(1em);
-			-moz-transform: translateX(1em);
-			-ms-transform: translateX(1em);
 			transform: translateX(1em);
 		}
 		.switch {
+			& .checkbox-input-element {
+				display: block;
+			}
 			& .icon {
 				width: 1.25em;
 				height: 1.25em;
@@ -8106,13 +8104,13 @@ const BMF = KoliBri.createTheme("bmf", {
 					content: '\\2b';
 				}
 			}
-			&:has(input:checked) .icon {
+			&.checked .icon {
 				transform: translate(2em, -50%);
 				&::part(icon)::before {
 					content: '\\f00c';
 				}
 			}
-			&:has(input:indeterminate) .icon {
+			&.indeterminate .icon {
 				transform: translate(1em, -50%);
 				&::part(icon)::before {
 					content: '\\f068';
@@ -8147,6 +8145,10 @@ const BMF = KoliBri.createTheme("bmf", {
 			min-width: 32px;
 			place-content: center;
 		}
+		:host kol-input.button.hide-label > .input {
+			border-top-right-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+		}
 		:host kol-input.button > .input > div {
 			display: flex;
 		}
@@ -17388,6 +17390,9 @@ const DEFAULT = KoliBri.createTheme("default", {
 		:host kol-input.button {
 			gap: 0.4rem 0;
 		}
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		:host kol-input > div.input {
 			display: inherit;
 			min-height: var(--a11y-min-size);
@@ -17456,13 +17461,6 @@ const DEFAULT = KoliBri.createTheme("default", {
 			cursor: pointer;
 			transition: 0.5s;
 		}
-		:host kol-input input[type='checkbox'].kol-disabled:before {
-			cursor: not-allowed;
-		}
-		:host kol-input input[type='checkbox']:before {
-			content: '';
-			cursor: pointer;
-		}
 		:host kol-input input[type='checkbox']:checked {
 			background-color: var(--color-primary);
 			border-color: var(--color-primary);
@@ -17473,51 +17471,23 @@ const DEFAULT = KoliBri.createTheme("default", {
 			min-width: calc(6 * 0.25rem);
 			width: calc(6 * 0.25rem);
 		}
-		:host kol-input.default input[type='checkbox']:before {
-			border-radius: 1.5em;
-			background-color: transparent;
-			display: block;
-			height: calc(6 * 0.25rem);
-			position: relative;
-			width: calc(6 * 0.25rem);
-		}
-		:host kol-input.default input[type='checkbox']:checked:before {
-			border-right-width: 3px;
-			border-bottom-width: 3px;
-			left: calc(1.5 * 0.25rem - 2px);
-			top: calc(2.85 * 0.25rem - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			background-color: transparent;
-			border-width: 0px 3px 3px 0px;
-			border-color: white;
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * 0.25rem);
-			width: calc(1.5 * 0.25rem);
-		}
 		:host kol-input.default input[type='checkbox']:indeterminate {
 			background-color: var(--color-primary);
 		}
-		:host kol-input.default input[type='checkbox']:indeterminate:before {
-			background-color: var(--color-light);
-			height: 0.125rem;
-			top: 0.6rem;
-			left: 0.25rem;
-			width: calc(3 * 0.25rem);
-			transform: inherit;
-		}
-		:host kol-input.default input[type='checkbox']:checked:indeterminate:before {
-			border-width: 0px 1px 1px 0px;
+		:host kol-input.default .icon {
+			color: var(--color-light);
+			margin-left: 0.25rem;
 		}
+
 		:host kol-input.switch input[type='checkbox'] {
-			min-width: 3.5em;
-			width: 3.5em;
 			background-color: var(--color-subtle);
+			border-radius: 1.25em;
 			border-width: 0;
+			display: block;
 			height: 1.5em;
-			border-radius: 1.25em;
-			display: inline-block;
+			min-width: 3.5em;
 			position: relative;
+			width: 3.5em;
 		}
 		:host kol-input.switch input[type='checkbox']:before {
 			width: 1.25em;
@@ -17544,11 +17514,11 @@ const DEFAULT = KoliBri.createTheme("default", {
 				left: 2px;
 			}
 
-			&:has(input:checked) .icon {
+			&.checked .icon {
 				transform: translate(2em, -50%);
 			}
 
-			&:has(input:indeterminate) .icon {
+			&.indeterminate .icon {
 				transform: translate(1em, -50%);
 			}
 		}
@@ -18778,6 +18748,9 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 		}
 	`,
   "KOL-INPUT-CHECKBOX": css$2`
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		input[type='checkbox'] {
 			background-color: var(--color-white);
 			border-width: 2px;
@@ -18806,12 +18779,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 			background-color: var(--color-blue-130);
 			border-color: var(--color-blue-130);
 		}
-		input[type='checkbox']:checked::before {
-			border-color: var(--color-white);
-		}
-		input[type='checkbox']:indeterminate:hover::before {
-			background-color: var(--color-blue-130);
-		}
 		.error input[type='checkbox'] {
 			border-color: var(--color-red);
 		}
@@ -18826,12 +18793,20 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 			background-color: var(--color-red-1xx);
 			border-color: var(--color-red-1xx);
 		}
-		.error input[type='checkbox']:indeterminate:hover::before {
-			background-color: var(--color-red-1xx);
-		}
 		.error.required label > span::after {
 			color: var(--color-red);
 		}
+
+		.default .icon {
+			margin-left: 0.2rem;
+		}
+		.default.checked .icon {
+			color: var(--color-white);
+		}
+
+		.switch input[type='checkbox'] {
+			display: block;
+		}
 		.switch input[type='checkbox']::before,
 		.switch input[type='checkbox']:indeterminate::before {
 			background-color: var(--color-grey-75);
@@ -20440,6 +20415,9 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 		}
 	`,
   "KOL-INPUT-CHECKBOX": css$2`
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		input[type='checkbox'] {
 			background-color: var(--color-white);
 			border-width: 2px;
@@ -20468,12 +20446,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 			background-color: var(--color-blue-130);
 			border-color: var(--color-blue-130);
 		}
-		input[type='checkbox']:checked::before {
-			border-color: var(--color-white);
-		}
-		input[type='checkbox']:indeterminate:hover::before {
-			background-color: var(--color-blue-130);
-		}
 		.error input[type='checkbox'] {
 			border-color: var(--color-red);
 		}
@@ -20488,12 +20460,19 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 			background-color: var(--color-red-1xx);
 			border-color: var(--color-red-1xx);
 		}
-		.error input[type='checkbox']:indeterminate:hover::before {
-			background-color: var(--color-red-1xx);
-		}
 		.error.required label > span::after {
 			color: var(--color-red);
 		}
+		.default .icon {
+			margin-left: 0.2rem;
+		}
+		.default.checked .icon {
+			color: var(--color-white);
+		}
+
+		.switch input[type='checkbox'] {
+			display: block;
+		}
 		.switch input[type='checkbox']::before,
 		.switch input[type='checkbox']:indeterminate::before {
 			background-color: var(--color-grey-75);
@@ -22622,9 +22601,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 		}
 	`,
   "KOL-INPUT-CHECKBOX": css$1`
-		/* ALL INPUT, SELECT, TEXTAREA */
-		label {
-			cursor: pointer;
+		.checkbox-container {
+			justify-content: flex-start;
 		}
 		input {
 			color: var(--default-letter);
@@ -22682,58 +22660,28 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 			cursor: pointer;
 			transition: 0.5s;
 		}
-		input[type='checkbox'].kol-disabled:before {
-			cursor: not-allowed;
-		}
-		input[type='checkbox']:before {
-			content: '';
-			cursor: pointer;
-		}
 		input[type='checkbox']:checked {
 			background-color: var(--color-petrol);
 			border-color: var(--color-petrol);
 		}
 		.default input[type='checkbox'] {
-			/* border-radius: 0.25em; */
 			height: calc(6 * 2 * var(--spacing));
 			min-width: calc(6 * 2 * var(--spacing));
 			width: calc(6 * 2 * var(--spacing));
 		}
-		.default input[type='checkbox']:before {
-			/* border-radius: 0.25em; */
-			background-color: transparent;
-			display: block;
-			height: calc(6 * 2 * var(--spacing));
-			position: relative;
-			width: calc(6 * 2 * var(--spacing));
-		}
-		.default input[type='checkbox']:checked:before {
-			border-right-width: 3px;
-			border-bottom-width: 3px;
-			left: calc(1.5 * 2 * var(--spacing) - 2px);
-			top: calc(2.85 * 2 * var(--spacing) - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			background-color: transparent;
-			border-width: 0px 3px 3px 0px;
-			border-color: white;
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * 2 * var(--spacing));
-			width: calc(1.5 * 2 * var(--spacing));
+
+		.default .icon {
+			margin-left: 0.25rem;
 		}
-		.default input[type='checkbox']:indeterminate:before {
-			background-color: var(--kolibri-color-normal);
-			height: 0.375rem;
-			top: 0.45rem;
-			left: 0.15rem;
-			width: calc(4 * 2 * var(--spacing));
+		.default.checked .icon {
+			color: var(--color-weiss);
 		}
+
 		.switch input[type='checkbox'] {
-			/* border-radius: 0.25em; */
+			display: block;
 			min-width: 3.2em;
 			width: 3.2em;
 			height: 1.7em;
-			display: inline-block;
 			position: relative;
 		}
 		.switch input[type='checkbox']:before {
@@ -22750,28 +22698,19 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 			position: absolute;
 		}
 		.switch input[type='checkbox']:checked:before {
-			-webkit-transform: translateX(1.5em);
-			-moz-transform: translateX(1.5em);
-			-ms-transform: translateX(1.5em);
 			transform: translateX(1.5em);
 			background-color: white;
 		}
 		.switch input[type='checkbox']:indeterminate:before {
-			-webkit-transform: translateX(0.75em);
-			-moz-transform: translateX(0.75em);
-			-ms-transform: translateX(0.75em);
 			transform: translateX(0.75em);
 			background-color: var(--color-petrol);
 		}
-		.switch:has(input:not(:checked), input:indeterminate) .icon {
+		.switch:is(:not(.checked), .indeterminate) .icon {
 			color: #fff;
 		}
 		.disabled {
 			opacity: 0.33;
 		}
-		.default kol-icon {
-			display: none;
-		}
 		kol-input span.hint {
 			grid-column: span 2;
 			font-style: italic;
@@ -33477,6 +33416,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
 			content: '*';
 			padding-left: 0.125em;
 		}
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		input:hover {
 			border-color: var(--kolibri-color-primary);
 		} /* NEU */
@@ -33517,13 +33459,6 @@ const MAPZ = KoliBri.createTheme("mapz", {
 			cursor: pointer;
 			transition: 0.5s;
 		}
-		input[type='checkbox'].kol-disabled:before {
-			cursor: not-allowed;
-		}
-		input[type='checkbox']:before {
-			content: '';
-			cursor: pointer;
-		}
 		input[type='checkbox']:checked {
 			background-color: var(--kolibri-color-primary);
 			border-color: var(--kolibri-color-primary);
@@ -33534,41 +33469,21 @@ const MAPZ = KoliBri.createTheme("mapz", {
 			min-width: calc(6 * var(--kolibri-spacing));
 			width: calc(6 * var(--kolibri-spacing));
 		}
-		.default input[type='checkbox']:before {
-			border-radius: 0.25em;
-			background-color: transparent;
-			display: block;
-			height: calc(6 * var(--kolibri-spacing));
-			position: relative;
-			width: calc(6 * var(--kolibri-spacing));
+		.default .icon {
+			margin-left: 0.25rem;
 		}
-		.default input[type='checkbox']:checked:before {
-			border-right-width: 3px;
-			border-bottom-width: 3px;
-			left: calc(1.5 * var(--kolibri-spacing) - 2px);
-			top: calc(2.85 * var(--kolibri-spacing) - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			background-color: transparent;
-			border-width: 0px 3px 3px 0px;
-			border-color: white;
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * var(--kolibri-spacing));
-			width: calc(1.5 * var(--kolibri-spacing));
+		.default.checked .icon {
+			color: #fff;
 		}
-		.default input[type='checkbox']:indeterminate:before {
-			background-color: var(--kolibri-color-normal);
-			height: 0.375rem;
-			top: 0.45rem;
-			left: 0.15rem;
-			width: calc(4 * var(--kolibri-spacing));
+		.default.indeterminate .icon {
+			color: var(--kolibri-color-normal);
 		}
 		.switch input[type='checkbox'] {
+			display: block; //
 			min-width: 3.2em;
 			width: 3.2em;
 			height: 1.7em;
 			border-radius: 0.25em;
-			display: inline-block;
 			position: relative;
 		}
 		.switch input[type='checkbox']:before {
@@ -33598,7 +33513,7 @@ const MAPZ = KoliBri.createTheme("mapz", {
 			transform: translateX(0.75em);
 			background-color: var(--kolibri-color-primary);
 		}
-		.switch:has(input:not(:checked), input:indeterminate) .icon {
+		.switch:is(.checked, .indeterminate) .icon {
 			color: #fff;
 		}
 		.disabled {
@@ -48722,12 +48637,15 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		:host {
 			--spacing: 0.25rem;
 		}
+		.checkbox-container {
+			justify-content: flex-start;
+		}
 		input {
 			border-color: var(--color-neutral-dark);
 			border-width: 2px;
 			border-style: solid;
 		}
-		label {
+		.input-label {
 			padding-left: 0.75rem;
 		}
 		kol-input:not(.disabled):hover label,
@@ -48740,10 +48658,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		:host kol-input:not(.disabled) :is(.input, label) {
 			cursor: pointer;
 		}
-		:host kol-input.disabled :is(.input, label),
-		:host kol-input.disabled input[type='checkbox']::before {
-			cursor: not-allowed;
-		}
 		.required label > span::after {
 			content: '*';
 			padding-left: 0.125em;
@@ -48787,9 +48701,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			background-color: white;
 			transition: 0.5s;
 		}
-		input[type='checkbox']:before {
-			content: '';
-		}
 		input[type='checkbox']:checked,
 		input[type='checkbox']:indeterminate {
 			background-color: var(--color-blau);
@@ -48801,44 +48712,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			min-width: calc(6 * var(--spacing));
 			width: calc(6 * var(--spacing));
 		}
-		.default input[type='checkbox']:before {
-			border-radius: 0.25em;
-			background-color: transparent;
-			display: block;
-			height: calc(6 * var(--spacing));
-			position: relative;
-			width: calc(6 * var(--spacing));
-		}
-		.default input[type='checkbox']:checked:before {
-			border-right-width: 3px;
-			border-bottom-width: 3px;
-			left: calc(1.5 * var(--spacing) - 2px);
-			top: calc(2.85 * var(--spacing) - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			background-color: transparent;
-			border-width: 0px 3px 3px 0px;
-			border-color: white;
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * var(--spacing));
-			width: calc(1.5 * var(--spacing));
-		}
 		.default input[type='checkbox']:indeterminate {
 			background-color: var(--color-blau);
 		}
-		.default input[type='checkbox']:indeterminate:before {
-			background-color: white;
-			height: 0.25rem;
-			top: 0.5rem;
-			left: 0.25rem;
-			width: 0.75rem;
+		.default .icon {
+			color: #fff;
+			margin-left: 0.25rem;
 		}
 		.switch input[type='checkbox'] {
+			display: block;
 			min-width: 3.2em;
 			width: 3.2em;
 			height: 1.7em;
 			border-radius: 0.25em;
-			display: inline-block;
 			position: relative;
 		}
 		.switch input[type='checkbox']:before {
@@ -48855,9 +48741,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			position: absolute;
 		}
 		.switch input[type='checkbox']:checked:before {
-			-webkit-transform: translateX(1.5em);
-			-moz-transform: translateX(1.5em);
-			-ms-transform: translateX(1.5em);
 			transform: translateX(1.5em);
 			background-color: white;
 		}
@@ -48865,13 +48748,10 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			background-color: var(--color-blau);
 		}
 		.switch input[type='checkbox']:indeterminate:before {
-			-webkit-transform: translateX(0.75em);
-			-moz-transform: translateX(0.75em);
-			-ms-transform: translateX(0.75em);
 			transform: translateX(0.75em);
 			background-color: white;
 		}
-		.switch:has(input:not(:checked, :indeterminate)) .icon {
+		.switch:not(.checked):not(.indeterminate) .icon {
 			color: #fff;
 		}
 		.disabled {
@@ -48899,12 +48779,12 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			border-width: 2px;
 			border-style: solid;
 		}
-		kol-input:has(input:disabled) input,
-		kol-input:has(input:disabled) label {
+		kol-input.disabled input,
+		kol-input.disabled label {
 			cursor: not-allowed !important;
 			opacity: 0.5;
 		}
-		kol-input:hover:has(input:not(:disabled)) label,
+		kol-input:hover:not(.disabled) label,
 		kol-input:focus-within {
 			text-decoration: underline;
 		}
@@ -56883,6 +56763,9 @@ const checkboxStyles = css`
 		content: '*';
 		padding-left: 0.125em;
 	}
+	.checkbox-container {
+		justify-content: flex-start;
+	}
 	.input {
 		display: inline-flex;
 	}
@@ -56933,44 +56816,24 @@ const checkboxStyles = css`
 		border: 2px solid var(--color-neutral-dark);
 		height: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
-		&::before {
-			display: block;
-			height: calc(6 * var(--spacing));
-			width: calc(6 * var(--spacing));
-		}
-		&:checked::before {
-			left: calc(1.5 * var(--spacing) - 2px);
-			top: calc(2.85 * var(--spacing) - 2px);
-			transform: rotate(40deg) translate(-50%, -50%);
-			border-width: 0 3px 3px 0;
-			border-color: var(--color-blau);
-			border-radius: 1px;
-			border-style: solid;
-			height: calc(3 * var(--spacing));
-			width: calc(1.5 * var(--spacing));
-		}
-		&:indeterminate::before {
-			background-color: var(--color-blau);
-			height: 0.6rem;
-			left: 0.325rem;
-			top: 0.325rem;
-			width: 0.6rem;
-		}
 	}
 	kol-input.default:not(.disabled):hover input,
 	kol-input.default:focus-within input {
 		border-color: var(--color-neutral-dark-correct);
 	}
+	.default .icon {
+		margin-left: 0.25rem;
+	}
 
 	/* SWITCH */
 	kol-input.switch {
 		grid-template-columns: calc(13 * var(--spacing)) auto;
 	}
 	.switch input[type='checkbox'] {
+		display: block;
 		background: var(--color-grau-50);
 		border-color: transparent;
 		border-radius: var(--a11y-min-size);
-		display: inline-block;
 		height: 1.7em;
 		position: relative;
 		transition: outline-offset 0.25s linear;
@@ -57007,8 +56870,8 @@ const checkboxStyles = css`
 			font-weight: 700;
 		}
 	}
-	.switch:has(input[type='checkbox']:not(:checked, :indeterminate)) .icon {
-		opacity: 0; /* Avoid display: none because it breaks the transform-animation */
+	.switch:not(.checked, .indeterminate) .icon {
+		opacity: 0; /* Avoid display: none because it breaks the 'transform' animation */
 	}
 
 	/* BUTTON */
@@ -57072,12 +56935,12 @@ const radioStyles = css`
 		border-width: 2px;
 		border-style: solid;
 	}
-	kol-input:has(input:disabled) input,
-	kol-input:has(input:disabled) label {
+	kol-input.disabled input,
+	kol-input.disabled label {
 		cursor: not-allowed !important;
 		opacity: 0.5;
 	}
-	kol-input:hover:has(input:not(:disabled)) label,
+	kol-input:hover:not(.disabled) label,
 	kol-input:focus-within {
 		text-decoration: underline;
 	}