@dbcdk/react-components 0.0.187 → 0.0.189

package/dist/client.cjs

@@ -34,6 +34,7 @@ var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
 var Page = require('./components/page/Page');
 var Breadcrumbs = require('./components/breadcrumbs/Breadcrumbs');
 var Circle = require('./components/circle/Circle');
+var Badge = require('./components/badge/Badge');
 var Checkbox = require('./components/forms/checkbox/Checkbox');
 var Switch = require('./components/forms/switch/Switch');
 var Table = require('./components/table/Table');
@@ -301,6 +302,12 @@ Object.keys(Circle).forEach(function (k) {
 		get: function () { return Circle[k]; }
 	});
 });
+Object.keys(Badge).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Badge[k]; }
+	});
+});
 Object.keys(Checkbox).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -31,6 +31,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './components/forms/checkbox/Checkbox';
 export * from './components/forms/switch/Switch';
 export * from './components/table/Table';

package/dist/client.js

@@ -32,6 +32,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './components/forms/checkbox/Checkbox';
 export * from './components/forms/switch/Switch';
 export * from './components/table/Table';

package/dist/components/badge/Badge.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Badge.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function formatBadgeCount(count, max) {
+  return count > max ? `${max}+` : String(count);
+}
+function Badge({
+  children,
+  count,
+  max = 99,
+  severity = "error",
+  dot = false
+}) {
+  const showBadge = dot || typeof count === "number" && count > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.wrapper, children: [
+    children,
+    showBadge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.badge} ${styles__default.default[severity]}`, "data-dot": dot || void 0, children: !dot && typeof count === "number" ? formatBadgeCount(count, max) : null })
+  ] });
+}
+
+exports.Badge = Badge;
+exports.formatBadgeCount = formatBadgeCount;

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+interface BadgeProps {
+    /** The element the badge is overlaid on top of, e.g. an icon. */
+    children: ReactNode;
+    /** Shown inside the badge, capped at `max`. Omit (with `dot` false) to render nothing. */
+    count?: number;
+    /** Counts above this render as `${max}+`. */
+    max?: number;
+    severity?: Severity;
+    /** Render a plain dot instead of a count - use when only "something changed" matters, not how much. */
+    dot?: boolean;
+}
+export declare function formatBadgeCount(count: number, max: number): string;
+export declare function Badge({ children, count, max, severity, dot, }: BadgeProps): JSX.Element;
+export {};

package/dist/components/badge/Badge.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Badge.module.css';
+
+function formatBadgeCount(count, max) {
+  return count > max ? `${max}+` : String(count);
+}
+function Badge({
+  children,
+  count,
+  max = 99,
+  severity = "error",
+  dot = false
+}) {
+  const showBadge = dot || typeof count === "number" && count > 0;
+  return /* @__PURE__ */ jsxs("span", { className: styles.wrapper, children: [
+    children,
+    showBadge && /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles[severity]}`, "data-dot": dot || void 0, children: !dot && typeof count === "number" ? formatBadgeCount(count, max) : null })
+  ] });
+}
+
+export { Badge, formatBadgeCount };

package/dist/components/badge/Badge.module.css

@@ -0,0 +1,53 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.badge {
+  box-sizing: border-box;
+  block-size: 14px;
+  min-inline-size: 14px;
+  padding-inline: var(--spacing-2xs);
+  border-radius: var(--border-radius-rounded);
+  font-size: 12px;
+  color: var(--color-fg-inverse);
+  pointer-events: none;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -30%);
+}
+
+.badge[data-dot='true'] {
+  min-inline-size: 8px;
+  inline-size: 8px;
+  block-size: 8px;
+  padding-inline: 0;
+  border-radius: var(--border-radius-round);
+}
+
+.neutral {
+  background-color: var(--color-neutral);
+}
+.brand {
+  background-color: var(--color-brand);
+}
+.accent {
+  background-color: var(--color-accent);
+}
+.success {
+  background-color: var(--color-status-success);
+}
+.warning {
+  background-color: var(--color-status-warning);
+}
+.error {
+  background-color: var(--color-status-error);
+}
+.info {
+  background-color: var(--color-status-info);
+}

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

@@ -93,6 +93,7 @@
 .sm {
   height: var(--component-size-xs);
   font-size: var(--font-size-xs);
+  padding-inline: var(--spacing-xs);
 }
 
 .md {
@@ -109,7 +110,7 @@
 .neutral {
   /* Tinted from the current foreground color instead of a fixed gray, so it
      stays visible whether it's sitting on a white panel or a muted toolbar. */
-  --chip-bg: color-mix(in srgb, var(--color-fg-default) 12%, transparent);
+  --chip-bg: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
   --chip-fg: var(--color-fg-default);
   --chip-border: transparent;
   --chip-outlined-border: var(--color-border-subtle);

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

@@ -14,6 +14,10 @@
   font-size: var(--font-size-xs);
 }
 
+.container[data-size='xs'] {
+  gap: var(--spacing-xxs);
+}
+
 .circle {
   position: relative;
   display: inline-block;

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

@@ -21,6 +21,7 @@ function InputContainer({
   orientation = "horizontal",
   size = "md",
   labelWidth = "160px",
+  labelAlignment = "center",
   modified = false
 }) {
   const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
@@ -59,10 +60,16 @@ function InputContainer({
         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: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
-          renderLabelRow,
-          children
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${styles__default.default.labelContainer} dbc-flex ${labelAlignment === "top" ? "dbc-items-start" : "dbc-items-center"} dbc-gap-xs`,
+            children: [
+              renderLabelRow,
+              children
+            ]
+          }
+        ),
         renderMessageRow
       ] })
     }

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

@@ -15,4 +15,4 @@ export interface InputContainerProps {
     labelAlignment?: 'top' | 'center';
     modified?: boolean;
 }
-export declare function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, size, labelWidth, modified, }: InputContainerProps): React.ReactElement;
+export declare function InputContainer({ label, labelAction, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, size, labelWidth, labelAlignment, modified, }: InputContainerProps): React.ReactElement;

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

@@ -15,6 +15,7 @@ function InputContainer({
   orientation = "horizontal",
   size = "md",
   labelWidth = "160px",
+  labelAlignment = "center",
   modified = false
 }) {
   const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${styles.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
@@ -53,10 +54,16 @@ function InputContainer({
         width: fullWidth ? "100%" : void 0
       },
       children: /* @__PURE__ */ jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, "data-size": size, children: [
-        /* @__PURE__ */ jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [
-          renderLabelRow,
-          children
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${styles.labelContainer} dbc-flex ${labelAlignment === "top" ? "dbc-items-start" : "dbc-items-center"} dbc-gap-xs`,
+            children: [
+              renderLabelRow,
+              children
+            ]
+          }
+        ),
         renderMessageRow
       ] })
     }

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

@@ -28,6 +28,7 @@ const Textarea = function Textarea2({
   label,
   error,
   helpText,
+  helpTextAddition,
   orientation = "horizontal",
   labelWidth = "160px",
   fullWidth = false,
@@ -97,7 +98,7 @@ const Textarea = function Textarea2({
       htmlFor: textareaId,
       error,
       helpText,
-      helpTextAddition: showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
+      helpTextAddition: helpTextAddition != null ? helpTextAddition : showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
       orientation,
       labelWidth,
       fullWidth,

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

@@ -22,6 +22,7 @@ const Textarea = function Textarea2({
   label,
   error,
   helpText,
+  helpTextAddition,
   orientation = "horizontal",
   labelWidth = "160px",
   fullWidth = false,
@@ -91,7 +92,7 @@ const Textarea = function Textarea2({
       htmlFor: textareaId,
       error,
       helpText,
-      helpTextAddition: showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
+      helpTextAddition: helpTextAddition != null ? helpTextAddition : showCount ? `${value == null ? void 0 : value.length} tegn i denne boks` : void 0,
       orientation,
       labelWidth,
       fullWidth,

package/dist/components/metric-tile/MetricTile.cjs

@@ -51,6 +51,7 @@ const MetricTileBase = ({
   label,
   icon,
   value,
+  onClick,
   tooltip,
   size = "md",
   variant = "filled",
@@ -69,14 +70,38 @@ const MetricTileBase = ({
   const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
   const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
   const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  const isClickable = onClick != null;
+  const handleKeyDown = (event) => {
+    if (!isClickable) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (!isClickable) return;
+    if (event.key === " ") {
+      event.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: styles__default.default.tile,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
       "data-severity": severity,
       "data-size": size,
       "data-variant": variant,
+      "data-clickable": isClickable ? "true" : void 0,
       style,
+      onClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.labelRow, children: [
           icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }) : null,

package/dist/components/metric-tile/MetricTile.d.ts

@@ -11,6 +11,7 @@ interface MetricTileProps extends PropsWithChildren {
     label: string;
     icon?: JSX.Element;
     value?: string | number;
+    onClick?: () => void;
     tooltip?: ReactNode;
     size?: MetricTileSize;
     variant?: MetricTileVariant;

package/dist/components/metric-tile/MetricTile.js

@@ -45,6 +45,7 @@ const MetricTileBase = ({
   label,
   icon,
   value,
+  onClick,
   tooltip,
   size = "md",
   variant = "filled",
@@ -63,14 +64,38 @@ const MetricTileBase = ({
   const resolvedValue = (_b = (_a = slots.Value) == null ? void 0 : _a.props.children) != null ? _b : value;
   const resolvedAdornment = (_c = slots.Adornment) == null ? void 0 : _c.props.children;
   const showValueRow = resolvedValue != null || resolvedAdornment != null;
+  const isClickable = onClick != null;
+  const handleKeyDown = (event) => {
+    if (!isClickable) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (!isClickable) return;
+    if (event.key === " ") {
+      event.preventDefault();
+      onClick == null ? void 0 : onClick();
+    }
+  };
   return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs(
     "span",
     {
       className: styles.tile,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
       "data-severity": severity,
       "data-size": size,
       "data-variant": variant,
+      "data-clickable": isClickable ? "true" : void 0,
       style,
+      onClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       children: [
         /* @__PURE__ */ jsxs("span", { className: styles.labelRow, children: [
           icon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }) : null,

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

@@ -19,6 +19,14 @@
   cursor: default;
 }
 
+.tile[data-clickable='true'] {
+  cursor: pointer;
+}
+
+.tile[data-clickable='true']:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
 .tile[data-size='sm'] {
   gap: 1px;
   padding: 6px var(--spacing-sm);

package/dist/components/overlay/tooltip/TooltipProvider.cjs

@@ -119,7 +119,7 @@ function TooltipLayer() {
     const triggerRect = trigger.getBoundingClientRect();
     const bubbleRect = bubble.getBoundingClientRect();
     if (bubbleRect.width === 0 || bubbleRect.height === 0) {
-      if (visible) setVisible(false);
+      setVisible((prev) => prev ? false : prev);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       rafRef.current = requestAnimationFrame(recompute);
       return;
@@ -158,13 +158,17 @@ function TooltipLayer() {
       lastPlacementRef.current = chosen;
       setPlacement(chosen);
     }
-    if (!visible) setVisible(true);
-  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
+    setVisible((prev) => prev ? prev : true);
+  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset]);
   react.useEffect(() => {
     const nextOpen = !!(active == null ? void 0 : active.open);
     setOpen((prev) => prev === nextOpen ? prev : nextOpen);
-    if (nextOpen) setVisible(false);
-    if (!nextOpen) lastActiveIdRef.current = null;
+    if (nextOpen) {
+      setVisible(false);
+    } else {
+      setVisible(false);
+      lastActiveIdRef.current = null;
+    }
   }, [active == null ? void 0 : active.open]);
   react.useLayoutEffect(() => {
     var _a;

package/dist/components/overlay/tooltip/TooltipProvider.js

@@ -113,7 +113,7 @@ function TooltipLayer() {
     const triggerRect = trigger.getBoundingClientRect();
     const bubbleRect = bubble.getBoundingClientRect();
     if (bubbleRect.width === 0 || bubbleRect.height === 0) {
-      if (visible) setVisible(false);
+      setVisible((prev) => prev ? false : prev);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       rafRef.current = requestAnimationFrame(recompute);
       return;
@@ -152,13 +152,17 @@ function TooltipLayer() {
       lastPlacementRef.current = chosen;
       setPlacement(chosen);
     }
-    if (!visible) setVisible(true);
-  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
+    setVisible((prev) => prev ? prev : true);
+  }, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset]);
   useEffect(() => {
     const nextOpen = !!(active == null ? void 0 : active.open);
     setOpen((prev) => prev === nextOpen ? prev : nextOpen);
-    if (nextOpen) setVisible(false);
-    if (!nextOpen) lastActiveIdRef.current = null;
+    if (nextOpen) {
+      setVisible(false);
+    } else {
+      setVisible(false);
+      lastActiveIdRef.current = null;
+    }
   }, [active == null ? void 0 : active.open]);
   useLayoutEffect(() => {
     var _a;

package/dist/components/table/Table.cjs

@@ -197,6 +197,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
+                hasRowContextMenu: Boolean(getContextMenuItems),
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,

package/dist/components/table/Table.js

@@ -191,6 +191,7 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
+                hasRowContextMenu: Boolean(getContextMenuItems),
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,

package/dist/components/table/Table.module.css

@@ -58,6 +58,7 @@
   --table-component-cell-fg: var(--table-cell-fg);
   --table-component-cell-border: var(--table-border-subtle);
   --table-component-divider: var(--table-divider);
+  --table-row-actions-reserve-inline: calc(var(--component-size-md) + 4px + var(--spacing-2xs));
 
   display: flex;
   flex-direction: column;
@@ -188,13 +189,13 @@
 }
 
 .md .headerCell {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-xs);
 }
 
 .md .cell {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-xs);
 }
 
 .sm .headerCell {
@@ -371,6 +372,10 @@
   justify-content: flex-start;
 }
 
+.thMainWithActionsReserve {
+  padding-inline-end: var(--table-row-actions-reserve-inline);
+}
+
 .thMainRight {
   justify-content: flex-end;
 }
@@ -620,7 +625,7 @@
 }
 
 .cellContentWithActions {
-  padding-inline-end: calc(var(--component-size-md) + 4px + var(--spacing-sm));
+  padding-inline-end: var(--table-row-actions-reserve-inline);
 }
 
 .contextMenuTrigger:hover,

package/dist/components/table/components/TableHeader.cjs

@@ -13,6 +13,7 @@ function TableHeader({
   columns,
   hasSelection,
   selectionMode,
+  hasRowContextMenu,
   allRowsSelected,
   onSelectAllRows,
   sortById,
@@ -42,6 +43,7 @@ function TableHeader({
           {
             column,
             index,
+            reserveInlineEnd: hasRowContextMenu && index === columns.length - 1,
             sortById,
             sortDirection,
             onSortChange,

package/dist/components/table/components/TableHeader.d.ts

@@ -4,6 +4,7 @@ type Props<T> = {
     columns: ColumnItem<T>[];
     hasSelection: boolean;
     selectionMode: 'single' | 'multiple';
+    hasRowContextMenu: boolean;
     allRowsSelected?: boolean;
     onSelectAllRows?: (isSelected: boolean) => void;
     sortById?: string;
@@ -12,5 +13,5 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
 };
-export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, hasRowContextMenu, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -7,6 +7,7 @@ function TableHeader({
   columns,
   hasSelection,
   selectionMode,
+  hasRowContextMenu,
   allRowsSelected,
   onSelectAllRows,
   sortById,
@@ -36,6 +37,7 @@ function TableHeader({
           {
             column,
             index,
+            reserveInlineEnd: hasRowContextMenu && index === columns.length - 1,
             sortById,
             sortDirection,
             onSortChange,

package/dist/components/table/components/TableHeaderCell.cjs

@@ -13,6 +13,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TableHeaderCell({
   column,
   index,
+  reserveInlineEnd = false,
   sortById,
   sortDirection,
   onSortChange,
@@ -37,7 +38,7 @@ function TableHeaderCell({
       "data-divider": column.divider,
       "data-column-index": index,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: table_classes.cx(alignClasses.main, reserveInlineEnd && styles__default.default.thMainWithActionsReserve), children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",

package/dist/components/table/components/TableHeaderCell.d.ts

@@ -3,10 +3,11 @@ import type { ColumnItem, SortDirection } from '../Table.types';
 type Props<T> = {
     column: ColumnItem<T>;
     index: number;
+    reserveInlineEnd?: boolean;
     sortById?: string;
     sortDirection?: SortDirection;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
     extraContent?: ReactNode;
 };
-export declare function TableHeaderCell<T>({ column, index, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
+export declare function TableHeaderCell<T>({ column, index, reserveInlineEnd, sortById, sortDirection, onSortChange, extraContent, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableHeaderCell.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowUp, ArrowDown } from 'lucide-react';
-import { getAlignValue, getHeaderAlignClasses } from '../table.classes';
+import { getAlignValue, getHeaderAlignClasses, cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { isActiveSort, getAriaSort, getHeaderLabel, shouldToggleOnKey, getNextSortDirection } from '../table.utils';
 
 function TableHeaderCell({
   column,
   index,
+  reserveInlineEnd = false,
   sortById,
   sortDirection,
   onSortChange,
@@ -31,7 +32,7 @@ function TableHeaderCell({
       "data-divider": column.divider,
       "data-column-index": index,
       children: [
-        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx("div", { className: alignClasses.main, children: column.sortable ? /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: alignClasses.inner, children: /* @__PURE__ */ jsx("div", { className: cx(alignClasses.main, reserveInlineEnd && styles.thMainWithActionsReserve), children: column.sortable ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",

package/dist/components/table/components/table-settings/TableSettings.cjs

@@ -8,7 +8,7 @@ var Button = require('../../../button/Button');
 var Menu = require('../../../menu/Menu');
 var Popover = require('../../../popover/Popover');
 
-function TableSettings({
+function TableSettingsMenuSection({
   viewMode,
   handleChangeViewMode,
   columns = [],
@@ -17,12 +17,12 @@ function TableSettings({
   columnsLabel = "Kolonner",
   allPresetLabel = "Alle",
   standardPresetLabel = "Standard",
-  buttonSize = "sm",
-  additionalSettings
+  additionalSettings,
+  close
 }) {
-  const handleViewModeChange = (mode, close) => {
+  const handleViewModeChange = (mode, close2) => {
     handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
-    close == null ? void 0 : close();
+    close2 == null ? void 0 : close2();
   };
   const hideableColumns = react.useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
   const allPresetIds = react.useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
@@ -63,6 +63,73 @@ function TableSettings({
     return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
   }, [hideableColumns, visibleSet, standardPresetIds]);
   const presetRadioName = "table-columns-preset";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    additionalSettings == null ? void 0 : additionalSettings(close),
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsUpDown, {}),
+      "Ombryd tekst"
+    ] }) }),
+    hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "all",
+          checked: isAllActive,
+          label: allPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "standard",
+          checked: isStandardActive,
+          label: standardPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              standardPresetIds.filter(
+                (id) => typeof id === "string" && Boolean(id)
+              )
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+      hideableColumns.map((col) => {
+        const isVisible = col.id ? visibleSet.has(col.id) : false;
+        const disableUncheckingLast = isVisible && visibleCount <= 1;
+        const label = col.header;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Menu.Menu.CheckItem,
+          {
+            checked: isVisible,
+            disabled: disableUncheckingLast,
+            label,
+            onCheckedChange: (nextChecked) => {
+              if (disableUncheckingLast) return;
+              toggleColumn(col.id, nextChecked);
+            }
+          },
+          col.id
+        );
+      })
+    ] }) : null
+  ] });
+}
+function TableSettings({
+  buttonSize = "sm",
+  ...sectionProps
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {
@@ -70,70 +137,10 @@ function TableSettings({
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
         icon
       ] }),
-      children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
-        additionalSettings == null ? void 0 : additionalSettings(close),
-        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsUpDown, {}),
-          "Ombryd tekst"
-        ] }) }),
-        hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Menu.Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "all",
-              checked: isAllActive,
-              label: allPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Menu.Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "standard",
-              checked: isStandardActive,
-              label: standardPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  standardPresetIds.filter(
-                    (id) => typeof id === "string" && Boolean(id)
-                  )
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
-          hideableColumns.map((col) => {
-            const isVisible = col.id ? visibleSet.has(col.id) : false;
-            const disableUncheckingLast = isVisible && visibleCount <= 1;
-            const label = col.header;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Menu.Menu.CheckItem,
-              {
-                checked: isVisible,
-                disabled: disableUncheckingLast,
-                label,
-                onCheckedChange: (nextChecked) => {
-                  if (disableUncheckingLast) return;
-                  toggleColumn(col.id, nextChecked);
-                }
-              },
-              col.id
-            );
-          })
-        ] }) : null
-      ] })
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(TableSettingsMenuSection, { ...sectionProps, close }) })
     }
   );
 }
 
 exports.TableSettings = TableSettings;
+exports.TableSettingsMenuSection = TableSettingsMenuSection;

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import type { JSX, ReactNode } from 'react';
 import { ViewMode } from '../../../../hooks/useTableSettings';
 import { ButtonSize } from '../../../button/Button';
-interface TableSettingsProps<T extends Record<string, any>> {
+export interface TableSettingsMenuSectionProps<T extends Record<string, any>> {
     handleChangeViewMode: (mode: ViewMode) => void;
     viewMode: ViewMode;
     columns?: ColumnDef<T>[];
@@ -11,8 +11,17 @@ interface TableSettingsProps<T extends Record<string, any>> {
     columnsLabel?: string;
     allPresetLabel?: string;
     standardPresetLabel?: string;
-    buttonSize?: ButtonSize;
     additionalSettings?: (close?: () => void) => ReactNode;
+    /** Called after an action closes the surrounding menu/popover, if any. */
+    close?: () => void;
+}
+export interface TableSettingsProps<T extends Record<string, any>> extends Omit<TableSettingsMenuSectionProps<T>, 'close'> {
+    buttonSize?: ButtonSize;
 }
-export declare function TableSettings<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, buttonSize, additionalSettings, }: TableSettingsProps<T>): JSX.Element;
-export {};
+/**
+ * The table settings menu items (view mode toggle + column visibility), with
+ * no `Menu`/`Popover`/trigger wrapper. Use this to fold table settings into
+ * another menu; use `TableSettings` for the standalone button + popover.
+ */
+export declare function TableSettingsMenuSection<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, additionalSettings, close, }: TableSettingsMenuSectionProps<T>): JSX.Element;
+export declare function TableSettings<T extends Record<string, any>>({ buttonSize, ...sectionProps }: TableSettingsProps<T>): JSX.Element;

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,12 +1,12 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { ListChevronsUpDown, Settings } from 'lucide-react';
 import { useMemo } from 'react';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
 
-function TableSettings({
+function TableSettingsMenuSection({
   viewMode,
   handleChangeViewMode,
   columns = [],
@@ -15,12 +15,12 @@ function TableSettings({
   columnsLabel = "Kolonner",
   allPresetLabel = "Alle",
   standardPresetLabel = "Standard",
-  buttonSize = "sm",
-  additionalSettings
+  additionalSettings,
+  close
 }) {
-  const handleViewModeChange = (mode, close) => {
+  const handleViewModeChange = (mode, close2) => {
     handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
-    close == null ? void 0 : close();
+    close2 == null ? void 0 : close2();
   };
   const hideableColumns = useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
   const allPresetIds = useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
@@ -61,6 +61,73 @@ function TableSettings({
     return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
   }, [hideableColumns, visibleSet, standardPresetIds]);
   const presetRadioName = "table-columns-preset";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    additionalSettings == null ? void 0 : additionalSettings(close),
+    /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
+      /* @__PURE__ */ jsx(ListChevronsUpDown, {}),
+      "Ombryd tekst"
+    ] }) }),
+    hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Menu.Separator, {}),
+      /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
+      /* @__PURE__ */ jsx(
+        Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "all",
+          checked: isAllActive,
+          label: allPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "standard",
+          checked: isStandardActive,
+          label: standardPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              standardPresetIds.filter(
+                (id) => typeof id === "string" && Boolean(id)
+              )
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Menu.Separator, {}),
+      hideableColumns.map((col) => {
+        const isVisible = col.id ? visibleSet.has(col.id) : false;
+        const disableUncheckingLast = isVisible && visibleCount <= 1;
+        const label = col.header;
+        return /* @__PURE__ */ jsx(
+          Menu.CheckItem,
+          {
+            checked: isVisible,
+            disabled: disableUncheckingLast,
+            label,
+            onCheckedChange: (nextChecked) => {
+              if (disableUncheckingLast) return;
+              toggleColumn(col.id, nextChecked);
+            }
+          },
+          col.id
+        );
+      })
+    ] }) : null
+  ] });
+}
+function TableSettings({
+  buttonSize = "sm",
+  ...sectionProps
+}) {
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -68,70 +135,9 @@ function TableSettings({
         /* @__PURE__ */ jsx(Settings, {}),
         icon
       ] }),
-      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
-        additionalSettings == null ? void 0 : additionalSettings(close),
-        /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-          /* @__PURE__ */ jsx(ListChevronsUpDown, {}),
-          "Ombryd tekst"
-        ] }) }),
-        hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Menu.Separator, {}),
-          /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
-          /* @__PURE__ */ jsx(
-            Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "all",
-              checked: isAllActive,
-              label: allPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "standard",
-              checked: isStandardActive,
-              label: standardPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  standardPresetIds.filter(
-                    (id) => typeof id === "string" && Boolean(id)
-                  )
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(Menu.Separator, {}),
-          hideableColumns.map((col) => {
-            const isVisible = col.id ? visibleSet.has(col.id) : false;
-            const disableUncheckingLast = isVisible && visibleCount <= 1;
-            const label = col.header;
-            return /* @__PURE__ */ jsx(
-              Menu.CheckItem,
-              {
-                checked: isVisible,
-                disabled: disableUncheckingLast,
-                label,
-                onCheckedChange: (nextChecked) => {
-                  if (disableUncheckingLast) return;
-                  toggleColumn(col.id, nextChecked);
-                }
-              },
-              col.id
-            );
-          })
-        ] }) : null
-      ] })
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(TableSettingsMenuSection, { ...sectionProps, close }) })
     }
   );
 }
 
-export { TableSettings };
+export { TableSettings, TableSettingsMenuSection };

package/dist/components/tabs/Tabs.module.css

@@ -32,14 +32,23 @@
 
 .tabButtons {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  /* Explicit, not just tidy: leaving this "visible" would compute to "auto"
+     too (overflow-x auto + overflow-y visible isn't a valid combination per
+     spec), silently turning on a vertical scrollbar/clip that's never needed
+     here. */
+  overflow-y: hidden;
   min-width: 0;
 }
 
-/* Extra content next to the tab buttons, pushed into the free space on the right */
+/* Extra content next to the tab buttons, pushed into the free space on the
+   right. It takes the space it needs — .tabButtons scrolls instead of
+   squeezing it. */
 .tabListAddition {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   gap: var(--spacing-sm);
   margin-inline-start: auto;
   padding-inline-start: var(--spacing-md);
@@ -49,6 +58,7 @@
 .tab {
   display: flex;
   align-items: stretch;
+  flex-shrink: 0;
   border-radius: 0;
   border-block-end: 2px solid var(--color-border-default);
 }
@@ -134,6 +144,7 @@
   align-items: center;
   justify-content: center;
   align-self: stretch;
+  flex-shrink: 0;
 
   color: var(--color-fg-muted);
   background: none;
@@ -209,7 +220,17 @@
 }
 
 .filled > .tabList {
-  border-block-end: 1px solid var(--color-border-subtle);
+  position: relative;
+}
+
+.filled > .tabList::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: 1px;
+  background: var(--color-border-subtle);
+  pointer-events: none;
 }
 
 /* One continuous backdrop behind the whole button row, so the curved gap
@@ -238,7 +259,7 @@
 
 .filled > .tabList > .tabButtons > .tab {
   border: 1px solid transparent;
-  border-block-end: 0;
+  border-block-end-width: 1px;
   color: var(--color-fg-muted);
   position: relative;
   transition:
@@ -265,6 +286,15 @@
   color: var(--color-fg-default);
 }
 
+.filled > .tabList > .tabButtons > .tab.active::after {
+  content: '';
+  position: absolute;
+  inset-inline: -1px;
+  inset-block-end: -1px;
+  block-size: 1px;
+  background: var(--color-bg-surface);
+}
+
 .filled > .tabContent {
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border-subtle);

package/dist/index.cjs

@@ -18,6 +18,7 @@ var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
 var Page = require('./components/page/Page');
 var Breadcrumbs = require('./components/breadcrumbs/Breadcrumbs');
 var Circle = require('./components/circle/Circle');
+var Badge = require('./components/badge/Badge');
 var chartColors = require('./constants/chart-colors');
 var chartColors_types = require('./constants/chart-colors.types');
 var severity_types = require('./constants/severity.types');
@@ -159,6 +160,12 @@ Object.keys(Circle).forEach(function (k) {
 		get: function () { return Circle[k]; }
 	});
 });
+Object.keys(Badge).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Badge[k]; }
+	});
+});
 Object.keys(chartColors).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -6,6 +6,7 @@
 @import './components/app-header/AppHeader.module.css';
 @import './components/attribute-chip/AttributeChip.module.css';
 @import './components/avatar/Avatar.module.css';
+@import './components/badge/Badge.module.css';
 @import './components/breadcrumbs/Breadcrumbs.module.css';
 @import './components/button-select/ButtonSelect.module.css';
 @import './components/button/Button.module.css';

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './constants/chart-colors';
 export * from './constants/chart-colors.types';
 export * from './constants/severity.types';

package/dist/index.js

@@ -16,6 +16,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './constants/chart-colors';
 export * from './constants/chart-colors.types';
 export * from './constants/severity.types';

package/dist/styles/styles.css

@@ -303,8 +303,15 @@ tr.dbc-table--hover:hover td:last-child {
    Scrollbars
    ========================================================================== */
 
+/* Firefox equivalent of the thin, muted webkit scrollbar below. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {

package/dist/styles.css

@@ -303,8 +303,15 @@ tr.dbc-table--hover:hover td:last-child {
    Scrollbars
    ========================================================================== */
 
+/* Firefox equivalent of the thin, muted webkit scrollbar below. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {

package/package.json

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