chore: resolves conflicts

apps/docs/content/_data/components.json

@@ -118,8 +118,14 @@
 	},
 	{
 		"title": "Tooltip",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/tooltip/README.md"
+		"description": "A Tooltips provides a short description of a page element or control that become visible when the target is hovered over or focussed on.",
+		"variations": "./libs/components/src/lib/tooltip/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/tooltip/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/tooltip/README.md",
+		"accessibility": "./libs/components/src/lib/tooltip/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/tooltip/USE-CASES.md",
+		"hideUseCases": "true"
 	},
 	{
 		"title": "Progress",
@@ -316,8 +322,14 @@
 	},
 	{
 		"title": "Toggletip",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/toggletip/README.md"
+		"description": "A Toggletip is a type of Tooltip that is opened when clicking or tapping on the trigger button.",
+		"variations": "./libs/components/src/lib/toggletip/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/toggletip/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/toggletip/README.md",
+		"accessibility": "./libs/components/src/lib/toggletip/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/toggletip/USE-CASES.md",
+		"hideUseCases": "true"
 	},
 	{
 		"title": "Time Picker",

libs/components/src/lib/accordion-item/accordion-item.ts

@@ -1,6 +1,6 @@
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
-import { applyMixins } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Size } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 

libs/components/src/lib/alert/alert.ts

@@ -1,8 +1,8 @@
-import { applyMixins } from '@microsoft/fast-foundation';
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
 import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { handleEscapeKeyAndStopPropogation } from '../../shared/dialog/index';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 

libs/components/src/lib/audio-player/audio-player.ts

@@ -1,8 +1,8 @@
 /* eslint-disable max-len */
-import { applyMixins } from '@microsoft/fast-foundation';
 import { attr, Observable, type ValueConverter } from '@microsoft/fast-element';
 import type { Connotation } from '../enums';
 import { MediaSkipBy } from '../enums';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Localized } from '../../shared/patterns';
 import type { Slider } from '../slider/slider';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';

libs/components/src/lib/badge/badge.ts

@@ -1,6 +1,6 @@
-import { applyMixins } from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Appearance, Connotation, Shape } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 

libs/components/src/lib/banner/banner.ts

@@ -1,5 +1,5 @@
-import { applyMixins } from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';

libs/components/src/lib/breadcrumb-item/breadcrumb-item.ts

@@ -1,7 +1,7 @@
 import { attr, observable } from '@microsoft/fast-element';
-import { applyMixins } from '@microsoft/fast-foundation';
 import { Anchor } from '../../shared/foundation/anchor/anchor';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 
 /**
  * @public

libs/components/src/lib/button/button.spec.ts

@@ -202,17 +202,35 @@ describe('vwc-button', () => {
 	});
 
 	describe('icon-only', () => {
-		it('sets correct internal icon-only style', async () => {
-			const getControlIconOnly = () =>
-				element.shadowRoot?.querySelector('.control.icon-only');
-			const controlIconOnlyBefore = getControlIconOnly();
+		it('should sets correct internal icon-only style when icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
 
 			element.icon = 'home';
+			element.label = undefined;
 			await elementUpdated(element);
 
-			const controlIconOnlyAfter = getControlIconOnly();
-			expect(controlIconOnlyBefore).toBeNull();
-			expect(controlIconOnlyAfter).toBeInstanceOf(Element);
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
+
+			element.label = 'button';
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+		});
+
+		it('should remove icon-only when drop-down-indicator is added, icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
+
+			element.icon = 'home';
+			element.label = undefined;
+			element.dropdownIndicator = true;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+
+			element.dropdownIndicator = false;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
 		});
 
 		it('should set icon-only class if slot name="icon" is slotted', async () => {
@@ -228,6 +246,24 @@ describe('vwc-button', () => {
 				getControlElement(element).classList.contains('icon-only')
 			).toEqual(true);
 		});
+
+		it('should add icon-only when drop-down-indicator is added, slotted icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
+
+			const slottedElement = document.createElement('span');
+			slottedElement.slot = 'icon';
+			element.appendChild(slottedElement);
+			element.label = undefined;
+			element.dropdownIndicator = true;
+
+			await elementUpdated(element);
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+
+			element.dropdownIndicator = false;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
+		});
 	});
 
 	describe.each([

libs/components/src/lib/button/button.template.ts

@@ -33,6 +33,7 @@ const getClasses = ({
 	iconSlottedContent,
 	ariaExpanded,
 	active,
+	dropdownIndicator,
 }: Button) =>
 	classNames(
 		'control',
@@ -43,7 +44,10 @@ const getClasses = ({
 		],
 		[`shape-${shape}`, Boolean(shape)],
 		[`size-${size}`, Boolean(size)],
-		['icon-only', !label && !!(icon || iconSlottedContent?.length)],
+		[
+			'icon-only',
+			!label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator,
+		],
 		['icon-trailing', iconTrailing],
 		['stacked', Boolean(stacked)],
 		['active', ariaExpanded === 'true' || active]

libs/components/src/lib/button/ui.test.ts

@@ -201,6 +201,11 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		<vwc-button style="width: 200px" appearance="filled" dropdown-indicator label="wide"></vwc-button>
 		<vwc-button style="width: 100px" appearance="filled" dropdown-indicator label="too small for label"></vwc-button>
 		<vwc-button appearance="filled" dropdown-indicator icon="user-line"></vwc-button>
+	</div>
+		<div style="margin: 5px;">
+		<vwc-button style="width: 200px" appearance="filled" dropdown-indicator shape="pill" label="wide"></vwc-button>
+		<vwc-button style="width: 100px" appearance="filled" dropdown-indicator shape="pill" label="too small for label"></vwc-button>
+		<vwc-button appearance="filled" dropdown-indicator shape="pill" icon="user-line"></vwc-button>
 	</div>
 	<div style="margin: 5px;">
 		<vwc-button appearance="filled" dropdown-indicator label="expanded" aria-expanded="true"></vwc-button>

libs/components/src/lib/combobox/combobox.form-associated.ts

@@ -0,0 +1,15 @@
+import { Listbox } from '../../shared/foundation/listbox/listbox';
+import { FormAssociated } from '../../shared/foundation/form-associated/form-associated';
+
+class _Combobox extends Listbox {}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface _Combobox extends FormAssociated {}
+
+/**
+ * A form-associated base class for the {@link (Combobox:class)} component.
+ *
+ * @internal
+ */
+export class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+	proxy = document.createElement('input');
+}

libs/components/src/lib/combobox/combobox.options.ts

@@ -0,0 +1,17 @@
+/**
+ * Autocomplete values for combobox.
+ * @public
+ */
+export const ComboboxAutocomplete = {
+	inline: 'inline',
+	list: 'list',
+	both: 'both',
+	none: 'none',
+} as const;
+
+/**
+ * Autocomplete type for combobox.
+ * @public
+ */
+export type ComboboxAutocomplete =
+	typeof ComboboxAutocomplete[keyof typeof ComboboxAutocomplete];