@dbcdk/react-components 0.0.151 → 0.0.153

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

@@ -95,3 +95,9 @@
   --alert-fg: var(--color-brand);
   --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
 }
+
+.accent {
+  --alert-bg: var(--color-accent-bg);
+  --alert-fg: var(--color-accent-fg);
+  --alert-border: var(--color-accent-border);
+}

package/dist/components/attribute-chip/AttributeChip.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var severity = require('../../constants/severity');
 var styles = require('./AttributeChip.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,15 +13,23 @@ function AttributeChip({
   value,
   size = "md",
   loading,
-  severity = "neutral"
+  severity: severity$1
 }) {
-  const valueClassName = [styles__default.default.value, styles__default.default[severity], !label && styles__default.default.valueStandalone].filter(Boolean).join(" ");
+  const markerSeverity = severity$1 && severity$1 !== "neutral" ? severity$1 : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
     label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" })
+      !markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true", children: "|" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    markerSeverity ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: styles__default.default.marker,
+        "aria-hidden": "true",
+        style: { "--attribute-chip-marker-color": severity.SeverityBgColor[markerSeverity] }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { SeverityBgColor } from '../../constants/severity';
 import styles from './AttributeChip.module.css';
 
 function AttributeChip({
@@ -6,15 +7,23 @@ function AttributeChip({
   value,
   size = "md",
   loading,
-  severity = "neutral"
+  severity
 }) {
-  const valueClassName = [styles.value, styles[severity], !label && styles.valueStandalone].filter(Boolean).join(" ");
+  const markerSeverity = severity && severity !== "neutral" ? severity : void 0;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
     label ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" })
+      !markerSeverity ? /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true", children: "|" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx("span", { className: valueClassName, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
+    markerSeverity ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.marker,
+        "aria-hidden": "true",
+        style: { "--attribute-chip-marker-color": SeverityBgColor[markerSeverity] }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
 

package/dist/components/attribute-chip/AttributeChip.module.css

@@ -1,6 +1,7 @@
 .container {
   display: inline-flex;
   align-items: center;
+  gap: var(--spacing-2xs);
   white-space: nowrap;
   border-radius: var(--border-radius-default);
   border: 1px solid var(--color-border-subtle);
@@ -13,14 +14,12 @@
      avoids uneven leading around the glyphs at different font-sizes. */
   line-height: 1;
   --attribute-chip-padding-inline: var(--spacing-xxs);
-  --attribute-chip-value-bleed: calc(
-    (var(--attribute-chip-padding-inline) - var(--spacing-2xs)) * -1
-  );
   padding-inline: var(--attribute-chip-padding-inline);
 }
 
 .label,
-.value {
+.value,
+.marker {
   display: inline-flex;
   align-items: center;
   height: 100%;
@@ -32,28 +31,20 @@
 }
 
 .value {
-  height: calc(100% - 2 * var(--spacing-2xs));
-  margin-block: var(--spacing-2xs);
   font-weight: var(--font-weight-medium);
-  padding-inline: var(--attribute-chip-padding-inline);
-  margin-inline-end: var(--attribute-chip-value-bleed);
-  border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
-  background: var(--value-bg, transparent);
-  color: var(--value-fg, inherit);
 }
 
-/* When there's no label/separator before it, the value is the only content,
-   so it bleeds into the left padding too and becomes a full pill. A thin
-   sliver of the container's own background stays visible around it. */
-.valueStandalone {
-  margin-inline-start: var(--attribute-chip-value-bleed);
-  border-radius: var(--border-radius-default);
+.marker {
+  inline-size: var(--border-width-medium);
+  block-size: 0.9em;
+  flex: 0 0 auto;
+  border-radius: var(--border-radius-sm);
+  background: var(--attribute-chip-marker-color, var(--color-brand));
+  margin-inline: var(--spacing-2xs) var(--spacing-2xs);
 }
 
 .separator {
   color: var(--color-border-default);
-  margin-inline-start: var(--spacing-xxs);
-  margin-inline-end: var(--spacing-2xs);
 }
 
 /* Sizes */
@@ -71,35 +62,3 @@
   height: var(--component-size-md);
   font-size: var(--font-size-md);
 }
-
-/* Severity colors for the value */
-
-.neutral {
-  --value-bg: transparent;
-  --value-fg: inherit;
-}
-
-.success {
-  --value-bg: var(--color-status-success-bg);
-  --value-fg: var(--color-status-success-fg);
-}
-
-.warning {
-  --value-bg: var(--color-status-warning-bg);
-  --value-fg: var(--color-status-warning-fg);
-}
-
-.error {
-  --value-bg: var(--color-status-error-bg);
-  --value-fg: var(--color-status-error-fg);
-}
-
-.info {
-  --value-bg: var(--color-status-info-bg);
-  --value-fg: var(--color-status-info-fg);
-}
-
-.brand {
-  --value-bg: var(--color-brand);
-  --value-fg: var(--color-fg-on-brand);
-}

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

@@ -172,6 +172,17 @@
   box-shadow: inset 0 0 0 1px transparent;
 }
 
+.accent {
+  --chip-bg: var(--color-accent-bg);
+  --chip-fg: var(--color-accent-fg);
+  --chip-border: transparent;
+  --chip-outlined-border: var(--color-accent-border);
+  --chip-outlined-border-hover: var(--color-accent-border);
+  --chip-outlined-fg: var(--color-accent-fg);
+  --chip-outlined-fg-hover: var(--color-accent-fg);
+  box-shadow: inset 0 0 0 1px var(--color-accent-border);
+}
+
 /* Selected */
 
 .selected {

package/dist/components/circle/Circle.module.css

@@ -40,6 +40,9 @@
 .brand {
   background-color: var(--color-brand);
 }
+.accent {
+  background-color: var(--color-accent);
+}
 .success {
   background-color: var(--color-status-success);
 }
@@ -57,6 +60,10 @@
   box-shadow: 0 0 0 2px var(--color-bg-selected);
 }
 
+.accent[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-accent-bg);
+}
+
 .success[data-glow='true'] {
   box-shadow: 0 0 0 2px var(--color-status-success-bg);
 }

package/dist/components/environment-banner/EnvironmentBanner.module.css

@@ -43,6 +43,11 @@
   --env-banner-fg: var(--color-fg-on-brand);
 }
 
+.banner[data-severity='accent'] {
+  --env-banner-bg: var(--color-accent);
+  --env-banner-fg: var(--color-fg-on-accent);
+}
+
 .banner[data-severity='neutral'] {
   --env-banner-bg: var(--color-neutral);
   --env-banner-fg: var(--color-fg-default);

package/dist/components/forms/multi-select/MultiSelect.cjs

@@ -25,7 +25,8 @@ function MultiSelect({
   disabled = false,
   searchable = false,
   searchPlaceholder = "S\xF8g",
-  emptyMessage = "Ingen resultater"
+  emptyMessage = "Ingen resultater",
+  popoverWidth
 }) {
   const selectedSet = react.useMemo(() => new Set(selectedValues), [selectedValues]);
   const popoverRef = react.useRef(null);
@@ -116,6 +117,7 @@ function MultiSelect({
     {
       ref: popoverRef,
       open,
+      minWidth: popoverWidth,
       onOpenChange: (next) => {
         setOpen(next);
         if (next) {

package/dist/components/forms/multi-select/MultiSelect.d.ts

@@ -20,6 +20,7 @@ interface MultiSelectProps<T> {
     searchable?: boolean;
     searchPlaceholder?: string;
     emptyMessage?: string;
+    popoverWidth?: string;
 }
-export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, placeholder, children, variant, size, onClear, dataCy, fullWidth, disabled, searchable, searchPlaceholder, emptyMessage, }: MultiSelectProps<T>): ReactNode;
+export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, placeholder, children, variant, size, onClear, dataCy, fullWidth, disabled, searchable, searchPlaceholder, emptyMessage, popoverWidth, }: MultiSelectProps<T>): ReactNode;
 export {};

package/dist/components/forms/multi-select/MultiSelect.js

@@ -23,7 +23,8 @@ function MultiSelect({
   disabled = false,
   searchable = false,
   searchPlaceholder = "S\xF8g",
-  emptyMessage = "Ingen resultater"
+  emptyMessage = "Ingen resultater",
+  popoverWidth
 }) {
   const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
   const popoverRef = useRef(null);
@@ -114,6 +115,7 @@ function MultiSelect({
     {
       ref: popoverRef,
       open,
+      minWidth: popoverWidth,
       onOpenChange: (next) => {
         setOpen(next);
         if (next) {

package/dist/components/icon/Icon.cjs

@@ -14,7 +14,8 @@ const SeverityIcon = {
   error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
   info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
   warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
-  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
+  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {}),
+  accent: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, {})
 };
 function Icon({ severity, label, customIcon }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [

package/dist/components/icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import { Sparkles, Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
 import styles from './Icon.module.css';
 
 const SeverityIcon = {
@@ -8,7 +8,8 @@ const SeverityIcon = {
   error: /* @__PURE__ */ jsx(CircleX, {}),
   info: /* @__PURE__ */ jsx(Info, {}),
   warning: /* @__PURE__ */ jsx(CircleAlert, {}),
-  brand: /* @__PURE__ */ jsx(Building2, {})
+  brand: /* @__PURE__ */ jsx(Building2, {}),
+  accent: /* @__PURE__ */ jsx(Sparkles, {})
 };
 function Icon({ severity, label, customIcon }) {
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [

package/dist/components/icon/Icon.module.css

@@ -35,3 +35,7 @@
 .brand {
   color: var(--color-fg-on-brand);
 }
+
+.accent {
+  color: var(--color-accent);
+}

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

@@ -90,3 +90,9 @@
   --inline-status-fg: var(--color-brand);
   --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
 }
+
+.accent {
+  --inline-status-bg: var(--color-accent-bg);
+  --inline-status-fg: var(--color-accent-fg);
+  --inline-status-border: var(--color-accent-border);
+}

package/dist/components/metric-tile/MetricTile.module.css

@@ -57,6 +57,11 @@
   color: var(--color-fg-on-brand);
 }
 
+.tile[data-severity='accent'] {
+  background-color: var(--color-accent-bg-soft);
+  color: var(--color-accent-fg-soft);
+}
+
 .label {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold, 600);

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -16,6 +16,7 @@
   --progress-fill-info: color-mix(in srgb, var(--color-status-info) 70%, transparent);
   --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 70%, transparent);
   --progress-fill-error: color-mix(in srgb, var(--color-status-error) 75%, transparent);
+  --progress-fill-accent: color-mix(in srgb, var(--color-accent) 75%, transparent);
 
   position: relative;
   width: 100%;
@@ -106,6 +107,10 @@
   background: var(--progress-fill-error);
 }
 
+.progressSegment[data-severity='accent'] {
+  background: var(--progress-fill-accent);
+}
+
 /* Label overlay */
 .progressCenter {
   position: absolute;

package/dist/components/toast/Toast.module.css

@@ -41,6 +41,10 @@
   border-left-color: var(--color-brand);
 }
 
+.accent {
+  border-left-color: var(--color-accent);
+}
+
 .success {
   border-left-color: var(--color-status-success);
 }

package/dist/constants/severity.cjs

@@ -3,6 +3,7 @@
 const SeverityBgColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent)",
   success: "var(--color-status-success)",
   error: "var(--color-status-error)",
   info: "var(--color-status-info)",
@@ -11,6 +12,7 @@ const SeverityBgColor = {
 const SeverityBorderColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent-border)",
   success: "var(--color-status-success-border)",
   error: "var(--color-status-error-border)",
   info: "var(--color-status-info-border)",
@@ -19,6 +21,7 @@ const SeverityBorderColor = {
 const SeverityTextColor = {
   neutral: "var(--color-neutral-strong-fg)",
   brand: "var(--color-fg-on-brand)",
+  accent: "var(--color-accent-fg)",
   success: "var(--color-status-success-fg)",
   error: "var(--color-status-error-fg)",
   info: "var(--color-status-info-fg)",

package/dist/constants/severity.js

@@ -1,6 +1,7 @@
 const SeverityBgColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent)",
   success: "var(--color-status-success)",
   error: "var(--color-status-error)",
   info: "var(--color-status-info)",
@@ -9,6 +10,7 @@ const SeverityBgColor = {
 const SeverityBorderColor = {
   neutral: "var(--color-neutral-strong)",
   brand: "var(--color-brand)",
+  accent: "var(--color-accent-border)",
   success: "var(--color-status-success-border)",
   error: "var(--color-status-error-border)",
   info: "var(--color-status-info-border)",
@@ -17,6 +19,7 @@ const SeverityBorderColor = {
 const SeverityTextColor = {
   neutral: "var(--color-neutral-strong-fg)",
   brand: "var(--color-fg-on-brand)",
+  accent: "var(--color-accent-fg)",
   success: "var(--color-status-success-fg)",
   error: "var(--color-status-error-fg)",
   info: "var(--color-status-info-fg)",

package/dist/constants/severity.types.d.ts

@@ -1 +1 @@
-export type Severity = 'neutral' | 'brand' | 'success' | 'error' | 'info' | 'warning';
+export type Severity = 'neutral' | 'brand' | 'accent' | 'success' | 'error' | 'info' | 'warning';

package/dist/styles/themes/dbc/colors.css

@@ -43,6 +43,9 @@ html {
   /* Accents */
   --dbc-pink-500: light-dark(#ec4899, #f472b6);
   --dbc-pink-600: light-dark(#be185d, #db2777);
+  --dbc-magenta-500: light-dark(#d946ef, #e879f9);
+  --dbc-magenta-100: light-dark(#fae8ff, #3b0a45);
+  --dbc-magenta-700: light-dark(#a21caf, #f5d0fe);
 
   --dbc-gray-500: light-dark(#6b7280, #9ca3af);
   --dbc-gray-600: light-dark(#4b5563, #6b7280);
@@ -77,6 +80,11 @@ html {
   --color-brand: var(--dbc-blue-500);
   --color-brand-hover: var(--dbc-blue-600);
   --color-brand-strong: var(--dbc-blue-600);
+  --color-accent: var(--dbc-magenta-500);
+  --color-accent-bg: var(--dbc-magenta-100);
+  --color-accent-border: color-mix(in srgb, var(--dbc-magenta-500) 24%, transparent);
+  --color-accent-fg: var(--dbc-magenta-700);
+  --color-fg-on-accent: light-dark(#ffffff, #111827);
 
   /* Backgrounds & surfaces */
   --color-bg-page: light-dark(#ffffff, #111827);
@@ -176,6 +184,8 @@ html {
   --color-status-warning-fg-soft: var(--color-status-warning-fg);
   --color-status-error-fg-soft: var(--color-status-error-fg);
   --color-status-info-fg-soft: var(--color-status-info-fg);
+  --color-accent-bg-soft: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-surface));
+  --color-accent-fg-soft: var(--color-accent-fg);
 
   /* Chart colors */
   --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 10%, rgb(255 255 255 / 0));
@@ -184,6 +194,7 @@ html {
   --color-chart-success: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));
   --color-chart-warning: color-mix(in srgb, var(--dbc-amber-400) 75%, rgb(255 255 255 / 0));
   --color-chart-brand: color-mix(in srgb, var(--dbc-pink-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-accent: color-mix(in srgb, var(--dbc-magenta-500) 75%, rgb(255 255 255 / 0));
   --color-chart-info: color-mix(in srgb, var(--dbc-info-500) 75%, rgb(255 255 255 / 0));
   --color-chart-error: color-mix(in srgb, var(--dbc-red-600) 75%, rgb(255 255 255 / 0));
 
@@ -192,6 +203,7 @@ html {
   --color-chart-green: var(--color-chart-success);
   --color-chart-amber: var(--color-chart-warning);
   --color-chart-pink: var(--color-chart-brand);
+  --color-chart-magenta: var(--color-chart-accent);
   --color-chart-sky: var(--color-chart-info);
   --color-chart-red: var(--color-chart-error);
 

package/package.json

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