@public-ui/themes 1.5.0 → 1.5.1

package/dist/index.mjs

@@ -4497,28 +4497,34 @@ const BMF = KoliBri.createTheme("bmf", {
 		--color-ocean: #0077b6;
 		--color-sky: #99c9e2;
 		--color-ice: #cce4f0;
+		--color-crystal: #f0f7fb;
 		--color-crimson: #780f2d;
 		--color-red: #c0003c;
 		--color-pink: #f2ccd8;
+		--color-blossom: #fbf0f3;
 		--color-olive: #004d38;
 		--color-green: #005c45;
 		--color-jungle: #00854a;
 		--color-lime: #c1ca31;
 		--color-mint: #ccdeda;
+		--color-haze: #f0f5f4;
 		--color-fire: #7a2e1f;
 		--color-orange: #c44931;
 		--color-coral: #f5dcd7;
-		--color-bronze: #c44931;
-		--color-yellow: #c44931;
-		--color-ivory: #c44931;
-		--color-purple: #c44931;
-		--color-lavender: #c44931;
+		--color-peach: #fdf6f5;
+		--color-bronze: #6a4a06;
+		--color-yellow: #f9e03a;
+		--color-ivory: #fdf3b0;
+		--color-wine: #3f1d4a;
+		--color-purple: #6b4479;
+		--color-lavender: #dfd6de;
 		--color-black: #202020;
 		--color-metal: #454d4f;
 		--color-grey: #576164;
 		--color-granite: #bec5c9;
 		--color-silver: #e5e8e9;
 		--color-smoke: #f2f3f4;
+		--color-cloud: #f6f7f7;
 		--color-white: #ffffff;
 		--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;
 		--font-size: 16px;
@@ -4691,7 +4697,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: transparent;
 	}`,
   "KOL-INPUT-TEXT": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -4707,31 +4713,30 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	input {
 		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -4742,7 +4747,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	input:read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -4760,34 +4766,15 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.disabled {
-		opacity: 0.33;
+	kol-input.disabled :is(input, label) {
+		opacity: 1;
 	}
-	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-ocean);
-		color: white;
+	kol-input.disabled :is(input, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
 	}`,
   "KOL-INPUT-PASSWORD": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -4803,31 +4790,30 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	input {
 		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -4838,7 +4824,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	input:read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -4856,34 +4843,16 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.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;
+	kol-input.disabled :is(button, input, label, option, select, textarea) {
+		opacity: 1;
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
+	kol-input.disabled :is(input, select, textarea, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
+		color: var(--color-black);
 	}`,
   "KOL-INPUT-NUMBER": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -4899,31 +4868,30 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	input {
 		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -4934,7 +4902,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -4952,34 +4920,16 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.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;
+	kol-input.disabled :is(input, label) {
+		opacity: 1;
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
+	kol-input.disabled :is(input, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
+		color: var(--color-black);
 	}`,
   "KOL-INPUT-EMAIL": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -4995,31 +4945,30 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	input {
 		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -5030,7 +4979,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	input:read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -5048,34 +4998,16 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.disabled {
-		opacity: 0.33;
-	}
-	select[multiple],
-	textarea {
-		overflow: auto;
+	kol-input.disabled :is(input, label) {
+		opacity: 1;
 	}
-	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-ocean);
-		color: white;
+	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.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -5094,16 +5026,9 @@ const BMF = KoliBri.createTheme("bmf", {
 	kol-input .input input[type="file"] {
 		padding-top: calc(0.5em + 2px);
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	input {
 		border: none;
-		min-height: 40px !important;
 	}
-	input[type="color"],
 	input[type="file"] {
 		background-color: transparent;
 	}
@@ -5111,14 +5036,23 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-grey);
 	}
 	.input {
+		background-color: var(--color-white);
 		border-color: var(--color-grey);
-		border-radius: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -5129,7 +5063,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	input:read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -5147,34 +5082,16 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.disabled {
-		opacity: 0.33;
-	}
-	select[multiple],
-	textarea {
-		overflow: auto;
+	kol-input.disabled :is(button, input, label, option, select, textarea) {
+		opacity: 1;
 	}
-	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-ocean);
-		color: white;
+	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.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -5190,31 +5107,30 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
 	textarea {
 		border: none;
 	}
-	input[type="color"] {
-		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -5225,7 +5141,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	textarea:read-only,
+	textarea:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -5253,21 +5170,14 @@ const BMF = KoliBri.createTheme("bmf", {
 	textarea {
 		display: block;
 	}
-	select option {
-		margin: 1px 0;
-		padding: 0.5em;
-		border-radius: 0.25em;
-		cursor: pointer;
-	}
-	select option:disabled {
-		cursor: not-allowed;
+	.input {
+		position: relative;
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
+	.input textarea ~ span {
+		position: absolute;
+		top: -1.5rem;
+		right: 0;
+		color: var(--color-grey);
 	}`,
   "KOL-ALERT": `.msg,
 	.msg {
@@ -5348,6 +5258,10 @@ const BMF = KoliBri.createTheme("bmf", {
 	.msg > .heading > .heading-icon::part(icon) {
 		line-height: 1.375rem;
 	}
+	.msg > .heading > div > kol-heading-wc {
+		line-height: 20px;
+		padding-top: 0.125rem;
+	}
 	.msg.default .heading > div > kol-heading-wc {
 		color: var(--color-grey);
 	}
@@ -5387,18 +5301,25 @@ const BMF = KoliBri.createTheme("bmf", {
 	.card > .heading {
 		padding: 0.5rem 1rem;
 	}
+	.card[_has-closer] > .heading {
+		padding-top: 0;
+		padding-bottom: 0;
+		padding-right: 0;
+	}
 	.card > .heading > div {
 		width: 100%;
+		min-height: 1.25rem;
 	}
 	.card > .heading .heading-icon {
 		justify-self: right;
+		margin-top: -4px;
 	}
 	.card > .heading kol-heading-wc {
 		width: 100%;
 		color: white;
 		display: flex;
 		font-size: 1.25rem;
-		line-height: 1.75rem;
+		line-height: 1.25rem;
 	}
 	.card > .heading kol-heading-wc > * {
 		margin: auto 0;
@@ -5424,6 +5345,11 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(.error, .info, .success, .warning) .heading-icon::part(icon) {
 		font-family: "Font Awesome 6 Free" !important;
 		font-weight: 900;
+		height: 1.25rem;
+		width: 1.25rem;
+	}
+	:is(.error, .info, .success, .warning) .heading-icon {
+		font-size: 1.25rem !important;
 	}
 	.error .heading-icon::part(icon)::before {
 		content: "\\f06a";
@@ -5484,10 +5410,18 @@ const BMF = KoliBri.createTheme("bmf", {
 	.close > button.icon-only {
 		padding: 8px;
 	}
-	.close > button.icon-only kol-icon {
-		display: inline-block;
-		width: 1.5em;
-		height: 1.5em;
+	.close > button.icon-only kol-icon {
+		display: flex;
+		width: 1em;
+		height: 1em;
+		font-size: 1rem;
+	}
+	.close > button.icon-only kol-icon::part(icon) {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+	}
+	.close > button.icon-only kol-icon::part(icon)::before {
+		content: "\\f00d";
 	}
 	.close > button:active {
 		box-shadow: none;
@@ -5511,7 +5445,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	}
 	h1 {
 		font-size: 1.5rem;
-		line-height: 3.25rem;
+		line-height: 1.75rem;
 	}
 	h2 {
 		font-size: 1.25rem;
@@ -5527,10 +5461,9 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host > span {
 		border-radius: 0.3125rem;
 		display: inline-flex;
-		font-size: 0.875em;
+		font-size: 1em;
 		font-style: normal;
-		font-weight: 700;
-		line-height: 1rem;
+		line-height: 1.25rem;
 	}
 	:host > span.smart-button {
 		align-items: center;
@@ -5547,7 +5480,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		padding: 2px;
 	}
 	:host > span kol-span-wc {
-		padding: 0.25rem 0.5rem;
+		padding: 0.25rem 0.75rem;
 	}
 	:host > span > kol-span-wc {
 		align-items: center;
@@ -5566,8 +5499,8 @@ const BMF = KoliBri.createTheme("bmf", {
   "KOL-INDENTED-TEXT": `:host > div {
 		background-color: var(--color-white);
 		border-left: none;
-		box-shadow: -4px 0px 0px var(--color-ocean);
-		padding: 0.25em 0.5em;
+		box-shadow: -2px 0px 0px var(--color-ocean);
+		padding: 0 0.5em;
 		width: 100%;
 	}`,
   "KOL-LINK": `:is(a, button) {
@@ -5692,7 +5625,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		stroke: var(--color-midnight);
 	}`,
   "KOL-SELECT": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -5708,31 +5641,32 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	select {
 		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		width: 1em;
+	}
+	.input:is(.icon-left, .icon-right) {
+		padding-left: 1em;
+		padding-right: 1em;
+	}
+	.input.icon-left kol-icon:first-child {
+		margin-right: 0.5em;
+	}
+	.input.icon-right kol-icon:last-child {
+		margin-left: 0.5em;
 	}
 	.input > input:first-child {
 		padding-left: 0.375em;
@@ -5743,7 +5677,7 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	select:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -5761,15 +5695,15 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.disabled {
-		opacity: 0.33;
+	kol-input.disabled :is(select, label, option) {
+		opacity: 1;
 	}
-	select[multiple],
-	textarea {
-		overflow: auto;
+	kol-input.disabled :is(select, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
 	}
-	textarea {
-		display: block;
+	select[multiple] {
+		overflow: auto;
 	}
 	select option {
 		margin: 1px 0;
@@ -5788,7 +5722,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: white;
 	}`,
   "KOL-INPUT-COLOR": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -5804,31 +5738,37 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
+	input {
 		border: none;
 	}
 	input[type="color"] {
 		border: none;
 		min-height: 40px !important;
 	}
-	input[type="color"],
-	input[type="file"] {
+	input[type="color"] {
 		background-color: transparent;
 	}
 	input::placeholder {
 		color: var(--color-grey);
 	}
 	.input {
+		background-color: var(--color-white);
 		border-color: var(--color-grey);
-		border-radius: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
 		padding: 0 0.5em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		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;
@@ -5839,7 +5779,8 @@ const BMF = KoliBri.createTheme("bmf", {
 	.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 {
+	input:not([type="color"]):read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -5857,31 +5798,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.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;
+	kol-input.disabled :is(input, label) {
+		opacity: 1;
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
+	kol-input.disabled :is(input, .input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
+		color: var(--color-black);
 	}`,
   "KOL-ACCORDION": `kol-span-wc > span {
 		display: flex;
@@ -5908,10 +5831,10 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-midnight);
 	}
 	:host > div.open > kol-heading-wc button kol-icon::part(icon)::before {
-		content: "\\f054";
+		content: "\\f078";
 	}
 	:host > div.close > kol-heading-wc button kol-icon::part(icon)::before {
-		content: "\\f078";
+		content: "\\f054";
 	}
 	:host > div {
 		width: 100%;
@@ -5921,9 +5844,9 @@ const BMF = KoliBri.createTheme("bmf", {
 	:host > div div[class="header"],
 	:host > div[class*="open"] div[class="content"] {
 		margin: 0;
-		padding-left: 2.25em;
 	}
-	:host > div[class*="open"] div[class="content"] {
+	:host > div div[class="content"] {
+		padding-left: 2.25em;
 		padding-bottom: 12px;
 		padding-right: 8px;
 	}
@@ -6038,10 +5961,21 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-family: var(--font-family);
 		font-size: var(--font-size);
 		background-color: var(--color-smoke);
+		width: 100%;
 	}
 	ul {
 		list-style: none;
 	}
+	kol-link-wc,
+	a {
+		height: 100%;
+		min-height: 44px;
+		display: flex;
+		place-items: center;
+	}
+	.entry > kol-span-wc > span {
+		width: 100%;
+	}
 	.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
 		background-color: var(--color-white);
 		text-decoration: none;
@@ -6050,10 +5984,6 @@ const BMF = KoliBri.createTheme("bmf", {
 		display: flex;
 		align-items: center;
 		font-style: normal;
-		padding: 0.75rem 0.5rem 0.75rem 0;
-		border-left-color: var(--color-white);
-		border-left-style: solid;
-		border-left-width: 0.5rem;
 		line-height: 1.5rem;
 		min-height: 44px;
 		min-width: 44px;
@@ -6061,22 +5991,55 @@ const BMF = KoliBri.createTheme("bmf", {
 		transition-property: background-color, color, border-color;
 		letter-spacing: 0.175px;
 	}
+	.entry > :is(kol-link-wc, kol-button-wc):first-child :is(a, button) {
+		color: var(--color-midnight);
+		text-decoration: none;
+	}
 	.entry > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
 		border-left-color: var(--color-ocean);
+		background-color: var(--color-ocean);
+	}
+	.entry
+		> :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child:hover
+		> :is(a, button, span) {
+		color: var(--color-white);
 		font-weight: 700;
+		letter-spacing: unset;
 	}
-	.selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+	.selected > :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
 		background-color: var(--color-ice);
-		border-left-color: var(--color-midnight);
 		color: var(--color-midnight);
 		font-weight: 700;
-		letter-spacing: unset;
 	}
-	a:hover,
-	.selected a:hover,
-	[exportparts*="selected"] a:hover {
-		background-color: var(--color-ocean);
+	.selected
+		> :is(kol-link-wc, kol-button-wc, kol-span-wc):first-child
+		> :is(a, button, span) {
+		font-weight: 700;
+	}
+	.selected :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child:hover {
 		color: var(--color-white);
+		letter-spacing: unset;
+	}
+	.entry > kol-span-wc > span,
+	.entry :is(a, button) {
+		border-left-color: transparent;
+		border-left-style: solid;
+		border-left-width: 0.5rem;
+		padding: 0.75rem 0.5rem 0.75rem 0.25rem;
+	}
+	.selected :is(a, button),
+	[exportparts*="selected"] a {
+		border-left-color: var(--color-midnight);
+	} /** Compact mode */
+	.entry.text-center :is(kol-button-wc, kol-link-wc, kol-span-wc):first-child {
+		place-items: center;
+	}
+	.entry.text-center > kol-span-wc > span {
+		flex-direction: column;
+	}
+	.entry.text-center > kol-span-wc > span,
+	.entry.text-center :is(a, button) {
+		padding-left: 0;
 	}`,
   "KOL-CARD": `/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */
 	:host > div {
@@ -6114,10 +6077,10 @@ const BMF = KoliBri.createTheme("bmf", {
 		gap: 0.4em;
 	}
 	:host kol-input.default {
-		grid-template-columns: 2rem auto;
+		grid-template-columns: 1.5rem auto;
 	}
 	:host kol-input.switch {
-		grid-template-columns: 4rem auto;
+		grid-template-columns: 3.5rem auto;
 	}
 	:host kol-input > div.input {
 		display: inherit;
@@ -6199,7 +6162,7 @@ const BMF = KoliBri.createTheme("bmf", {
 		border-color: var(--color-midnight);
 	}
 	:host kol-input.default input[type="checkbox"] {
-		border-radius: 0.25em;
+		border-radius: var(--border-radius);
 		height: calc(6 * var(--spacing));
 		min-width: calc(6 * var(--spacing));
 		width: calc(6 * var(--spacing));
@@ -6227,14 +6190,15 @@ const BMF = KoliBri.createTheme("bmf", {
 		width: calc(1.5 * var(--spacing));
 	}
 	:host kol-input.default input[type="checkbox"]:indeterminate {
-		--tw-bg-opacity: 1; /* background-color: white; */
+		--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.1rem;
-		width: calc(4 * var(--spacing));
+		left: 0.25rem;
+		width: calc(3 * var(--spacing));
 		transform: inherit;
 	}
 	:host kol-input.default input[type="checkbox"]:checked:indeterminate:before {
@@ -6411,26 +6375,32 @@ const BMF = KoliBri.createTheme("bmf", {
 	fieldset.horizontal legend {
 		display: inline-block;
 		margin-bottom: 0.25em;
+	}
+	fieldset [slot="input"] {
+		gap: 0.5rem;
+	}
+	fieldset div label {
+		padding-left: 0;
 	}`,
   "KOL-TOAST": `:host > div {
 		position: fixed;
 		top: 0;
-		left: 0;
+		right: 0;
 		width: 100%;
 		height: 0;
 		z-index: 200;
 	}
 	:host > div > kol-alert {
 		display: block;
-		margin: auto;
-		padding: 1rem;
+		margin-left: auto;
+		margin-right: unset;
+		padding: 2rem;
 		max-width: 750px;
 	}
 	:host > div > kol-button-wc {
 		top: 0;
 		position: relative;
 		display: block;
-		margin: auto;
 		width: 1em;
 	}`,
   "KOL-TABS": `button:disabled {
@@ -6614,9 +6584,25 @@ const BMF = KoliBri.createTheme("bmf", {
 		align-self: flex-end;
 		padding-bottom: 0.5rem;
 		color: var(--color-midnight);
+	}
+	kol-button::part(icon) {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+	}
+	kol-button.first::part(icon):before {
+		content: "\\f100";
+	}
+	kol-button.previous::part(icon):before {
+		content: "\\f104";
+	}
+	kol-button.next::part(icon):before {
+		content: "\\f105";
+	}
+	kol-button.last::part(icon):before {
+		content: "\\f101";
 	}`,
   "KOL-INPUT-RANGE": `kol-input {
-		gap: 0.4em;
+		gap: 0.25em;
 	}
 	kol-input .error {
 		order: 1;
@@ -6632,42 +6618,38 @@ const BMF = KoliBri.createTheme("bmf", {
 		font-size: 0.875em;
 		font-style: italic;
 	}
-	input,
-	select,
-	textarea {
-		border: none;
-	}
-	input[type="color"] {
+	input {
 		border: none;
-		min-height: 40px !important;
-	}
-	input[type="color"],
-	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: 0.3125rem;
+		border-radius: var(--border-radius);
 		border-style: solid;
 		border-width: 2px;
-		padding: 0 0.5em;
+		padding: 0 1em;
 	}
 	.input > kol-icon {
-		width: 1.5em;
+		width: 1em;
 	}
-	.input > input:first-child {
-		padding-left: 0.375em;
+	.input.icon-left > kol-icon:first-child {
+		margin-right: 0.5em;
 	}
-	.input > input:last-child {
-		padding-right: 0.375em;
+	.input.icon-right > kol-icon:last-child {
+		margin-left: 0.5em;
+	}
+	.input:is(.icon-left, .icon-right) {
+		padding-left: 1em;
+		padding-right: 1em;
 	}
 	.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 {
+	input:read-only,
+	input:disabled {
 		cursor: not-allowed;
 	}
 	.required label > span::after {
@@ -6685,31 +6667,13 @@ const BMF = KoliBri.createTheme("bmf", {
 		color: var(--color-red);
 		font-weight: 700;
 	}
-	.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;
+	kol-input.disabled :is(input, label) {
+		opacity: 1;
 	}
-	option:active:not(:disabled),
-	option:checked:not(:disabled),
-	option:focus:not(:disabled),
-	option:hover:not(:disabled) {
-		background: var(--color-ocean);
-		color: white;
+	kol-input.disabled :is(.input) {
+		background-color: var(--color-smoke);
+		border-color: var(--color-granite);
+		color: var(--color-black);
 	}`,
   "KOL-LINK-BUTTON": `:is(a, button):focus {
 		outline: none;
@@ -6807,6 +6771,19 @@ const BMF = KoliBri.createTheme("bmf", {
 	:is(a, button).loading > kol-span-wc kol-icon {
 		animation: spin 5s infinite linear;
 	}
+	/** small ghost button */
+	.ghost :is(a, button).small > kol-span-wc {
+		border: none;
+		background-color: transparent;
+		box-shadow: none;
+	}
+	.ghost :is(a, button).small > kol-span-wc > span {
+		border-radius: 1.5em;
+		border-style: solid;
+		border-width: 2px;
+		border-color: var(--color-white);
+		background-color: var(--color-white);
+	}
 	.ghost :is(a, button).small:active > kol-span-wc > span,
 	.ghost :is(a, button).small:hover > kol-span-wc > span,
 	.ghost :is(a, button).small.transparent:active > kol-span-wc > span,
@@ -6858,11 +6835,31 @@ const BMF = KoliBri.createTheme("bmf", {
 		position: unset;
 	}`,
   "KOL-ABBR": `abbr {
-		border-bottom: dotted var(--color-metal) 1px;
+		border-bottom: dashed var(--color-black) 1px;
 		text-decoration: none !important;
 	}`,
+  "KOL-BREADCRUMB": `li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon {
+		font-size: 0.75rem;
+	}
+	li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon::part(icon) {
+		font-family: "Font Awesome 6 Free";
+		font-weight: 900;
+		color: var(--color-grey);
+	}
+	li:has(:is(kol-icon + kol-link, kol-icon + span)) kol-icon::part(icon)::before {
+		content: "\\f054";
+	}
+	kol-link::part(icon) {
+		font-size: 1.25rem;
+	}
+	ul li > :is(span, kol-link) {
+		line-height: 1.25rem;
+		height: 20px;
+	}
+	ul li:last-child > span {
+		color: var(--color-grey);
+	}`,
   "KOL-ICON": `:host {
-		display: inline-block;
 		width: 1em;
 		height: 1em;
 	}