@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,180 @@
 # @olenbetong/appframe-ds
 
+## 0.9.0
+
+### Minor Changes
+
+- cfc94c7: Rework the `AfGrid` header filter, and stop the toolbar refresh button from shifting while loading.
+
+  The header filters and the toolbar's filter builder now edit **one** filter tree in a single named
+  filter slot keyed on the grid `id`, instead of writing two slots that could not see each other. MUI's
+  `GridFilterModel` is no longer used as a transport — it cannot represent nested groups or the full
+  Appframe operator set. `useAfFilterModel` is replaced by `useAfFilter`, which exposes the tree plus
+  per-field helpers.
+
+  Each header filter cell is now an unlabelled input with a funnel button:
+  - one criterion taking a single value is edited straight from the input, debounced,
+  - anything else shows a read-only summary such as `In list (3)`, with a clear button,
+  - the funnel opens a per-column panel with a row per criterion, a `+ Criteria` button, and — for
+    string, number and uniqueidentifier columns — a searchable list of the column's distinct values
+    with row counts, checked to build an `in list` criterion.
+
+  The distinct list respects every other active filter but ignores the column's own criteria, so
+  unchecking a value does not make the remaining values disappear. Counts are best effort: views that
+  cannot be grouped fall back to a plain distinct list. Panel edits are staged and only applied on
+  `Apply`, so a half-built criterion never reaches the server.
+
+  `GridToolbarRefreshButton` now hides its icon while loading so the spinner replaces it instead of
+  being added next to it, and the columns panel has spacing between its search field and the column
+  list. `InputAdornments` accepts a `ref`, which is forwarded to the input element.
+
+  The panel body is exported on its own as **`FieldFilterPanel`**, a controlled component with no
+  dependency on the grid, so a single field can be filtered anywhere — a report parameter, a sidebar
+  facet, a mobile filter sheet. Its distinct value query is exported too, as `useDistinctValues`.
+
+  The header filter input no longer drives MUI's header filter edit mode from `onFocus`/`onBlur`. The
+  header filter cell refocuses itself whenever that state changes, so any mousedown leaving the input
+  pulled focus straight back in — inputs in the filter panel could not be focused, and starting a
+  column drag from a header cancelled the drag. Nothing is lost: MUI focuses the cell's focusable
+  element anyway, so typing and keyboard navigation still work.
+
+- cfc94c7: Add `@olenbetong/appframe-ds/grid`, a Designsystemet flavoured `AfGrid`.
+
+  The grid keeps MUI X Data Grid Pro as its engine — Designsystemet has no data grid — but replaces
+  the chrome:
+  - the base slots (checkbox, button, icon button, text field, select, switch, tooltip, chip, badge,
+    progress, skeleton, divider) render Designsystemet components,
+  - the toolbar and the column panel are rebuilt with Designsystemet components and Aksel icons,
+  - the filter panel is replaced by `FilterBuilder` in dialog mode,
+  - the MUI theme is derived from the `--ds-color-*` tokens and follows `data-color-scheme`, so the
+    grid works in light and dark mode without an app-level `ThemeProvider`,
+  - the MUI X license is registered by the grid itself, from a build-time injected
+    `__MUI_X_LICENSE_KEY__` (supplied by the `appframe()` Vite plugin) or
+    `import.meta.env.VITE_MUI_X_LICENSE_KEY`.
+
+  The API matches the `@olenbetong/appframe-mui` `AfGrid`, so migrating is an import path change plus
+  an optional `filterViewName` for saved filters. Layout persistence uses the same store, so users
+  keep their saved column layouts.
+
+  The filter builder (`FilterBuilder`, `FilterEditor`, `SavedFilterTree`, …) moved here from
+  `@olenbetong/synergi-react` and is exported from the package root.
+
+  `ReportDownloader` (`openDataObjectReportWithProgress`) is available from
+  `@olenbetong/appframe-ds/report-downloader`, built with Designsystemet components.
+
+### Patch Changes
+
+- Updated dependencies [62a0ad5]
+- Updated dependencies [5155cdb]
+  - @olenbetong/appframe-data@1.6.1
+  - @olenbetong/appframe-core@2.13.0
+  - @olenbetong/appframe-react@2.1.1
+
+## 0.8.0
+
+### Minor Changes
+
+- b50190d: Add a `Container` component: a centered, max-width content wrapper equivalent to MUI `Container`. It is a thin alias over `Page.Block` with gutters enabled by default and a MUI-familiar `maxWidth` prop (`xs` | `sm` | `md` | `lg` | `xl` | `false`).
+- 27ef468: Add `FilterEditor`, the criteria tree of the web filter builder.
+
+  `FilterEditor` renders a nested criteria tree, matching the advanced filter
+  editor in the Windows client: groups can be nested to any depth and each group
+  chooses whether its items are combined with `and` or `or`. An empty filter is a
+  single `and` group. Every group ends with
+  a blank row, so a condition is added just by picking a field. Value editors are
+  chosen from the field type and the operator's arity, and cover text, number and
+  date inputs, ranges, value lists and relative dates such as "Today" or "Current
+  user". Set `showFilterString` to show the equivalent filter string, which can
+  also be edited and parsed back into the tree. A group's conditions are indented
+  and boxed below its header so it is clear which group they belong to. On narrow
+  viewports, where the parts of a condition wrap onto several lines, conditions are
+  separated by extra spacing and a rule, and the group buttons are reduced to
+  icons so they no longer overflow.
+
+  `@olenbetong/appframe-core` gained path-based filter tree helpers —
+  `getNodeAtPath`, `updateNodeAtPath`, `insertNodeAtPath`, `removeNodeAtPath`,
+  `setGroupMode` and `addGroupAtPath` — replacing the group/item index helpers
+  `addExpression`, `updateExpression`, `removeExpression`, `addGroup` and
+  `removeGroup`, which only worked on the flat standard layout. `pruneFilter` now
+  prunes nested groups, `toFilterTree` normalizes a filter without flattening it,
+  and `isStandardLayout` reports whether a filter fits the simplified layout the
+  Windows flow editor can render.
+
+  `Combobox` in `@olenbetong/appframe-ds` gained two related fixes: it now accepts
+  `aria-label` for use without a visible label, and the input shows the selected
+  option's label on mount and whenever the selection is changed from the outside.
+  `Combobox` also no longer renders text one step smaller than a `Textfield` or
+  `Select` of the same `data-size`. Designsystemet inputs inherit their font size
+  when `data-size` is set, and `data-size` rescales `--ds-font-size-*`, so
+  referencing the type scale at all made the text smaller — `Combobox` now
+  inherits its font size the same way `Textfield` does, and has a minimum height
+  matching `--dsc-input-size` so it lines up exactly with an input beside it.
+
+  `Combobox` options were also unreadable in dark mode: the hovered and selected
+  states referenced `--ds-color-accent-*`, a colour set that does not exist in
+  these themes, so every option fell back to a hard-coded light background while
+  the text stayed light. The option states now use the contextual `--ds-color-*`
+  aliases, and all hard-coded colour fallbacks — which only ever encoded the light
+  theme — have been removed from `Combobox` and `AfLookup`.
+
+### Patch Changes
+
+- b50190d: `Paper` now accepts a `ref`, which is forwarded to the rendered element.
+- 3ff7c84: Depend on the workspace versions of `@olenbetong/appframe-core`, `@olenbetong/appframe-data` and `@olenbetong/appframe-react` instead of the published versions from the catalog, so the package is built and tested against the current source like the other workspace packages.
+- a0df74a: Add the report metadata model, `useReport` and `ReportParameters`.
+
+  `@olenbetong/appframe-core` gained a pure report model: `Report`,
+  `ReportParameter`, `ReportRecordSource` and their raw record counterparts, plus
+  `toReport`, `getReportFormats`, `parseRecordSource` and the parameter helpers
+  `toReportParameters`, `coerceParameterValue`, `getDefaultParameterValues`,
+  `serializeParameters`, `parseParameters` and `restoreParameterValues`. The
+  parameters XML is the same `<Parameters Version="1">` document the Windows
+  launcher writes, so a filter saved in either client restores in the other. A
+  parameter's editor is derived the way the Windows launcher derives it: a lookup
+  wins over everything, a fixed item list comes next, and otherwise the data type
+  decides. `FormatCSV` enables XLSX and XLS as well, matching the single
+  DevExpress export the flag stands for.
+
+  `@olenbetong/appframe-react` gained `useReport`, which loads a report from
+  `sviw_WinClient_MyReports` — so a report that does not come back is one the user
+  may not run — merges the `HasTitle`/`HasHeader` bands from
+  `sviw_WinClient_ReportsWeb` and the parameters from
+  `sviw_WinClient_ReportsParameters`. It returns the filter the report is designed
+  with, overridable through an `initialFilter` option the way opening a report
+  programmatically overrides it in the Windows client, and the literal parameter
+  defaults. Defaults naming a stored procedure are left unset, to be resolved
+  server-side. `useParameterOptions` loads the options for a lookup parameter from
+  its `afRecordSource`.
+
+  `@olenbetong/synergi-react` gained `ReportParameters`, the parameter form of the
+  report launcher. It renders nothing when a report has no parameters, so the
+  launcher can include it unconditionally, and gives each parameter the editor its
+  metadata asks for: a lookup combobox, a select, a checkbox, or a text, number or
+  date input. Values are coerced to the parameter's type as they are entered.
+
+  `Combobox` in `@olenbetong/appframe-ds` had no spacing between its label and its
+  control: the root is not a `.ds-field`, which is what normally spaces a label,
+  description and input apart, so it now does that spacing itself and lines up
+  with a `Textfield` or `Select` beside it.
+
+- 1bb10de: `Autocomplete` and `Combobox` now open their option list inside the dialog they
+  are used in. The list is portalled, and a modal dialog is painted in the top
+  layer, so a list portalled to the body ended up behind the dialog backdrop and
+  appeared not to open at all.
+- Updated dependencies [448c378]
+- Updated dependencies [54e5344]
+- Updated dependencies [448c378]
+- Updated dependencies [a0df74a]
+- Updated dependencies [7a54755]
+- Updated dependencies [3954bc9]
+- Updated dependencies [0a23d5b]
+- Updated dependencies [3ff7c84]
+- Updated dependencies [ace635e]
+- Updated dependencies [27ef468]
+  - @olenbetong/appframe-react@2.1.0
+  - @olenbetong/appframe-core@2.12.0
+  - @olenbetong/appframe-data@1.6.0
+
 ## 0.7.0
 
 ### Minor Changes

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
   "exports": {
     ".": {
+      "types": "./es/index.d.ts",
       "import": "./es/index.js"
+    },
+    "./grid": {
+      "types": "./es/grid/index.d.ts",
+      "import": "./es/grid/index.js"
+    },
+    "./report-downloader": {
+      "types": "./es/report-downloader/index.d.ts",
+      "import": "./es/report-downloader/index.js"
     }
   },
   "sideEffects": [
@@ -16,29 +25,63 @@
   "license": "MIT",
   "peerDependencies": {
     "@digdir/designsystemet-react": ">=1.18.0",
+    "@emotion/react": ">=11.14.0",
+    "@emotion/styled": ">=11.14.1",
+    "@mui/material": ">=9.0.0",
+    "@mui/x-data-grid-pro": ">=8.0.0 <9.0.0",
+    "@mui/x-license": ">=8.0.0 <9.0.0",
     "@navikt/aksel-icons": ">=8.16.1",
     "react": ">=19.2.8",
     "react-dom": ">=19.2.8",
     "react-error-boundary": ">=6.1.2",
     "react-router": ">=8.3.0"
   },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    },
+    "@mui/material": {
+      "optional": true
+    },
+    "@mui/x-data-grid-pro": {
+      "optional": true
+    },
+    "@mui/x-license": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop": "2.0.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.0.0",
     "@base-ui/react": "1.7.0",
-    "@olenbetong/appframe-core": "2.11.10",
-    "@olenbetong/appframe-data": "1.5.0",
-    "@olenbetong/appframe-react": "2.0.0",
     "clsx": "^2.1.1",
+    "localforage": "^1.10.0",
+    "mitt": "^3.0.1",
     "react-virtualized-auto-sizer": "^1.0.26",
-    "react-window": "^1.8.11"
+    "react-window": "^1.8.11",
+    "@olenbetong/appframe-core": "2.13.0",
+    "@olenbetong/appframe-react": "2.1.1",
+    "@olenbetong/appframe-data": "1.6.1"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.18.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "9.3.1",
+    "@mui/x-data-grid-pro": "8.29.2",
+    "@mui/x-license": "8.29.2",
     "@navikt/aksel-icons": "8.16.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "^14.6.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
     "@types/react-window": "^1.8.8",
+    "happy-dom": "^20.11.1",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-error-boundary": "6.1.2",
@@ -46,8 +89,9 @@
     "typescript": "7.0.2"
   },
   "scripts": {
-    "build": "pnpm run build:tsc && pnpm run build:css",
+    "build": "pnpm run build:tsc && pnpm test && pnpm run build:css",
     "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
-    "build:css": "node scripts/copyAssets.mjs"
+    "build:css": "node scripts/copyAssets.mjs",
+    "test": "vitest run"
   }
 }

package/scripts/copyAssets.mjs

@@ -22,6 +22,15 @@ const files = [
 	["src/sortable/DropIndicator.css", "es/sortable/DropIndicator.css"],
 	["src/sortable/SortableItemList.css", "es/sortable/SortableItemList.css"],
 	["src/autocomplete/Autocomplete.css", "es/autocomplete/Autocomplete.css"],
+	["src/filter/FilterBuilder.css", "es/filter/FilterBuilder.css"],
+	["src/filter/FieldFilterPanel.css", "es/filter/FieldFilterPanel.css"],
+	["src/filter/FilterEditor.css", "es/filter/FilterEditor.css"],
+	["src/filter/FilterNameDialog.css", "es/filter/FilterNameDialog.css"],
+	["src/filter/FilterShareDialog.css", "es/filter/FilterShareDialog.css"],
+	["src/filter/SavedFilterTree.css", "es/filter/SavedFilterTree.css"],
+	["src/grid/index.css", "es/grid/index.css"],
+	["src/grid/slots/slots.css", "es/grid/slots/slots.css"],
+	["src/report-downloader/ReportDownloader.css", "es/report-downloader/ReportDownloader.css"],
 ];
 
 mkdirSync("es/layout", { recursive: true });
@@ -32,6 +41,10 @@ mkdirSync("es/paper", { recursive: true });
 mkdirSync("es/progress", { recursive: true });
 mkdirSync("es/sortable", { recursive: true });
 mkdirSync("es/autocomplete", { recursive: true });
+mkdirSync("es/filter", { recursive: true });
+mkdirSync("es/grid", { recursive: true });
+mkdirSync("es/grid/slots", { recursive: true });
+mkdirSync("es/report-downloader", { recursive: true });
 
 for (let [src, dest] of files) {
 	cpSync(src, dest);

package/src/AfLookup/LookupCombobox.css

@@ -64,7 +64,7 @@
 	left: -100%;
 	height: 100%;
 	width: 50%;
-	background-color: var(--ds-color-accent-base-default, #0062ba);
+	background-color: var(--ds-color-base-default);
 	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
 }
 

package/src/AfLookup/LookupCombobox.tsx

@@ -39,7 +39,9 @@ export interface LookupComboboxGridProps<T extends Record<string, unknown>> exte
 	columns: LookupColumn<T>[];
 }
 
-export type LookupComboboxProps<T extends Record<string, unknown>> = LookupComboboxListProps<T> | LookupComboboxGridProps<T>;
+export type LookupComboboxProps<T extends Record<string, unknown>> =
+	| LookupComboboxListProps<T>
+	| LookupComboboxGridProps<T>;
 
 export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
 	let {

package/src/autocomplete/Autocomplete.css

@@ -1,34 +1,48 @@
 .ObAutocomplete-root {
 	--obAutocomplete-padding: 0.25rem;
 	--obAutocomplete-gap: 0.25rem;
-	--obAutocomplete-fontSize: var(--ds-font-size-3, 1rem);
 
 	display: inline-grid;
 }
 
+/*
+ * The root is not a `.ds-field`, so it has to space its label, description,
+ * control and validation message itself. Mirrors `.ds-field > * + *`, including
+ * the description sitting tight under the label.
+ */
+.ObAutocomplete-root > * + * {
+	margin-block-start: var(--ds-size-2);
+}
+
+.ObAutocomplete-root > [data-field="description"] {
+	margin-block-start: 0;
+}
+
 .ObAutocomplete-root[data-full-width="true"] {
 	display: grid;
 	inline-size: 100%;
 }
 
+/*
+ * Font size is deliberately never set: `ds-input` inherits its font size when a
+ * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
+ * `data-size` rescales — would render the text smaller than a `Textfield` or
+ * `Select` of the same size. Only the padding varies per size.
+ */
 .ObAutocomplete-root[data-size="xs"] {
 	--obAutocomplete-padding: 0.125rem;
-	--obAutocomplete-fontSize: var(--ds-font-size-1, 0.75rem);
 }
 
 .ObAutocomplete-root[data-size="sm"] {
 	--obAutocomplete-padding: 0.25rem;
-	--obAutocomplete-fontSize: var(--ds-font-size-2, 0.875rem);
 }
 
 .ObAutocomplete-root[data-size="md"] {
 	--obAutocomplete-padding: 0.25rem;
-	--obAutocomplete-fontSize: var(--ds-font-size-3, 1rem);
 }
 
 .ObAutocomplete-root[data-size="lg"] {
 	--obAutocomplete-padding: 0.375rem;
-	--obAutocomplete-fontSize: var(--ds-font-size-4, 1.125rem);
 }
 
 /*
@@ -40,34 +54,36 @@
 .ObAutocomplete-control {
 	display: flex;
 	flex-direction: column;
+	justify-content: center;
 	box-sizing: border-box;
 	gap: var(--obAutocomplete-gap);
 	padding: var(--obAutocomplete-padding);
 	inline-size: 100%;
-	font-size: var(--obAutocomplete-fontSize);
-	color: var(--ds-color-neutral-text-default, #1e2b3c);
-	background-color: var(--ds-color-neutral-surface-default, #fff);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	border-radius: var(--ds-border-radius-md, 0.375rem);
+	/* Matches `--dsc-input-size`, so the control lines up with a Textfield. */
+	min-block-size: var(--ds-size-12);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-default);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
+	border-radius: var(--ds-border-radius-md);
 }
 
 .ObAutocomplete-control:hover:not(:focus-within) {
-	border-color: var(--ds-color-neutral-border-strong, #767676);
+	border-color: var(--ds-color-neutral-border-strong);
 }
 
 .ObAutocomplete-control:has(.ObAutocomplete-input:focus-visible) {
 	box-shadow: var(--dsc-focus-boxShadow);
 	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus, 3px);
+	outline-offset: var(--ds-border-width-focus);
 }
 
 .ObAutocomplete-control[data-invalid="true"] {
-	border-color: var(--ds-color-danger-border-default, #b3253a);
+	border-color: var(--ds-color-danger-border-default);
 }
 
 .ObAutocomplete-control[data-disabled="true"] {
 	cursor: not-allowed;
-	opacity: var(--ds-disabled-opacity, 0.3);
+	opacity: var(--ds-opacity-disabled);
 }
 
 .ObAutocomplete-chips {
@@ -88,7 +104,7 @@
 .ObAutocomplete-input {
 	flex: 1;
 	min-inline-size: 0;
-	padding: var(--ds-size-1, 0.25rem);
+	padding: var(--ds-size-1);
 	font: inherit;
 	color: inherit;
 	background: transparent;
@@ -105,17 +121,16 @@
 	align-items: center;
 	justify-content: center;
 	flex: none;
-	padding: var(--ds-size-1, 0.25rem);
-	font-size: var(--obAutocomplete-fontSize);
+	padding: var(--ds-size-1);
 	color: inherit;
 	background: transparent;
 	border: none;
-	border-radius: var(--ds-border-radius-sm, 0.25rem);
+	border-radius: var(--ds-border-radius-sm);
 	cursor: pointer;
 }
 
 .ObAutocomplete-button:hover:not(:disabled) {
-	background-color: var(--ds-color-neutral-surface-hover, #e6e6e6);
+	background-color: var(--ds-color-neutral-surface-hover);
 }
 
 .ObAutocomplete-button:disabled {
@@ -134,7 +149,7 @@
 	flex: none;
 	display: inline-flex;
 	align-items: center;
-	padding-inline: var(--ds-size-1, 0.25rem);
+	padding-inline: var(--ds-size-1);
 }
 
 .ObAutocomplete-positioner {
@@ -149,13 +164,12 @@
 	max-block-size: min(24rem, var(--available-height));
 	overflow-y: auto;
 	overscroll-behavior: contain;
-	padding: var(--ds-size-1, 0.25rem);
-	font-size: var(--obAutocomplete-fontSize, var(--ds-font-size-3, 1rem));
-	color: var(--ds-color-neutral-text-default, #1e2b3c);
-	background-color: var(--ds-color-neutral-background-default, #fff);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e0e0e0);
-	border-radius: var(--ds-border-radius-md, 0.375rem);
-	box-shadow: var(--ds-shadow-md, 0 2px 8px 0 rgb(0 0 0 / 0.12));
+	padding: var(--ds-size-1);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-default);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+	box-shadow: var(--ds-shadow-md);
 	transform-origin: var(--transform-origin);
 	transition:
 		opacity 0.12s ease-out,
@@ -176,30 +190,37 @@
 .ObAutocomplete-item {
 	display: flex;
 	align-items: center;
-	gap: var(--ds-size-2, 0.5rem);
-	padding: var(--ds-size-2, 0.5rem);
-	border-radius: var(--ds-border-radius-sm, 0.25rem);
+	gap: var(--ds-size-2);
+	padding: var(--ds-size-2);
+	border-radius: var(--ds-border-radius-sm);
 	cursor: default;
 	user-select: none;
-	scroll-margin-block: var(--ds-size-1, 0.25rem);
+	scroll-margin-block: var(--ds-size-1);
 }
 
+/*
+ * The `accent` colour set does not exist in every Designsystemet theme, so the
+ * option states use the contextual `--ds-color-*` aliases — the same tokens
+ * Designsystemet's own Suggestion list uses.
+ */
 .ObAutocomplete-item[data-highlighted] {
-	background-color: var(--ds-color-accent-surface-hover, #d6e2f2);
+	color: var(--ds-color-text-default);
+	background-color: var(--ds-color-surface-hover);
 }
 
 .ObAutocomplete-item[data-selected] {
-	font-weight: var(--ds-font-weight-medium, 500);
-	background-color: var(--ds-color-accent-surface-default, #e6effa);
+	font-weight: var(--ds-font-weight-medium);
+	color: var(--ds-color-text-default);
+	background-color: var(--ds-color-surface-tinted);
 }
 
 .ObAutocomplete-item[data-selected][data-highlighted] {
-	background-color: var(--ds-color-accent-surface-active, #c2d5ec);
+	background-color: var(--ds-color-surface-active);
 }
 
 .ObAutocomplete-item[data-disabled] {
 	cursor: not-allowed;
-	opacity: var(--ds-disabled-opacity, 0.3);
+	opacity: var(--ds-opacity-disabled);
 }
 
 .ObAutocomplete-itemIndicator {
@@ -209,14 +230,14 @@
 }
 
 .ObAutocomplete-groupLabel {
-	padding: var(--ds-size-2, 0.5rem);
-	font-size: var(--ds-font-size-1, 0.75rem);
-	font-weight: var(--ds-font-weight-semibold, 600);
-	color: var(--ds-color-neutral-text-subtle, #4c5866);
+	padding: var(--ds-size-2);
+	font-size: var(--ds-font-size-1);
+	font-weight: var(--ds-font-weight-semibold);
+	color: var(--ds-color-neutral-text-subtle);
 	text-transform: uppercase;
 }
 
 .ObAutocomplete-empty:not(:empty) {
-	padding: var(--ds-size-2, 0.5rem);
-	color: var(--ds-color-neutral-text-subtle, #4c5866);
+	padding: var(--ds-size-2);
+	color: var(--ds-color-neutral-text-subtle);
 }

package/src/autocomplete/Autocomplete.tsx

@@ -117,6 +117,7 @@ export function Autocomplete<
 		disableClearable,
 		placeholder,
 		inputRef,
+		"aria-label": ariaLabel,
 		"data-size": size,
 		"data-color": color,
 	} = props;
@@ -294,6 +295,7 @@ export function Autocomplete<
 				loading={loading}
 				disableClearable={disableClearable}
 				inputRef={inputRef}
+				aria-label={ariaLabel}
 				chips={chips}
 				trigger={
 					<BaseAutocomplete.Trigger

package/src/autocomplete/AutocompleteFrame.tsx

@@ -3,7 +3,7 @@ import { FieldDescription, Label, Spinner, ValidationMessage } from "@digdir/des
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import clsx from "clsx";
-import type { ReactNode, Ref } from "react";
+import { type ReactNode, type Ref, useEffect, useRef, useState } from "react";
 
 import type { AutocompleteSize } from "./types.js";
 
@@ -26,6 +26,10 @@ export interface AutocompleteFrameProps {
 	loading?: boolean;
 	disableClearable?: boolean;
 	inputRef?: Ref<HTMLInputElement>;
+	/**
+	 * Accessible name for the input. Use when the field has no visible label.
+	 */
+	"aria-label"?: string;
 	/**
 	 * Chips for the selected values, rendered above the input.
 	 */
@@ -75,6 +79,7 @@ export function AutocompleteFrame({
 	loading,
 	disableClearable,
 	inputRef,
+	"aria-label": ariaLabel,
 	chips,
 	trigger,
 	emptyContent,
@@ -82,10 +87,23 @@ export function AutocompleteFrame({
 	onInputKeyDown,
 	onInputBlur,
 }: AutocompleteFrameProps) {
+	let rootRef = useRef<HTMLDivElement>(null);
+	let [container, setContainer] = useState<HTMLElement | null>(null);
+
+	/*
+	 * A modal dialog is painted in the top layer, above everything else in the
+	 * document, so a popup portalled to the body ends up behind its backdrop and
+	 * is invisible. Portal into the dialog itself when there is one.
+	 */
+	useEffect(() => {
+		setContainer(rootRef.current?.closest("dialog") ?? null);
+	}, []);
+
 	return (
 		// Designsystemet's `Field` is a custom element that expects to own the
 		// layout, so the root here is a plain grid instead.
 		<div
+			ref={rootRef}
 			className={clsx("ObAutocomplete-root", className)}
 			style={style}
 			data-size={size}
@@ -111,6 +129,7 @@ export function AutocompleteFrame({
 						ref={inputRef}
 						className="ObAutocomplete-input"
 						placeholder={placeholder}
+						aria-label={ariaLabel}
 						disabled={disabled}
 						readOnly={readOnly}
 						required={required}
@@ -136,7 +155,7 @@ export function AutocompleteFrame({
 				</BaseCombobox.InputGroup>
 			</div>
 			{error && <ValidationMessage data-size={size}>{error}</ValidationMessage>}
-			<BaseCombobox.Portal>
+			<BaseCombobox.Portal container={container ?? undefined}>
 				<BaseCombobox.Positioner className="ObAutocomplete-positioner" sideOffset={4}>
 					<BaseCombobox.Popup className={clsx("ObAutocomplete-popup", popupClassName)} data-size={size}>
 						<BaseCombobox.Empty className="ObAutocomplete-empty">{emptyContent}</BaseCombobox.Empty>