@dbcdk/react-components 0.0.203 → 0.0.205

package/dist/client.cjs

@@ -98,6 +98,7 @@ var CopyButton = require('./components/copy-button/CopyButton');
 var Divider = require('./components/divider/Divider');
 var Grid = require('./components/grid/Grid');
 var Alert = require('./components/alert/Alert');
+var Callout = require('./components/callout/Callout');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
 var Lightbox = require('./components/lightbox/Lightbox');
@@ -570,6 +571,10 @@ Object.defineProperty(exports, "Alert", {
   enumerable: true,
   get: function () { return Alert.Alert; }
 });
+Object.defineProperty(exports, "Callout", {
+  enumerable: true,
+  get: function () { return Callout.Callout; }
+});
 Object.defineProperty(exports, "InlineStatus", {
   enumerable: true,
   get: function () { return InlineStatus.InlineStatus; }

package/dist/client.d.ts

@@ -164,6 +164,8 @@ export { Grid, GridItem } from './components/grid/Grid';
 export type { GridGap, GridMaxWidth, GridProps, GridItemProps } from './components/grid/Grid';
 export { Alert } from './components/alert/Alert';
 export type { AlertProps } from './components/alert/Alert';
+export { Callout } from './components/callout/Callout';
+export type { CalloutProps } from './components/callout/Callout';
 export { InlineStatus } from './components/inline-status/InlineStatus';
 export type { InlineStatusProps } from './components/inline-status/InlineStatus';
 export { MediaCard } from './components/media-card/MediaCard';

package/dist/client.js

@@ -96,6 +96,7 @@ export { CopyButton } from './components/copy-button/CopyButton';
 export { Divider } from './components/divider/Divider';
 export { Grid, GridItem } from './components/grid/Grid';
 export { Alert } from './components/alert/Alert';
+export { Callout } from './components/callout/Callout';
 export { InlineStatus } from './components/inline-status/InlineStatus';
 export { MediaCard } from './components/media-card/MediaCard';
 export { Lightbox } from './components/lightbox/Lightbox';

package/dist/components/alert/Alert.module.css

@@ -1,18 +1,16 @@
 .container {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
-
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   inline-size: min(100%, var(--alert-max-width, 72ch));
   max-inline-size: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  /* Severity accent on the left edge, as on toasts. */
+  border-inline-start: var(--border-width-thick) solid var(--alert-accent);
   border-radius: var(--border-radius-default);
-  background: var(--alert-bg);
-  color: var(--alert-fg);
-  /* Severity stripe on the left edge. An inset shadow keeps size and padding unchanged. */
-  box-shadow: inset var(--border-width-thick) 0 0 var(--alert-accent, transparent);
+  background: color-mix(in srgb, var(--alert-accent) 4%, var(--color-bg-surface));
+  color: var(--color-fg-default);
   box-sizing: border-box;
 }
 
@@ -66,53 +64,35 @@
 }
 
 .neutral {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
+  --alert-accent: var(--color-border-default);
+  background: var(--color-bg-surface-subtle);
 }
 
 .success {
-  --alert-bg: var(--color-status-success-bg);
-  --alert-fg: var(--color-status-success-fg);
   --alert-accent: var(--color-status-success);
 }
 
 .warning {
-  --alert-bg: var(--color-status-warning-bg);
-  --alert-fg: var(--color-status-warning-fg);
   --alert-accent: var(--color-status-warning);
 }
 
 .error {
-  --alert-bg: var(--color-status-error-bg);
-  --alert-fg: var(--color-status-error-fg);
   --alert-accent: var(--color-status-error);
 }
 
 .info {
-  --alert-bg: var(--color-status-info-bg);
-  --alert-fg: var(--color-status-info-fg);
   --alert-accent: var(--color-status-info);
 }
 
 .brand {
-  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --alert-fg: var(--color-brand);
   --alert-accent: var(--color-brand);
 }
 
 .accent {
-  --alert-bg: var(--color-accent-bg);
-  --alert-fg: var(--color-accent-fg);
   --alert-accent: var(--color-accent);
 }
 
-/* Square corners on the striped edge, so the stripe stays straight. */
-.success,
-.warning,
-.error,
-.info,
-.brand,
-.accent {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+/* The brand icon is light (made for brand backgrounds), so use the brand colour here. */
+.brand .leading svg {
+  color: var(--color-brand);
 }

package/dist/components/callout/Callout.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Callout.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Callout({ children, severity = "neutral" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.callout} ${styles__default.default[severity]}`, children });
+}
+
+exports.Callout = Callout;

package/dist/components/callout/Callout.d.ts

@@ -0,0 +1,15 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface CalloutProps {
+    children: ReactNode;
+    /** Colour of the bar on the left edge. */
+    severity?: Severity;
+}
+/**
+ * A quiet box for extra content that belongs to what is right above it, e.g.
+ * help or examples under a form field. A light background and a bar on the
+ * left, without an outer border, so it doesn't look like an input or a card.
+ *
+ * Unlike Alert it has no icon, title or role: it isn't a message.
+ */
+export declare function Callout({ children, severity }: CalloutProps): JSX.Element;

package/dist/components/callout/Callout.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './Callout.module.css';
+
+function Callout({ children, severity = "neutral" }) {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.callout} ${styles[severity]}`, children });
+}
+
+export { Callout };

package/dist/components/callout/Callout.module.css

@@ -0,0 +1,44 @@
+.callout {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-inline-start: var(--border-width-thick) solid var(--callout-accent);
+  border-radius: var(--border-radius-default);
+  background: var(--callout-bg);
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+.neutral {
+  --callout-accent: var(--color-border-strong);
+  --callout-bg: var(--color-bg-surface-subtle);
+}
+
+.success {
+  --callout-accent: var(--color-status-success);
+  --callout-bg: color-mix(in srgb, var(--color-status-success) 8%, var(--color-bg-surface));
+}
+
+.warning {
+  --callout-accent: var(--color-status-warning);
+  --callout-bg: color-mix(in srgb, var(--color-status-warning) 8%, var(--color-bg-surface));
+}
+
+.error {
+  --callout-accent: var(--color-status-error);
+  --callout-bg: color-mix(in srgb, var(--color-status-error) 8%, var(--color-bg-surface));
+}
+
+.info {
+  --callout-accent: var(--color-status-info);
+  --callout-bg: color-mix(in srgb, var(--color-status-info) 8%, var(--color-bg-surface));
+}
+
+.brand {
+  --callout-accent: var(--color-brand);
+  --callout-bg: color-mix(in srgb, var(--color-brand) 8%, var(--color-bg-surface));
+}
+
+.accent {
+  --callout-accent: var(--color-accent);
+  --callout-bg: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-surface));
+}

package/dist/components/chip/Chip.d.ts

@@ -8,7 +8,8 @@ interface ChipProps {
     loading?: boolean;
     fullWidth?: boolean;
     onClose?: () => void;
-    size?: 'sm' | 'md' | 'lg';
+    /** 'xs' fits inside a line of text, e.g. next to a form label */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     type?: 'default' | 'rounded' | 'outlined';
     selected?: boolean;
 }

package/dist/components/chip/Chip.module.css

@@ -94,6 +94,19 @@
 
 /* Sizes */
 
+.xs {
+  height: auto;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
+}
+
+.xs .leading svg {
+  inline-size: var(--icon-size-xs);
+  block-size: var(--icon-size-xs);
+}
+
 .sm {
   height: var(--component-size-xs);
   font-size: var(--font-size-xs);

package/dist/components/forms/checkbox/Checkbox.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var react = require('react');
 var Tooltip = require('../../../components/overlay/tooltip/Tooltip');
 var styles = require('./Checkbox.module.css');
+var Circle = require('../../circle/Circle');
 var InputContainer = require('../input-container/InputContainer');
 var messageIds = require('../input-container/messageIds');
 
@@ -25,6 +26,7 @@ function Checkbox({
   labelAction,
   size = "md",
   modified,
+  modifiedLabel = "\xC6ndret",
   containerLabel,
   error,
   helpText,
@@ -52,12 +54,9 @@ function Checkbox({
   const content = /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: [
-        styles__default.default.container,
-        size === "sm" ? styles__default.default.containerSm : "",
-        modified ? styles__default.default.modified : ""
-      ].filter(Boolean).join(" "),
+      className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
       "data-cy": dataCy,
+      "data-modified": modified ? "true" : void 0,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -82,6 +81,7 @@ function Checkbox({
           }
         ) }),
         label && (labelAs === "label" ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })),
+        modified && label && !containerLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.modifiedTag, children: /* @__PURE__ */ jsxRuntime.jsx(Circle.Circle, { size: "2xs", severity: "info", children: modifiedLabel }) }),
         labelAction && !containerLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.labelAction, "data-checkbox-label-action": "true", children: labelAction }),
         endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
       ]
@@ -91,7 +91,8 @@ function Checkbox({
   return /* @__PURE__ */ jsxRuntime.jsx(
     InputContainer.InputContainer,
     {
-      modified,
+      modified: containerLabel ? modified : false,
+      modifiedLabel,
       label: containerLabel,
       labelAction: containerLabel ? labelAction : void 0,
       htmlFor: controlId,

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -8,7 +8,10 @@ interface CheckboxProps {
     onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
     variant?: Variant;
     disabled?: boolean;
+    /** Marks the checkbox as changed since it was last saved. */
     modified?: boolean;
+    /** Text shown for a modified checkbox. */
+    modifiedLabel?: string;
     label?: ReactNode;
     labelAs?: 'label' | 'span';
     /**
@@ -43,5 +46,5 @@ interface CheckboxProps {
     tooltip?: ReactNode;
     tooltipPlacement?: TooltipPlacement;
 }
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, labelAction, size, modified, containerLabel, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, labelAs, endAdornment, endAdornmentAriaHidden, labelAction, size, modified, modifiedLabel, containerLabel, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, tooltip, tooltipPlacement, }: CheckboxProps): JSX.Element;
 export {};

package/dist/components/forms/checkbox/Checkbox.js

@@ -4,6 +4,7 @@ import { Check } from 'lucide-react';
 import { useState, useId } from 'react';
 import { Tooltip } from '../../../components/overlay/tooltip/Tooltip';
 import styles from './Checkbox.module.css';
+import { Circle } from '../../circle/Circle';
 import { InputContainer } from '../input-container/InputContainer';
 import { getDescribedBy } from '../input-container/messageIds';
 
@@ -19,6 +20,7 @@ function Checkbox({
   labelAction,
   size = "md",
   modified,
+  modifiedLabel = "\xC6ndret",
   containerLabel,
   error,
   helpText,
@@ -46,12 +48,9 @@ function Checkbox({
   const content = /* @__PURE__ */ jsxs(
     "span",
     {
-      className: [
-        styles.container,
-        size === "sm" ? styles.containerSm : "",
-        modified ? styles.modified : ""
-      ].filter(Boolean).join(" "),
+      className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
       "data-cy": dataCy,
+      "data-modified": modified ? "true" : void 0,
       children: [
         /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
           "button",
@@ -76,6 +75,7 @@ function Checkbox({
           }
         ) }),
         label && (labelAs === "label" ? /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: controlId, children: label }) : /* @__PURE__ */ jsx("span", { className: styles.label, children: label })),
+        modified && label && !containerLabel && /* @__PURE__ */ jsx("span", { className: styles.modifiedTag, children: /* @__PURE__ */ jsx(Circle, { size: "2xs", severity: "info", children: modifiedLabel }) }),
         labelAction && !containerLabel && /* @__PURE__ */ jsx("span", { className: styles.labelAction, "data-checkbox-label-action": "true", children: labelAction }),
         endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
       ]
@@ -85,7 +85,8 @@ function Checkbox({
   return /* @__PURE__ */ jsx(
     InputContainer,
     {
-      modified,
+      modified: containerLabel ? modified : false,
+      modifiedLabel,
       label: containerLabel,
       labelAction: containerLabel ? labelAction : void 0,
       htmlFor: controlId,

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -7,13 +7,6 @@
   color: var(--color-fg-default);
 }
 
-.container.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 75%, transparent);
-  border-radius: var(--border-radius-default);
-  padding: 0;
-  display: inline-flex;
-}
-
 .containerSm {
   gap: var(--spacing-xs);
 }
@@ -135,3 +128,9 @@
     color: var(--color-fg-on-brand);
   }
 }
+
+.modifiedTag {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-fg-subtle);
+}

package/dist/components/forms/form-select/FormSelect.module.css

@@ -253,3 +253,13 @@
 .trailingButton:disabled svg {
   opacity: 0.4;
 }
+
+/* Error */
+.input[aria-invalid='true'],
+.input[aria-invalid='true']:hover {
+  border-color: var(--color-status-error);
+}
+
+.container:has(.input[aria-invalid='true']):focus-within {
+  box-shadow: 0 0 0 2px var(--color-status-error);
+}

package/dist/components/forms/input/Input.cjs

@@ -126,7 +126,7 @@ const Input = react.forwardRef(function Input2({
                   styles__default.default[variant],
                   icon ? styles__default.default.fieldWithIcon : "",
                   inputSize ? styles__default.default[inputSize] : "",
-                  modified ? styles__default.default.modified : "",
+                  error ? styles__default.default.invalid : "",
                   fieldClassName != null ? fieldClassName : ""
                 ].filter(Boolean).join(" "),
                 "data-forminput": "field",
@@ -141,6 +141,7 @@ const Input = react.forwardRef(function Input2({
                     {
                       ...inputProps,
                       id: inputId,
+                      "aria-invalid": error ? true : inputProps["aria-invalid"],
                       "aria-describedby": messageIds.getDescribedBy(
                         inputId,
                         { error, helpText },

package/dist/components/forms/input/Input.js

@@ -120,7 +120,7 @@ const Input = forwardRef(function Input2({
                   styles[variant],
                   icon ? styles.fieldWithIcon : "",
                   inputSize ? styles[inputSize] : "",
-                  modified ? styles.modified : "",
+                  error ? styles.invalid : "",
                   fieldClassName != null ? fieldClassName : ""
                 ].filter(Boolean).join(" "),
                 "data-forminput": "field",
@@ -135,6 +135,7 @@ const Input = forwardRef(function Input2({
                     {
                       ...inputProps,
                       id: inputId,
+                      "aria-invalid": error ? true : inputProps["aria-invalid"],
                       "aria-describedby": getDescribedBy(
                         inputId,
                         { error, helpText },

package/dist/components/forms/input/Input.module.css

@@ -140,14 +140,6 @@
   --input-autofill-ring: var(--color-navbar-fg);
 }
 
-.modified {
-  --input-autofill-ring: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 55%,
-    var(--color-border-default)
-  );
-}
-
 .embedded:has(.input:-webkit-autofill)::after {
   content: none;
 }
@@ -309,128 +301,6 @@
   color: var(--color-navbar-fg);
 }
 
-/* =========================
-   Modified state
-   ========================= */
-
-.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-/* Hover should stay warm, not switch back to the normal border */
-.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-/* Focus should also stay warm and readable */
-.modified:focus-within:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-/* Variant-specific tweaks when modified */
-.surface.modified {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.surface.modified:hover:not([aria-disabled='true']) {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.surface.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-.subtle.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 30%, var(--color-bg-toolbar));
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-  box-shadow: none;
-}
-
-.subtle.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(
-    in srgb,
-    var(--color-status-warning-bg) 36%,
-    var(--color-bg-toolbar-hover)
-  );
-}
-
-.subtle.modified:focus-within:not([aria-disabled='true']) {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-.standalone.modified {
-  box-shadow: var(--shadow-xs), var(--shadow-md);
-}
-
-.standalone.modified:hover:not([aria-disabled='true']) {
-  box-shadow: var(--shadow-sm), var(--shadow-md);
-}
-
-.standalone.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow:
-    var(--shadow-xs),
-    var(--shadow-md),
-    inset 0 0 0 1px
-      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-/* Embedded should stay visually light, but can still get the marker */
-.embedded.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 18%, transparent);
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 3px;
-  box-shadow: none;
-}
-
-.embedded.modified:hover:not([aria-disabled='true']),
-.embedded.modified:focus-within:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, transparent);
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: none;
-}
-
-/* Disabled modified state */
-.modified[aria-disabled='true'] {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  border-left-color: var(--color-disabled-border);
-  border-left-width: var(--border-width-thin);
-  box-shadow: none;
-}
-
 /* Sizes */
 .xs {
   block-size: var(--component-size-xs);
@@ -602,3 +472,14 @@
   opacity: 1;
   pointer-events: auto;
 }
+
+/* Error: wins over the variant's own border, hover and focus colours */
+.field.invalid,
+.field.invalid:hover:not([aria-disabled='true']) {
+  border-color: var(--color-status-error);
+}
+
+.field.invalid:focus-within:not([aria-disabled='true']) {
+  border-color: var(--color-status-error);
+  box-shadow: inset 0 0 0 1px var(--color-status-error);
+}

package/dist/components/forms/input-container/InputContainer.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var styles = require('./InputContainer.module.css');
 var messageIds = require('./messageIds');
-var InlineStatus = require('../../inline-status/InlineStatus');
+var Circle = require('../../circle/Circle');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -23,18 +24,28 @@ function InputContainer({
   size = "md",
   labelWidth = "160px",
   labelAlignment = "center",
-  modified = false
+  modified = false,
+  modifiedLabel = "\xC6ndret"
 }) {
-  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-xs`, children: [
+  const modifiedTag = modified && label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.modifiedTag, children: /* @__PURE__ */ jsxRuntime.jsx(Circle.Circle, { size: "2xs", severity: "info", children: modifiedLabel }) }) : null;
+  const labelRow = (withModifiedTag) => (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-xs`, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles__default.default.label, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.required, children: " *" })
     ] }),
+    withModifiedTag && modifiedTag,
     labelAction && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-input-container-label-action": "true", children: labelAction })
   ] });
+  const renderLabelRow = orientation === "vertical" ? labelRow(true) : modifiedTag ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.horizontalLabel, children: [
+    labelRow(false),
+    modifiedTag
+  ] }) : labelRow(false);
   const messageIds$1 = htmlFor ? messageIds.getMessageIds(htmlFor) : void 0;
   const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: messageIds$1 == null ? void 0 : messageIds$1.errorId, className: `${styles__default.default.errorText} ${styles__default.default.messageRow}`, children: /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: messageIds$1 == null ? void 0 : messageIds$1.errorId, className: `${styles__default.default.errorText} ${styles__default.default.messageRow}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, { className: styles__default.default.errorIcon, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+    ] }),
     (helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.helpText} ${styles__default.default.messageRow}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { id: messageIds$1 == null ? void 0 : messageIds$1.helpTextId, children: helpText }),
       helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helpTextAddition, children: helpTextAddition })
@@ -49,8 +60,10 @@ function InputContainer({
         style: { width: fullWidth ? "100%" : void 0 },
         children: [
           renderLabelRow,
-          children,
-          renderMessageRow
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
+            children,
+            renderMessageRow
+          ] })
         ]
       }
     );
@@ -64,7 +77,7 @@ function InputContainer({
         "--label-width": labelWidth,
         width: fullWidth ? "100%" : void 0
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.horizontal} dbc-flex dbc-flex-column dbc-gap-xxs`, "data-size": size, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {

package/dist/components/forms/input-container/InputContainer.d.ts

@@ -13,6 +13,9 @@ export interface InputContainerProps {
     size?: 'sm' | 'md' | 'lg';
     labelWidth?: string;
     labelAlignment?: 'top' | 'center';
+    /** Marks the field as changed since it was last saved. */
     modified?: boolean;
+    /** Text shown for a modified field. */
+    modifiedLabel?: string;
 }
-export declare function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, size, labelWidth, labelAlignment, modified, }: InputContainerProps): React.ReactElement;
+export declare function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, size, labelWidth, labelAlignment, modified, modifiedLabel, }: InputContainerProps): React.ReactElement;

package/dist/components/forms/input-container/InputContainer.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CircleAlert } from 'lucide-react';
 import styles from './InputContainer.module.css';
 import { getMessageIds } from './messageIds';
-import { InlineStatus } from '../../inline-status/InlineStatus';
+import { Circle } from '../../circle/Circle';
 
 function InputContainer({
   label,
@@ -17,18 +18,28 @@ function InputContainer({
   size = "md",
   labelWidth = "160px",
   labelAlignment = "center",
-  modified = false
+  modified = false,
+  modifiedLabel = "\xC6ndret"
 }) {
-  const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-xs`, children: [
+  const modifiedTag = modified && label ? /* @__PURE__ */ jsx("span", { className: styles.modifiedTag, children: /* @__PURE__ */ jsx(Circle, { size: "2xs", severity: "info", children: modifiedLabel }) }) : null;
+  const labelRow = (withModifiedTag) => (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-xs`, children: [
     label && /* @__PURE__ */ jsxs("label", { className: styles.label, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: styles.required, children: " *" })
     ] }),
+    withModifiedTag && modifiedTag,
     labelAction && /* @__PURE__ */ jsx("span", { "data-input-container-label-action": "true", children: labelAction })
   ] });
+  const renderLabelRow = orientation === "vertical" ? labelRow(true) : modifiedTag ? /* @__PURE__ */ jsxs("div", { className: styles.horizontalLabel, children: [
+    labelRow(false),
+    modifiedTag
+  ] }) : labelRow(false);
   const messageIds = htmlFor ? getMessageIds(htmlFor) : void 0;
   const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
-    error && /* @__PURE__ */ jsx("div", { id: messageIds == null ? void 0 : messageIds.errorId, className: `${styles.errorText} ${styles.messageRow}`, children: /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) }),
+    error && /* @__PURE__ */ jsxs("div", { id: messageIds == null ? void 0 : messageIds.errorId, className: `${styles.errorText} ${styles.messageRow}`, children: [
+      /* @__PURE__ */ jsx(CircleAlert, { className: styles.errorIcon, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: error })
+    ] }),
     (helpText || helpTextAddition) && /* @__PURE__ */ jsxs("div", { className: `${styles.helpText} ${styles.messageRow}`, children: [
       /* @__PURE__ */ jsx("span", { id: messageIds == null ? void 0 : messageIds.helpTextId, children: helpText }),
       helpTextAddition && /* @__PURE__ */ jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })
@@ -43,8 +54,10 @@ function InputContainer({
         style: { width: fullWidth ? "100%" : void 0 },
         children: [
           renderLabelRow,
-          children,
-          renderMessageRow
+          /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xxs", children: [
+            children,
+            renderMessageRow
+          ] })
         ]
       }
     );
@@ -58,7 +71,7 @@ function InputContainer({
         "--label-width": labelWidth,
         width: fullWidth ? "100%" : void 0
       },
-      children: /* @__PURE__ */ jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
+      children: /* @__PURE__ */ jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xxs`, "data-size": size, children: [
         /* @__PURE__ */ jsxs(
           "div",
           {

package/dist/components/forms/input-container/InputContainer.module.css

@@ -23,14 +23,19 @@
 
 .helpText {
   color: var(--color-fg-subtle);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   display: flex;
-  align-items: center;
+  /* Line the addition up with the first line of text, also when it wraps */
+  align-items: baseline;
   justify-content: space-between;
+  gap: var(--spacing-sm);
 }
 
 .helpTextAddition {
   color: var(--color-fg-subtle);
+  /* Never squeezed or wrapped by a long help text */
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .horizontal label {
@@ -38,8 +43,19 @@
 }
 
 .errorText {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xxs);
   color: var(--color-status-error);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
+}
+
+/* Centred on the first line of the error text */
+.errorIcon {
+  flex-shrink: 0;
+  inline-size: var(--icon-size-xs);
+  block-size: var(--icon-size-xs);
+  margin-block: calc((1lh - var(--icon-size-xs)) / 2);
 }
 
 .required {
@@ -50,3 +66,17 @@
 .messageRow {
   min-height: 1lh;
 }
+
+/* Modified: a status dot with text next to the label, not a style on the field */
+.modifiedTag {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-fg-subtle);
+}
+
+.horizontalLabel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+}

package/dist/components/forms/select/Select.cjs

@@ -240,7 +240,7 @@ function Select({
               "aria-controls": listboxId,
               "aria-invalid": Boolean(error) || void 0,
               "aria-describedby": describedBy,
-              className: modified ? styles__default.default.triggerModified : void 0,
+              className: error ? styles__default.default.triggerInvalid : void 0,
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "span",
                 {

package/dist/components/forms/select/Select.js

@@ -234,7 +234,7 @@ function Select({
               "aria-controls": listboxId,
               "aria-invalid": Boolean(error) || void 0,
               "aria-describedby": describedBy,
-              className: modified ? styles.triggerModified : void 0,
+              className: error ? styles.triggerInvalid : void 0,
               children: /* @__PURE__ */ jsxs(
                 "span",
                 {

package/dist/components/forms/select/Select.module.css

@@ -1,36 +1,3 @@
-.triggerModified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-.triggerModified:hover:not([disabled]) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-.triggerModified:focus-visible {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
 .selectedOption > button {
   background-color: var(--color-bg-toolbar-hover);
 }
@@ -39,3 +6,14 @@
 .selectedOption > button:focus-visible {
   background-color: var(--color-bg-toolbar-hover);
 }
+
+/* Error (the attribute raises specificity above Button's own border styles) */
+.triggerInvalid[data-forminput],
+.triggerInvalid[data-forminput]:hover:not([disabled]) {
+  border-color: var(--color-status-error);
+}
+
+.triggerInvalid[data-forminput]:focus-visible {
+  border-color: var(--color-status-error);
+  box-shadow: inset 0 0 0 1px var(--color-status-error);
+}

package/dist/components/forms/text-area/Textarea.cjs

@@ -107,13 +107,7 @@ const Textarea = function Textarea2({
       fullWidth,
       required,
       labelAction,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: [styles__default.default.container, modified ? styles__default.default.modified : ""].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.container, error ? styles__default.default.invalid : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField }) })
     }
   );
 };

package/dist/components/forms/text-area/Textarea.js

@@ -101,13 +101,7 @@ const Textarea = function Textarea2({
       fullWidth,
       required,
       labelAction,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: [styles.container, modified ? styles.modified : ""].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { className: [styles.container, error ? styles.invalid : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField }) })
     }
   );
 };

package/dist/components/forms/text-area/Textarea.module.css

@@ -2,38 +2,6 @@
   flex-grow: 1;
 }
 
-.container.modified textarea {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-.container.modified textarea:hover {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-.container.modified textarea:focus-visible {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
 .container textarea {
   width: 100%;
   padding: var(--spacing-xs);
@@ -69,3 +37,14 @@
   border-color: var(--color-field-focus);
   box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
+
+/* Error */
+.container.invalid textarea,
+.container.invalid textarea:hover {
+  border-color: var(--color-status-error);
+}
+
+.container.invalid textarea:focus-visible {
+  border-color: var(--color-status-error);
+  box-shadow: inset 0 0 0 1px var(--color-status-error);
+}

package/dist/components/inline-status/InlineStatus.module.css

@@ -1,18 +1,15 @@
 .container {
-  --inline-status-bg: var(--color-bg-toolbar);
-  --inline-status-fg: var(--color-fg-default);
-  --inline-status-border: var(--color-border-subtle);
-
   display: inline-flex;
   align-items: flex-start;
   gap: var(--spacing-xs);
   max-inline-size: 100%;
 
   padding: var(--spacing-2xs) var(--spacing-sm);
-  border: 1px solid var(--inline-status-border);
+  border: var(--border-width-thin) solid
+    color-mix(in srgb, var(--inline-status-accent) 25%, var(--color-border-default));
   border-radius: var(--border-radius-default);
-  background: var(--inline-status-bg);
-  color: var(--inline-status-fg);
+  background: color-mix(in srgb, var(--inline-status-accent) 4%, var(--color-bg-surface));
+  color: var(--color-fg-default);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -56,43 +53,35 @@
 }
 
 .neutral {
-  --inline-status-bg: var(--color-bg-toolbar);
-  --inline-status-fg: var(--color-fg-default);
-  --inline-status-border: transparent;
+  --inline-status-accent: var(--color-border-default);
+  background: var(--color-bg-surface-subtle);
 }
 
 .success {
-  --inline-status-bg: var(--color-status-success-bg);
-  --inline-status-fg: var(--color-status-success-fg);
-  --inline-status-border: var(--color-status-success-border);
+  --inline-status-accent: var(--color-status-success);
 }
 
 .warning {
-  --inline-status-bg: var(--color-status-warning-bg);
-  --inline-status-fg: var(--color-status-warning-fg);
-  --inline-status-border: var(--color-status-warning-border);
+  --inline-status-accent: var(--color-status-warning);
 }
 
 .error {
-  --inline-status-bg: var(--color-status-error-bg);
-  --inline-status-fg: var(--color-status-error-fg);
-  --inline-status-border: var(--color-status-error-border);
+  --inline-status-accent: var(--color-status-error);
 }
 
 .info {
-  --inline-status-bg: var(--color-status-info-bg);
-  --inline-status-fg: var(--color-status-info-fg);
-  --inline-status-border: var(--color-status-info-border);
+  --inline-status-accent: var(--color-status-info);
 }
 
 .brand {
-  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --inline-status-fg: var(--color-brand);
-  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+  --inline-status-accent: var(--color-brand);
 }
 
 .accent {
-  --inline-status-bg: var(--color-accent-bg);
-  --inline-status-fg: var(--color-accent-fg);
-  --inline-status-border: var(--color-accent-border);
+  --inline-status-accent: var(--color-accent);
+}
+
+/* The shared brand icon uses an on-brand colour; keep it visible on the faint tint. */
+.brand .leading svg {
+  color: var(--color-brand);
 }

package/dist/index.cjs

@@ -41,6 +41,7 @@ var Toast = require('./components/toast/Toast');
 var Hyperlink = require('./components/hyperlink/Hyperlink');
 var StatePage = require('./components/state-page/StatePage');
 var Alert = require('./components/alert/Alert');
+var Callout = require('./components/callout/Callout');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
 var HighlightedText = require('./components/highlighted-text/HighlightedText');
@@ -299,6 +300,12 @@ Object.keys(Alert).forEach(function (k) {
 		get: function () { return Alert[k]; }
 	});
 });
+Object.keys(Callout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Callout[k]; }
+	});
+});
 Object.keys(InlineStatus).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -10,6 +10,7 @@
 @import './components/breadcrumbs/Breadcrumbs.module.css';
 @import './components/button-select/ButtonSelect.module.css';
 @import './components/button/Button.module.css';
+@import './components/callout/Callout.module.css';
 @import './components/card-container/CardContainer.module.css';
 @import './components/card/Card.module.css';
 @import './components/card/components/CardMeta.module.css';

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from './components/toast/Toast';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/state-page/StatePage';
 export * from './components/alert/Alert';
+export * from './components/callout/Callout';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';

package/dist/index.js

@@ -39,6 +39,7 @@ export * from './components/toast/Toast';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/state-page/StatePage';
 export * from './components/alert/Alert';
+export * from './components/callout/Callout';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';

package/dist/styles/styles.css

@@ -251,10 +251,18 @@ tr.dbc-table--hover:hover td:last-child {
   color: var(--color-fg-subtle);
 }
 
+.dbc-default-text {
+  color: var(--color-fg-default);
+}
+
 .dbc-tabular-nums {
   font-variant-numeric: tabular-nums;
 }
 
+.dbc-xs-text {
+  font-size: var(--font-size-xs);
+}
+
 .dbc-sm-text {
   font-size: var(--font-size-sm);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.203",
+  "version": "0.0.205",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",