Merge branch 'release/2' into 7487-fix-drawer-slot-style

Author: anicyne

package.json

@@ -13,7 +13,6 @@
 		"prettier": "3.5.3",
 		"rimraf": "6.0.1",
 		"ts-node": "10.9.2",
-		"ts-prune": "0.10.3",
 		"typescript": "5.8.2"
 	},
 	"engines": {
@@ -29,7 +28,6 @@
 		"lint": "pnpm -r lint",
 		"lint-staged": "lint-staged",
 		"unused": "pnpm -r unused",
-		"ts-prune": "git clean -f -d -X packages/adapters/**/src && pnpm -r exec npx ts-prune src -e",
 		"ncu:major": "ncu && pnpm -r exec ncu",
 		"ncu:minor": "ncu -t minor -u && pnpm -r exec ncu -t minor -u -x @types/react,@stencil/core,@unocss/*",
 		"ncu:patch": "ncu -t patch -u && pnpm -r exec ncu -t patch -u -x @types/react",

packages/.ts-prunerc.js

@@ -15,7 +15,6 @@ type States = Generic.Element.Members<RequiredStates, OptionalStates>;
 // @Component({
 //   tag: 'kol-all',
 // })
-// ts-prune-ignore-next
 export class KolAll implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
 	@State() public state: States = {};
 

packages/components/src/components/@else/all/component.tsx

@@ -10,7 +10,6 @@ import { h, Host, State } from '@stencil/core';
 // 	},
 // 	shadow: true,
 // })
-// ts-prune-ignore-next
 export class KolCounter {
 	@State() public state = {
 		_count: 0,

packages/components/src/components/@else/counter/component.tsx

@@ -31,4 +31,14 @@
 	.entry-item {
 		flex-grow: 1;
 	}
+
+	.entry {
+		.kol-span-wc {
+			place-items: start;
+		}
+
+		.button {
+			text-align: left;
+		}
+	}
 }

packages/components/src/components/nav/style.scss

@@ -50,7 +50,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 	@Method()
 	// eslint-disable-next-line @typescript-eslint/require-await
 	public async getValue(): Promise<StencilUnknown | undefined> {
-		return this.state._value;
+		return this._value;
 	}
 
 	@Method()
@@ -80,9 +80,14 @@ export class KolSingleSelect implements SingleSelectAPI {
 		}
 	};
 
+	/**
+	 * If there are options and the current input value doesn't match any option's label,
+	 * resets the input value to match the label of the currently selected option.
+	 * Closes the dropdown and resets the opened state.
+	 */
 	private onBlur() {
 		if (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {
-			this._inputValue = this.state._options.find((option) => (option as Option<string>).value === this.state._value)?.label as string;
+			this._inputValue = this.state._options.find((option) => (option as Option<string>).value === this._value)?.label as string;
 			this._filteredOptions = [...this.state._options];
 		}
 		this._isOpen = false;
@@ -110,7 +115,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 		this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
 		this._filteredOptions = [...this.state._options];
 
-		this.controller.setFormAssociatedValue(this.state._value);
+		this.controller.setFormAssociatedValue(this._value);
 	}
 
 	private onInput(event: Event) {
@@ -281,7 +286,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 												}}
 												tabIndex={-1}
 												role="option"
-												aria-selected={this.state._value === (option as Option<string>).value ? 'true' : undefined}
+												aria-selected={this._value === (option as Option<string>).value ? 'true' : undefined}
 												onClick={(event: Event) => {
 													this.selectOption(option as Option<string>);
 													this.refInput?.focus();
@@ -313,7 +318,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 													name="options"
 													id={`option-radio-${index}`}
 													value={(option as Option<string>).value}
-													checked={this.state._value === (option as Option<string>).value || index === this._focusedOptionIndex}
+													checked={this._value === (option as Option<string>).value || index === this._focusedOptionIndex}
 												/>
 
 												<label htmlFor={`option-radio-${index}`} class="radio-label">
@@ -571,7 +576,6 @@ export class KolSingleSelect implements SingleSelectAPI {
 		_id: `id-${nonce()}`,
 		_label: '', // ⚠ required
 		_options: [],
-		_value: '',
 		_hideClearButton: false,
 	};
 

packages/components/src/components/single-select/shadow.tsx

@@ -38,7 +38,7 @@ export class KolToolbar implements ToolbarAPI {
 		};
 
 		return '_href' in element ? (
-			<KolLinkWcTag {...element} {...props} ref={catchRef}></KolLinkWcTag>
+			<KolLinkWcTag {...element} {...props} ref={catchRef} _role="button"></KolLinkWcTag>
 		) : (
 			<KolButtonWcTag {...element} {...props} ref={catchRef}></KolButtonWcTag>
 		);

packages/components/src/components/toolbar/shadow.tsx

@@ -1,6 +1,7 @@
 @use '../@shared/mixins' as *;
 @use '../style' as *;
 @use '../tooltip/style.scss' as *;
+@use '../button' as *;
 
 @layer kol-component {
 	.toolbar {

packages/components/src/components/toolbar/style.scss

@@ -5,7 +5,7 @@ exports[`kol-toolbar should render with _label="Text" _items=[{"_label":"Button"
   <template shadowrootmode="open">
     <div aria-label="Text" class="toolbar" role="toolbar">
       <kol-button-wc _label="Button" _tabindex="0" class="button kol-toolbar-item normal"></kol-button-wc>
-      <kol-link-wc _href="#" _label="Link" _tabindex="-1" class="button kol-toolbar-item normal"></kol-link-wc>
+      <kol-link-wc _href="#" _label="Link" _role="button" _tabindex="-1" class="button kol-toolbar-item normal"></kol-link-wc>
     </div>
   </template>
 </kol-toolbar>

packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap

@@ -31,7 +31,6 @@ type RGBA = [number, number, number, number];
 // const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);
 
 // https://24ways.org/2010/calculating-color-contrast/
-// ts-prune-ignore-next
 export const getContrastYIQ = (r: number, g: number, b: number): number => {
 	const yiq = (r * 299 + g * 587 + b * 114) / 1000;
 	return yiq >= 128 ? -1 : 1;
@@ -46,7 +45,6 @@ export type ColorContrast<T> = ColorPair<T> & {
 	contrast: number;
 };
 
-// ts-prune-ignore-next
 export const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {
 	const color: RGB = [
 		Math.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),
@@ -68,7 +66,6 @@ export const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: num
 
 const cache: Map<unknown, ColorContrast<RGB>> = new Map();
 
-// ts-prune-ignore-next
 export const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {
 	if (cache.has(baseColor)) {
 		return cache.get(baseColor) as ColorContrast<RGB>;