@olenbetong/appframe-ds 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.5.0",
+  "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

@@ -16,13 +16,17 @@ const files = [
 	["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,6 +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/progress/LinearProgress.css

@@ -0,0 +1,93 @@
+.ObLinearProgress-root {
+	--obLinearProgress-thickness: 0.25rem;
+	--obLinearProgress-duration: 2.1s;
+
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+	inline-size: 100%;
+	block-size: var(--obLinearProgress-thickness);
+	overflow: hidden;
+	background-color: var(--ds-color-surface-active, #cddffb);
+	border-radius: var(--ds-border-radius-full, 624.9375rem);
+}
+
+.ObLinearProgress-root[data-size="xs"] {
+	--obLinearProgress-thickness: 0.125rem;
+}
+
+.ObLinearProgress-root[data-size="sm"] {
+	--obLinearProgress-thickness: 0.25rem;
+}
+
+.ObLinearProgress-root[data-size="md"] {
+	--obLinearProgress-thickness: 0.5rem;
+}
+
+.ObLinearProgress-root[data-size="lg"] {
+	--obLinearProgress-thickness: 0.75rem;
+}
+
+.ObLinearProgress-bar {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-start: 0;
+	inline-size: 100%;
+	background-color: var(--ds-color-base-default, #0062ba);
+	border-radius: inherit;
+}
+
+.ObLinearProgress-determinate .ObLinearProgress-bar {
+	transition: inline-size 0.2s linear;
+}
+
+/*
+ * The indeterminate bar is full width and animated with `transform`, where the
+ * start and end of the bar move at different speeds (the bar stretches and
+ * shrinks as it travels).
+ */
+.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+	transform-origin: left center;
+	will-change: transform;
+	animation: ObLinearProgress-indeterminate var(--obLinearProgress-duration) cubic-bezier(0.65, 0.815, 0.735, 0.395)
+		infinite;
+}
+
+/* Zero-height wrapper so the overlay bar never affects the layout */
+.ObLinearProgress-overlay {
+	position: relative;
+	z-index: 1;
+	block-size: 0;
+}
+
+.ObLinearProgress-overlay > .ObLinearProgress-root {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline: 0;
+}
+
+@keyframes ObLinearProgress-indeterminate {
+	0% {
+		transform: translateX(-35%) scaleX(0.35);
+	}
+
+	60% {
+		transform: translateX(60%) scaleX(0.7);
+	}
+
+	100% {
+		transform: translateX(100%) scaleX(0.2);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+		animation-duration: 4s;
+	}
+}
+
+@media print {
+	.ObLinearProgress-root {
+		display: none;
+	}
+}

package/src/progress/LinearProgress.tsx

@@ -0,0 +1,104 @@
+import "./LinearProgress.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const linearProgressSizes = ["xs", "sm", "md", "lg"] as const;
+
+export type LinearProgressSize = (typeof linearProgressSizes)[number];
+
+export type LinearProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	/**
+	 * Designsystemet colour palette used for the bar
+	 * @default "accent"
+	 */
+	"data-color"?: string;
+	/**
+	 * Thickness of the bar
+	 * @default "sm"
+	 */
+	"data-size"?: LinearProgressSize;
+	/**
+	 * Renders the bar absolutely positioned in a zero-height wrapper, so it
+	 * overlays the top of the following content instead of taking up space.
+	 * Use it for loading indicators that should not shift the layout.
+	 * @default false
+	 */
+	overlay?: boolean;
+	/**
+	 * Progress value. When omitted the bar is indeterminate.
+	 */
+	value?: number;
+	/**
+	 * Highest possible value of `value`
+	 * @default 100
+	 */
+	valueMax?: number;
+	/**
+	 * Lowest possible value of `value`
+	 * @default 0
+	 */
+	valueMin?: number;
+};
+
+/**
+ * Linear progress indicator, equivalent to MUI `LinearProgress`. Indeterminate
+ * by default, determinate when `value` is given. Designsystemet has no linear
+ * progress component, so this is built with the designsystemet colour and
+ * radius tokens (use `data-color` to change palette).
+ *
+ * @example
+ * ```jsx
+ * // Indeterminate, in the normal document flow
+ * <LinearProgress aria-label="Loading..." />
+ *
+ * // Determinate
+ * <LinearProgress aria-label="Uploading" value={40} />
+ *
+ * // Absolutely positioned, does not affect the layout
+ * <LinearProgress overlay aria-label="Loading..." />
+ * ```
+ */
+export function LinearProgress({
+	className,
+	overlay,
+	value,
+	valueMax = 100,
+	valueMin = 0,
+	"data-color": color = "accent",
+	"data-size": size = "sm",
+	...props
+}: LinearProgressProps) {
+	let isDeterminate = typeof value === "number" && Number.isFinite(value);
+	let clamped = isDeterminate ? Math.min(Math.max(value as number, valueMin), valueMax) : undefined;
+	let percentage =
+		clamped === undefined || valueMax === valueMin ? undefined : ((clamped - valueMin) / (valueMax - valueMin)) * 100;
+
+	let bar = (
+		<div
+			className={clsx(
+				"ObLinearProgress-root",
+				isDeterminate ? "ObLinearProgress-determinate" : "ObLinearProgress-indeterminate",
+				!overlay && className,
+			)}
+			data-color={color}
+			data-size={size}
+			role="progressbar"
+			aria-valuemin={valueMin}
+			aria-valuemax={valueMax}
+			aria-valuenow={clamped}
+			{...props}
+		>
+			<div
+				className="ObLinearProgress-bar"
+				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
+			/>
+		</div>
+	);
+
+	if (!overlay) {
+		return bar;
+	}
+
+	return <div className={clsx("ObLinearProgress-overlay", className)}>{bar}</div>;
+}

package/src/progress/index.ts

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