fix: remove class attribute from <Host> for Shadow DOM compliance across multiple components

Author: deleonio

packages/components/src/components/abbr/shadow.tsx

@@ -20,7 +20,7 @@ import { validateLabel } from '../../schema';
 export class KolAbbr implements AbbrAPI {
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-abbr">
+			<Host>
 				{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
 				<abbr tabIndex={this.state._label ? 0 : undefined}>
 					<slot />

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

@@ -86,7 +86,7 @@ export class KolDrawer implements DrawerAPI {
 	};
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-drawer">
+			<Host>
 				<dialog aria-label={this.state._label} class="kol-drawer__dialog" onCancel={handleCancelOverlay} ref={this.getRef}>
 					{this.renderDialogContent()}
 				</dialog>

packages/components/src/components/pagination/component.tsx

@@ -115,7 +115,7 @@ export class KolPaginationWc implements PaginationAPI {
 			});
 
 		return (
-			<Host class="kol-pagination">
+			<Host>
 				<span role="status" aria-live="polite" class="kol-pagination__entries">
 					{translate('kol-table-visible-range', {
 						placeholders: {

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

@@ -57,7 +57,7 @@ export class KolSelect implements SelectProps, FocusableElement {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-select">
+			<Host>
 				<KolSelectWcTag
 					ref={this.setSelectWcRef}
 					_accessKey={this._accessKey}

packages/components/src/components/spin/component.tsx

@@ -63,7 +63,7 @@ export class KolSpin extends BaseWebComponent<SpinApi> implements WebComponentIn
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-spin">
+			<Host>
 				<SpinFC
 					show={this.ctrl.getRenderProp('show')}
 					label={this.ctrl.getRenderProp('label')}

packages/components/src/components/table-stateful/shadow.tsx

@@ -576,7 +576,7 @@ export class KolTableStateful implements TableAPI {
 				) ?? [],
 		};
 		return (
-			<Host class="kol-table-stateful">
+			<Host>
 				{this.pageEndSlice > 0 && this.showPagination && paginationTop}
 				<KolTableStatelessWcTag
 					ref={this.catchRef}

packages/components/src/components/toaster/shadow.tsx

@@ -133,7 +133,7 @@ export class KolToastContainer implements ToasterAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-toast-container">
+			<Host>
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
 						_label={this.translateToastCloseAll}

packages/components/src/components/tooltip/component.tsx

@@ -188,7 +188,7 @@ export class KolTooltipWc implements TooltipAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-tooltip">
+			<Host>
 				<div class="kol-tooltip__floating" hidden={this.state._label.length === 0} ref={this.catchTooltipElement}>
 					<div class="kol-tooltip__arrow" ref={this.catchArrowElement} />
 					<SpanFC class="kol-tooltip__content" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />

packages/components/src/components/version/shadow.tsx

@@ -18,7 +18,7 @@ export class KolVersion implements VersionAPI {
 	private readonly translateVersion = translate('kol-version');
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-version">
+			<Host>
 				<KolBadgeTag
 					_color="#bec5c9"
 					_icons={{