From 14a67b252defd77beac030c380e41558cc88356f Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 13 Dec 2024 09:21:36 +0100
Subject: [PATCH] feat(ui): introduce `WdsTabs` and use in builder - WF-127

---
 .../builder/settings/BuilderFieldsAlign.vue   | 61 +++++++---------
 .../builder/settings/BuilderFieldsColor.vue   | 66 +++++++----------
 .../settings/BuilderFieldsKeyValue.vue        | 34 ++++-----
 .../builder/settings/BuilderFieldsPadding.vue | 62 +++++++---------
 .../builder/settings/BuilderFieldsShadow.vue  | 62 +++++++---------
 .../builder/settings/BuilderFieldsWidth.vue   | 61 +++++++---------
 .../settings/BuilderSettingsVisibility.vue    | 73 +++++++++----------
 src/ui/src/builder/sharedStyles.css           | 28 -------
 src/ui/src/wds/WdsTab.vue                     | 48 ++++++++++++
 src/ui/src/wds/WdsTabs.vue                    | 39 ++++++++++
 tests/e2e/tests/stateAutocompletion.spec.ts   |  6 +-
 11 files changed, 266 insertions(+), 274 deletions(-)
 create mode 100644 src/ui/src/wds/WdsTab.vue
 create mode 100644 src/ui/src/wds/WdsTabs.vue

diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index e9aa7a53b..b95c1e42d 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -5,39 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -75,6 +47,7 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -86,6 +59,21 @@ const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
 type Mode = "pick" | "css" | "default";
 
+const tabs: WdsTabOptions<Mode>[] = [
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+];
+
 enum SubMode {
 	hleft = "start",
 	hcenter = "center",
@@ -231,6 +219,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -263,9 +255,6 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	margin-top: 4px;
-}
 .main {
 	margin-top: 4px;
 }
diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
index 926a7a325..998caea24 100644
--- a/src/ui/src/builder/settings/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -5,40 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
-
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<input
@@ -74,6 +45,24 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+
+type Mode = "pick" | "css" | "default";
+
+const tabs: WdsTabOptions<Mode>[] = [
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+];
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -83,8 +72,6 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: pickerEl,
 	css: freehandInputEl,
@@ -123,6 +110,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInput = (ev: Event) =>
@@ -144,9 +135,6 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	margin-top: 4px;
-}
 .main {
 	margin-top: 4px;
 }
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index b2d995799..506a3fe56 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -5,26 +5,12 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					:class="{ active: mode == 'assisted' }"
-					tabindex="0"
-					@click="setMode('assisted')"
-				>
-					Static List
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'freehand' }"
-					@click="setMode('freehand')"
-				>
-					JSON
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			class="BuilderFieldsOptions__tabs"
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<template v-if="mode == 'assisted'">
 			<div class="staticList">
@@ -91,6 +77,7 @@ import type { InstancePath } from "@/writerTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "../useComponentActions";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -115,6 +102,11 @@ const formAdd: Ref<{ key: string; value: string }> = ref({
 	value: "",
 });
 
+const tabs: WdsTabOptions<Mode>[] = [
+	{ label: "Static List", value: "assisted" },
+	{ label: "JSON", value: "freehand" },
+];
+
 const { getEvaluatedFields } = useEvaluator(wf);
 
 const evaluatedValue = computed<Record<string, string | number | null>>(
@@ -191,7 +183,7 @@ onMounted(async () => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
+.BuilderFieldsOptions__tabs {
 	margin-bottom: 8px;
 }
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index f7c7b73dd..70e29e215 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -5,39 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -146,6 +118,7 @@ import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -158,6 +131,21 @@ const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
 type Mode = "pick" | "css" | "default";
 
+const tabs: WdsTabOptions<Mode>[] = [
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+];
+
 enum SubMode {
 	all_sides = "all_sides",
 	xy_sides = "XY sides",
@@ -317,6 +305,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -393,10 +385,6 @@ onBeforeUnmount(() => {
 @import "../sharedStyles.css";
 @import "../ico.css";
 
-.chipStackContainer {
-	margin-top: 4px;
-}
-
 .main {
 	margin-top: 4px;
 }
diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
index 40262fbc3..c52e09363 100644
--- a/src/ui/src/builder/settings/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -5,40 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
-
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<div class="param">
@@ -143,6 +114,7 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -158,6 +130,21 @@ const paramColorEl: Ref<HTMLInputElement> = ref(null);
 
 type Mode = "pick" | "css" | "default";
 
+const tabs: WdsTabOptions<Mode>[] = [
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+];
+
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: paramOffsetXEl,
 	css: freehandInputEl,
@@ -198,6 +185,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInput = () => {
@@ -236,9 +227,6 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	margin-top: 4px;
-}
 .main {
 	margin-top: 4px;
 }
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 8dfc5a4c4..a9d099fb3 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -5,39 +5,11 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
-		</div>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -85,6 +57,7 @@ import injectionKeys from "../../injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -97,6 +70,21 @@ const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
 type Mode = "pick" | "css" | "default";
 
+const tabs: WdsTabOptions<Mode>[] = [
+	{
+		label: "Default",
+		value: "default",
+	},
+	{
+		label: "CSS",
+		value: "css",
+	},
+	{
+		label: "Pick",
+		value: "pick",
+	},
+];
+
 enum SubMode {
 	fixed = "fixed",
 	fit_content = "fit-content",
@@ -215,6 +203,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -257,9 +249,6 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	margin-top: 4px;
-}
 .main {
 	margin-top: 4px;
 }
diff --git a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
index bf00b221a..5eb6fcd32 100644
--- a/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsVisibility.vue
@@ -2,43 +2,7 @@
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsVisibility">
 		<BuilderSectionTitle icon="visibility" label="Visibility" />
 		<div class="main">
-			<div class="chipStack">
-				<div
-					class="chip"
-					:class="{
-						active:
-							typeof component.visible == 'undefined' ||
-							component.visible.expression === true,
-					}"
-					@click="() => setVisibleValue(component.id, true)"
-				>
-					Yes
-				</div>
-				<div
-					class="chip"
-					:class="{ active: component.visible?.expression === false }"
-					@click="() => setVisibleValue(component.id, false)"
-				>
-					No
-				</div>
-				<div
-					class="chip"
-					:class="{
-						active: component.visible?.expression === 'custom',
-					}"
-					@click="
-						() =>
-							setVisibleValue(
-								component.id,
-								'custom',
-								component.visible?.binding,
-								component.visible?.reversed,
-							)
-					"
-				>
-					Custom
-				</div>
-			</div>
+			<WdsTabs v-model="tab" :tabs="tabs" />
 			<WdsFieldWrapper
 				v-if="
 					typeof component.visible != 'undefined' &&
@@ -87,6 +51,38 @@ import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 import BuilderSectionTitle from "./BuilderSectionTitle.vue";
+import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+
+type Mode = "yes" | "no" | "custom";
+
+const tabs: WdsTabOptions<Mode>[] = [
+	{ label: "Yes", value: "yes" },
+	{ label: "No", value: "no" },
+	{ label: "Custom", value: "custom" },
+];
+
+const tab = computed<Mode>({
+	get() {
+		const visible = component.value.visible;
+		if (visible?.expression === "custom") return "custom";
+
+		return visible === undefined || visible.expression === true
+			? "yes"
+			: "no";
+	},
+	set(value: Mode) {
+		if (value === "custom") {
+			setVisibleValue(
+				component.value.id,
+				"custom",
+				component.value.visible?.binding,
+				component.value.visible?.reversed,
+			);
+		} else {
+			setVisibleValue(component.value.id, value === "yes");
+		}
+	},
+});
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -103,6 +99,9 @@ const hint =
 
 .main {
 	margin-top: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
 }
 
 .flexRow {
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index a257d7f4e..0c8d33133 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -118,31 +118,3 @@ code {
 	background-color: var(--builderSubtleSeparatorColor);
 	padding: 2px;
 }
-
-.chipStack {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 4px;
-}
-
-.chip {
-	font-size: 0.75rem;
-	border-radius: 16px;
-	padding: 8px 12px 8px 12px;
-	cursor: pointer;
-	outline: none;
-	background: var(--builderBackgroundColor);
-}
-
-.chip:focus,
-.chip.active:focus,
-.chip:hover,
-.chip.active:hover {
-	color: var(--builderBackgroundColor);
-	background: var(--builderActionOngoingColor);
-}
-
-.chip.active {
-	background: var(--builderSubtleSeparatorColor);
-}
diff --git a/src/ui/src/wds/WdsTab.vue b/src/ui/src/wds/WdsTab.vue
new file mode 100644
index 000000000..2dfd619f4
--- /dev/null
+++ b/src/ui/src/wds/WdsTab.vue
@@ -0,0 +1,48 @@
+<template>
+	<button
+		class="WdsTab"
+		:class="{ 'WdsTab--disabled': disabled, 'WdsTab--selected': selected }"
+		type="button"
+		@click="$emit('click')"
+	>
+		<slot />
+	</button>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	disabled: { type: Boolean },
+	selected: { type: Boolean },
+});
+
+defineEmits({
+	click: () => true,
+});
+</script>
+
+<style scoped>
+.WdsTab {
+	/* reset button */
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+
+	padding: 4px 20px 4px 20px;
+	gap: 10px;
+	border-radius: 8px;
+}
+
+/* TODO: use color tokens */
+
+.WdsTab:hover {
+	background-color: #f3f5ff;
+}
+
+.WdsTab--disabled {
+	color: #828282;
+}
+
+.WdsTab--selected {
+	background-color: #e4e9ff;
+}
+</style>
diff --git a/src/ui/src/wds/WdsTabs.vue b/src/ui/src/wds/WdsTabs.vue
new file mode 100644
index 000000000..8d4d3894e
--- /dev/null
+++ b/src/ui/src/wds/WdsTabs.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="WdsTabs">
+		<WdsTab
+			v-for="tab of tabs"
+			:key="tab.value"
+			:disabled="tab.disabled"
+			:selected="tab.value === selected"
+			@click="selected = tab.value"
+			>{{ tab.label }}</WdsTab
+		>
+	</div>
+</template>
+
+<script lang="ts">
+export interface WdsTabOptions<Value extends string = string> {
+	label: string;
+	value: Value;
+	disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { PropType } from "vue";
+import WdsTab from "./WdsTab.vue";
+
+defineProps({
+	tabs: { type: Array as PropType<WdsTabOptions[]>, required: true },
+});
+
+const selected = defineModel({ type: String });
+</script>
+
+<style scoped>
+.WdsTabs {
+	display: flex;
+	gap: 16px;
+	flex-wrap: wrap;
+}
+</style>
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index f51e140c4..5deab244e 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -71,7 +71,7 @@ test.describe("state autocompletion", () => {
 
 			await page.locator('div.CoreRadioInput.component > label').click();
 			await page
-				.locator(`${FIELD} button.chip:text-matches("Static List")`)
+				.locator(`${FIELD} button.WdsTab:text-matches("Static List")`)
 				.click();
 			await page
 				.locator(`${FIELD} .inputKey input`)
@@ -102,7 +102,7 @@ test.describe("state autocompletion", () => {
 
 			await page.locator('div.CoreRadioInput.component > label').click();
 			await page
-				.locator(`${FIELD} button.chip:text-matches("JSON")`)
+				.locator(`${FIELD} button.WdsTab:text-matches("JSON")`)
 				.click();
 			await page
 				.locator(`${FIELD} textarea`)
@@ -122,7 +122,7 @@ test.describe("state autocompletion", () => {
 			const FIELD = `.${type}[data-automation-key="${key}"]`; 
 			await page.locator(componentSelector).click();
 			await page
-				.locator(`${FIELD} button.chip:text-matches("CSS")`)
+				.locator(`${FIELD} button.WdsTab:text-matches("CSS")`)
 				.click();
 			await page
 				.locator(`${FIELD} .BuilderTemplateInput input`)