refactor: remove variant css class on button-wc host

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

@@ -62,8 +62,6 @@ export class KolButton implements ButtonProps, FocusableElement {
 					ref={this.catchRef}
 					class={{
 						button: true,
-						[this._variant as string]: this._variant !== 'custom',
-						[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
 					}}
 					_accessKey={this._accessKey}
 					_ariaControls={this._ariaControls}

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

@@ -3,7 +3,7 @@
 exports[`kol-button should render with _label="Label" _ariaDescription="Aria Description" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc normal">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button aria-describedby="nonce" class="button normal" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -22,7 +22,7 @@ exports[`kol-button should render with _label="Label" _ariaDescription="Aria Des
 exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc normal">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button normal" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -38,7 +38,7 @@ exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
 exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc normal">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button disabled normal" disabled="" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -54,7 +54,7 @@ exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
 exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc normal">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button normal" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -70,7 +70,7 @@ exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
 exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button danger kol-button-wc">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button danger" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -86,7 +86,7 @@ exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
 exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button ghost kol-button-wc">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button ghost" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -102,7 +102,7 @@ exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
 exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc normal">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button normal" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -118,7 +118,7 @@ exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
 exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc primary">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button primary" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -134,7 +134,7 @@ exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
 exports[`kol-button should render with _label="Label" _variant="secondary" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc secondary">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button secondary" type="button">
         <kol-span-wc _label="Label" class="button-inner">
@@ -150,7 +150,7 @@ exports[`kol-button should render with _label="Label" _variant="secondary" 1`] =
 exports[`kol-button should render with _label="Label" 1`] = `
 <kol-button class="kol-button">
   <template shadowrootmode="open">
-    <kol-button-wc class="button kol-button-wc normal">
+    <kol-button-wc class="button kol-button-wc">
       <!---->
       <button class="button normal" type="button">
         <kol-span-wc _label="Label" class="button-inner">

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

@@ -56,12 +56,11 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 					ref={this.catchRef}
 					class={{
 						button: true,
-						[this._variant as string]: this._variant !== 'custom',
-						[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
 					}}
 					_accessKey={this._accessKey}
 					_ariaCurrentValue={this._ariaCurrentValue}
 					_ariaDescription={this._ariaDescription}
+					_customClass={this._customClass}
 					_disabled={this._disabled}
 					_download={this._download}
 					_hideLabel={this._hideLabel}
@@ -74,6 +73,7 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 					_tabIndex={this._tabIndex}
 					_target={this._target}
 					_tooltipAlign={this._tooltipAlign}
+					_variant={this._variant}
 				>
 					<slot name="expert" slot="expert"></slot>
 				</KolLinkWcTag>

packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="bottom" class="button normal">
+    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="bottom" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
@@ -13,7 +13,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
 exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="left" class="button normal">
+    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="left" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
@@ -23,7 +23,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
 exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="button normal">
+    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
@@ -33,7 +33,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
 exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _hidelabel="" _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="button normal">
+    <kol-link-wc _hidelabel="" _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
@@ -43,7 +43,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
 exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="button normal">
+    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
@@ -53,7 +53,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
 exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="button normal">
+    <kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
@@ -63,7 +63,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
 exports[`kol-link-button should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = `
 <kol-link-button class="kol-link-button">
   <template shadowrootmode="open">
-    <kol-link-wc _download="download-file.zip" _href="" _label="Label" _role="button" _target="blank" _tooltipalign="right" class="button normal">
+    <kol-link-wc _download="download-file.zip" _href="" _label="Label" _role="button" _target="blank" _tooltipalign="right" _variant="normal" class="button">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>

packages/components/src/components/link/component.tsx

@@ -5,16 +5,18 @@ import type {
 	AriaDescriptionPropType,
 	AriaExpandedPropType,
 	AriaOwnsPropType,
+	ButtonVariantPropType,
+	CustomClassPropType,
 	DisabledPropType,
 	DownloadPropType,
 	FocusableElement,
 	HrefPropType,
 	KoliBriIconsProp,
 	LabelWithExpertSlotPropType,
-	LinkAPI,
 	LinkOnCallbacksPropType,
-	LinkStates,
 	LinkTargetPropType,
+	LinkWcAPI,
+	LinkWcStates,
 	ShortKeyPropType,
 	Stringified,
 	TooltipAlignPropType,
@@ -29,6 +31,8 @@ import {
 	validateAriaDescription,
 	validateAriaExpanded,
 	validateAriaOwns,
+	validateButtonVariant,
+	validateCustomClass,
 	validateDisabled,
 	validateDownload,
 	validateHideLabel,
@@ -59,7 +63,7 @@ import { validateAccessAndShortKey } from '../../schema/validators/access-and-sh
 	tag: 'kol-link-wc',
 	shadow: false,
 })
-export class KolLinkWc implements LinkAPI, FocusableElement {
+export class KolLinkWc implements LinkWcAPI, FocusableElement {
 	private anchorRef?: HTMLAnchorElement;
 	private unsubscribeOnLocationChange?: UnsubscribeFunction;
 
@@ -146,6 +150,9 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 						disabled: this.state._disabled === true,
 						'external-link': isExternal,
 						'hide-label': this.state._hideLabel === true,
+						[this.state._variant as string]: this.state._variant !== 'custom',
+						[this.state._customClass as string]:
+							this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
 					}}
 					{...this.state._on}
 					// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md
@@ -217,6 +224,11 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 	 */
 	@Prop() public _ariaOwns?: AriaOwnsPropType;
 
+	/**
+	 * Defines the custom class attribute if _variant="custom" is set.
+	 */
+	@Prop() public _customClass?: CustomClassPropType;
+
 	/**
 	 * Makes the element not focusable and ignore all events.
 	 */
@@ -279,7 +291,12 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 	 */
 	@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';
 
-	@State() public state: LinkStates = {
+	/**
+	 * Defines which variant should be used for presentation.
+	 */
+	@Prop() public _variant?: ButtonVariantPropType = 'normal';
+
+	@State() public state: LinkWcStates = {
 		_ariaCurrentValue: 'page',
 		_href: '', // ⚠ required
 		_icons: {},
@@ -311,6 +328,11 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 		validateAriaOwns(this, value);
 	}
 
+	@Watch('_customClass')
+	public validateCustomClass(value?: CustomClassPropType): void {
+		validateCustomClass(this, value);
+	}
+
 	@Watch('_disabled')
 	public validateDisabled(value?: DisabledPropType): void {
 		validateDisabled(this, value);
@@ -374,12 +396,18 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 		validateTooltipAlign(this, value);
 	}
 
+	@Watch('_variant')
+	public validateVariant(value?: ButtonVariantPropType): void {
+		validateButtonVariant(this, value);
+	}
+
 	public componentWillLoad(): void {
 		this.validateAccessKey(this._accessKey);
 		this.validateAriaCurrentValue(this._ariaCurrentValue);
 		this.validateAriaDescription(this._ariaDescription);
 		this.validateAriaExpanded(this._ariaExpanded);
 		this.validateAriaOwns(this._ariaOwns);
+		this.validateCustomClass(this._customClass);
 		this.validateDisabled(this._disabled);
 		this.validateDownload(this._download);
 		this.validateHideLabel(this._hideLabel);
@@ -392,6 +420,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 		this.validateTabIndex(this._tabIndex);
 		this.validateTarget(this._target);
 		this.validateTooltipAlign(this._tooltipAlign);
+		this.validateVariant(this._variant);
 		this.unsubscribeOnLocationChange = onLocationChange((location) => {
 			this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
 		});

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

@@ -5,7 +5,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a class="external-link" href="https://example.com" rel="noopener" target="self">
+      <a class="external-link normal" href="https://example.com" rel="noopener" target="self">
         <kol-span-wc _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>
@@ -22,7 +22,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a class="external-link" href="https://example.com" rel="noopener" target="self">
+      <a class="external-link normal" href="https://example.com" rel="noopener" target="self">
         <kol-span-wc _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>
@@ -39,7 +39,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a class="external-link" href="https://example.com" rel="noopener" target="self">
+      <a class="external-link normal" href="https://example.com" rel="noopener" target="self">
         <kol-span-wc _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>
@@ -56,7 +56,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a aria-label="Label (kol-open-link-in-tab)" class="external-link hide-label" href="https://example.com" rel="noopener" target="self">
+      <a aria-label="Label (kol-open-link-in-tab)" class="external-link hide-label normal" href="https://example.com" rel="noopener" target="self">
         <kol-span-wc _hidelabel="" _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>
@@ -73,7 +73,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a class="external-link" href="https://example.com" rel="noopener" target="self">
+      <a class="external-link normal" href="https://example.com" rel="noopener" target="self">
         <kol-span-wc _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>
@@ -90,7 +90,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a class="external-link" href="https://example.com" rel="noopener" target="self">
+      <a class="external-link normal" href="https://example.com" rel="noopener" target="self">
         <kol-span-wc _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>
@@ -107,7 +107,7 @@ exports[`kol-link should render with _label="Label" _href="" _download="download
   <template shadowrootmode="open">
     <kol-link-wc class="kol-link-wc">
       <!---->
-      <a class="external-link" download="download-file.zip" href="javascript:void(0);" rel="noopener" target="blank">
+      <a class="external-link normal" download="download-file.zip" href="javascript:void(0);" rel="noopener" target="blank">
         <kol-span-wc _label="Label">
           <slot name="expert" slot="expert"></slot>
         </kol-span-wc>

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

@@ -120,10 +120,7 @@ export class KolPopoverButton implements PopoverButtonProps {
 					_value={this._value}
 					_variant={this._variant}
 					data-testid="popover-button"
-					class={clsx('kol-popover-button__button', {
-						/* In V2, the `_variant` classnames for button are specified on the shadow. This has been fixed in V3. */
-						[this._variant as string]: this._variant !== 'custom',
-					})}
+					class={clsx('kol-popover-button__button')}
 					ref={(element) => (this.refButton = element)}
 				>
 					<slot name="expert" slot="expert"></slot>

packages/components/src/components/popover-button/test/__snapshots__/snapshot.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`kol-popover-button should render with _label="Click to toggle" 1`] = `
 <kol-popover-button>
   <template shadowrootmode="open">
     <div class="kol-popover-button">
-      <kol-button-wc _label="Click to toggle" _tooltipalign="top" _type="button" _variant="normal" class="kol-popover-button__button normal" data-testid="popover-button">
+      <kol-button-wc _label="Click to toggle" _tooltipalign="top" _type="button" _variant="normal" class="kol-popover-button__button" data-testid="popover-button">
         <slot name="expert" slot="expert"></slot>
       </kol-button-wc>
       <div class="kol-popover-button__popover" data-testid="popover-content" id="popover" popover="auto">