@public-ui/themes 1.6.0-rc.0 → 1.6.0-rc.2

package/dist/index.mjs

@@ -1124,6 +1124,96 @@ const BPA = KoliBri.createTheme("bpa", {
 	kol-button-wc > button:focus {
 		outline: none;
 	}`,
+  "KOL-INPUT-DATE": `:host label {
+		color: var(--color-darkblue);
+		font-size: 0.9375rem;
+	}
+	@media (min-width: 37.5rem) {
+		:host label {
+			font-size: 1.125rem;
+		}
+	} /* Move label over input as placeholder */
+	:host(:not(.has-value)) kol-input:has(input[type="number"]) label {
+		transition: all 0.3s ease-in-out 0ms;
+		transform-origin: 0;
+	}
+	:host(:not(.has-value)) kol-input:has(input[type="number"]):not(:focus-within) label {
+		transform: translateY(1.9375rem) scale(1.3333333333);
+		cursor: text;
+	}
+	:host(:not(.has-value)) kol-input:has(input[type="number"]):not(:focus-within):has(div.icon-left) label {
+		transform: translateX(2.5rem) translateY(1.9375rem) scale(1.3333333333);
+	}
+	:host(:not(.has-value)) kol-input:not(:focus-within) label,
+	input::placeholder {
+		color: var(--color-darkgray);
+	}
+	:host([_error]) kol-input:not(:focus-within) label {
+		color: var(--color-red);
+	}
+	span.hint {
+		order: 1;
+	}
+	kol-alert {
+		order: 2;
+	}
+	:host([_error]) label {
+		color: var(--color-red);
+	}
+	div.input {
+		border-bottom: 1px solid var(--color-lightgray);
+	}
+	div.input:focus-within {
+		border-bottom: 1px solid var(--color-darkgray);
+	}
+	div.input input {
+		border: none;
+		background-color: var(--color-white);
+		outline: none;
+		height: 2.5rem;
+		font-size: 1.5rem;
+		padding: 0;
+	}
+	kol-input:has(label:not([hidden])) div.input input::placeholder {
+		color: transparent;
+	}
+	kol-alert {
+		margin-top: 1.5rem;
+	}
+	kol-button-wc > button > kol-span-wc {
+		padding: 0.625rem 1.125rem;
+		font-family: var(--font);
+		font-size: 1rem;
+		line-height: 1.125rem;
+		border: none;
+		border-radius: 0.125rem;
+		transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
+	}
+	kol-button-wc > button > kol-span-wc > span {
+		gap: 0.625rem;
+	}
+	kol-button-wc > button > kol-span-wc {
+		background-color: var(--color-white);
+		color: var(--color-black);
+	}
+	kol-button-wc > button > kol-span-wc kol-icon {
+		color: var(--color-blue);
+	}
+	kol-button-wc > button:is(:hover, :focus) > kol-span-wc kol-icon {
+		color: var(--color-white);
+	}
+	kol-button-wc > button:is(:hover, :focus) > kol-span-wc {
+		cursor: pointer;
+		background-color: var(--color-blue);
+		color: var(--color-white);
+	}
+	kol-button-wc > button:focus > kol-span-wc {
+		outline: 1px dotted var(--color-black);
+		border: none;
+	}
+	kol-button-wc > button:focus {
+		outline: none;
+	}`,
   "KOL-INPUT-COLOR": `:host label {
 		color: var(--color-darkblue);
 		font-size: 0.9375rem;
@@ -2096,11 +2186,10 @@ const BZSt = KoliBri.createTheme("bzst", {
 	button.loading kol-icon {
 		animation: spin 5s infinite linear;
 	}`,
-  "KOL-INPUT-TEXT": `kol-input {
+  "KOL-INPUT-DATE": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
-		font-size: var(--text-size);
 	}
 	input:focus,
 	input:hover,
@@ -2108,12 +2197,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 	select:hover,
 	textarea:focus,
 	textarea:hover {
-		border-color: var(--color-gruen-hell);
-	}
-	.error input:invalid,
-	.error select:invalid,
-	.error textarea:invalid {
-		border-color: var(--color-rot);
+		border-color: black;
 	}
 	input:focus-within,
 	select:focus-within,
@@ -2124,125 +2208,6 @@ const BZSt = KoliBri.createTheme("bzst", {
 		order: 1;
 		margin-bottom: var(--gapSmallest);
 	}
-	kol-input > label > span {
-		color: var(--color-text);
-		line-height: 1.5;
-	}
-	kol-input > div.input {
-		background-color: white;
-		display: block;
-		order: 2;
-	}
-	kol-input > kol-alert.error {
-		margin-top: 0.25rem;
-		order: 3;
-	}
-	input,
-	select,
-	textarea {
-		font-family: var(--font-family);
-		background-color: transparent;
-		box-sizing: border-box;
-		font-size: var(--text-size);
-		display: inline-flex;
-		line-height: 1.5;
-		color: black;
-		border-color: var(--color-gruen);
-		border-width: 1px;
-		border-style: solid;
-		padding: 0.5em 0.75em;
-		overflow: hidden;
-		width: 100%;
-	}
-	input:not([type="range"]),
-	select:not([multiple]) {
-		height: 2.75em;
-	}
-	textarea {
-		display: inherit;
-	}
-	input::placeholder {
-		color: var(--color-grau-dunkel);
-	}
-	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
-		cursor: not-allowed;
-	}
-	.required label > span::after {
-		content: "*";
-		padding-left: 0.125em;
-	}
-	.icons {
-		display: flex;
-		justify-content: space-between;
-		height: 0;
-	}
-	.icons > * {
-		margin: 0.75em;
-	}
-	.icon-left input,
-	.icon-left select {
-		padding-left: 2em;
-	}
-	.icon-right input,
-	.icon-right select {
-		padding-right: 2em;
-	}
-	kol-button-wc {
-		position: relative;
-		float: right;
-		z-index: 1000;
-		margin-top: -33px;
-	}
-	kol-button-wc button {
-		border: 1px solid var(--color-grau-dunkel);
-		box-sizing: border-box;
-		background-color: transparent;
-		cursor: pointer;
-	}
-	.icon-right kol-button-wc {
-		margin-right: 2.5em;
-	}
-	.disabled {
-		opacity: 0.33;
-	}
-	select[multiple],
-	textarea {
-		overflow: auto;
-	}
-	textarea {
-		display: block;
-	}
-	select option {
-		margin: 1px 0;
-		padding: 0.5em;
-		cursor: pointer;
-	}
-	select option:disabled {
-		cursor: not-allowed;
-	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		color: white;
-	}`,
-  "KOL-INPUT-PASSWORD": `kol-input {
-		display: grid;
-		padding: 0;
-		margin: 0;
-	}
-	input:focus,
-	input:hover,
-	select:focus,
-	select:hover,
-	textarea:focus,
-	textarea:hover {
-		border-color: black;
-	}
-	kol-input > label {
-		order: 1;
-		margin-bottom: 0.25em;
-	}
 	kol-input > label > span {
 		color: black;
 		font-size: 0.875rem;
@@ -2260,17 +2225,17 @@ const BZSt = KoliBri.createTheme("bzst", {
 	input,
 	select,
 	textarea {
-		font-family: var(--font-family);
+		font-family: var(--textFont);
 		background-color: transparent;
 		box-sizing: border-box;
-		font-size: 1rem;
+		font-size: var(--textFontSize);
 		display: inline-flex;
-		line-height: 1.5em;
+		line-height: 1.5;
 		color: black;
-		border-color: var(--color-grau-dunkel);
+		border-color: var(--color-gruen);
 		border-width: 1px;
 		border-style: solid;
-		padding: 0.5em 0.75em;
+		padding: 0.5em;
 		overflow: hidden;
 		width: 100%;
 	}
@@ -2310,7 +2275,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 	kol-button-wc {
 		position: relative;
 		float: right;
-		z-index: 1000;
+		z-index: 1;
 		margin-top: -33px;
 	}
 	kol-button-wc button {
@@ -2344,12 +2309,14 @@ const BZSt = KoliBri.createTheme("bzst", {
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
 	option:hover:not(:disabled) {
+		background: var(--color-ocean);
 		color: white;
 	}`,
-  "KOL-INPUT-NUMBER": `kol-input {
+  "KOL-INPUT-TEXT": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
+		font-size: var(--text-size);
 	}
 	input:focus,
 	input:hover,
@@ -2357,7 +2324,12 @@ const BZSt = KoliBri.createTheme("bzst", {
 	select:hover,
 	textarea:focus,
 	textarea:hover {
-		border-color: black;
+		border-color: var(--color-gruen-hell);
+	}
+	.error input:invalid,
+	.error select:invalid,
+	.error textarea:invalid {
+		border-color: var(--color-rot);
 	}
 	input:focus-within,
 	select:focus-within,
@@ -2369,9 +2341,8 @@ const BZSt = KoliBri.createTheme("bzst", {
 		margin-bottom: var(--gapSmallest);
 	}
 	kol-input > label > span {
-		color: black;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
+		color: var(--color-text);
+		line-height: 1.5;
 	}
 	kol-input > div.input {
 		background-color: white;
@@ -2379,23 +2350,23 @@ const BZSt = KoliBri.createTheme("bzst", {
 		order: 2;
 	}
 	kol-input > kol-alert.error {
-		margin-top: 0.25em;
+		margin-top: 0.25rem;
 		order: 3;
 	}
 	input,
 	select,
 	textarea {
-		font-family: var(--textFont);
+		font-family: var(--font-family);
 		background-color: transparent;
 		box-sizing: border-box;
-		font-size: var(--textFontSize);
+		font-size: var(--text-size);
 		display: inline-flex;
 		line-height: 1.5;
 		color: black;
 		border-color: var(--color-gruen);
 		border-width: 1px;
 		border-style: solid;
-		padding: 0.5em;
+		padding: 0.5em 0.75em;
 		overflow: hidden;
 		width: 100%;
 	}
@@ -2435,7 +2406,7 @@ const BZSt = KoliBri.createTheme("bzst", {
 	kol-button-wc {
 		position: relative;
 		float: right;
-		z-index: 1;
+		z-index: 1000;
 		margin-top: -33px;
 	}
 	kol-button-wc button {
@@ -2469,10 +2440,255 @@ const BZSt = KoliBri.createTheme("bzst", {
 	option:checked:not(:disabled),
 	option:focus:not(:disabled),
 	option:hover:not(:disabled) {
-		background: var(--color-ocean);
 		color: white;
 	}`,
-  "KOL-INPUT-EMAIL": `kol-input {
+  "KOL-INPUT-PASSWORD": `kol-input {
+		display: grid;
+		padding: 0;
+		margin: 0;
+	}
+	input:focus,
+	input:hover,
+	select:focus,
+	select:hover,
+	textarea:focus,
+	textarea:hover {
+		border-color: black;
+	}
+	kol-input > label {
+		order: 1;
+		margin-bottom: 0.25em;
+	}
+	kol-input > label > span {
+		color: black;
+		font-size: 0.875rem;
+		line-height: 1.5rem;
+	}
+	kol-input > div.input {
+		background-color: white;
+		display: block;
+		order: 2;
+	}
+	kol-input > kol-alert.error {
+		margin-top: 0.25em;
+		order: 3;
+	}
+	input,
+	select,
+	textarea {
+		font-family: var(--font-family);
+		background-color: transparent;
+		box-sizing: border-box;
+		font-size: 1rem;
+		display: inline-flex;
+		line-height: 1.5em;
+		color: black;
+		border-color: var(--color-grau-dunkel);
+		border-width: 1px;
+		border-style: solid;
+		padding: 0.5em 0.75em;
+		overflow: hidden;
+		width: 100%;
+	}
+	input:not([type="range"]),
+	select:not([multiple]) {
+		height: 2.75em;
+	}
+	textarea {
+		display: inherit;
+	}
+	input::placeholder {
+		color: var(--color-grau-dunkel);
+	}
+	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+		cursor: not-allowed;
+	}
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
+	}
+	.icons {
+		display: flex;
+		justify-content: space-between;
+		height: 0;
+	}
+	.icons > * {
+		margin: 0.75em;
+	}
+	.icon-left input,
+	.icon-left select {
+		padding-left: 2em;
+	}
+	.icon-right input,
+	.icon-right select {
+		padding-right: 2em;
+	}
+	kol-button-wc {
+		position: relative;
+		float: right;
+		z-index: 1000;
+		margin-top: -33px;
+	}
+	kol-button-wc button {
+		border: 1px solid var(--color-grau-dunkel);
+		box-sizing: border-box;
+		background-color: transparent;
+		cursor: pointer;
+	}
+	.icon-right kol-button-wc {
+		margin-right: 2.5em;
+	}
+	.disabled {
+		opacity: 0.33;
+	}
+	select[multiple],
+	textarea {
+		overflow: auto;
+	}
+	textarea {
+		display: block;
+	}
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		cursor: pointer;
+	}
+	select option:disabled {
+		cursor: not-allowed;
+	}
+	option:active:not(:disabled),
+	option:checked:not(:disabled),
+	option:focus:not(:disabled),
+	option:hover:not(:disabled) {
+		color: white;
+	}`,
+  "KOL-INPUT-NUMBER": `kol-input {
+		display: grid;
+		padding: 0;
+		margin: 0;
+	}
+	input:focus,
+	input:hover,
+	select:focus,
+	select:hover,
+	textarea:focus,
+	textarea:hover {
+		border-color: black;
+	}
+	input:focus-within,
+	select:focus-within,
+	textarea:focus-within {
+		outline: var(--color-focus) solid 2px;
+	}
+	kol-input > label {
+		order: 1;
+		margin-bottom: var(--gapSmallest);
+	}
+	kol-input > label > span {
+		color: black;
+		font-size: 0.875rem;
+		line-height: 1.5rem;
+	}
+	kol-input > div.input {
+		background-color: white;
+		display: block;
+		order: 2;
+	}
+	kol-input > kol-alert.error {
+		margin-top: 0.25em;
+		order: 3;
+	}
+	input,
+	select,
+	textarea {
+		font-family: var(--textFont);
+		background-color: transparent;
+		box-sizing: border-box;
+		font-size: var(--textFontSize);
+		display: inline-flex;
+		line-height: 1.5;
+		color: black;
+		border-color: var(--color-gruen);
+		border-width: 1px;
+		border-style: solid;
+		padding: 0.5em;
+		overflow: hidden;
+		width: 100%;
+	}
+	input:not([type="range"]),
+	select:not([multiple]) {
+		height: 2.75em;
+	}
+	textarea {
+		display: inherit;
+	}
+	input::placeholder {
+		color: var(--color-grau-dunkel);
+	}
+	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+		cursor: not-allowed;
+	}
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
+	}
+	.icons {
+		display: flex;
+		justify-content: space-between;
+		height: 0;
+	}
+	.icons > * {
+		margin: 0.75em;
+	}
+	.icon-left input,
+	.icon-left select {
+		padding-left: 2em;
+	}
+	.icon-right input,
+	.icon-right select {
+		padding-right: 2em;
+	}
+	kol-button-wc {
+		position: relative;
+		float: right;
+		z-index: 1;
+		margin-top: -33px;
+	}
+	kol-button-wc button {
+		border: 1px solid var(--color-grau-dunkel);
+		box-sizing: border-box;
+		background-color: transparent;
+		cursor: pointer;
+	}
+	.icon-right kol-button-wc {
+		margin-right: 2.5em;
+	}
+	.disabled {
+		opacity: 0.33;
+	}
+	select[multiple],
+	textarea {
+		overflow: auto;
+	}
+	textarea {
+		display: block;
+	}
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		cursor: pointer;
+	}
+	select option:disabled {
+		cursor: not-allowed;
+	}
+	option:active:not(:disabled),
+	option:checked:not(:disabled),
+	option:focus:not(:disabled),
+	option:hover:not(:disabled) {
+		background: var(--color-ocean);
+		color: white;
+	}`,
+  "KOL-INPUT-EMAIL": `kol-input {
 		display: grid;
 		padding: 0;
 		margin: 0;
@@ -4941,7 +5157,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-INPUT-EMAIL": `kol-input {
+  "KOL-INPUT-DATE": `kol-input {
 		gap: 0.25em;
 	}
 	kol-input .error {
@@ -4992,7 +5208,6 @@ const BMF = KoliBri.createTheme("bmf", {
 	.input:hover {
 		border-color: var(--color-midnight);
 	}
-	input:read-only,
 	input:disabled {
 		cursor: not-allowed;
 	}
@@ -5019,7 +5234,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-INPUT-FILE": `kol-input {
+  "KOL-INPUT-EMAIL": `kol-input {
 		gap: 0.25em;
 	}
 	kol-input .error {
@@ -5036,15 +5251,9 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	kol-input .input input[type="file"] {
-		padding-top: calc(0.5em + 2px);
-	}
 	input {
 		border: none;
 	}
-	input[type="file"] {
-		background-color: transparent;
-	}
 	input::placeholder {
 		color: var(--color-grey);
 	}
@@ -5095,15 +5304,15 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	kol-input.disabled :is(button, input, label, option, select, textarea) {
+	kol-input.disabled :is(input, label) {
 		opacity: 1;
 	}
-	kol-input.disabled :is(input, select, textarea, .input) {
+	kol-input.disabled :is(input, .input) {
 		background-color: var(--color-smoke);
 		border-color: var(--color-granite);
 		color: var(--color-black);
 	}`,
-  "KOL-TEXTAREA": `kol-input {
+  "KOL-INPUT-FILE": `kol-input {
 		gap: 0.25em;
 	}
 	kol-input .error {
@@ -5120,7 +5329,91 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	textarea {
+	kol-input .input input[type="file"] {
+		padding-top: calc(0.5em + 2px);
+	}
+	input {
+		border: none;
+	}
+	input[type="file"] {
+		background-color: transparent;
+	}
+	input::placeholder {
+		color: var(--color-grey);
+	}
+	.input {
+		background-color: var(--color-white);
+		border-color: var(--color-grey);
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: 2px;
+		padding: 0 0.5em;
+	}
+	.input > kol-icon {
+		width: 1em;
+	}
+	.input:is(.icon-left, .icon-right) {
+		padding-left: 1em;
+		padding-right: 1em;
+	}
+	.input:is(.icon-left, .icon-right) input {
+		padding-left: 0.5em;
+		padding-right: 0.5em;
+	}
+	.input > input:first-child {
+		padding-left: 0.375em;
+	}
+	.input > input:last-child {
+		padding-right: 0.375em;
+	}
+	.input:hover {
+		border-color: var(--color-midnight);
+	}
+	input:read-only,
+	input:disabled {
+		cursor: not-allowed;
+	}
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
+	}
+	kol-input.error {
+		border-left: 3px solid var(--color-red);
+		padding-left: 1em;
+	}
+	kol-input.error .input:focus-within {
+		outline-color: var(--color-red) !important;
+	}
+	kol-input.error kol-alert.error {
+		color: var(--color-red);
+		font-weight: 700;
+	}
+	kol-input.disabled :is(button, input, label, option, select, textarea) {
+		opacity: 1;
+	}
+	kol-input.disabled :is(input, select, textarea, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
+		color: var(--color-black);
+	}`,
+  "KOL-TEXTAREA": `kol-input {
+		gap: 0.25em;
+	}
+	kol-input .error {
+		order: 1;
+	}
+	kol-input label {
+		order: 2;
+	}
+	kol-input .input {
+		order: 3;
+	}
+	kol-input .hint {
+		order: 4;
+		font-size: 0.875em;
+		font-style: italic;
+	}
+	textarea {
 		border: none;
 	}
 	input::placeholder {
@@ -15773,6 +16066,145 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		background: var(--color-primary);
 		color: white;
 	}`,
+  "KOL-INPUT-DATE": `kol-input {
+		display: grid;
+	}
+	kol-input label {
+		order: 1;
+		padding: 0.125rem 0 0.4rem;
+		vertical-align: text-top;
+		line-height: 1.2;
+	}
+	kol-input div.input {
+		box-sizing: border-box;
+		order: 2;
+		background-color: white;
+		border-radius: 0.3125rem;
+	}
+	kol-input kol-alert.error {
+		margin-bottom: 0.4em;
+		margin-top: 0.2em;
+		order: 3;
+	}
+	input,
+	select,
+	textarea {
+		font-family: var(--font-family);
+		background-color: transparent;
+		box-sizing: border-box;
+		font-size: 1rem;
+		display: inline-flex;
+		border-color: var(--color-grey);
+		border-width: 1px;
+		border-style: solid;
+		overflow: hidden;
+		width: 100%;
+		line-height: normal;
+		padding: 0.4rem 8px;
+	}
+	input:hover,
+	select:hover,
+	textarea:hover {
+		border-color: #2d6f9e;
+		box-shadow: 0 0 0 1px #2d6f9e inset;
+	}
+	input:focus,
+	select:focus,
+	textarea:focus {
+		border-color: var(--color-primary-20);
+		box-shadow: inset 0 0 0 1px var(--color-primary-20);
+		outline: none;
+	}
+	input,
+	select:not([multiple]) {
+		height: 2.75em;
+	}
+	input::placeholder {
+		color: var(--color-grey);
+	}
+	input:hover {
+		border-color: var(--color-midnight);
+	}
+	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+		cursor: not-allowed;
+		border-color: var(--border-default);
+	}
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
+	}
+	.icons {
+		display: flex;
+		justify-content: space-between;
+		height: 0;
+	}
+	.icons > * {
+		margin: 0.75em;
+	}
+	.icon-left input,
+	.icon-left select {
+		padding-left: 2em;
+	}
+	.icon-right input,
+	.icon-right select {
+		padding-right: 2em;
+	}
+	kol-input.error input:focus,
+	kol-input.error select:focus,
+	kol-input.error textarea:focus {
+		border-color: var(--color-warning);
+		box-shadow: inset 0 0 0 1px var(--color-warning);
+	}
+	kol-input.error kol-alert.error {
+		color: var(--color-warning);
+	}
+	kol-button-wc {
+		position: relative;
+		float: right;
+		z-index: 1000;
+		margin-top: -2.7em;
+	}
+	kol-button-wc button {
+		border: 0;
+		height: 2.7em;
+		box-sizing: border-box;
+		background-color: transparent;
+		cursor: pointer;
+	}
+	kol-button-wc button:focus,
+	kol-button-wc button:hover {
+		background-color: var(--color-primary);
+		color: var(--color-white);
+	}
+	.icon-right kol-button-wc {
+		margin-right: 2.5em;
+	}
+	.disabled {
+		opacity: 0.33;
+	}
+	select[multiple],
+	textarea {
+		overflow: auto;
+	}
+	textarea {
+		display: block;
+	}
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		border-radius: 0.25em;
+		cursor: pointer;
+	}
+	select option:disabled {
+		cursor: not-allowed;
+	}
+	option:active:not(:disabled),
+	option:checked:not(:disabled),
+	option:focus:not(:disabled),
+	option:hover:not(:disabled) {
+		background: var(--color-primary);
+		color: white;
+	}`,
   "KOL-INPUT-EMAIL": `kol-input {
 		display: grid;
 	}
@@ -18461,6 +18893,145 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 		background: var(--color-primary);
 		color: white;
 	}`,
+  "KOL-INPUT-DATE": `kol-input {
+		display: grid;
+	}
+	kol-input label {
+		order: 1;
+		padding: 0.125rem 0 0.4rem;
+		vertical-align: text-top;
+		line-height: 1.2;
+	}
+	kol-input div.input {
+		box-sizing: border-box;
+		order: 2;
+		background-color: white;
+		border-radius: 0.3125rem;
+	}
+	kol-input kol-alert.error {
+		margin-bottom: 0.4em;
+		margin-top: 0.2em;
+		order: 3;
+	}
+	input,
+	select,
+	textarea {
+		font-family: var(--font-family);
+		background-color: transparent;
+		box-sizing: border-box;
+		font-size: 1rem;
+		display: inline-flex;
+		border-color: var(--color-grey);
+		border-width: 1px;
+		border-style: solid;
+		overflow: hidden;
+		width: 100%;
+		line-height: normal;
+		padding: 0.4rem 8px;
+	}
+	input:hover,
+	select:hover,
+	textarea:hover {
+		border-color: #2d6f9e;
+		box-shadow: 0 0 0 1px #2d6f9e inset;
+	}
+	input:focus,
+	select:focus,
+	textarea:focus {
+		border-color: var(--color-primary-20);
+		box-shadow: inset 0 0 0 1px var(--color-primary-20);
+		outline: none;
+	}
+	input,
+	select:not([multiple]) {
+		height: 2.75em;
+	}
+	input::placeholder {
+		color: var(--color-grey);
+	}
+	input:hover {
+		border-color: var(--color-midnight);
+	}
+	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+		cursor: not-allowed;
+		border-color: var(--border-default);
+	}
+	.required label > span::after {
+		content: "*";
+		padding-left: 0.125em;
+	}
+	.icons {
+		display: flex;
+		justify-content: space-between;
+		height: 0;
+	}
+	.icons > * {
+		margin: 0.75em;
+	}
+	.icon-left input,
+	.icon-left select {
+		padding-left: 2em;
+	}
+	.icon-right input,
+	.icon-right select {
+		padding-right: 2em;
+	}
+	kol-input.error input:focus,
+	kol-input.error select:focus,
+	kol-input.error textarea:focus {
+		border-color: var(--color-warning);
+		box-shadow: inset 0 0 0 1px var(--color-warning);
+	}
+	kol-input.error kol-alert.error {
+		color: var(--color-warning);
+	}
+	kol-button-wc {
+		position: relative;
+		float: right;
+		z-index: 1000;
+		margin-top: -2.7em;
+	}
+	kol-button-wc button {
+		border: 0;
+		height: 2.7em;
+		box-sizing: border-box;
+		background-color: transparent;
+		cursor: pointer;
+	}
+	kol-button-wc button:focus,
+	kol-button-wc button:hover {
+		background-color: var(--color-primary);
+		color: var(--color-white);
+	}
+	.icon-right kol-button-wc {
+		margin-right: 2.5em;
+	}
+	.disabled {
+		opacity: 0.33;
+	}
+	select[multiple],
+	textarea {
+		overflow: auto;
+	}
+	textarea {
+		display: block;
+	}
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		border-radius: 0.25em;
+		cursor: pointer;
+	}
+	select option:disabled {
+		cursor: not-allowed;
+	}
+	option:active:not(:disabled),
+	option:checked:not(:disabled),
+	option:focus:not(:disabled),
+	option:hover:not(:disabled) {
+		background: var(--color-primary);
+		color: white;
+	}`,
   "KOL-INPUT-EMAIL": `kol-input {
 		display: grid;
 	}
@@ -20350,6 +20921,58 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	.error .input {
 		border-color: var(--color-red);
 	}`,
+  "KOL-INPUT-DATE": `kol-input {
+		color: var(--color-grey);
+		gap: var(--spacing-xs);
+	}
+	input,
+	select,
+	textarea {
+		border: none;
+		margin: 1px 0.5em;
+		outline: none;
+	}
+	input,
+	select:not([multiple]) {
+		height: 40px !important;
+		min-height: 40px !important;
+	}
+	label {
+		font-weight: var(--font-weight-bold);
+		order: 1;
+	}
+	.hint {
+		font-size: 0.875rem;
+		order: 2;
+	}
+	kol-alert {
+		color: var(--color-red);
+		font-size: 0.875em;
+		margin-left: calc(-1 * var(--spacing-2xs));
+		order: 3;
+	}
+	.input {
+		min-height: 44px !important;
+		border: 1px solid var(--color-grey-75);
+		color: var(--color-grey);
+		order: 4;
+		align-items: center;
+	}
+	input::placeholder,
+	textarea::placeholder {
+		color: var(--color-grey-50);
+	}
+	.input:focus-within {
+		box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);
+		outline: none;
+	}
+	.input:focus-within,
+	.input:hover {
+		border-color: var(--color-blue) !important;
+	}
+	.error .input {
+		border-color: var(--color-red);
+	}`,
   "KOL-INPUT-EMAIL": `kol-input {
 		color: var(--color-grey);
 		gap: var(--spacing-xs);
@@ -21603,13 +22226,65 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
+		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
 	select:not([multiple]) {
-		height: 44px !important;
+		height: 40px !important;
+		min-height: 40px !important;
+	}
+	label {
+		font-weight: var(--font-weight-bold);
+		order: 1;
+	}
+	.hint {
+		font-size: 0.875rem;
+		order: 2;
+	}
+	kol-alert {
+		color: var(--color-red);
+		font-size: 0.875em;
+		margin-left: calc(-1 * var(--spacing-2xs));
+		order: 3;
+	}
+	.input {
 		min-height: 44px !important;
+		border: 1px solid var(--color-grey-75);
+		color: var(--color-grey);
+		order: 4;
+		align-items: center;
+	}
+	input::placeholder,
+	textarea::placeholder {
+		color: var(--color-grey-50);
+	}
+	.input:focus-within {
+		box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);
+		outline: none;
+	}
+	.input:focus-within,
+	.input:hover {
+		border-color: var(--color-blue) !important;
+	}
+	.error .input {
+		border-color: var(--color-red);
+	}`,
+  "KOL-INPUT-NUMBER": `kol-input {
+		color: var(--color-grey);
+		gap: var(--spacing-xs);
+	}
+	input,
+	select,
+	textarea {
+		border: none;
+		margin: 1px 0.5em;
+		outline: none;
+	}
+	input,
+	select:not([multiple]) {
+		height: 40px !important;
+		min-height: 40px !important;
 	}
 	label {
 		font-weight: var(--font-weight-bold);
@@ -21647,7 +22322,7 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	.error .input {
 		border-color: var(--color-red);
 	}`,
-  "KOL-INPUT-NUMBER": `kol-input {
+  "KOL-INPUT-DATE": `kol-input {
 		color: var(--color-grey);
 		gap: var(--spacing-xs);
 	}
@@ -21655,13 +22330,13 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
+		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
 	select:not([multiple]) {
-		height: 44px !important;
-		min-height: 44px !important;
+		height: 40px !important;
+		min-height: 40px !important;
 	}
 	label {
 		font-weight: var(--font-weight-bold);
@@ -21811,13 +22486,13 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
+		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
 	select:not([multiple]) {
-		height: 44px !important;
-		min-height: 44px !important;
+		height: 40px !important;
+		min-height: 40px !important;
 	}
 	label {
 		font-weight: var(--font-weight-bold);
@@ -21863,13 +22538,13 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	select,
 	textarea {
 		border: none;
-		margin: 1px;
+		margin: 1px 0.5em;
 		outline: none;
 	}
 	input,
 	select:not([multiple]) {
-		height: 44px !important;
-		min-height: 44px !important;
+		height: 40px !important;
+		min-height: 40px !important;
 	}
 	label {
 		font-weight: var(--font-weight-bold);
@@ -22057,6 +22732,72 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	}
 	.spin span:nth-child(4) {
 		background-color: var(--color-grey-20);
+	}`,
+  "KOL-INPUT-RADIO": `fieldset {
+		border: 0;
+		gap: 0.5rem;
+	}
+	div[slot="input"] {
+		gap: 0.25rem;
+	}
+	fieldset kol-alert {
+		order: 1;
+	}
+	fieldset .hint {
+		order: 2;
+	}
+	fieldset kol-alert {
+		order: 3;
+	}
+	fieldset kol-input {
+		order: 4;
+	}
+	input[type="radio"] {
+		border: 2px solid var(--color-grey-75);
+	}
+	input[type="radio"]:before {
+		display: none;
+	}
+	input[type="radio"]:checked {
+		border-color: var(--color-blue);
+		border-width: 7px;
+	}
+	input[type="radio"]:focus {
+		outline: 2px solid var(--color-blue);
+		outline-offset: 2px;
+	}
+	input[type="radio"]:not(:disabled):hover {
+		border-color: var(--color-blue);
+	}
+	label,
+	legend {
+		color: var(--color-grey);
+	}
+	legend {
+		font-weight: var(--font-weight-bold);
+	}
+	.error input[type="radio"] {
+		border: 2px solid var(--color-red);
+	}
+	.error input[type="radio"]:before {
+		display: none;
+	}
+	.error input[type="radio"]:checked {
+		border-color: var(--color-red);
+		border-width: 7px;
+	}
+	.error input[type="radio"]:not(:disabled):hover {
+		border-color: var(--color-red-1xx);
+	}
+	kol-alert {
+		color: var(--color-red);
+		font-size: 0.875em;
+		margin-left: calc(-1 * var(--spacing-xs));
+		order: 1;
+	}
+	.hint {
+		font-size: 0.875rem;
+		order: 4;
 	}`
 });
 
@@ -22590,6 +23331,55 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	input::placeholder {
 		font-style: italic;
 	}`,
+  "KOL-INPUT-DATE": `input:hover,
+	input:focus {
+		border-color: var(--border-color) !important;
+		border-radius: none !important;
+		outline-color: var(--color-achat) !important;
+		outline-offset: 0;
+		outline-style: solid;
+		outline-width: 1px;
+	}
+	label {
+		color: var(--color-anthrazit);
+		font-size: 14px;
+		line-height: 20px;
+		gap: 8px;
+		width: 100%;
+		font-weight: bold;
+	}
+	input {
+		cursor: pointer;
+		width: 100%;
+		color: var(--color-anthrazit);
+		border-width: 1px;
+		border-style: solid;
+		border-color: var(--color-petrol);
+		border-radius: 0;
+		background-color: #e8edf2 !important;
+		overflow: hidden;
+		line-height: 24px;
+		font-size: 16px;
+	}
+	.error input {
+		background-color: var(--color-rotton-20) !important;
+		border-color: var(--color-rotton) !important;
+	}
+	input:disabled {
+		background-color: var(--color-input-bg-default);
+		border-color: var(--border-color);
+		cursor: not-allowed;
+	}
+	kol-alert {
+		margin-top: calc(2 * var(--spacing));
+		display: block;
+	}
+	.kol-required span::after {
+		content: "*";
+	}
+	input::placeholder {
+		font-style: italic;
+	}`,
   "KOL-INPUT-EMAIL": `input:hover,
 	input:focus {
 		border-color: var(--border-color) !important;
@@ -24216,6 +25006,88 @@ const MAPZ = KoliBri.createTheme("mapz", {
 		background-color: var(--kolibri-color-primary);
 		color: white;
 	}`,
+  "KOL-INPUT-DATE": `input,
+	select,
+	textarea {
+		border: none;
+	}
+	input[type="color"] {
+		border: none;
+		min-height: 40px !important;
+	}
+	input[type="color"],
+	input[type="file"] {
+		background-color: transparent;
+	}
+	kol-input {
+		gap: var(--spacing);
+	}
+	kol-input > label {
+		order: 1;
+		color: var(--default-letter);
+	}
+	kol-input > .input {
+		border-color: var(--kolibri-border-color);
+		border-radius: 0.25rem;
+		border-style: solid;
+		border-width: 2px;
+		order: 2;
+	}
+	kol-input:hover > .input {
+		border-color: var(--kolibri-color-secondary);
+	}
+	kol-input > .input > kol-icon:first-child {
+		margin-left: 0.75em;
+	}
+	kol-input > .input > kol-icon:last-child {
+		margin-right: 0.75em;
+	}
+	kol-input > .error {
+		order: 3;
+	}
+	kol-input > .hint {
+		order: 4;
+		font-size: 0.875em;
+	}
+	input,
+	select,
+	textarea {
+		color: var(--default-letter);
+		padding: 0.5em 0.75em;
+	}
+	input:not([type="range"]),
+	select:not([multiple]) {
+		height: 2.75em;
+	}
+	textarea {
+		display: inherit;
+	}
+	input::placeholder {
+		color: var(--default-border-hover);
+	}
+	input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
+		cursor: not-allowed;
+	}
+	select[multiple],
+	textarea {
+		overflow: auto;
+	}
+	select option {
+		margin: 1px 0;
+		padding: 0.5em;
+		border-radius: 0.25em;
+		cursor: pointer;
+	}
+	select option:disabled {
+		cursor: not-allowed;
+	}
+	option:active:not(:disabled),
+	option:checked:not(:disabled),
+	option:focus:not(:disabled),
+	option:hover:not(:disabled) {
+		background-color: var(--kolibri-color-primary);
+		color: white;
+	}`,
   "KOL-INPUT-EMAIL": `input,
 	select,
 	textarea {
@@ -42417,6 +43289,52 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	kol-input > kol-alert.error {
 		order: 3;
 	}`,
+  "KOL-INPUT-DATE": `kol-input {
+		gap: var(--gap);
+	}
+	kol-input .input {
+		border-color: var(--color-grau-30);
+		border-width: 2px;
+		border-style: solid;
+		padding: 0px 0.75em;
+		gap: var(--gap);
+		overflow: hidden;
+	}
+	kol-input .input:focus-within,
+	kol-input .input:hover {
+		border-color: var(--color-grau-60);
+	}
+	kol-input:not(.select, .textarea) .input {
+		height: calc(var(--a11y-min-size) - 4px);
+	}
+	kol-input:not(.range) .input :is(input, select, textarea) {
+		background-color: white;
+		border: 0;
+	}
+	kol-input .input input[type="file"] {
+		padding-top: calc(0.5em + 2px);
+	}
+	kol-input > label {
+		font-weight: var(--font-weight-bold);
+		order: 1;
+		margin-bottom: 0.25rem;
+	}
+	kol-input > label > span {
+		color: var(--default-letter);
+	}
+	kol-input > div.input {
+		border-radius: 0.25rem;
+		order: 2;
+	}
+	kol-input > span.hint {
+		color: var(--color-grau-60);
+		font-style: italic;
+		order: 4;
+		font-size: 0.8rem;
+	}
+	kol-input > kol-alert.error {
+		order: 3;
+	}`,
   "KOL-INPUT-TEXT": `kol-input {
 		gap: var(--gap);
 	}