update kolibri deps and lock

Refs: #6350

packages/components/src/components/a11y.scss

@@ -1,3 +1,5 @@
+@import '@shared/mixins';
+
 /*
  * This file contains all rules for accessibility.
  */
@@ -47,8 +49,7 @@
 	/* select, */
 	/* textarea, */
 	[role='button'],
-	button:not([role='link']),
-	.kol-input .input {
+	button:not([role='link']) {
 		min-height: var(--a11y-min-size);
 		min-width: var(--a11y-min-size);
 	}

packages/components/src/components/abbr/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {

packages/components/src/components/accordion/shadow.tsx

@@ -119,7 +119,7 @@ export class KolAccordion implements AccordionAPI, FocusableElement {
 	@Prop() public _on?: AccordionCallbacksPropType<boolean>;
 
 	/**
-	 * If set (to true) opens/expands the element, closes if not set (or set to false).
+	 * Opens/expands the element when truthy, closes/collapses when falsy.
 	 * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.
 	 */
 	@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;

packages/components/src/components/accordion/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../../functional-components/Collapsible/collapsible';
 

packages/components/src/components/alert/style.scss

@@ -1,11 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../@shared/kol-alert-mixin';
+
+@include kol-alert;
 
 @layer kol-component {
 	.kol-alert {
 		font-size: rem(16);
 	}
 }
-
-@include kol-alert-styles;

packages/components/src/components/avatar/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 
 @layer kol-component {

packages/components/src/components/badge/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {

packages/components/src/components/breadcrumb/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-breadcrumb {

packages/components/src/components/button-link/shadow.tsx

@@ -77,7 +77,7 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	}
 
 	/**
-	 * Defines the elements access key.
+	 * Defines which key combination can be used to trigger or focus the interactive element of the component.
 	 */
 	@Prop() public _accessKey?: AccessKeyPropType;
 

packages/components/src/components/button-link/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-link-mixin';
 
 @include kol-link-styles('kol-button');

packages/components/src/components/button/component.tsx

@@ -177,7 +177,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 	private readonly controller: AssociatedInputController;
 
 	/**
-	 * Defines the elements access key.
+	 * Defines which key combination can be used to trigger or focus the interactive element of the component.
 	 */
 	@Prop() public _accessKey?: AccessKeyPropType;
 

packages/components/src/components/button/shadow.tsx

@@ -79,7 +79,7 @@ export class KolButton implements ButtonProps, FocusableElement {
 	}
 
 	/**
-	 * Defines the elements access key.
+	 * Defines which key combination can be used to trigger or focus the interactive element of the component.
 	 */
 	@Prop() public _accessKey?: AccessKeyPropType;
 
@@ -151,7 +151,7 @@ export class KolButton implements ButtonProps, FocusableElement {
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
 	/**
-	 * Defines the elements short key.
+	 * Adds a visual short key hint to the component.
 	 */
 	@Prop() public _shortKey?: ShortKeyPropType;
 

packages/components/src/components/button/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-button-mixin';
 
 @include kol-button-styles('kol-button');

packages/components/src/components/card/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {

packages/components/src/components/combobox/shadow.tsx

@@ -430,7 +430,7 @@ export class KolCombobox implements ComboboxAPI {
 	@Prop() public _on?: InputTypeOnDefault;
 
 	/**
-	 * Suggestions the user can choose from.
+	 * Suggestions to provide for the input.
 	 */
 	@Prop() public _suggestions!: SuggestionsPropType;
 

packages/components/src/components/combobox/style.scss

@@ -1,6 +1,7 @@
+@import '../../styles/global';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../host-display-block';
+@import '../tooltip/style';
 
 @layer kol-component {
 	:host {
@@ -28,6 +29,10 @@
 
 		&__input {
 			flex-grow: 1;
+
+			&:focus {
+				outline: none;
+			}
 		}
 
 		&__icon {
@@ -59,4 +64,8 @@
 			}
 		}
 	}
+
+	.kol-input {
+		display: grid;
+	}
 }

packages/components/src/components/details/shadow.tsx

@@ -109,7 +109,7 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 	@Prop() public _on?: DetailsCallbacksPropType<boolean>;
 
 	/**
-	 * If set (to true) opens/expands the element, closes if not set (or set to false).
+	 * Opens/expands the element when truthy, closes/collapses when falsy.
 	 * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.
 	 */
 	@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;

packages/components/src/components/details/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../../functional-components/Collapsible/collapsible';
 

packages/components/src/components/drawer/drawer.e2e.ts

@@ -5,11 +5,10 @@ import { KolEvent } from '../../utils/events';
 test.describe('kol-drawer', () => {
 	test.describe('Callbacks', () => {
 		test(`should call 'onClose' callback when drawer is closed`, async ({ page }) => {
-			await page.setContent('<kol-drawer _label="Details" >Drawer content</kol-drawer>');
+			await page.setContent('<kol-drawer _label="Details" _open>Drawer content</kol-drawer>');
 			const kolDrawer = page.locator('kol-drawer');
 
 			const callbackPromise = kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
-				element._open = true; // see #7165
 				return new Promise<void>((resolve) => {
 					element._on = {
 						onClose: () => {
@@ -25,6 +24,31 @@ test.describe('kol-drawer', () => {
 		});
 	});
 
+	test.describe('_open property', () => {
+		test(`should open initially when _open property is true`, async ({ page }) => {
+			await page.setContent('<kol-drawer _label="Details" _open><div data-testid="drawer-content">Drawer content</div></kol-drawer>');
+			await expect(page.getByTestId('drawer-content')).toBeVisible();
+		});
+
+		test(`should open when _open property becomes true`, async ({ page }) => {
+			await page.setContent('<kol-drawer _label="Details"><div data-testid="drawer-content">Drawer content</div></kol-drawer>');
+			const kolDrawer = page.locator('kol-drawer');
+			await kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
+				element._open = true;
+			});
+			await expect(page.getByTestId('drawer-content')).toBeVisible();
+		});
+
+		test(`should close when _open property becomes false`, async ({ page }) => {
+			await page.setContent('<kol-drawer _label="Details" _open><div data-testid="drawer-content">Drawer content</div></kol-drawer>');
+			const kolDrawer = page.locator('kol-drawer');
+			await kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
+				element._open = false;
+			});
+			await expect(page.getByTestId('drawer-content')).not.toBeVisible();
+		});
+	});
+
 	test.describe('DOM events', () => {
 		test(`should emit 'close' when drawer is closed`, async ({ page }) => {
 			await page.setContent('<kol-drawer _label="Details" >Drawer content</kol-drawer>');

packages/components/src/components/drawer/shadow.tsx

@@ -65,7 +65,12 @@ export class KolDrawer implements DrawerAPI {
 		);
 	}
 
-	private getRef = (el: HTMLDialogElement | undefined) => (this.dialogElement = el as HTMLDialogElement);
+	private getRef = (el: HTMLDialogElement | undefined) => {
+		this.dialogElement = el as HTMLDialogElement;
+		setTimeout(() => {
+			void this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready
+		});
+	};
 	public render(): JSX.Element {
 		return (
 			<Host class="kol-drawer">
@@ -77,12 +82,12 @@ export class KolDrawer implements DrawerAPI {
 	}
 
 	/**
-	 * Specifies the default open state of the drawer.
+	 * Opens/expands the element when truthy, closes/collapses when falsy.
 	 */
 	@Prop() public _open?: OpenPropType;
 
 	/**
-	 * Specifies the orientation of the drawer.
+	 * Defines the visual orientation of the component.
 	 */
 	@Prop() public _align?: AlignPropType;
 
@@ -115,10 +120,22 @@ export class KolDrawer implements DrawerAPI {
 	}
 
 	@Watch('_open')
-	public async validateOpen(value?: OpenPropType): Promise<void> {
+	public validateOpen(value?: OpenPropType) {
 		if (typeof value === 'boolean') {
 			validateOpen(this, value);
-			value ? await this.open() : await this.close();
+
+			if (this.dialogElement) {
+				// handle property changes but not the initial validateOpen call
+				void this.openOrCloseBasedOnState();
+			}
+		}
+	}
+
+	private async openOrCloseBasedOnState() {
+		if (this.state._open) {
+			await this.open();
+		} else {
+			await this.close();
 		}
 	}
 
@@ -165,9 +182,9 @@ export class KolDrawer implements DrawerAPI {
 		this.dialogElement?.removeEventListener('close', this.handleClose.bind(this));
 	}
 
-	public async componentWillLoad(): Promise<void> {
+	public componentWillLoad() {
 		this.validateLabel(this._label);
-		await this.validateOpen(this._open);
+		this.validateOpen(this._open);
 		this.validateAlign(this._align);
 		this.validateOn(this._on);
 	}

packages/components/src/components/drawer/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-drawer {

packages/components/src/components/form/style.scss

@@ -1,11 +1,13 @@
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../../styles/global';
+@import '../host-display-block';
 @import '../@shared/kol-link-mixin';
+@import '../../styles/kol-alert-mixin';
 
 @layer kol-component {
 	@include kol-link-styles('kol-link');
-	@include kol-alert-styles;
+	@include kol-alert;
+
 	.kol-form {
 		font-size: rem(16);
 	}

packages/components/src/components/heading/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-headline {

packages/components/src/components/image/style.scss

@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-image {