Prepare necessary changes for Stencil upgrade (#8080)

Author: laske185

packages/components/src/functional-components/Collapsible/Collapsible.tsx

@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
 import type { FunctionalComponent as FC } from '@stencil/core';
+import { h } from '@stencil/core';
 import type { JSXBase } from '@stencil/core/internal';
 import clsx from 'clsx';
 import { KolButtonWcTag } from '../../core/component-names';
-import type { HeadingLevel, IconsPropType } from '../../schema';
+import type { EventValueOrEventCallback, HeadingLevel, IconsPropType, StencilUnknown } from '../../schema';
 import KolHeadingFc from '../Heading';
 
 type ClassType =
@@ -12,12 +12,13 @@ type ClassType =
 			[className: string]: boolean;
 	  };
 
-export type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
+export type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id' | 'onClick'> & {
 	id: string;
 	open?: boolean;
 	disabled?: boolean;
 	level?: HeadingLevel;
 	label: string;
+	onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>;
 
 	HeadingProps?: {
 		ref?: ((elm?: HTMLElement | undefined) => void) | undefined;

packages/components/src/functional-components/inputs/_types/index.ts

@@ -1,4 +1,9 @@
-export type DefaultInputProps<T> = Omit<T, 'title' | 'autoCapitalize' | 'autoCorrect' | 'spellcheck'> & {
+export type DefaultInputProps<T> = Omit<
+	{
+		[K in keyof T as K extends `aria${string}` ? never : K]: T[K]; // `aria${string}` is defined in the Stencil HTML types and colliding with our props, hence we remove it.
+	},
+	'title' | 'autoCapitalize' | 'autoCorrect' | 'spellcheck'
+> & {
 	id: string;
 	ariaDescribedBy?: string[];
 	hideLabel?: boolean;

packages/components/src/global/script.ts

@@ -3,27 +3,29 @@ import { getThemeDetails, setThemeStyle } from 'adopted-style-sheets';
 import { Log } from '../schema';
 import { setMode } from '@stencil/core';
 
-setMode((elm) => {
-	try {
-		if (elm.shadowRoot instanceof ShadowRoot) {
-			setThemeStyle(elm, getThemeDetails(elm));
+export default () => {
+	setMode((elm) => {
+		try {
+			if (elm.shadowRoot instanceof ShadowRoot) {
+				setThemeStyle(elm, getThemeDetails(elm));
+			}
+		} catch (error) {
+			/**
+			 * Try is needed for SSR.
+			 * - no HTMLElement is available
+			 * - no ShadowRoot is available
+			 */
 		}
-	} catch (error) {
-		/**
-		 * Try is needed for SSR.
-		 * - no HTMLElement is available
-		 * - no ShadowRoot is available
-		 */
-	}
-	return 'default';
-});
-
-import('./devtools')
-	.then((devTools) => {
-		if (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {
-			devTools.initialize();
-		}
-	})
-	.catch((error) => {
-		Log.error(error);
+		return 'default';
 	});
+
+	import('./devtools')
+		.then((devTools) => {
+			if (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {
+				devTools.initialize();
+			}
+		})
+		.catch((error) => {
+			Log.error(error);
+		});
+};

packages/components/src/styles/_global.scss

@@ -1,5 +1,6 @@
 @use '../components/a11y' as *;
 @use '../components/preset' as *;
+@use '../components/@shared/mixins' as *;
 
 @layer kol-global {
 	:host {