@dbcdk/react-components 0.0.204 → 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/forms/input/Input.module.css

@@ -473,7 +473,7 @@
   pointer-events: auto;
 }
 
-/* Error: wins over variant and modified styles */
+/* 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);

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

@@ -7,7 +7,7 @@
   background-color: var(--color-bg-toolbar-hover);
 }
 
-/* Error: wins over modified styles (attribute bumps specificity over Button's own styles) */
+/* 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);

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

@@ -38,7 +38,7 @@
   box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
-/* Error: wins over modified styles */
+/* Error */
 .container.invalid textarea,
 .container.invalid textarea:hover {
   border-color: 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.204",
+  "version": "0.0.205",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",