@olenbetong/appframe-ds 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @olenbetong/appframe-ds
 
+## 0.6.0
+
+### Minor Changes
+
+- 0147e80: Add `LinearProgress` component: a designsystemet-styled linear progress bar equivalent to MUI `LinearProgress`, with indeterminate and determinate modes and an `overlay` prop for an absolutely positioned bar that does not affect the layout.
+- 56080ed: Add `InputAdornments` and `InputSlot`: an input with adornments (MUI `TextField` start/end adornment equivalent) where the border, background, hover and focus styling lives on a wrapper around the input and its adornments. Adornments are passed as children, and `InputSlot` controls where the input is placed (defaults to the start).
+- bc89c1e: Migrated all icons in appframe-ds from `@mui/icons-material` to `@navikt/aksel-icons`. Bound action buttons (`SaveButton`, `DeleteButton`, `CancelButton`, `RefreshButton` and their icon-only variants) now show a leading icon that is hidden while loading, so button width no longer changes when toggling the loading state. `SaveButton` and `SaveIconButton` also display a small warning badge on the save icon when the current record has unsaved changes, matching the existing appframe-mui behavior.
+
+### Patch Changes
+
+- 0147e80: Make the indeterminate `LinearProgress` animation more visible by using a single travelling bar that stretches and shrinks, instead of the two subtle MUI-style bars.
+
+## 0.5.0
+
+### Minor Changes
+
+- a118bef: Add Aksel-inspired `Page` primitives (`Page`, `Page.Block`, `Page.Header`) replacing the now-deprecated `AppLayout`, `AppLayoutDesktop`, `AppLayoutMobile` and `PageContainer`. `Page` supports both normal document scrolling and full-viewport app layouts (`layout="app"`, replacing `fullHeight`), `Page.Block` handles max-width/gutters/centering, and `Page.Header` comes in `appbar` (with responsive app menu drawer) and `plain` variants — both prepared for the upcoming sidebar-free site layout.
+
+  Add a `Paper` surface component (MUI `Paper` equivalent): neutral surface background, rounded corners and `--ds-shadow-*` elevation, with an optional `border` for an outlined variant. Pages using the `Page` primitive get a tinted body background (`--ds-color-neutral-background-tinted`) so surfaces stand out, matching the old site design.
+
+  Add `ItemList` components (`ItemList`, `ItemList.Item`, `ItemList.ItemText`) equivalent to MUI `List`/`ListItem`/`ListItemText`, for flex-row lists with dividers and primary/secondary text — typically rendered inside a `Paper` (`<Paper as={ItemList}>`).
+
 ## 0.4.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -16,7 +16,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@digdir/designsystemet-react": ">=1.18.0",
-    "@mui/icons-material": ">=7.0.0",
+    "@navikt/aksel-icons": ">=8.16.1",
     "react": ">=19.2.8",
     "react-dom": ">=19.2.8",
     "react-error-boundary": ">=6.1.2",
@@ -25,14 +25,14 @@
   "dependencies": {
     "@olenbetong/appframe-core": "2.11.10",
     "@olenbetong/appframe-data": "1.5.0",
-    "@olenbetong/appframe-react": "1.23.0",
+    "@olenbetong/appframe-react": "2.0.0",
     "react-window": "^1.8.11",
     "react-virtualized-auto-sizer": "^1.0.26",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.18.0",
-    "@mui/icons-material": "9.2.0",
+    "@navikt/aksel-icons": "8.16.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/react-window": "^1.8.8",

package/scripts/copyAssets.mjs

@@ -12,9 +12,21 @@ const files = [
 	["src/layout/index.css", "es/layout/index.css"],
 	["src/layout/ErrorBoundary.css", "es/layout/ErrorBoundary.css"],
 	["src/layout/PageContainer.css", "es/layout/PageContainer.css"],
+	["src/page/Page.css", "es/page/Page.css"],
+	["src/page/PageBlock.css", "es/page/PageBlock.css"],
+	["src/page/PageHeader.css", "es/page/PageHeader.css"],
+	["src/list/ItemList.css", "es/list/ItemList.css"],
+	["src/input/InputAdornments.css", "es/input/InputAdornments.css"],
+	["src/paper/Paper.css", "es/paper/Paper.css"],
+	["src/progress/LinearProgress.css", "es/progress/LinearProgress.css"],
 ];
 
 mkdirSync("es/layout", { recursive: true });
+mkdirSync("es/input", { recursive: true });
+mkdirSync("es/list", { recursive: true });
+mkdirSync("es/page", { recursive: true });
+mkdirSync("es/paper", { recursive: true });
+mkdirSync("es/progress", { recursive: true });
 
 for (let [src, dest] of files) {
 	cpSync(src, dest);

package/src/AfLookup/Lookup.tsx

@@ -1,8 +1,7 @@
 import "./Lookup.css";
 
 import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import ClearIcon from "@mui/icons-material/Close";
-import SearchIcon from "@mui/icons-material/Search";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
@@ -143,7 +142,7 @@ export function AfLookup<T extends Record<string, unknown>>({
 								document.getElementById(inputId)?.focus();
 							}}
 						>
-							<ClearIcon />
+							<XMarkIcon />
 						</Button>
 					)}
 					<Button
@@ -153,7 +152,7 @@ export function AfLookup<T extends Record<string, unknown>>({
 						aria-label={getLocalizedString("Search")}
 						onClick={() => openDialog()}
 					>
-						<SearchIcon />
+						<MagnifyingGlassIcon />
 					</Button>
 				</div>
 			</div>

package/src/AfLookup/LookupEdit.tsx

@@ -1,8 +1,7 @@
 import "./Lookup.css";
 
 import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import ClearIcon from "@mui/icons-material/Close";
-import SearchIcon from "@mui/icons-material/Search";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DistributiveOmit } from "@olenbetong/appframe-react";
 
@@ -108,7 +107,7 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 								document.getElementById(inputId)?.focus();
 							}}
 						>
-							<ClearIcon />
+							<XMarkIcon />
 						</Button>
 					)}
 					<Button
@@ -121,7 +120,7 @@ export function AfLookupEdit<T extends Record<string, unknown>>({
 							openDialog();
 						}}
 					>
-						<SearchIcon />
+						<MagnifyingGlassIcon />
 					</Button>
 				</div>
 			</div>

package/src/binding/CancelButton.tsx

@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowUndoIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useCancelButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
@@ -6,11 +7,12 @@ import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "
 export const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,
 	ButtonProps
->(function CancelButton({ onClick, children, ...props }, ref) {
+>(function CancelButton({ onClick, children, loading, ...props }, ref) {
 	let { cancelEdit } = useCancelButton();
 
 	return (
 		<Button
+			loading={loading}
 			onClick={(evt) => {
 				onClick?.(evt);
 				if (!evt.defaultPrevented) {
@@ -21,6 +23,7 @@ export const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes
 			{...props}
 			ref={ref}
 		>
+			{!loading && <ArrowUndoIcon aria-hidden="true" />}
 			{children ?? getLocalizedString("Cancel")}
 		</Button>
 	);

package/src/binding/CancelIconButton.tsx

@@ -1,5 +1,5 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import UndoIcon from "@mui/icons-material/Undo";
+import { ArrowUndoIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useCancelButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
@@ -24,7 +24,7 @@ export const CancelIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps,
 			{...props}
 			ref={ref}
 		>
-			{children ?? <UndoIcon />}
+			{children ?? <ArrowUndoIcon />}
 		</Button>
 	);
 });

package/src/binding/DataEditToolbar.tsx

@@ -1,6 +1,5 @@
 import { Button, Tooltip } from "@digdir/designsystemet-react";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useCurrentIndex, useDataLength, useDataObject } from "@olenbetong/appframe-react";

package/src/binding/DeleteButton.tsx

@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { TrashIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
@@ -8,12 +9,13 @@ export type DeleteButtonProps = ButtonProps & { index?: number; prompt?: DeleteP
 export const DeleteButton: ForwardRefExoticComponent<DeleteButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,
 	DeleteButtonProps
->(function DeleteButton({ prompt, onClick, index, children, ...props }, ref) {
+>(function DeleteButton({ prompt, onClick, index, children, loading, ...props }, ref) {
 	let { deleting, deleteRow } = useDeleteButton(prompt);
+	let isLoading = deleting || loading;
 
 	return (
 		<Button
-			loading={deleting}
+			loading={isLoading}
 			data-color="danger"
 			variant="secondary"
 			onClick={(evt) => {
@@ -25,6 +27,8 @@ export const DeleteButton: ForwardRefExoticComponent<DeleteButtonProps & RefAttr
 			{...props}
 			ref={ref}
 		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && <TrashIcon aria-hidden="true" />}
 			{children ?? getLocalizedString("Delete")}
 		</Button>
 	);

package/src/binding/DeleteIconButton.tsx

@@ -1,5 +1,5 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { TrashIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DeletePrompt, useDeleteButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
@@ -7,15 +7,16 @@ import { forwardRef } from "react";
 export type DeleteIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number; prompt?: DeletePrompt };
 
 export const DeleteIconButton = forwardRef<HTMLButtonElement, DeleteIconButtonProps>(function DeleteIconButton(
-	{ prompt, onClick, index, children, ...props },
+	{ prompt, onClick, index, children, loading, ...props },
 	ref,
 ) {
 	let { isDeleting, deleteRow } = useDeleteButton(prompt);
+	let isLoading = isDeleting || loading;
 
 	return (
 		<Button
 			icon
-			loading={isDeleting}
+			loading={isLoading}
 			data-color="danger"
 			aria-label={getLocalizedString("Delete")}
 			variant="tertiary"
@@ -28,7 +29,7 @@ export const DeleteIconButton = forwardRef<HTMLButtonElement, DeleteIconButtonPr
 			{...props}
 			ref={ref}
 		>
-			{children ?? <DeleteIcon />}
+			{children ?? <TrashIcon />}
 		</Button>
 	);
 });

package/src/binding/RefreshButton.tsx

@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useRefreshButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
@@ -6,12 +7,13 @@ import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "
 export const RefreshButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,
 	ButtonProps
->(function RefreshButton({ onClick, children, ...props }, ref) {
-	let { loading, refresh } = useRefreshButton();
+>(function RefreshButton({ onClick, children, loading, ...props }, ref) {
+	let { loading: refreshing, refresh } = useRefreshButton();
+	let isLoading = refreshing || loading;
 
 	return (
 		<Button
-			loading={loading}
+			loading={isLoading}
 			onClick={(evt) => {
 				onClick?.(evt);
 				if (!evt.defaultPrevented) {
@@ -21,6 +23,8 @@ export const RefreshButton: ForwardRefExoticComponent<ButtonProps & RefAttribute
 			{...props}
 			ref={ref}
 		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && <ArrowsCirclepathIcon aria-hidden="true" />}
 			{children ?? getLocalizedString("Refresh")}
 		</Button>
 	);

package/src/binding/RefreshIconButton.tsx

@@ -1,20 +1,21 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import RefreshIcon from "@mui/icons-material/Refresh";
+import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useDataObject, useLoading } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
 
 export const RefreshIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function RefreshIconButton(
-	{ onClick, children, ...props },
+	{ onClick, children, loading, ...props },
 	ref,
 ) {
 	let dataObject = useDataObject();
-	let loading = useLoading(dataObject);
+	let refreshing = useLoading(dataObject);
+	let isLoading = refreshing || loading;
 
 	return (
 		<Button
 			icon
-			loading={loading}
+			loading={isLoading}
 			aria-label={getLocalizedString("Refresh data")}
 			variant="tertiary"
 			onClick={(evt) => {
@@ -26,7 +27,7 @@ export const RefreshIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps,
 			{...props}
 			ref={ref}
 		>
-			{children ?? <RefreshIcon />}
+			{children ?? <ArrowsCirclepathIcon />}
 		</Button>
 	);
 });

package/src/binding/RefreshRowIconButton.tsx

@@ -1,5 +1,5 @@
 import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import RefreshIcon from "@mui/icons-material/Refresh";
+import { ArrowsCirclepathIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useRefreshRowButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
@@ -7,13 +7,14 @@ import { forwardRef } from "react";
 export type RefreshRowIconButtonProps = Omit<ButtonProps, "icon"> & { index?: number };
 
 export const RefreshRowIconButton = forwardRef<HTMLButtonElement, RefreshRowIconButtonProps>(
-	function RefreshRowIconButton({ onClick, index, children, ...props }, ref) {
-		let { loading, refreshRow } = useRefreshRowButton();
+	function RefreshRowIconButton({ onClick, index, children, loading, ...props }, ref) {
+		let { loading: refreshing, refreshRow } = useRefreshRowButton();
+		let isLoading = refreshing || loading;
 
 		return (
 			<Button
 				icon
-				loading={loading}
+				loading={isLoading}
 				aria-label={getLocalizedString("Refresh current row")}
 				variant="tertiary"
 				onClick={(evt) => {
@@ -25,7 +26,7 @@ export const RefreshRowIconButton = forwardRef<HTMLButtonElement, RefreshRowIcon
 				{...props}
 				ref={ref}
 			>
-				{children ?? <RefreshIcon />}
+				{children ?? <ArrowsCirclepathIcon />}
 			</Button>
 		);
 	},

package/src/binding/SaveButton.tsx

@@ -1,4 +1,5 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { FloppydiskIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useSaveButton } from "@olenbetong/appframe-react";
 import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
@@ -6,12 +7,13 @@ import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "
 export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
 	HTMLButtonElement,
 	ButtonProps
->(function SaveButton({ onClick, children, ...props }, ref) {
-	let { saving, save } = useSaveButton();
+>(function SaveButton({ onClick, children, loading, ...props }, ref) {
+	let { dirty, saving, save } = useSaveButton();
+	let isLoading = saving || loading;
 
 	return (
 		<Button
-			loading={saving}
+			loading={isLoading}
 			onClick={(evt) => {
 				onClick?.(evt);
 				if (!evt.defaultPrevented) {
@@ -21,6 +23,14 @@ export const SaveButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<H
 			{...props}
 			ref={ref}
 		>
+			{/* Icon is hidden while loading so the spinner takes its place instead of adding width */}
+			{!isLoading && (
+				<BadgePosition placement="top-right" overlap="circle">
+					<FloppydiskIcon aria-hidden="true" />
+					{/* Indicates unsaved changes on the current record */}
+					{dirty && <Badge data-color="warning" aria-hidden="true" />}
+				</BadgePosition>
+			)}
 			{children ?? getLocalizedString("Save")}
 		</Button>
 	);

package/src/binding/SaveIconButton.tsx

@@ -1,19 +1,20 @@
-import { Button, type ButtonProps } from "@digdir/designsystemet-react";
-import SaveIcon from "@mui/icons-material/Save";
+import { Badge, BadgePosition, Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { FloppydiskIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useSaveButton } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
 
 export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function SaveIconButton(
-	{ onClick, children, ...props },
+	{ onClick, children, loading, ...props },
 	ref,
 ) {
-	let { saving, save } = useSaveButton();
+	let { dirty, saving, save } = useSaveButton();
+	let isLoading = saving || loading;
 
 	return (
 		<Button
 			icon
-			loading={saving}
+			loading={isLoading}
 			aria-label={getLocalizedString("Save")}
 			variant="tertiary"
 			onClick={(evt) => {
@@ -25,7 +26,13 @@ export const SaveIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "i
 			{...props}
 			ref={ref}
 		>
-			{children ?? <SaveIcon />}
+			{children ?? (
+				<BadgePosition placement="top-right" overlap="circle">
+					<FloppydiskIcon />
+					{/* Indicates unsaved changes on the current record */}
+					{dirty && <Badge data-color="warning" aria-hidden="true" />}
+				</BadgePosition>
+			)}
 		</Button>
 	);
 });

package/src/index.ts

@@ -1,3 +1,8 @@
 export * from "./AfLookup/index.js";
 export * from "./binding/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
+export * from "./list/index.js";
+export * from "./page/index.js";
+export * from "./paper/index.js";
+export * from "./progress/index.js";

package/src/input/InputAdornments.css

@@ -0,0 +1,75 @@
+/*
+ * The wrapper is the visual input: it owns the border, background, hover and
+ * focus styling, while the inner Designsystemet input is rendered bare so the
+ * input and the adornments read as a single control.
+ */
+.ObInputAdornments-root {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-gap: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: var(--obInputAdornments-gap);
+	padding: var(--obInputAdornments-padding);
+	inline-size: 100%;
+	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);
+}
+
+.ObInputAdornments-root[data-size="xs"] {
+	--obInputAdornments-padding: 0.125rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-1, 0.75rem);
+}
+
+.ObInputAdornments-root[data-size="sm"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
+}
+
+.ObInputAdornments-root[data-size="md"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+}
+
+.ObInputAdornments-root[data-size="lg"] {
+	--obInputAdornments-padding: 0.375rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
+}
+
+.ObInputAdornments-root:hover:not(:focus-within) {
+	border-color: var(--ds-color-neutral-border-strong, #767676);
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus, 3px);
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+/* The bare input: all the visual styling lives on the wrapper instead */
+.ObInputAdornments-root .ObInputAdornments-field {
+	flex: 1;
+	min-inline-size: 0;
+	font-size: var(--obInputAdornments-fontSize);
+	background: transparent;
+	border: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:disabled {
+	opacity: 1;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
+	box-shadow: none;
+	outline: none;
+	outline-offset: 0;
+}

package/src/input/InputAdornments.tsx

@@ -0,0 +1,97 @@
+import "./InputAdornments.css";
+
+import { Input, type InputProps } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
+
+export type InputSlotProps = {
+	/**
+	 * Extra classes for the input rendered in this slot
+	 */
+	className?: string;
+};
+
+/**
+ * Marks where the input should be rendered among the children of
+ * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
+ * for the actual input. When it is left out, the input is rendered before the
+ * adornments.
+ *
+ * @example
+ * ```jsx
+ * <InputAdornments value={value} onChange={handleChange}>
+ *   <SearchIcon aria-hidden />
+ *   <InputSlot />
+ *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
+ * </InputAdornments>
+ * ```
+ */
+export function InputSlot(_props: InputSlotProps) {
+	return null;
+}
+
+export type InputAdornmentsProps = Omit<InputProps, "children"> & {
+	/**
+	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
+	 * `InputSlot` to control where the input itself ends up.
+	 */
+	children?: ReactNode;
+	/**
+	 * Classes for the wrapper that carries the input styling
+	 */
+	className?: string;
+	/**
+	 * Classes for the bare input element itself
+	 */
+	inputClassName?: string;
+};
+
+/**
+ * Input with adornments, equivalent to a MUI `TextField` with
+ * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
+ * equivalent, so the border, background, hover and focus styling is moved from
+ * the input onto a wrapper element, making the input and its adornments read
+ * as a single control.
+ *
+ * All other props are forwarded to the Designsystemet `Input`, so `ref`,
+ * `value`, `onChange`, `data-size` and `data-color` work as usual.
+ *
+ * @example
+ * ```jsx
+ * // Input first (default), adornments after
+ * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
+ *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
+ * </InputAdornments>
+ *
+ * // Explicit placement with InputSlot
+ * <InputAdornments aria-label="Amount" data-size="lg">
+ *   <span aria-hidden>kr</span>
+ *   <InputSlot />
+ *   <span aria-hidden>,-</span>
+ * </InputAdornments>
+ * ```
+ */
+export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
+	let size = props["data-size"];
+	let color = props["data-color"];
+	let childArray = Children.toArray(children);
+	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
+		| ReactElement<InputSlotProps>
+		| undefined;
+
+	let input = (
+		<Input
+			key="ObInputAdornments-input"
+			{...props}
+			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
+		/>
+	);
+
+	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
+
+	return (
+		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
+			{content}
+		</div>
+	);
+}

package/src/input/index.ts

@@ -0,0 +1 @@
+export * from "./InputAdornments.js";

package/src/layout/AppLayoutDesktop.tsx

@@ -21,6 +21,9 @@ function LoadingFallback() {
 	);
 }
 
+/**
+ * @deprecated Use the `Page` primitives instead (`Page`, `Page.Header`, `Page.Block`).
+ */
 export function AppLayoutDesktop({ AppMenuProps, children, menu, partner }: AppLayoutProps) {
 	let [open, setOpen] = useState(true);
 

package/src/layout/AppLayoutMobile.tsx

@@ -15,6 +15,9 @@ function Toggle({ onToggle }: { onToggle: () => void }) {
 	);
 }
 
+/**
+ * @deprecated Use the `Page` primitives instead (`Page`, `Page.Header`, `Page.Block`).
+ */
 export function AppLayoutMobile({ AppMenuProps, children, menu, partner }: AppLayoutProps) {
 	let [drawerOpen, setDrawerOpen] = useState(false);
 	let location = useLocation();

package/src/layout/AppMenu.css

@@ -7,6 +7,7 @@
 	letter-spacing: -0.02rem;
 	font-size: var(--ds-font-size-xl, 1.5rem);
 	margin: 0;
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
 }
 
 .AppMenu-header .AppMenu-subTitle {