@arbor-education/design-system.components 0.21.1 → 0.23.0

package/src/components/combobox/Combobox.stories.tsx

@@ -114,6 +114,17 @@ The component does NOT debounce; add your own debounce inside \`onSearch\`.
 
 ---
 
+### Tag focus recovery
+
+When \`selectedValueDisplay="tags"\`, selected chips are rendered through the shared
+\`TagList\` interaction model. Removing the final chip returns focus to the natural
+home control for that trigger:
+
+- inline trigger: back to the combobox input
+- button trigger: back to the trigger button
+
+---
+
 ### Grouped options
 
 Options with the same \`group\` string are rendered under a shared group heading.
@@ -394,7 +405,7 @@ export const SingleSelect = withDescription(
 
 // 4. MultiSelect
 export const MultiSelect = withDescription(
-  'Set `multiple` to allow multiple selections — each selected value is shown as a removable tag chip. Press Backspace to remove the last tag.',
+  'Set `multiple` to allow multiple selections — each selected value is shown as a removable tag chip. Press Backspace to remove the last tag. When the final chip is removed, focus returns to the inline combobox input.',
   {
     args: {
       options: comboboxPeopleOptions,
@@ -591,7 +602,7 @@ export const ButtonTriggerSingleSelect = withDescription(
 
 // 13. ButtonTriggerMultiSelect
 export const ButtonTriggerMultiSelect = withDescription(
-  'Button trigger with `multiple` enabled. Use `showSelectionCountBadge` to show a badge with the number of selected items — useful when the trigger label should not grow in size.',
+  'Button trigger with `multiple` enabled. Use `showSelectionCountBadge` to show a badge with the number of selected items — useful when the trigger label should not grow in size. When the trigger is showing tag chips, removing the final chip returns focus to the button trigger.',
   {
     args: {
       options: comboboxPeopleOptions,
@@ -610,7 +621,59 @@ export const ButtonTriggerMultiSelect = withDescription(
   },
 );
 
-// 14. ButtonTriggerPlainTextValue
+// 14. FocusRecovery
+export const FocusRecovery = withDescription(
+  'A focused verification story for chip removal. Each example starts with one selected value so you can remove the final chip and confirm focus returns to the natural home control: the input for the inline trigger and the button for the button trigger.',
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          code: `
+<div style={{ display: 'grid', gap: 16 }}>
+  <Combobox
+    options={teacherOptions}
+    multiple
+    defaultValue={['alice-johnson']}
+    placeholder="Select teachers..."
+  />
+
+  <Combobox
+    options={teacherOptions}
+    triggerVariant="button"
+    multiple
+    defaultValue={['alice-johnson']}
+    placeholder="Filter by teacher"
+    showSelectionCountBadge
+  />
+</div>
+          `.trim(),
+        },
+      },
+    },
+    render: () => (
+      <div style={{ display: 'grid', gap: 16 }}>
+        <Combobox
+          options={comboboxPeopleOptions}
+          multiple
+          defaultValue={['alice-johnson']}
+          placeholder="Select teachers..."
+        />
+
+        <Combobox
+          options={comboboxPeopleOptions}
+          triggerVariant="button"
+          multiple
+          defaultValue={['alice-johnson']}
+          placeholder="Filter by teacher"
+          showSelectionCountBadge
+        />
+      </div>
+    ),
+  },
+);
+
+// 15. ButtonTriggerPlainTextValue
 export const ButtonTriggerPlainTextValue = withDescription(
   '`selectedValueDisplay="text"` shows the selected value(s) as a comma-separated text string instead of tag chips — useful when space is limited inside a button trigger.',
   {
@@ -631,7 +694,118 @@ export const ButtonTriggerPlainTextValue = withDescription(
   },
 );
 
-// 15. HiddenTrigger
+// 16. ButtonTriggerOverflow
+export const ButtonTriggerOverflow = withDescription(
+  'A dedicated single-line tag overflow example for the button trigger. The trigger width is constrained and multiple default selections are provided so the compact tag display stays on one line, shows the built-in ellipsis, and keeps the selected-count badge visible.',
+  {
+    args: {
+      options: comboboxPeopleOptions,
+      triggerVariant: 'button',
+      multiple: true,
+      defaultValue: ['alice-johnson', 'bob-smith', 'carol-white', 'daniel-clark'],
+      placeholder: 'Filter by teacher',
+      showSelectionCountBadge: true,
+    },
+    decorators: [
+      Story => (
+        <div style={{ width: 260 }}>
+          <Story />
+        </div>
+      ),
+    ],
+    parameters: {
+      docs: {
+        source: {
+          code: `
+<div style={{ width: 260 }}>
+  <Combobox
+    options={teacherOptions}
+    triggerVariant="button"
+    multiple
+    defaultValue={['alice-johnson', 'bob-smith', 'carol-white', 'daniel-clark']}
+    placeholder="Filter by teacher"
+    showSelectionCountBadge
+  />
+</div>
+          `.trim(),
+        },
+      },
+    },
+  },
+);
+
+// 17. ButtonTriggerSingleLineTagsWithCountBadge
+export const ButtonTriggerSingleLineTagsWithCountBadge = withDescription(
+  'A focused badge-in-trigger example for button-trigger multi-select. The trigger width is constrained so selected tags remain on a single line while the selected-count badge stays visible alongside the ellipsis.',
+  {
+    args: {
+      options: comboboxPeopleOptions,
+      triggerVariant: 'button',
+      multiple: true,
+      defaultValue: ['alice-johnson', 'bob-smith', 'carol-white', 'daniel-clark'],
+      placeholder: 'Filter by teacher',
+      showSelectionCountBadge: true,
+    },
+    decorators: [
+      Story => (
+        <div style={{ width: 260 }}>
+          <Story />
+        </div>
+      ),
+    ],
+    parameters: {
+      docs: {
+        source: {
+          code: `
+<div style={{ width: 260 }}>
+  <Combobox
+    options={teacherOptions}
+    triggerVariant="button"
+    multiple
+    defaultValue={['alice-johnson', 'bob-smith', 'carol-white', 'daniel-clark']}
+    placeholder="Filter by teacher"
+    showSelectionCountBadge
+  />
+</div>
+          `.trim(),
+        },
+      },
+    },
+  },
+);
+
+// 18. WithClearAll
+export const WithClearAll = withDescription(
+  'Shows the existing clear-all affordance below the combobox. This is useful when users need a single action to reset multiple selected values without removing chips one by one. Removing chips individually still follows the shared `TagList` focus recovery behavior.',
+  {
+    args: {
+      options: comboboxPeopleOptions,
+      multiple: true,
+      defaultValue: ['alice-johnson', 'bob-smith', 'carol-white'],
+      placeholder: 'Select teachers...',
+      showClearAll: true,
+      clearAllLabel: 'Clear all',
+    },
+    parameters: {
+      docs: {
+        source: {
+          code: `
+<Combobox
+  options={teacherOptions}
+  multiple
+  defaultValue={['alice-johnson', 'bob-smith', 'carol-white']}
+  placeholder="Select teachers..."
+  showClearAll
+  clearAllLabel="Clear all"
+/>
+          `.trim(),
+        },
+      },
+    },
+  },
+);
+
+// 18. HiddenTrigger
 export const HiddenTrigger = withDescription(
   'Set `showDropdownTrigger={false}` to hide the chevron button at the end of the input. The dropdown can still be opened by typing or focusing the field.',
   {
@@ -650,7 +824,7 @@ export const HiddenTrigger = withDescription(
   },
 );
 
-// 16. ManualOpenOnFocus
+// 18. ManualOpenOnFocus
 export const ManualOpenOnFocus = withDescription(
   'Set `dropdownOnFocus={false}` to prevent the dropdown from opening automatically on focus — the user must start typing or click the chevron to open it.',
   {
@@ -689,7 +863,7 @@ function AsyncSearchTemplate() {
   return <Combobox options={options} onSearch={handleSearch} placeholder="Search staff..." />;
 }
 
-// 17. AsyncSearch
+// 19. AsyncSearch
 export const AsyncSearch = withDescription(
   'Pass `onSearch` to take control of filtering. The component disables all client-side matching — you update the `options` array yourself (e.g. via an API call). This example simulates a 300 ms network delay.',
   {
@@ -747,7 +921,7 @@ function CreateNewTemplate() {
   );
 }
 
-// 18. CreateNew
+// 20. CreateNew
 export const CreateNew = withDescription(
   'Set `allowCreate` to show a "Create X" option when the typed query does not match any existing option. The `onCreateNew` callback receives the typed string and must return a new `ComboboxOption`.',
   {
@@ -806,7 +980,7 @@ function SingleSelectCreateTemplate() {
   );
 }
 
-// 19. SingleSelectCreate
+// 21. SingleSelectCreate
 export const SingleSelectCreate = withDescription(
   '`allowCreate` works in single-select mode too — useful for fields like "Add a subject" where the user can either pick from existing values or type a new one.',
   {
@@ -843,7 +1017,7 @@ function SingleSelectCreateExample() {
   },
 );
 
-// 20. CustomOptionLayout
+// 22. CustomOptionLayout
 export const CustomOptionLayout = withDescription(
   'Use `renderOption` to fully customise how each option is rendered inside the dropdown — useful for adding avatars, icons, or additional metadata alongside the label.',
   {
@@ -880,7 +1054,7 @@ export const CustomOptionLayout = withDescription(
   },
 );
 
-// 21. CustomTagLabel
+// 23. CustomTagLabel
 export const CustomTagLabel = withDescription(
   'Use `getTagLabel` to customise the label shown inside a selected tag chip — useful when the full option label is too long to display comfortably in the trigger.',
   {
@@ -907,7 +1081,7 @@ export const CustomTagLabel = withDescription(
   },
 );
 
-// 22. WithDisabledOptions
+// 24. WithDisabledOptions
 export const WithDisabledOptions = withDescription(
   'Individual options can be disabled by setting `disabled: true` on the option object. Disabled options are visible but cannot be selected.',
   {
@@ -935,7 +1109,7 @@ const options = [
   },
 );
 
-// 23. ScrollableLongList
+// 25. ScrollableLongList
 export const ScrollableLongList = withDescription(
   'The dropdown scrolls automatically when there are many options. Here we render 50 generated options to demonstrate the scrollable list and confirm search still works at scale.',
   {

package/src/components/combobox/Combobox.test.tsx

@@ -223,6 +223,19 @@ describe('Combobox', () => {
     expect(badge).toHaveTextContent('2');
   });
 
+  test('button trigger renders selected chips through TagList', () => {
+    const { container } = render(
+      <Combobox
+        options={people}
+        triggerVariant="button"
+        multiple
+        defaultValue={['alice', 'bob']}
+      />,
+    );
+
+    expect(container.querySelector('.ds-combobox__button-tags-viewport .ds-tag-list')).toBeInTheDocument();
+  });
+
   test('button trigger does not show ellipsis when all selected chips fit', () => {
     const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect(this: HTMLElement) {
       let width = 0;
@@ -376,6 +389,14 @@ describe('Combobox', () => {
     expect(onValueChange).toHaveBeenLastCalledWith(['alice', 'bob']);
   });
 
+  test('input trigger renders selected chips through TagList', () => {
+    const { container } = render(
+      <Combobox options={people} multiple defaultValue={['alice', 'bob']} />,
+    );
+
+    expect(container.querySelector('.ds-combobox__chips-and-input .ds-tag-list')).toBeInTheDocument();
+  });
+
   test('Ctrl+A selects all chips when input is focused', async () => {
     const user = userEvent.setup();
     render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
@@ -470,6 +491,38 @@ describe('Combobox', () => {
     expect(onValueChange).toHaveBeenCalledWith(['bob']);
   });
 
+  test('removing the last chip in the input trigger returns focus to the combobox input', async () => {
+    render(
+      <Combobox options={people} multiple defaultValue={['alice']} placeholder="Search people..." />,
+    );
+
+    const aliceTag = screen.getByText('Alice Johnson').closest('.ds-tag') as HTMLElement;
+    const removeBtn = within(aliceTag).getByRole('button', { name: 'Remove Alice Johnson' });
+
+    await userEvent.click(removeBtn);
+
+    expect(screen.getByRole('combobox')).toHaveFocus();
+  });
+
+  test('removing the last chip in the button trigger returns focus to the parent trigger', async () => {
+    const { container } = render(
+      <Combobox
+        options={people}
+        triggerVariant="button"
+        multiple
+        defaultValue={['alice']}
+        placeholder="Filter by teacher"
+      />,
+    );
+
+    const visibleTagViewport = container.querySelector('.ds-combobox__button-tags-viewport') as HTMLElement;
+    const removeBtn = within(visibleTagViewport).getByRole('button', { name: 'Remove Alice Johnson' });
+
+    await userEvent.click(removeBtn);
+
+    expect(container.querySelector('.ds-combobox__trigger--button')).toHaveFocus();
+  });
+
   test('uses resolved tag labels in button trigger remove button labels', () => {
     render(
       <Combobox

package/src/components/combobox/Combobox.tsx

@@ -346,9 +346,9 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
                 showDropdownTrigger={showDropdownTrigger}
                 selectedValueDisplay={selectedValueDisplay}
                 triggerEndContent={triggerEndContent}
-                selectedChips={selectedChips}
-                selectedChipValuesSet={selectedChipValuesSet}
-                focusedChipIndex={focusedChipIndex}
+                selectedTags={selectedChips}
+                selectedTagValuesSet={selectedChipValuesSet}
+                focusedTagIndex={focusedChipIndex}
                 resolveTagLabel={resolveTagLabel}
                 removeValue={removeValue}
                 handleTriggerClick={handleTriggerClick}

package/src/components/combobox/ComboboxButtonTrigger.tsx

@@ -2,11 +2,13 @@ import classNames from 'classnames';
 import { Badge } from 'Components/badge/Badge';
 import { Icon } from 'Components/icon/Icon';
 import { Tag } from 'Components/tag/Tag';
+import { TagList } from 'Components/tagList/TagList';
+import { useMeasuredChildWidths } from 'Utils/hooks/useMeasuredChildWidths';
+import { useElementWidth } from 'Utils/hooks/useElementWidth';
 import { Popover } from 'radix-ui';
 import { useMemo, useRef } from 'react';
 import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
-import { useElementWidth } from './useElementWidth.js';
-import { useVisibleChips } from './useVisibleChips.js';
+import { useVisibleTriggerTags } from './useVisibleTriggerTags.js';
 
 export type ComboboxButtonTriggerProps = {
   triggerRef: React.RefObject<HTMLDivElement | null>;
@@ -21,9 +23,9 @@ export type ComboboxButtonTriggerProps = {
   showDropdownTrigger: boolean;
   selectedValueDisplay: ComboboxSelectedValueDisplay;
   triggerEndContent?: React.ReactNode;
-  selectedChips: ComboboxOption[];
-  selectedChipValuesSet: Set<string>;
-  focusedChipIndex: number | null;
+  selectedTags: ComboboxOption[];
+  selectedTagValuesSet: Set<string>;
+  focusedTagIndex: number | null;
   resolveTagLabel: (opt: ComboboxOption) => string;
   removeValue: (value: string) => void;
   handleTriggerClick: () => void;
@@ -46,9 +48,9 @@ export const ComboboxButtonTrigger = ({
   showDropdownTrigger,
   selectedValueDisplay,
   triggerEndContent,
-  selectedChips,
-  selectedChipValuesSet,
-  focusedChipIndex,
+  selectedTags,
+  selectedTagValuesSet,
+  focusedTagIndex,
   resolveTagLabel,
   removeValue,
   handleTriggerClick,
@@ -62,65 +64,47 @@ export const ComboboxButtonTrigger = ({
   const ellipsisProbeRef = useRef<HTMLSpanElement>(null);
   const badgeProbeRef = useRef<HTMLSpanElement>(null);
 
-  const chipWatchKey = useMemo(
+  const tagWatchKey = useMemo(
     () =>
-      selectedChips
+      selectedTags
         .map(opt => `${opt.value}:${resolveTagLabel(opt)}:${opt.iconName ?? ''}`)
         .join('|'),
-    [resolveTagLabel, selectedChips],
+    [resolveTagLabel, selectedTags],
   );
 
   const selectedValueText = useMemo(
-    () => selectedChips.map(resolveTagLabel).join(', '),
-    [resolveTagLabel, selectedChips],
+    () => selectedTags.map(resolveTagLabel).join(', '),
+    [resolveTagLabel, selectedTags],
   );
   const usesTagDisplay = selectedValueDisplay === 'tags';
-  const shouldShowBadge = showSelectionCountBadge && selectedChips.length > 0;
+  const shouldShowBadge = showSelectionCountBadge && selectedTags.length > 0;
 
-  const contentWidth = useElementWidth(contentRef, `${chipWatchKey}-${isOpen}-${shouldShowBadge}`);
-  const measurementTrackWidth = useElementWidth(measureTrackRef, `${chipWatchKey}-${isOpen}`);
-  const ellipsisWidth = useElementWidth(ellipsisProbeRef, `${chipWatchKey}-${isOpen}`);
-  const badgeWidth = useElementWidth(badgeProbeRef, `${chipWatchKey}-${isOpen}-${shouldShowBadge}`);
-  const measurementTrackElement = measureTrackRef.current;
+  const contentWidth = useElementWidth(contentRef, `${tagWatchKey}-${isOpen}-${shouldShowBadge}`);
+  const ellipsisWidth = useElementWidth(ellipsisProbeRef, `${tagWatchKey}-${isOpen}`);
+  const badgeWidth = useElementWidth(badgeProbeRef, `${tagWatchKey}-${isOpen}-${shouldShowBadge}`);
+  const { childGap: tagGap, childWidths: tagWidths } = useMeasuredChildWidths(measureTrackRef, `${tagWatchKey}-${isOpen}`);
 
-  const chipGap = useMemo(() => {
-    const el = measureTrackRef.current;
-    if (!el) return 0;
-    const styles = getComputedStyle(el);
-    const parsed = Number.parseFloat(styles.columnGap || styles.gap || '0');
-    return Number.isFinite(parsed) ? parsed : 0;
-  }, [measurementTrackElement, measurementTrackWidth]);
-
-  const chipWidths = useMemo(() => {
-    const el = measureTrackRef.current;
-    if (!el) return [];
-    return Array.from(el.children).map((child) => {
-      const width = (child as HTMLElement).getBoundingClientRect().width;
-      return Number.isFinite(width) ? width : 0;
-    });
-  }, [chipWatchKey, measurementTrackElement, measurementTrackWidth]);
-
-  const layout = useVisibleChips({
+  const layout = useVisibleTriggerTags({
     containerWidth: contentWidth,
-    chipWidths,
-    chipGap,
+    tagWidths,
+    tagGap,
     badgeWidth,
     ellipsisWidth,
     showBadge: shouldShowBadge,
   });
 
-  const canMeasure = contentWidth > 0 && chipWidths.length === selectedChips.length;
-  const visibleChips = canMeasure
-    ? layout.visibleChipIndices.map(index => selectedChips[index]!).filter(Boolean)
-    : selectedChips;
+  const canMeasure = contentWidth > 0 && tagWidths.length === selectedTags.length;
+  const visibleTags = canMeasure
+    ? layout.visibleTagIndices.map(index => selectedTags[index]!).filter(Boolean)
+    : selectedTags;
   const showEllipsis = usesTagDisplay && (canMeasure ? layout.showEllipsis : false);
   const showBadge = usesTagDisplay && (canMeasure ? layout.showBadge : shouldShowBadge);
 
-  const renderSelectionTag = (opt: ComboboxOption, chipIdx: number, onRemove?: () => void) => (
+  const renderSelectionTag = (opt: ComboboxOption, tagIdx: number, onRemove?: () => void) => (
     <Tag
       key={opt.value}
       color="neutral"
-      selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
+      selected={selectedTagValuesSet.has(opt.value) || focusedTagIndex === tagIdx}
       slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
       onRemove={onRemove}
       removeLabel={`Remove ${resolveTagLabel(opt)}`}
@@ -132,10 +116,20 @@ export const ComboboxButtonTrigger = ({
 
   const renderSelectionCountBadge = (withA11yLabel: boolean) => (
     <Badge colour="salmon" a11yLabel={withA11yLabel ? selectionCountA11yLabel : undefined}>
-      {selectedChips.length}
+      {selectedTags.length}
     </Badge>
   );
 
+  const visibleTagItems = visibleTags.map((opt, tagIdx) => ({
+    id: opt.value,
+    children: resolveTagLabel(opt),
+    color: 'neutral' as const,
+    selected: selectedTagValuesSet.has(opt.value) || focusedTagIndex === tagIdx,
+    slotStart: opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined,
+    onRemove: disabled ? undefined : () => removeValue(opt.value),
+    removeLabel: `Remove ${resolveTagLabel(opt)}`,
+  }));
+
   return (
     <Popover.Anchor asChild>
       <div
@@ -160,13 +154,15 @@ export const ComboboxButtonTrigger = ({
           {usesTagDisplay
             ? (
                 <div className="ds-combobox__button-tags-viewport">
-                  <div className="ds-combobox__button-tags-track">
-                    {selectedChips.length === 0 && (
-                      <span className="ds-combobox__button-placeholder">{placeholder}</span>
-                    )}
-                    {visibleChips.map((opt, chipIdx) =>
-                      renderSelectionTag(opt, chipIdx, disabled ? undefined : () => removeValue(opt.value)))}
-                  </div>
+                  {selectedTags.length === 0
+                    ? <span className="ds-combobox__button-placeholder">{placeholder}</span>
+                    : (
+                        <TagList
+                          items={visibleTagItems}
+                          returnFocusRef={triggerRef}
+                          className="ds-combobox__tag-list"
+                        />
+                      )}
                   {showEllipsis && <span className="ds-combobox__button-ellipsis" aria-hidden="true">…</span>}
                 </div>
               )
@@ -202,11 +198,11 @@ export const ComboboxButtonTrigger = ({
 
         {usesTagDisplay && (
           <div className="ds-combobox__measure" aria-hidden="true">
-            {/* Mirror the rendered chips off-screen so width calculations use the real Tag layout. */}
+            {/* Mirror the rendered tags off-screen so width calculations use the real Tag layout. */}
             <div className="ds-combobox__button-tags-track" ref={measureTrackRef}>
-              {selectedChips.map((opt, chipIdx) => (
+              {selectedTags.map((opt, tagIdx) => (
                 <span key={`measure-${opt.value}`} className="ds-combobox__measure-chip">
-                  {renderSelectionTag(opt, chipIdx, disabled ? undefined : () => {})}
+                  {renderSelectionTag(opt, tagIdx, disabled ? undefined : () => {})}
                 </span>
               ))}
             </div>

package/src/components/combobox/ComboboxTrigger.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
-import { Tag } from 'Components/tag/Tag';
+import { TagList } from 'Components/tagList/TagList';
 import { Popover } from 'radix-ui';
 import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
 
@@ -74,6 +74,15 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
     = selectedValueDisplay === 'text'
       && query.length === 0
       && selectedValueText.length > 0;
+  const selectedTagItems = selectedChips.map(opt => ({
+    id: opt.value,
+    children: resolveTagLabel(opt),
+    color: 'neutral' as const,
+    selected: selectedChipValuesSet.has(opt.value),
+    slotStart: opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined,
+    onRemove: disabled ? undefined : () => removeValue(opt.value),
+    removeLabel: `Remove ${resolveTagLabel(opt)}`,
+  }));
 
   return (
     <Popover.Anchor asChild>
@@ -87,21 +96,15 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
         onClick={handleTriggerClick}
       >
         <div className="ds-combobox__chips-and-input">
-          {selectedValueDisplay === 'tags'
-            ? selectedChips.map((opt, chipIdx) => (
-                <Tag
-                  key={opt.value}
-                  color="neutral"
-                  selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
-                  slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
-                  onRemove={disabled ? undefined : () => removeValue(opt.value)}
-                  removeLabel={`Remove ${resolveTagLabel(opt)}`}
-                  removeButtonTabIndex={-1}
-                >
-                  {resolveTagLabel(opt)}
-                </Tag>
-              ))
-            : null}
+          {selectedValueDisplay === 'tags' && (
+            <TagList
+              items={selectedTagItems}
+              wrap
+              highlightedItemIndex={focusedChipIndex}
+              returnFocusRef={inputRef}
+              className="ds-combobox__tag-list"
+            />
+          )}
           {showSelectedValueText && (
             <span className="ds-combobox__selected-value">
               {selectedValueText}

package/src/components/combobox/combobox.scss

@@ -9,16 +9,14 @@
   align-items: center;
   gap: var(--spacing-small);
   min-height: var(--form-field-text-medium-height);
-  padding: var(--spacing-xsmall) var(--spacing-small);
+  padding: calc(var(--spacing-xsmall) - (var(--border-weight))) var(--spacing-small);
   border: var(--border-weight) solid var(--form-field-combobox-default-color-border);
   border-radius: var(--form-field-radius);
   background-color: var(--form-field-combobox-default-color-background);
   color: var(--form-field-combobox-default-color-text);
   cursor: text;
   transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-  box-sizing: border-box;
   font-style: normal;
-  line-height: 150%;
 
   &:hover:not(.ds-combobox__trigger--disabled) {
     border-color: var(--form-field-combobox-hover-color-border);
@@ -70,11 +68,18 @@
 }
 
 .ds-combobox__button-tags-viewport {
+  display: flex;
+  align-items: center;
   flex: 1;
   min-width: 0;
   overflow: hidden;
 }
 
+.ds-combobox__tag-list {
+  flex: 1;
+  min-width: 0;
+}
+
 .ds-combobox__button-tags-track {
   display: inline-flex;
   width: auto;