some more adjustments

packages/css/src/field.css

@@ -11,7 +11,7 @@
   /**
    * States
    */
-  &:has([aria-disabled='true'], :disabled) > * {
+  &:has(:disabled) > * {
     cursor: not-allowed;
     opacity: var(--ds-disabled-opacity);
   }

packages/css/src/suggestion.css

@@ -39,13 +39,27 @@
     }
 
     & > * {
-      padding: var(--ds-spacing-2);
-      border-left: var(--ds-spacing-1) solid transparent;
-      outline: none;
+      grid-template-columns: 1.2em 1fr;
+      padding: var(--ds-spacing-2) var(--ds-spacing-3);
+      padding-inline-start: var(--ds-spacing-4);
+      border: none;
+      border-left: 5px solid transparent;
+      border-radius: var(--ds-border-radius-sm);
+      justify-content: start;
+      background: none;
+      text-align: left;
+      height: auto;
+      cursor: pointer;
+      font-family: inherit;
+      font-weight: 400;
 
       /* TMP check to demonstrate selector */
-      &[aria-selected='true']::before {
-        content: '✔ ';
+      &[aria-selected='true'] {
+        padding-inline-start: var(--ds-spacing-1);
+
+        &::before {
+          content: '✔ ';
+        }
       }
 
       @media (hover: hover) and (pointer: fine) {

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

@@ -1,4 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
+import { Field } from '../Field';
+import { Label } from '../Label';
 import { Suggestion } from './';
 export default {
   title: 'Komponenter/Suggestion',
@@ -7,16 +9,19 @@ export default {
 
 export const Preview: StoryFn<typeof Suggestion> = (args) => {
   return (
-    <Suggestion {...args}>
-      <Suggestion.List>
-        <Suggestion.Empty>Tomt</Suggestion.Empty>
-        <Suggestion.Option>Option 1</Suggestion.Option>
-        <Suggestion.Option>Option 2</Suggestion.Option>
-        <Suggestion.Option>Option 3</Suggestion.Option>
-      </Suggestion.List>
-      <Suggestion.Input />
-      <Suggestion.Clear />
-    </Suggestion>
+    <Field>
+      <Label>Velg en destinasjon</Label>
+      <Suggestion {...args}>
+        <Suggestion.List>
+          <Suggestion.Empty>Tomt</Suggestion.Empty>
+          <Suggestion.Option>Option 1</Suggestion.Option>
+          <Suggestion.Option>Option 2</Suggestion.Option>
+          <Suggestion.Option>Option 3</Suggestion.Option>
+        </Suggestion.List>
+        <Suggestion.Input />
+        <Suggestion.Clear />
+      </Suggestion>
+    </Field>
   );
 };
 

packages/react/src/components/Suggestion/Suggestion.tsx

@@ -6,6 +6,7 @@ import type { DefaultProps } from '../../types';
 type SuggestionContextType = {
   listId?: string;
   setListId?: (id: string) => void;
+  inputRef?: React.RefObject<HTMLInputElement>;
 };
 
 export const SuggestionContext = createContext<SuggestionContextType>({});
@@ -16,11 +17,13 @@ export type SuggestionProps =
 export const Suggestion = forwardRef<HTMLDivElement, SuggestionProps>(
   function Suggestion({ className, ...rest }, ref) {
     const [listId, setListId] = useState(useId());
+
     const innerRef = useRef<HTMLElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
     const mergedRefs = useMergeRefs([innerRef, ref]);
 
     return (
-      <SuggestionContext.Provider value={{ listId, setListId }}>
+      <SuggestionContext.Provider value={{ listId, setListId, inputRef }}>
         <div
           className={cl('ds-suggestion', className)}
           ref={mergedRefs}

packages/react/src/components/Suggestion/SuggestionClear.tsx

@@ -1,5 +1,6 @@
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { Button, type ButtonProps } from '../Button';
+import { SuggestionContext } from './Suggestion';
 
 /* We omit children since we render the icon with css */
 export type SuggestionClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
@@ -17,27 +18,20 @@ export const SuggestionClear = forwardRef<
   { 'aria-label': label = 'Tøm', onClick, ...rest },
   ref,
 ) {
+  const { inputRef } = useContext(SuggestionContext);
+
   const handleClear = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
-    const target = event.target;
-    onClick?.(event);
-
-    if (event.defaultPrevented) return;
-
-    let input: HTMLElement | null | undefined = null;
-
-    if (target instanceof HTMLElement)
-      input = target.closest('.ds-suggestion')?.querySelector('input');
-
-    if (!input) throw new Error('Input is missing');
+    if (!inputRef?.current) throw new Error('Input is missing');
     /* narrow type to make TS happy */
-    if (!(input instanceof HTMLInputElement))
+    if (!(inputRef?.current instanceof HTMLInputElement))
       throw new Error('Input is not an input element');
 
     event.preventDefault();
-    setReactInputValue(input, '');
-    input.focus();
+    setReactInputValue(inputRef.current, '');
+    inputRef.current.focus();
+    onClick?.(event);
   };
 
   return (

packages/react/src/components/Suggestion/SuggestionInput.tsx

@@ -1,3 +1,4 @@
+import { useMergeRefs } from '@floating-ui/react';
 import { forwardRef, useContext } from 'react';
 import { Input, type InputProps } from '../Input';
 import { SuggestionContext } from './Suggestion';
@@ -8,8 +9,16 @@ export const SuggestionInput = forwardRef<
   HTMLInputElement,
   SuggestionInputProps
 >(function SuggestionList(rest, ref) {
-  const { listId } = useContext(SuggestionContext);
+  const { listId, inputRef } = useContext(SuggestionContext);
 
-  /* We need an empty placeholder for the clear button to be able to show/hide */
-  return <Input ref={ref} list={listId} placeholder='' {...rest} />;
+  const mergedRefs = useMergeRefs([inputRef, ref]);
+
+  return (
+    <Input
+      ref={mergedRefs}
+      list={listId}
+      placeholder='' // We need an empty placeholder for the clear button to be able to show/hide
+      {...rest}
+    />
+  );
 });