@dbcdk/react-components 0.0.202 → 0.0.204

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

@@ -6,6 +6,7 @@ import { ClearButton } from '../../../components/clear-button/ClearButton';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from '../input/Input.module.css';
 import { InputContainer } from '../input-container/InputContainer';
+import { getDescribedBy } from '../input-container/messageIds';
 
 function mergeRefs(...refs) {
   return (node) => {
@@ -21,6 +22,7 @@ const Input = forwardRef(function Input2({
   labelAction,
   error,
   helpText,
+  helpTextAddition,
   orientation = "vertical",
   labelWidth = "160px",
   fullWidth = false,
@@ -91,6 +93,7 @@ const Input = forwardRef(function Input2({
       fullWidth,
       error,
       helpText,
+      helpTextAddition,
       orientation,
       labelWidth,
       required,
@@ -117,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",
@@ -132,6 +135,12 @@ const Input = forwardRef(function Input2({
                     {
                       ...inputProps,
                       id: inputId,
+                      "aria-invalid": error ? true : inputProps["aria-invalid"],
+                      "aria-describedby": getDescribedBy(
+                        inputId,
+                        { error, helpText },
+                        inputProps["aria-describedby"]
+                      ),
                       ref: mergeRefs(inputRef, ref),
                       className: [styles.input, inputSize ? styles[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
                     }

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 variant and modified styles */
+.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,8 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 var styles = require('./InputContainer.module.css');
-var InlineStatus = require('../../inline-status/InlineStatus');
+var messageIds = require('./messageIds');
+var Circle = require('../../circle/Circle');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -22,19 +24,33 @@ 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 renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? styles__default.default.errorText : styles__default.default.helpText} ${styles__default.default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),
-    helpTextAddition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.helpTextAddition, children: helpTextAddition })
-  ] }) });
+  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.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 })
+    ] })
+  ] });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -44,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
+          ] })
         ]
       }
     );
@@ -59,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,6 +1,8 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CircleAlert } from 'lucide-react';
 import styles from './InputContainer.module.css';
-import { InlineStatus } from '../../inline-status/InlineStatus';
+import { getMessageIds } from './messageIds';
+import { Circle } from '../../circle/Circle';
 
 function InputContainer({
   label,
@@ -16,19 +18,33 @@ 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 renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? styles.errorText : styles.helpText} ${styles.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: helpText }),
-    helpTextAddition && /* @__PURE__ */ jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })
-  ] }) });
+  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__ */ 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 })
+    ] })
+  ] });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -38,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
+          ] })
         ]
       }
     );
@@ -53,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/input-container/messageIds.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+function getMessageIds(controlId) {
+  return { errorId: `${controlId}-error`, helpTextId: `${controlId}-help` };
+}
+function getDescribedBy(controlId, { error, helpText }, ...extraIds) {
+  const { errorId, helpTextId } = getMessageIds(controlId);
+  const ids = [error ? errorId : void 0, helpText ? helpTextId : void 0, ...extraIds].filter(
+    Boolean
+  );
+  return ids.length ? ids.join(" ") : void 0;
+}
+
+exports.getDescribedBy = getDescribedBy;
+exports.getMessageIds = getMessageIds;

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

@@ -0,0 +1,13 @@
+/** Ids of the error and help text that InputContainer renders for a control with id `controlId`. */
+export declare function getMessageIds(controlId: string): {
+    errorId: string;
+    helpTextId: string;
+};
+/**
+ * aria-describedby value for a control inside InputContainer: the rendered error and help text,
+ * followed by any extra ids (e.g. a tooltip or the consumer's own aria-describedby).
+ */
+export declare function getDescribedBy(controlId: string, { error, helpText }: {
+    error?: unknown;
+    helpText?: unknown;
+}, ...extraIds: Array<string | undefined | null | false>): string | undefined;

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

@@ -0,0 +1,12 @@
+function getMessageIds(controlId) {
+  return { errorId: `${controlId}-error`, helpTextId: `${controlId}-help` };
+}
+function getDescribedBy(controlId, { error, helpText }, ...extraIds) {
+  const { errorId, helpTextId } = getMessageIds(controlId);
+  const ids = [error ? errorId : void 0, helpText ? helpTextId : void 0, ...extraIds].filter(
+    Boolean
+  );
+  return ids.length ? ids.join(" ") : void 0;
+}
+
+export { getDescribedBy, getMessageIds };