feat(Suggestion): add count display mode for multiple selection

Author: adrianflatner

packages/css/src/suggestion.css

@@ -62,6 +62,37 @@
     display: none; /* Hide data elements when not in multiple mode */
   }
 
+  /* Count display mode: hide chips, show count label inside input */
+  &[data-count] data {
+    display: none;
+  }
+
+  /* NOTE: This styling should be reflected in tag.css */
+  &[data-count]::before {
+    content: attr(data-count) ' ' var(--dsc-count-label, 'valgt');
+    position: absolute;
+    inset-inline-start: var(--ds-size-3);
+    top: 50%;
+    translate: 0 -50%;
+    pointer-events: none;
+    z-index: 1;
+    align-items: center;
+    background: var(--ds-color-surface-tinted);
+    border: solid transparent var(--ds-border-width-default);
+    border-radius: var(--ds-border-radius-sm);
+    box-sizing: border-box;
+    color: var(--ds-color-text-default);
+    font-size: var(--ds-body-sm-font-size);
+    line-height: var(--ds-line-height-sm);
+    min-height: var(--ds-size-8);
+    padding: 0 var(--ds-size-2);
+    display: inline-flex;
+  }
+
+  &[data-count]:focus-within::before {
+    display: none;
+  }
+
   /* NOTE: This styling should be reflected in chip.css */
   & > data {
     align-items: center;

packages/react/src/components/suggestion/suggestion.stories.tsx

@@ -507,6 +507,36 @@ Multiple.args = {
   multiple: true,
 };
 
+export const MultipleCount: StoryFn<SuggestionMultipleProps> = (args) => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  return (
+    <Field>
+      <Label>Velg destinasjoner</Label>
+      <Suggestion
+        {...args}
+        multiple
+        display='count'
+        selected={selected}
+        onSelectedChange={(items) =>
+          setSelected(items.map((item) => item.value))
+        }
+      >
+        <Suggestion.Input />
+        <Suggestion.Clear />
+        <Suggestion.List>
+          <Suggestion.Empty>Tomt</Suggestion.Empty>
+          {DATA_PLACES.map((place) => (
+            <Suggestion.Option key={place} label={place} value={place}>
+              {place}
+            </Suggestion.Option>
+          ))}
+        </Suggestion.List>
+      </Suggestion>
+    </Field>
+  );
+};
+
 export const InDetails: StoryFn<typeof Suggestion> = (args) => {
   return (
     <Details>

packages/react/src/components/suggestion/suggestion.tsx

@@ -92,6 +92,17 @@ type SuggestionBaseProps = {
    * @default ({ label }) => label
    */
   renderSelected?: (args: { label: string; value: string }) => ReactNode;
+  /**
+   * How selected items are displayed when `multiple` is true.
+   *
+   * - `chips` renders removable chips for each selected item (default)
+   * - `count` hides chips and shows a count label (e.g. "2 valgt")
+   *
+   * Customize the label text with the `--dsc-count-label` CSS variable.
+   *
+   * @default 'chips'
+   */
+  display?: 'chips' | 'count';
 } & Omit<HTMLAttributes<DSSuggestionElement>, 'defaultValue'>;
 
 type SuggestionValueProps<T extends { multiple: boolean }> = {
@@ -169,6 +180,7 @@ export const Suggestion = forwardRef<DSSuggestionElement, SuggestionProps>(
       className,
       creatable = false,
       defaultSelected,
+      display = 'chips',
       filter = true,
       multiple = false,
       name,
@@ -266,6 +278,10 @@ export const Suggestion = forwardRef<DSSuggestionElement, SuggestionProps>(
         <ds-suggestion
           data-multiple={multiple || undefined}
           data-creatable={creatable || undefined}
+          data-count={
+            (multiple && display === 'count' && selectedItems.length) ||
+            undefined
+          }
           class={cl('ds-suggestion', className)} // Using "class" since React does not translate className on custom elements
           ref={mergedRefs}
           suppressHydrationWarning // Since <ds-suggestion> adds attributes