@olenbetong/appframe-ds 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,120 @@
 # @olenbetong/appframe-ds
 
+## 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
+
+- 52e2e10: Add `Autocomplete` and `Combobox`, built on the Base UI components of the same name and styled with Designsystemet tokens. Both expose an API close to MUI's `Autocomplete` (`options`, `value`/`onChange`, `inputValue`/`onInputChange`, `getOptionLabel`, `isOptionEqualToValue`, `filterOptions`, `renderOption`, `groupBy`, `multiple`), plus Designsystemet field props (`label`, `description`, `error`, `data-size`). Use `Combobox` when the user must pick one of the options and `Autocomplete` when free text is allowed (`freeSolo`). Multiple selection renders the selected options as chips above the input, like Designsystemet's `Suggestion`. `createFilterOptions` is exported for custom filtering.
+
+  **Breaking:** the data object bound `Combobox` used internally by `AfLookup` is renamed to `LookupCombobox` (`ComboboxProps` → `LookupComboboxProps`) to free up the `Combobox` name.
+
+- 77e96aa: Add `SortableItemList`, an `ItemList` variant bound to a data object where items can be reordered by dragging or through a menu on the drag handle. The building blocks are exported as well (`useSortableList`, `useSortableItem`, `useSortableContainer`, `DropIndicator`, `reorderSortOrder`, `getNextSortOrder`, `ensureNonZeroSortOrder`) for lists that need custom item markup.
+
 ## 0.6.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -23,18 +23,21 @@
     "react-router": ">=8.3.0"
   },
   "dependencies": {
-    "@olenbetong/appframe-core": "2.11.10",
-    "@olenbetong/appframe-data": "1.5.0",
-    "@olenbetong/appframe-react": "2.0.0",
-    "react-window": "^1.8.11",
+    "@atlaskit/pragmatic-drag-and-drop": "2.0.2",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.0.0",
+    "@base-ui/react": "1.7.0",
+    "clsx": "^2.1.1",
     "react-virtualized-auto-sizer": "^1.0.26",
-    "clsx": "^2.1.1"
+    "react-window": "^1.8.11",
+    "@olenbetong/appframe-data": "1.6.0",
+    "@olenbetong/appframe-core": "2.12.0",
+    "@olenbetong/appframe-react": "2.1.0"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.18.0",
     "@navikt/aksel-icons": "8.16.1",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
     "@types/react-window": "^1.8.8",
     "react": "19.2.8",
     "react-dom": "19.2.8",
@@ -42,7 +45,6 @@
     "react-router": "8.3.0",
     "typescript": "7.0.2"
   },
-  "optionalDependencies": {},
   "scripts": {
     "build": "pnpm run build:tsc && pnpm run build:css",
     "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",

package/scripts/copyAssets.mjs

@@ -3,7 +3,7 @@ import { cpSync, mkdirSync } from "node:fs";
 const files = [
 	["src/AfLookup/Lookup.css", "es/AfLookup/Lookup.css"],
 	["src/AfLookup/LookupGrid.css", "es/AfLookup/LookupGrid.css"],
-	["src/AfLookup/Combobox.css", "es/AfLookup/Combobox.css"],
+	["src/AfLookup/LookupCombobox.css", "es/AfLookup/LookupCombobox.css"],
 	["src/layout/AppMenu.css", "es/layout/AppMenu.css"],
 	["src/layout/AppMenuItem.css", "es/layout/AppMenuItem.css"],
 	["src/layout/AppMenuSubheader.css", "es/layout/AppMenuSubheader.css"],
@@ -19,6 +19,9 @@ const files = [
 	["src/input/InputAdornments.css", "es/input/InputAdornments.css"],
 	["src/paper/Paper.css", "es/paper/Paper.css"],
 	["src/progress/LinearProgress.css", "es/progress/LinearProgress.css"],
+	["src/sortable/DropIndicator.css", "es/sortable/DropIndicator.css"],
+	["src/sortable/SortableItemList.css", "es/sortable/SortableItemList.css"],
+	["src/autocomplete/Autocomplete.css", "es/autocomplete/Autocomplete.css"],
 ];
 
 mkdirSync("es/layout", { recursive: true });
@@ -27,6 +30,8 @@ mkdirSync("es/list", { recursive: true });
 mkdirSync("es/page", { recursive: true });
 mkdirSync("es/paper", { recursive: true });
 mkdirSync("es/progress", { recursive: true });
+mkdirSync("es/sortable", { recursive: true });
+mkdirSync("es/autocomplete", { recursive: true });
 
 for (let [src, dest] of files) {
 	cpSync(src, dest);

package/src/AfLookup/Lookup.tsx

@@ -9,9 +9,9 @@ import clsx from "clsx";
 import { useRef } from "react";
 import { createPortal } from "react-dom";
 
-import { Combobox, type ComboboxProps } from "./Combobox.js";
+import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
 
-export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
+export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
 	/**
 	 * Allows the user to enter a value manually that might not be in the list.
 	 */
@@ -26,7 +26,7 @@ export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<
 	};
 };
 
-export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
+export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<LookupComboboxProps<T>, "value"> & {
 	slotProps?: {
 		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
 	};
@@ -70,7 +70,7 @@ export function useLookup<T extends Record<string, unknown>>({
 				style={{ positionAnchor: anchorName, ...slotProps?.dialog?.style } as React.CSSProperties}
 			>
 				{open && (
-					<Combobox
+					<LookupCombobox
 						{...props}
 						initialSearchValue={initialSearchValueRef.current}
 						onClose={() => dialogRef.current?.close()}

package/src/AfLookup/{Combobox.css → 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/{Combobox.tsx → LookupCombobox.tsx}

@@ -1,4 +1,4 @@
-import "./Combobox.css";
+import "./LookupCombobox.css";
 
 import { Button, Textfield } from "@digdir/designsystemet-react";
 import { getLocalizedString } from "@olenbetong/appframe-core";
@@ -11,7 +11,7 @@ import { VariableSizeList as VirtualList } from "react-window";
 
 import { LookupGrid } from "./LookupGrid.js";
 
-export interface ComboboxBaseProps<T extends Record<string, unknown>> {
+export interface LookupComboboxBaseProps<T extends Record<string, unknown>> {
 	nullable?: boolean;
 	dataObject: DataObject<T>;
 	uniqueIdField?: string;
@@ -22,7 +22,7 @@ export interface ComboboxBaseProps<T extends Record<string, unknown>> {
 	onClose?: () => void;
 }
 
-export interface ComboboxListProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
+export interface LookupComboboxListProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
 	/**
 	 * Renders the popup content as a list (default).
 	 */
@@ -30,7 +30,7 @@ export interface ComboboxListProps<T extends Record<string, unknown>> extends Co
 	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
 }
 
-export interface ComboboxGridProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
+export interface LookupComboboxGridProps<T extends Record<string, unknown>> extends LookupComboboxBaseProps<T> {
 	/**
 	 * Renders the popup content as a grid with a header row and one column per
 	 * entry in `columns`.
@@ -39,9 +39,9 @@ export interface ComboboxGridProps<T extends Record<string, unknown>> extends Co
 	columns: LookupColumn<T>[];
 }
 
-export type ComboboxProps<T extends Record<string, unknown>> = ComboboxListProps<T> | ComboboxGridProps<T>;
+export type LookupComboboxProps<T extends Record<string, unknown>> = LookupComboboxListProps<T> | LookupComboboxGridProps<T>;
 
-export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>) {
+export function LookupCombobox<T extends Record<string, unknown>>(props: LookupComboboxProps<T>) {
 	let {
 		nullable,
 		dataObject,
@@ -52,7 +52,7 @@ export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps
 		onClose,
 	} = props;
 	let isGrid = props.variant === "grid";
-	let columns = isGrid ? (props as ComboboxGridProps<T>).columns : undefined;
+	let columns = isGrid ? (props as LookupComboboxGridProps<T>).columns : undefined;
 	let listRef = useRef<VirtualList>(null);
 
 	let [isDesktop, setIsDesktop] = useState(
@@ -121,7 +121,7 @@ export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps
 		let item = data[index];
 		let itemId = getItemId(item);
 		let active = index === currentIndex;
-		let ItemComponent = (props as ComboboxListProps<T>).renderItem;
+		let ItemComponent = (props as LookupComboboxListProps<T>).renderItem;
 
 		return (
 			<ItemComponent

package/src/AfLookup/LookupEdit.tsx

@@ -8,11 +8,11 @@ import type { DistributiveOmit } from "@olenbetong/appframe-react";
 import clsx from "clsx";
 import type React from "react";
 
-import type { ComboboxProps } from "./Combobox.js";
+import type { LookupComboboxProps } from "./LookupCombobox.js";
 import { useLookup } from "./Lookup.js";
 
 export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
-	ComboboxProps<T>,
+	LookupComboboxProps<T>,
 	"value" | "onChange"
 > & {
 	/**

package/src/AfLookup/index.ts

@@ -1,5 +1,5 @@
 export * from "./BoundLookup.js";
-export * from "./Combobox.js";
+export * from "./LookupCombobox.js";
 export * from "./Lookup.js";
 export * from "./LookupEdit.js";
 export * from "./LookupGrid.js";

package/src/autocomplete/Autocomplete.css

@@ -0,0 +1,243 @@
+.ObAutocomplete-root {
+	--obAutocomplete-padding: 0.25rem;
+	--obAutocomplete-gap: 0.25rem;
+
+	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-root[data-size="sm"] {
+	--obAutocomplete-padding: 0.25rem;
+}
+
+.ObAutocomplete-root[data-size="md"] {
+	--obAutocomplete-padding: 0.25rem;
+}
+
+.ObAutocomplete-root[data-size="lg"] {
+	--obAutocomplete-padding: 0.375rem;
+}
+
+/*
+ * The control is the visual input: it owns the border, background, hover and
+ * focus styling, so the chips, the bare input and the buttons read as a single
+ * control. Mirrors how Designsystemet's Suggestion renders selected chips
+ * above the input.
+ */
+.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%;
+	/* 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);
+}
+
+.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);
+}
+
+.ObAutocomplete-control[data-invalid="true"] {
+	border-color: var(--ds-color-danger-border-default);
+}
+
+.ObAutocomplete-control[data-disabled="true"] {
+	cursor: not-allowed;
+	opacity: var(--ds-opacity-disabled);
+}
+
+.ObAutocomplete-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	padding-block-end: 0;
+}
+
+.ObAutocomplete-inputGroup {
+	display: flex;
+	align-items: center;
+	gap: var(--obAutocomplete-gap);
+	min-inline-size: 0;
+}
+
+.ObAutocomplete-input {
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1);
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: none;
+	outline: none;
+}
+
+.ObAutocomplete-input:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	padding: var(--ds-size-1);
+	color: inherit;
+	background: transparent;
+	border: none;
+	border-radius: var(--ds-border-radius-sm);
+	cursor: pointer;
+}
+
+.ObAutocomplete-button:hover:not(:disabled) {
+	background-color: var(--ds-color-neutral-surface-hover);
+}
+
+.ObAutocomplete-button:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button[data-visible="false"] {
+	display: none;
+}
+
+.ObAutocomplete-trigger[data-popup-open] svg {
+	rotate: 180deg;
+}
+
+.ObAutocomplete-spinner {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	padding-inline: var(--ds-size-1);
+}
+
+.ObAutocomplete-positioner {
+	z-index: 1500;
+	/* Base UI renders the positioner even while closed */
+	outline: none;
+}
+
+.ObAutocomplete-popup {
+	box-sizing: border-box;
+	inline-size: var(--anchor-width);
+	max-block-size: min(24rem, var(--available-height));
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	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,
+		scale 0.12s ease-out;
+}
+
+.ObAutocomplete-popup[data-starting-style],
+.ObAutocomplete-popup[data-ending-style] {
+	opacity: 0;
+	scale: 0.98;
+}
+
+.ObAutocomplete-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.ObAutocomplete-item {
+	display: flex;
+	align-items: center;
+	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);
+}
+
+/*
+ * 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] {
+	color: var(--ds-color-text-default);
+	background-color: var(--ds-color-surface-hover);
+}
+
+.ObAutocomplete-item[data-selected] {
+	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-surface-active);
+}
+
+.ObAutocomplete-item[data-disabled] {
+	cursor: not-allowed;
+	opacity: var(--ds-opacity-disabled);
+}
+
+.ObAutocomplete-itemIndicator {
+	display: inline-flex;
+	flex: none;
+	inline-size: 1em;
+}
+
+.ObAutocomplete-groupLabel {
+	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);
+	color: var(--ds-color-neutral-text-subtle);
+}