@olenbetong/appframe-ds 0.5.0 → 0.7.0

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,10 @@
 export * from "./AfLookup/index.js";
+export * from "./autocomplete/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";
+export * from "./sortable/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";

package/src/sortable/DropIndicator.css

@@ -0,0 +1,51 @@
+:root {
+	--ob-drop-indicator-thickness: 0.125rem;
+	--ob-drop-indicator-color: #3f3fa3;
+	--ob-drop-indicator-terminal-size: 0.75rem;
+}
+
+.ObDropIndicator-root {
+	position: absolute;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+
+	pointer-events: none;
+
+	&::before {
+		content: "";
+
+		border: var(--ob-drop-indicator-thickness) solid var(--ob-drop-indicator-color);
+		border-radius: 50%;
+
+		width: var(--ob-drop-indicator-terminal-size);
+		height: var(--ob-drop-indicator-terminal-size);
+	}
+
+	&::after {
+		content: "";
+
+		height: var(--ob-drop-indicator-thickness);
+		flex-grow: 1;
+		background-color: var(--ob-drop-indicator-color);
+	}
+
+	&.ObDropIndicator-top,
+	&.ObDropIndicator-bottom {
+		height: var(--ob-drop-indicator-thickness);
+
+		left: calc(-1 * var(--ob-drop-indicator-terminal-size) / 2);
+		width: calc(100% + var(--ob-drop-indicator-terminal-size) / 2);
+	}
+
+	&.ObDropIndicator-top {
+		top: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / -2));
+	}
+
+	&.ObDropIndicator-bottom {
+		bottom: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / 2));
+	}
+}