@public-ui/themes 1.6.0-rc.1 → 1.6.0-rc.3

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;
@@ -1819,6 +1909,16 @@ const BPA = KoliBri.createTheme("bpa", {
 		color: var(--color-white);
 		background-color: var(--color-darkblue);
 		border-color: var(--color-darkblue);
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border: 1px solid var(--color-darkgray);
+  	border-radius: 0.125rem;
+		gap: 0.5rem;
+		line-height: 1.125rem;
+		padding: 0.75rem 1rem;
+		background-color: var(--color-blue);
+  	color: var(--color-white);
+		cursor: pointer;
 	}`
 });
 
@@ -2096,11 +2196,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 +2207,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 +2218,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 +2235,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 +2285,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 +2319,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 +2334,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 +2351,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 +2360,268 @@ 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%;
+	}
+	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;
+		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%;
 	}
@@ -4486,6 +4712,18 @@ const BZSt = KoliBri.createTheme("bzst", {
 	}`,
   "KOL-TOOLTIP": `:host {
 		--kolibri-font-size: var(--textFontSize);
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: 2px;
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.75rem 1rem;
+		background-color: var(--colorPrimary);
+		border-color: var(--colorPrimary);
+		color: var(--colorPrimaryFront);
+		cursor: pointer;
 	}`
 });
 
@@ -4941,7 +5179,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 +5230,6 @@ const BMF = KoliBri.createTheme("bmf", {
 	.input:hover {
 		border-color: var(--color-midnight);
 	}
-	input:read-only,
 	input:disabled {
 		cursor: not-allowed;
 	}
@@ -5019,7 +5256,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 +5273,93 @@ 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);
+	}
+	.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(input, label) {
+		opacity: 1;
+	}
+	kol-input.disabled :is(input, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
+		color: var(--color-black);
+	}`,
+  "KOL-INPUT-FILE": `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;
+	}
+	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);
 	}
@@ -13976,6 +14291,18 @@ const BMF = KoliBri.createTheme("bmf", {
 			u+f0ec, u+f10a-f10b, u+f123, u+f13e, u+f148-f149, u+f14c, u+f156, u+f15e,
 			u+f160-f161, u+f163, u+f175-f178, u+f195, u+f1f8, u+f219, u+f250, u+f252,
 			u+f27a;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: var(--a11y-min-size);
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 8px 14px;
+		background-color: var(--color-ocean);
+		border-color: var(--color-ocean);
+		color: var(--color-white);
+		cursor: pointer;
 	}`
 });
 
@@ -15773,6 +16100,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;
 	}
@@ -16650,6 +17116,18 @@ const DESYv1 = KoliBri.createTheme("desy-v1", {
 		background: white;
 		left: unset;
 		position: unset;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: 2px;
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.75rem 1rem;
+		background-color: var(--color-primary);
+		border-color: var(--color-primary-10);
+		color: white;
+		cursor: pointer;
 	}`
 });
 
@@ -18461,6 +18939,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;
 	}
@@ -19338,6 +19955,18 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
 		background: white;
 		left: unset;
 		position: unset;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: 2px;
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.75rem 1rem;
+		background-color: var(--color-primary);
+		border-color: var(--color-primary-10);
+		color: white;
+		cursor: pointer;
 	}`
 });
 
@@ -20350,6 +20979,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);
@@ -20710,6 +21391,19 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
 	}
 	.expanded > div > .expand-button kol-icon::part(icon)::before {
 		content: "\\eab4";
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: 0;
+		border-style: solid;
+		border-width: 2px;
+		font-weight: var(--font-weight-bold);
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.25em 0.75em;
+		background-color: var(--color-blue);
+		border-color: var(--color-blue);
+		color: var(--color-white);
+		cursor: pointer;
 	}`
 });
 
@@ -21699,6 +22393,58 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	.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-PASSWORD": `kol-input {
 		color: var(--color-grey);
 		gap: var(--spacing-xs);
@@ -22123,6 +22869,15 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
 	.hint {
 		font-size: 0.875rem;
 		order: 4;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: 4px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.75rem;
+		background-color: #0e47cb;
+		color: #fff;
+		cursor: pointer;
 	}`
 });
 
@@ -22656,6 +23411,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;
@@ -23783,6 +24587,17 @@ const ITZBund = KoliBri.createTheme("itzbund", {
 	:host > div.tabs-align-top kol-button-group-wc div {
 		display: flex;
 		flex-wrap: wrap;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: 2rem;
+  	border-style: solid;
+		gap: 0.5rem;
+		line-height: 1rem;
+	  padding: 0 1rem;
+		background-color: var(--color-petrol);
+		border-color: var(--color-petrol);
+		color: var(--color-weiss);
+		cursor: pointer;
 	}`
 });
 
@@ -24282,6 +25097,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 {
@@ -41282,6 +42179,18 @@ const MAPZ = KoliBri.createTheme("mapz", {
 	option:hover:not(:disabled) {
 		background-color: var(--kolibri-color-primary);
 		color: white;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: var(--kolibri-border-radius);
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.75rem 1rem;
+		background-color: var(--kolibri-color-primary);
+		border-color: var(--kolibri-border-color);
+		color: white;
+		cursor: pointer;
 	}`
 });
 
@@ -41298,7 +42207,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		--color-akzent-dark: #da793c;
 		--color-akzent-light: #f5ba6c;
 		--color-neutral: #e3e3e3;
-		--color-neutral-dark: #333;
+		--color-neutral-dark: #646464;
 		--color-neutral-light: #f7f7f7;
 		--color-rot: #ce3033;
 		--color-gelb: #f6cd35;
@@ -41328,7 +42237,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	summary:focus,
 	kol-input:not(.checkbox, .radio) .input:focus-within,
 	kol-input:is(.checkbox, .radio) input:focus {
-		border-radius: var(--border-radius);
 		outline-color: var(--color-blau-dark);
 		outline-offset: 0.125rem;
 		outline-style: solid;
@@ -41582,9 +42490,9 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		}
 	}`,
   "KOL-TABLE": `caption {
-		background-color: var(--color-neutral);
 		caption-side: TOP;
-		font-size: 1.5rem; /* 1.75rem */ /* line-height: 3rem; */
+		font-size: 1.1rem; /* 1.75rem */ /* line-height: 3rem; */
+		font-weight: var(--font-weight-bold);
 		margin-bottom: 0.25rem;
 		padding: 0.75rem;
 		text-align: left;
@@ -41596,6 +42504,9 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		border-width: 0;
 		border-top-width: 1px;
 	}
+	th {
+		background-color: var(--color-neutral);
+	}
 	td,
 	th {
 		color: var(--color-neutral-dark);
@@ -41605,8 +42516,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		border-bottom-width: 1px;
 		padding: 0.5rem;
 	}
-	tbody tr:nth-child(odd) {
-		background-color: var(--color-grau-10);
+	th[data-sort] kol-button::part(icon)::before {
+		font-family: "FontAwesome";
+		color: var(--color-neutral-dark);
+	}
+	th[data-sort="sort-NOS"] kol-button::part(icon)::before,
+	th[data-sort="sort-undefined"] kol-button::part(icon)::before {
+		content: "\f0dc";
+	}
+	th[data-sort="sort-ASC"] kol-button::part(icon)::before {
+		content: "\f0de";
+	}
+	th[data-sort="sort-DESC"] kol-button::part(icon)::before {
+		content: "\f0dd";
 	}`,
   "KOL-ACCORDION": `:host > div {
 		border-color: var(--border-color);
@@ -42063,9 +42985,10 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	}
 	label {
 		cursor: pointer;
+		padding-left: 0.75rem;
 	}
 	kol-input:hover label,
-	kol-input:has(input:focus, select:focus, textarea:focus, ) label {
+	kol-input:focus-within label {
 		text-decoration: underline;
 	}
 	.required label > span::after {
@@ -42093,7 +43016,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	}
 	kol-input > label {
 		order: 2;
-		padding-left: calc(2 * var(--spacing));
 	}
 	kol-input > kol-alert.error {
 		order: 3;
@@ -42201,32 +43123,28 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 	:host {
 		--spacing: 0.25rem;
 	}
+	legend {
+		font-weight: var(--font-weight-bold);
+		margin-bottom: 0.5rem;
+	}
 	input {
 		border-color: var(--color-neutral-dark);
 		border-width: 2px;
 		border-style: solid;
 	}
-	label {
-		cursor: pointer;
-	}
 	kol-input:has(input:disabled) input,
 	kol-input:has(input:disabled) label {
 		cursor: not-allowed !important;
 		opacity: 0.5;
 	}
-	kol-input:hover label,
-	kol-input:has(input:focus, select:focus, textarea:focus, ) label {
+	kol-input:hover:has(input:not(:disabled)) label,
+	kol-input:focus-within {
 		text-decoration: underline;
 	}
 	.required legend > span::after {
 		content: "*";
 		padding-left: 0.125em;
 	}
-	label {
-		display: grid;
-		gap: 8px;
-		width: 100%;
-	}
 	input {
 		width: 100%;
 		border-color: var(--color-neutral-dark);
@@ -42242,27 +43160,21 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		margin-bottom: 0.4em;
 	} /* RADIO */
 	fieldset {
-		border: 0px;
-		margin: 0px;
-		padding: 0px;
-		display: grid;
-		gap: 0.25em;
-	}
-	fieldset div {
+		border: 0;
+		margin: 0;
+		padding: 1.5rem;
 		display: flex;
-		flex-direction: row;
-		margin-top: 0.125em;
-		margin-bottom: 0.125em;
-		align-items: center;
-		position: relative;
+		flex-direction: column;
 	}
-	fieldset div label {
+	fieldset div.input {
 		display: flex;
-		padding-left: 0.25em;
-		width: 100%;
 	}
-	fieldset div label span {
-		margin-top: 0.125em;
+	fieldset div.input > div {
+		margin: auto 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.75rem;
 	}
 	fieldset div input[type="radio"] {
 		appearance: none;
@@ -42271,6 +43183,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		height: calc(6 * var(--spacing));
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
+		border-color: var(--color-neutral-dark);
 	}
 	fieldset div input[type="radio"]:checked:before {
 		box-shadow: 0 0 0.1rem black;
@@ -42291,7 +43204,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 		opacity: 0.33;
 	}
 	fieldset.horizontal {
-		display: flex;
+		flex-direction: row;
 		flex-wrap: wrap;
 		gap: 0.5rem 1rem;
 	}
@@ -42483,6 +43396,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);
 	}
@@ -49838,6 +50797,18 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
 			u+f0ec, u+f10a-f10b, u+f123, u+f13e, u+f148-f149, u+f14c, u+f156, u+f15e,
 			u+f160-f161, u+f163, u+f175-f178, u+f195, u+f1f8, u+f219, u+f250, u+f252,
 			u+f27a;
+	}`,
+  "KOL-SKIP-NAV": `kol-link-wc > a > kol-span-wc {
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: 2px;
+		gap: 0.5rem;
+		line-height: 1rem;
+		padding: 0.75rem 1rem;
+		background-color: var(--color-blau);
+		border-color: var(--color-blau-dark);
+		color: white;
+		cursor: pointer;
 	}`
 });