Merge pull request #33 from public-ui/32-upgrade-kolibri

Upgrade KoliBri

package.json

@@ -23,8 +23,8 @@
 	"devDependencies": {
 		"@eslint/eslintrc": "3.2.0",
 		"@eslint/js": "9.15.0",
-		"@public-ui/components": "2.1.4",
-		"@public-ui/visual-tests": "2.1.4",
+		"@public-ui/components": "2.2.5",
+		"@public-ui/visual-tests": "2.2.5",
 		"@rollup/plugin-commonjs": "28.0.1",
 		"@rollup/plugin-node-resolve": "15.3.0",
 		"@rollup/plugin-typescript": "12.1.1",
@@ -43,7 +43,7 @@
 		"typescript": "5.6.3"
 	},
 	"peerDependencies": {
-		"@public-ui/components": "2.1.4"
+		"@public-ui/components": "2.2.5"
 	},
 	"exports": {
 		".": {

src/components/accordion.scss

@@ -6,10 +6,15 @@
 		font-family: var(--font-family);
 	}
 
+	.accordion__content {
+		padding-left: rem(36);
+		padding-bottom: rem(12);
+		padding-right: rem(8);
+	}
+
 	.kol-span-wc > span {
 		display: flex;
 		place-items: baseline center;
-		text-align: left;
 	}
 
 	:host > div > .kol-heading-wc button {
@@ -29,34 +34,15 @@
 		gap: 0.5em;
 	}
 
-	:host > div > .kol-heading-wc button .kol-icon {
-		color: var(--color-primary);
-		font-size: rem(calc(1 * 16));
-	}
-
-	:host > div {
-		width: 100%;
-		height: 100%;
-		display: grid;
-	}
-
-	:host > div div[class='header'],
-	:host > div[class*='open'] div[class='content'] {
-		margin: 0;
-	}
-
-	:host > div div[class='content'] {
-		padding-left: 2.25em;
-		padding-bottom: rem(12);
-		padding-right: rem(8);
-	}
-
 	button:focus {
 		outline: none;
 	}
 
 	:host > .accordion:focus-within {
 		@include focus-outline;
-		cursor: pointer;
+	}
+
+	.icon {
+		color: var(--color-primary);
 	}
 }

src/components/avatar.scss

@@ -4,4 +4,8 @@
 	:host {
 		font-family: var(--font-family);
 	}
+
+	.initials {
+		font-size: rem(32);
+	}
 }

src/components/button-link.scss

@@ -41,7 +41,7 @@
 		position: unset;
 	}
 
-	.access-key-hint {
+	.badge-text-hint {
 		background: var(--color-mute-variant);
 		border-radius: rem(3);
 		color: var(--color-text);

src/components/combobox.scss

@@ -0,0 +1,166 @@
+@use '../rem' as *;
+@use '../mixins/alert-wc' as *;
+@use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
+
+$option-height: rem(40);
+$visible-options: 5;
+
+@layer kol-theme-component {
+	:host {
+		font-family: var(--font-family);
+		@include kol-alert-theme;
+	}
+
+	.combobox {
+		display: block;
+		position: relative;
+
+		&__group {
+			display: inline-flex;
+			align-items: center;
+			width: 100%;
+			padding: 0 rem(8);
+		}
+
+		&__input {
+			flex-grow: 1;
+			border: none;
+			width: calc(100% - rem(40));
+			position: relative;
+
+			&::placeholder {
+				color: var(--color-subtle);
+			}
+
+			&:first-child {
+				padding-left: var(--spacing);
+			}
+
+			&:last-child {
+				padding-right: var(--spacing);
+			}
+		}
+
+		&__icon {
+			display: grid;
+			place-items: center;
+			padding-left: rem(8);
+			padding-right: rem(8);
+
+			&:focus {
+				outline: 0;
+			}
+		}
+
+		&__listbox {
+			border-style: solid;
+			border-width: rem(1);
+			border-radius: var(--border-radius);
+			border-color: var(--color-subtle);
+			overflow-y: auto;
+			overflow-x: hidden;
+			box-sizing: border-box;
+			width: 100%;
+			max-height: calc($option-height * $visible-options + rem(2));
+		}
+
+		&__item {
+			display: flex;
+			align-items: center;
+			min-height: $option-height;
+			line-height: 1;
+			padding: rem(10) rem(12);
+
+			&:focus {
+				background-color: var(--color-primary-variant);
+				color: var(--color-light);
+				outline: 0;
+			}
+		}
+	}
+
+	.kol-input {
+		gap: rem(4);
+	}
+
+	.kol-input .error:not(.hidden-error) {
+		order: 1;
+	}
+
+	.kol-input label {
+		order: 2;
+	}
+
+	.kol-input .input {
+		order: 3;
+		padding: 0;
+	}
+
+	.kol-input .counter {
+		order: 4;
+	}
+
+	.kol-input .hint {
+		order: 5;
+		@include kol-typography-hint;
+	}
+
+	input::placeholder {
+		color: var(--color-subtle);
+	}
+
+	.input {
+		background-color: var(--color-light);
+		border-color: var(--color-subtle);
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: rem(2);
+		padding: 0 rem(8);
+	}
+
+	.input > .kol-icon {
+		width: rem(16);
+	}
+
+	.input:is(.icon-left, .icon-right) {
+		padding-left: rem(16);
+		padding-right: rem(16);
+	}
+
+	.input:is(.icon-left, .icon-right) input {
+		padding-left: rem(8);
+		padding-right: rem(8);
+	}
+
+	.input > input:first-child {
+		padding-left: var(--spacing);
+	}
+
+	.input > input:last-child {
+		padding-right: var(--spacing);
+	}
+
+	:not(.disabled) .input:hover {
+		border-color: var(--color-primary);
+	}
+
+	.required label > span::after {
+		content: '*';
+		padding-left: 0.125em;
+	}
+
+	.kol-input.error:not(.hidden-error) {
+		@include input-error;
+	}
+
+	.input {
+		position: relative;
+	}
+
+	.kol-input.disabled .input {
+		background-color: var(--color-mute);
+		border-color: var(--color-mute-variant);
+		color: var(--color-text);
+	}
+}

src/components/details.scss

@@ -1,29 +1,41 @@
 @use '../rem' as *;
+@use '../mixins/indented-text' as *;
+@use '../mixins/focus-outline' as *;
 
 @layer kol-theme-component {
-	details > summary {
-		border-radius: calc(var(--border-radius) / 2);
+	.details {
 		font-family: var(--font-family);
-	}
 
-	details > summary > span {
-		border-bottom-color: var(--color-subtle);
-	}
+		&__heading {
+			border-radius: calc(var(--border-radius) / 2);
+		}
 
-	details > summary:focus > span,
-	details > summary:hover > span,
-	details[open] > summary > span {
-		border-bottom-color: var(--color-primary);
-	}
+		&__heading-button {
+			.kol-span-wc > span {
+				gap: 0;
+			}
+		}
 
-	details {
-		.content {
-			padding: rem(calc(0.25 * 16));
+		&__heading-button .span-label {
+			border-bottom-color: var(--color-subtle);
 		}
-	}
 
-	details .kol-indented-text-wc {
-		margin: rem(calc(0.25 * 16)) 0 0 rem(calc(0.65 * 16));
+		&__heading-button .button:not(:disabled):is(:hover, :focus) .span-label,
+		&.open &__heading-button .span-label {
+			border-bottom-color: var(--color-primary);
+		}
+
+		.button:not(:disabled):focus {
+			@include focus-outline;
+			outline-width: rem(2);
+			border-radius: calc(var(--border-radius) / 2);
+		}
+
+		&__content {
+			@include indented-text;
+			width: unset;
+			margin: rem(8) rem(4) rem(4) rem(14.4);
+		}
 	}
 
 	.kol-icon {

src/components/form.scss

@@ -0,0 +1,18 @@
+@use '../mixins/indented-text' as *;
+@use '../mixins/alert-wc' as *;
+@use '../mixins/link' as *;
+@use '../rem' as *;
+
+@layer kol-theme-component {
+	@include kol-alert-theme;
+	@include kol-link;
+
+	:host {
+		display: block;
+	}
+
+	.mandatory-fields-hint {
+		font-family: var(--font-family);
+		@include indented-text;
+	}
+}

src/components/indented-text.scss

@@ -1,15 +1,11 @@
-@use '../rem' as *;
+@use '../mixins/indented-text' as *;
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 	}
 
-	:host > div {
-		background-color: var(--color-light);
-		border-left: none;
-		box-shadow: rem(-2) rem(0) rem(0) var(--color-primary-variant);
-		padding: 0 rem(calc(0.5 * 16));
-		width: 100%;
+	kol-indented-text-wc > div {
+		@include indented-text;
 	}
 }