fix(suggestion): redesign

[oddvernes]

resolves #4729

also resolves #4591 with

  & :is(u-datalist):where([popover='manual']):not([style*='translate']){
    opacity: 0;
  }

Not sure if I should better solve the case of using u-combobox with class ds-suggestion but NOT the designsystemet-web package, which adds the floating-ui styles (the list would have no opacity), currently it checks for popover="manual" attribute to whitelist 🤷

[changeset-bot]

🦋 Changeset detected

Latest commit: a229302

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-types	Patch
@digdir/designsystemet-web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Preview deployments for this pull request:

storybook - 17. Apr 2026 - 11:45

[eirikbacker]

Not sure if I should better solve the case of using u-combobox with class ds-suggestion but NOT the designsystemet-web package, which adds the floating-ui styles (the list would have no opacity), currently it checks for popover="manual" attribute to whitelist 🤷

Creative solution! ☺️ We could add some "data-is-floating" attribute or something in popover.ts to have a more explicit/controlled forbindelse? dette kan være en god start dog ^^

[oddvernes]

Creative solution! ☺️ We could add some "data-is-floating" attribute or something in popover.ts to have a more explicit/controlled forbindelse? dette kan være en god start dog ^^

Kom akkurat på at jeg kan jo bruke ds-suggestion element som selector i stedet for

  &ds-suggestion :is(u-datalist):not([style*='translate']) {
    opacity: 0;
  }

[eirikbacker]

&ds-suggestion seems like a typo? was it supposed to bed &:is(ds-suggestion)? ☺️

[oddvernes]

hm no, since we are inside .ds-suggestion which may or may not also be ds-suggestion i need &ds-suggestion since no &is the same as & [selector], or is there another way to write this?

[eirikbacker]

I do not understand, if you write &:is(ds-suggestion) - this will match if:
classname is .ds-suggestion and element is ds-suggestion

but, actually the whole "check element name" is potentially risky; the custom elements can change tagname, since they are all extenable. I can for instance rename ds-suggestion to mtds-suggestion at our party. So we need another identifier actually(same with u-datalist) 🙈

maybe we should do this? ☺️

& :is(datalist,u-datalist,[role="listbox"]):is([popover='manual']):not([style*="translate"])

it is not important wether using the ds-suggestion element or not ☺️

[Barsnes]

Thats actually a very good point @eirikbacker 🤔

[oddvernes]

ahh ok, good point! this selector you suggested works for now. I think the only edge case is someone using u-combobox with this class + manual popover + css anchor positioning

[eirikbacker]

yeah, this is why we should add a data- attribute, probably in popover.ts that identifies "this is a float element, and it is currently closed or open" like data-is-floating="true | false"
then we could do:

& [data-is-floating="false"] { opacity: 0 }

[oddvernes]

yep, but it needs to exist on the list before toggle

[eirikbacker]

can ds-suggestion add it there? ☺️