@dbcdk/react-components 0.0.188 → 0.0.189

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

@@ -4,22 +4,22 @@
 }
 
 .badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   box-sizing: border-box;
-  min-inline-size: 16px;
-  block-size: 16px;
+  block-size: 14px;
+  min-inline-size: 14px;
   padding-inline: var(--spacing-2xs);
   border-radius: var(--border-radius-rounded);
-  font-size: var(--font-size-xs);
-  line-height: 1;
+  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'] {

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/tabs/Tabs.module.css

@@ -220,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
@@ -249,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:
@@ -276,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/package.json

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