@dbcdk/react-components 0.0.20 → 0.0.22

package/dist/components/button/Button.module.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-inline-sm);
+  gap: var(--spacing-xxs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -151,14 +151,21 @@
 }
 
 .default {
-  background-color: var(--color-bg-surface);
+  background-color: var(--color-bg-toolbar);
   color: var(--color-fg-default);
-  border-color: var(--color-border-subtle);
+  border-color: transparent;
 }
 
 .default:hover {
-  background-color: var(--color-bg-hover-subtle);
-  border-color: var(--color-border-default);
+  background-color: var(--color-bg-toolbar-hover);
+  border-color: transparent;
+}
+
+.default:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 1px var(--color-border-selected),
+    var(--focus-ring);
 }
 
 .outlined {
@@ -213,7 +220,7 @@
 }
 
 .button.inline:hover {
-  background-color: var(--color-bg-contextual);
+  background-color: var(--opac-bg-light);
 }
 
 .active {

package/dist/components/chip/Chip.d.ts

@@ -9,7 +9,8 @@ interface ChipProps {
     fullWidth?: boolean;
     onClose?: () => void;
     size?: 'sm' | 'md' | 'lg';
-    type?: 'default' | 'rounded' | 'outlined';
+    type?: 'default' | 'rounded' | 'outlined' | 'subtle';
+    selected?: boolean;
 }
-export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, onClose, }: ChipProps): JSX.Element;
+export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, selected, onClose, }: ChipProps): JSX.Element;
 export {};

package/dist/components/chip/Chip.js

@@ -5,7 +5,7 @@ import { useState, useRef, useEffect } from 'react';
 import styles from './Chip.module.css';
 import { Icon } from '../icon/Icon';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'md', customIcon, type = 'rounded', onClose, }) {
+export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'md', customIcon, type = 'rounded', selected = false, onClose, }) {
     const [chipWidth, setChipWidth] = useState(undefined);
     const chipRef = useRef(null);
     useEffect(() => {
@@ -26,5 +26,6 @@ export function Chip({ children, severity = 'neutral', loading, disableIcon = tr
             styles[type],
             hasLeading ? styles.hasLeading : '',
             hasClose ? styles.hasClose : '',
+            selected ? styles.selected : '',
         ].join(' '), children: [hasLeading ? (_jsxs("span", { className: styles.leading, children: [severity && !disableIcon && _jsx(Icon, { severity: severity }), customIcon] })) : null, _jsx("span", { className: styles.label, children: children }), hasClose && (_jsx("button", { type: "button", onClick: onClose, className: styles.close, "aria-label": "Luk", children: _jsx(X, {}) }))] }));
 }

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

@@ -1,23 +1,16 @@
 .container {
-  /* local layout tokens */
-  --chip-gap: var(--spacing-xxs);
-  --chip-pad-y: var(--spacing-xxs);
-  --chip-pad-x: var(--spacing-md);
-
-  /* when no icon, compensate by half the gap on each side */
-  --chip-pad-x-noicon: calc(var(--chip-pad-x) + (var(--chip-gap) / 2));
-
   display: inline-flex;
   align-items: center;
-  gap: var(--chip-gap);
+  gap: var(--spacing-xs);
   white-space: nowrap;
 
   color: var(--chip-fg-default, var(--color-fg-default));
-  border: var(--border-width-thin) solid transparent;
-  border-radius: var(--border-radius-default);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-rounded);
 
-  padding-block: var(--chip-pad-y);
-  padding-inline: var(--chip-pad-x-noicon);
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-2xs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -27,32 +20,69 @@
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard),
     border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    transform var(--transition-fast) var(--ease-standard);
 }
 
-/* Keep your preferred pill look */
-.rounded {
-  border-radius: var(--border-radius-rounded);
+.container:focus-visible {
+  outline: none;
 }
 
-.outlined {
+.rounded {
   border-radius: var(--border-radius-rounded);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  background-color: transparent;
 }
 
 .default {
   border-radius: var(--border-radius-default);
 }
 
-/* ---- Leading icon logic ---- */
-.hasLeading {
-  /* symmetric tighter padding when icon exists */
-  padding-left: var(--spacing-xs);
-  padding-right: var(--spacing-xs);
+/* Types */
+
+.outlined {
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  color: var(--color-fg-muted);
+}
+
+.outlined:hover {
+  background-color: var(--color-bg-surface);
+  border-color: var(--color-border-default);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  color: var(--color-fg-default);
 }
 
-/* Leading slot */
+.outlined:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.03),
+    inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-fg-default);
+}
+
+.subtle {
+  background-color: var(--color-bg-toolbar);
+  border: 1px solid transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+  color: var(--color-fg-muted);
+}
+
+.subtle:hover {
+  background-color: var(--color-bg-toolbar-hover);
+  border-color: transparent;
+  color: var(--color-fg-default);
+}
+
+.subtle:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-fg-default);
+}
+
+/* Content */
+
 .leading {
   display: inline-flex;
   align-items: center;
@@ -66,7 +96,6 @@
   min-width: 0;
 }
 
-/* ---- Icon sizing ---- */
 .leading svg,
 .close svg {
   inline-size: var(--icon-size-sm);
@@ -74,38 +103,11 @@
   color: currentColor;
 }
 
-.sm .leading svg,
-.sm .close svg {
-  inline-size: 14px;
-  block-size: 14px;
-}
-
-.lg .leading svg,
-.lg .close svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
+/* Sizes */
 
-/* ---- Sizes ---- */
 .sm {
-  --chip-pad-y: var(--spacing-2xs);
-  --chip-pad-x: var(--spacing-xs);
-  /* keep same gap unless you explicitly want tighter; if you do, change only here */
-  /* --chip-gap: var(--spacing-2xs); */
-
   height: var(--component-size-xs);
   font-size: var(--font-size-xs);
-
-  /* recompute derived value */
-  --chip-pad-x-noicon: calc(var(--chip-pad-x) + (var(--chip-gap) / 2));
-
-  padding-block: var(--chip-pad-y);
-  padding-inline: var(--chip-pad-x-noicon);
-}
-
-.sm.hasLeading {
-  padding-left: var(--spacing-xxs);
-  padding-right: var(--spacing-xxs);
 }
 
 .md {
@@ -113,55 +115,87 @@
 }
 
 .lg {
-  --chip-pad-y: var(--spacing-xs);
-
   height: var(--component-size-md);
-  padding-block: var(--chip-pad-y);
+  padding-block: var(--spacing-xs);
 }
 
-/* ---- Variants / severities ---- */
+/* Status variants */
+
 .neutral {
-  background-color: var(--color-bg-contextual);
+  background-color: var(--color-bg-toolbar);
+  color: var(--color-fg-default);
   border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
 }
 
 .success {
   background-color: var(--color-status-success-bg);
   color: var(--color-status-success-fg);
-  border-color: var(--color-status-success-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-success-border);
 }
 
 .warning {
   background-color: var(--color-status-warning-bg);
   color: var(--color-status-warning-fg);
-  border-color: var(--color-status-warning-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-warning-border);
 }
 
 .error {
   background-color: var(--color-status-error-bg);
   color: var(--color-status-error-fg);
-  border-color: var(--color-status-error-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-error-border);
 }
 
 .info {
   background-color: var(--color-status-info-bg);
   color: var(--color-status-info-fg);
-  border-color: var(--color-status-info-border);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-status-info-border);
 }
 
 .brand {
   background-color: var(--color-brand);
   color: var(--color-fg-on-brand);
   border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
 }
 
-/* Full width */
+/* Selected */
+
+.selected {
+  background: var(--color-bg-selected);
+  color: var(--color-brand);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.selected:hover {
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-brand);
+}
+
+.selected:focus-visible {
+  outline: none;
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-brand);
+}
+
+/* Layout */
+
 .fullWidth {
   inline-size: 100%;
   justify-content: center;
 }
 
 /* Close button */
+
 .close {
   all: unset;
   display: inline-flex;
@@ -173,8 +207,13 @@
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
   border-radius: var(--border-radius-round);
+  border: 1px solid transparent;
+  box-sizing: border-box;
 
-  transition: background-color var(--transition-fast) var(--ease-standard);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
 }
 
 .close:hover {
@@ -182,6 +221,7 @@
 }
 
 .close:focus-visible {
-  box-shadow: var(--focus-ring);
   outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }

package/dist/components/filter-field/FilterField.d.ts

@@ -20,13 +20,14 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     options?: MultiselectOption[];
     single?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    variant?: 'surface' | 'outlined' | 'subtle';
     label?: string;
     placeholder?: string;
     disabled?: boolean;
     width?: string;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, width, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, width, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};

package/dist/components/filter-field/FilterField.js

@@ -69,20 +69,16 @@ function isFilterActive(value) {
     return value != null;
 }
 const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, ...inputProps }) {
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, width, ...inputProps }) {
     var _a, _b;
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-    // internal operator state (source of truth for UI)
     const [selectedOperator, setSelectedOperator] = useState(operator);
-    // "active" based on value only (as requested)
     const active = isFilterActive(value);
-    // Overwrite internal operator if parent sends a new one
     useEffect(() => {
         if (ops.includes(operator)) {
             setSelectedOperator(operator);
         }
     }, [operator, ops]);
-    // Local state ONLY for input control (to avoid URL->props lag)
     const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
     const debounceRef = useRef(null);
     const isTypingRef = useRef(false);
@@ -90,7 +86,6 @@ export function FilterField({ field, control, operator, value, onChange, operato
         var _a, _b;
         const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
         const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
-        // Always keep internal operator in sync when user picks one
         if (next.operator)
             setSelectedOperator(nextOperator);
         onChange({
@@ -117,7 +112,6 @@ export function FilterField({ field, control, operator, value, onChange, operato
             emit({ value: nextVal });
         }, 250);
     };
-    // Sync internal value when parent value changes (e.g. URL updates)
     useEffect(() => {
         var _a;
         if (control !== 'input')
@@ -130,14 +124,15 @@ export function FilterField({ field, control, operator, value, onChange, operato
             isTypingRef.current = false;
         }
     }, [value, control, localValue]);
-    // Cleanup debounce on unmount
     useEffect(() => {
         return () => {
             if (debounceRef.current)
                 clearTimeout(debounceRef.current);
         };
     }, []);
-    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, style: { width }, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: [styles.filterField, styles[size], styles[variant], active ? styles.active : '']
+            .filter(Boolean)
+            .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, style: { width }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         isTypingRef.current = true;
                         setLocalValue(next);