feat(Suggestion): ✨ new component

.changeset/real-cats-suffer.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Experimental Suggestion: :sparkles: New component

apps/storefront/app/bloggen/2025/helptext-blir-fjerna-kva-gjer-du/page.mdx

@@ -147,7 +147,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
 
 ### Satt saman
 
-I CodeSanboxen under kan du sjå korleis du sett kodesnuttane over saman.
+I CodeSandboxen under kan du sjå korleis du sett kodesnuttane over saman.
 
 <ResponsiveIframe
   title="own-helptext-example"

packages/css/src/field.css

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

packages/css/src/index.css

@@ -13,6 +13,7 @@
 @import url('./input.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
 @import url('./popover.css') layer(ds.components);
+@import url('./suggestion.css') layer(ds.components);
 @import url('./skiplink.css') layer(ds.components);
 @import url('./details.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);

packages/css/src/suggestion.css

@@ -0,0 +1,113 @@
+.ds-suggestion {
+  --dsc-suggestion-option-background--selected: var(--ds-color-background-subtle);
+  --dsc-suggestion-option-border-color: var(--ds-color-base-default);
+  --dsc-suggestion-clear-gap: var(--ds-size-2);
+  --dsc-suggestion-clear-padding: var(--ds-size-1);
+  --dsc-suggestion-clear-size: var(--ds-size-9);
+  --dsc-suggestion-clear-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
+  --dsc-suggestion-option-checkmark-url: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20focusable%3D%22false%22%20role%3D%22img%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M18.998%206.94a.75.75%200%200%201%20.063%201.058l-8%209a.75.75%200%200%201-1.091.032l-5-5a.75.75%200%201%201%201.06-1.06l4.438%204.437%207.471-8.405A.75.75%200%200%201%2019%206.939%22%20clip-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
+  --dsc-suggestion-option-checkmark-size: var(--ds-size-7);
+  --dsc-suggestion-list-gap: var(--ds-size-2);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-size-1);
+  position: relative;
+
+  & u-datalist {
+    background: var(--ds-color-neutral-background-default);
+    border-radius: var(--ds-border-radius-md);
+    border: 1px solid var(--ds-color-neutral-border-default);
+    box-shadow: var(--ds-shadow-md);
+    box-sizing: border-box;
+    color: var(--ds-color-neutral-text-default);
+    inset: 100% 0 auto 0;
+    overflow-y: auto;
+    position: absolute;
+    z-index: 1600;
+    margin-top: var(--dsc-suggestion-list-gap);
+    max-height: 200px;
+
+    &:not(:has(u-option:hover)) > u-option:focus-visible {
+      border-left-color: var(--dsc-suggestion-option-border-color);
+      background: var(--dsc-suggestion-option-background--selected);
+      color: var(--ds-color-text-default);
+    }
+
+    /* Hide <suggestion.Empty> if any <suggestion.Option> is visible */
+    &:has(u-option:not([hidden])) > :not(u-option) {
+      display: none;
+    }
+
+    /* Hide datalist if no children */
+    &:empty {
+      display: none;
+    }
+
+    & > * {
+      padding: var(--ds-size-2) var(--ds-size-3);
+      font-family: inherit;
+    }
+
+    & > :is(u-option) {
+      padding-inline-start: var(--dsc-suggestion-option-checkmark-size);
+      border: none;
+      border-left: 5px solid transparent;
+      outline: none;
+      border-radius: var(--ds-border-radius-sm);
+      cursor: pointer;
+      position: relative;
+
+      &[selected] {
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          mask: var(--dsc-suggestion-option-checkmark-url) center / contain no-repeat;
+          background: currentcolor;
+          width: var(--dsc-suggestion-option-checkmark-size);
+          height: var(--dsc-suggestion-option-checkmark-size);
+        }
+      }
+
+      @media (hover: hover) and (pointer: fine) {
+        &:is(u-option):hover {
+          border-left-color: var(--dsc-suggestion-option-border-color);
+          background: var(--dsc-suggestion-option-background--selected);
+        }
+      }
+    }
+  }
+
+  /**
+   * Clear button
+   */
+  &:has(input:placeholder-shown) button[type='reset'],
+  &:has(input:is(:read-only, :disabled, [aria-disabled='true'])) button[type='reset'] {
+    visibility: hidden; /* We hide the clear button when input is empty */
+  }
+  &:has(button[type='reset']) input {
+    padding-inline-end: calc(var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap));
+  }
+
+  & button[type='reset'] {
+    --dsc-button-size: var(--dsc-suggestion-clear-size);
+
+    align-self: center;
+    margin-inline-start: calc((var(--dsc-suggestion-clear-size) + var(--dsc-suggestion-clear-gap)) * -1);
+    order: 999; /* Place last */
+    padding: var(--dsc-suggestion-clear-padding);
+    position: relative;
+    scale: 0.75;
+    z-index: 2;
+
+    &::before {
+      content: '';
+      height: var(--dsc-suggestion-clear-size);
+      width: var(--dsc-suggestion-clear-size);
+      mask: var(--dsc-suggestion-clear-icon-url) center / contain no-repeat;
+      background: currentcolor;
+    }
+  }
+}

packages/react/package.json

@@ -47,6 +47,7 @@
     "@navikt/aksel-icons": "^6.14.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-virtual": "^3.10.7",
+    "@u-elements/u-datalist": "^0.0.9",
     "@u-elements/u-details": "^0.1.0",
     "clsx": "^2.1.1"
   },

packages/react/src/components/Suggestion/Suggestion.mdx

@@ -0,0 +1,19 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
+import * as SuggestionStories from './Suggestion.stories';
+
+<Meta of={SuggestionStories} />
+
+# Suggestion
+
+Søkbar "select".
+
+<Primary />
+<Controls />
+
+## Kontrollert
+
+<Canvas of={SuggestionStories.Controlled} />
+
+## Standard verdi
+
+<Canvas of={SuggestionStories.DefaultValue} />