@dbcdk/react-components 0.0.20 → 0.0.21

package/dist/components/filter-field/FilterField.module.css

@@ -2,38 +2,157 @@
   display: inline-flex;
   align-items: stretch;
   gap: 0;
+  position: relative;
+  z-index: 0;
   font-size: var(--font-size-sm);
   font-family: var(--font-family);
-  background: var(--color-bg-surface);
   color: var(--color-fg-default);
-
-  border: var(--border-width-thin) solid var(--color-border-default);
+  border: 1px solid transparent;
   border-radius: var(--border-radius-default);
-
-  position: relative;
-
+  overflow: visible;
   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),
-    background-color var(--transition-fast) var(--ease-standard);
+    color var(--transition-fast) var(--ease-standard);
+}
+
+/* =========================
+   VARIANTS
+   ========================= */
+
+.filterField.surface {
+  background: var(--color-bg-surface);
+  border-color: var(--color-border-subtle);
+  box-shadow: var(--shadow-xs);
+  --filter-operator-bg: var(--color-bg-surface);
+}
+
+.filterField.surface:hover {
+  border-color: var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+}
+
+.filterField.surface.active {
+  border-color: var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+}
+
+.filterField.outlined {
+  background: var(--color-bg-surface);
+  border-color: var(--color-border-subtle);
+  box-shadow: none;
+  --filter-operator-bg: var(--color-bg-surface);
+}
+
+.filterField.outlined:hover {
+  border-color: var(--color-border-default);
+}
+
+.filterField.outlined.active {
+  border-color: var(--color-border-default);
+}
+
+.filterField.subtle {
+  background: var(--color-bg-toolbar);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+  --filter-operator-bg: color-mix(in srgb, var(--color-fg-default) 4%, var(--color-bg-toolbar));
+}
+
+.filterField.subtle:hover {
+  background: var(--color-bg-surface-strong);
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-fg-default) 6%,
+    var(--color-bg-surface-strong)
+  );
+}
+
+.filterField.subtle.active {
+  background: var(--color-bg-surface-strong);
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-fg-default) 5%,
+    var(--color-bg-surface-strong)
+  );
+}
+
+/* =========================
+   ACTIVE INDICATOR
+   ========================= */
+
+.filterField.active::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 1px;
+  bottom: 1px;
+  width: 3px;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+  background: var(--color-border-selected);
+  pointer-events: none;
+  z-index: 2;
 }
 
-/* More comfortable active state:
-   - less "blue outline" noise
-   - slightly warmer surface hint
-*/
-.filterField.active {
-  border-color: color-mix(in srgb, var(--color-border-default) 75%, var(--color-border-selected));
-  background: color-mix(in srgb, var(--color-bg-surface) 96%, var(--color-bg-selected));
+/* =========================
+   FOCUS
+   ========================= */
+
+.filterField:focus-within {
+  z-index: 1;
+}
+
+.filterField.surface:focus-within,
+.filterField.outlined:focus-within,
+.filterField.subtle:focus-within {
+  border-color: var(--color-border-selected);
+}
+
+/* subtle focus without inner outline */
+.filterField.surface:focus-within {
+  box-shadow: var(--shadow-sm);
+}
+
+.filterField.outlined:focus-within,
+.filterField.subtle:focus-within {
+  box-shadow: none;
 }
 
+/* stronger focus when filter is active */
+
+.filterField.surface.active:focus-within {
+  box-shadow:
+    var(--shadow-sm),
+    inset 0 0 0 1px var(--color-border-selected);
+}
+
+.filterField.outlined.active:focus-within,
+.filterField.subtle.active:focus-within {
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* =========================
+   SIZES
+   ========================= */
+
 .filterField.sm {
   block-size: var(--component-size-sm);
 }
+
 .filterField.md {
   block-size: var(--component-size-md);
 }
 
+.filterField.lg {
+  block-size: var(--component-size-lg);
+}
+
+/* =========================
+   LABEL
+   ========================= */
+
 .filterField .label {
   display: inline-flex;
   align-items: center;
@@ -45,196 +164,128 @@
   user-select: none;
 }
 
-/* Operator trigger */
+/* =========================
+   OPERATOR
+   ========================= */
+
 .filterField .operatorTrigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-xxs);
   height: 100%;
   padding-block: var(--spacing-2xs);
   padding-inline: var(--spacing-sm);
-  background: var(--opac-bg-default);
+
   color: var(--color-fg-default);
+  background: transparent;
   border: 0;
-  border-radius: 0;
   cursor: pointer;
+  position: relative;
+  z-index: 0;
+  font-weight: var(--font-weight-default);
+
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
 }
-.filterField .operatorTrigger:hover {
-  background: var(--opac-bg-dark);
+
+/* inset operator background */
+
+.filterField .operatorTrigger::after {
+  content: '';
+  position: absolute;
+  inset: 1px 0;
+  background: var(--filter-operator-bg, transparent);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.filterField .operatorTrigger > * {
+  position: relative;
+  z-index: 1;
 }
-.filterField .operatorTrigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+
+/* =========================
+   SEPARATORS
+   ========================= */
+
+.filterField .operatorTrigger::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--color-border-subtle);
+  pointer-events: none;
 }
+
+/* =========================
+   DISABLED
+   ========================= */
+
 .filterField .operatorTrigger:disabled,
 .filterField .operatorTrigger[aria-disabled='true'] {
   cursor: not-allowed;
   color: var(--color-disabled-fg);
-  background: var(--color-disabled-bg);
-}
-.filterField .operatorText {
-  white-space: nowrap;
 }
 
-/* When active, operator is less dominant (calmer + more "token"-like) */
-.filterField.active .operatorTrigger {
-  background: transparent;
-  color: var(--color-fg-muted);
+.filterField.surface .operatorTrigger:disabled,
+.filterField.outlined .operatorTrigger:disabled {
+  --filter-operator-bg: var(--color-disabled-bg);
 }
-.filterField.active .operatorTrigger:hover {
-  background: var(--opac-bg-dark);
-  color: var(--color-fg-default);
+
+.filterField.subtle .operatorTrigger:disabled {
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-fg-default) 3%,
+    var(--color-bg-surface-subtle)
+  );
 }
 
-/* Wrapper for the select / multiselect control */
+/* =========================
+   VALUE WRAPPER
+   ========================= */
+
 .filterField .valueWrapper {
   display: inline-flex;
   align-items: center;
   padding: 0;
   height: 100%;
-
   flex: 1;
   min-width: 0;
+  position: relative;
 }
 
-/* Ensure the control inside can stretch/shrink */
 .filterField .valueWrapper > * {
   height: 100%;
   width: 100%;
   min-width: 0;
 }
-.filterField .valueWrapper > * > * {
-  height: 100% !important;
-}
-
-/* Active: emphasize VALUE area (but keep it soft) */
-.filterField.active .valueWrapper {
-  background: color-mix(in srgb, var(--color-bg-surface) 88%, var(--color-bg-selected));
-  border-left: var(--border-width-thin) solid
-    color-mix(in srgb, var(--color-border-default) 80%, var(--color-border-selected));
-  border-top-right-radius: calc(var(--border-radius-default) - 1px);
-  border-bottom-right-radius: calc(var(--border-radius-default) - 1px);
-}
-
-/* =========================
-   TRIGGER BUTTON TARGETING
-   ========================= */
 
-/* Select trigger button */
-.filterField .valueWrapper :global(button[data-forminput]) {
-  width: 100%;
+.filterField .valueWrapper > div {
+  display: flex;
+  align-items: stretch;
   height: 100%;
-  border: 0 !important;
-
-  /* slightly more breathing room than before */
-  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs)) !important;
-
-  text-align: left;
-  justify-content: flex-start;
-}
-
-/* MultiSelect trigger button (Popover container is a div; trigger is its direct child button) */
-.filterField .valueWrapper > div > button {
   width: 100%;
-  height: 100%;
-  border: 0 !important;
-  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs)) !important;
-
-  text-align: left;
-  justify-content: flex-start;
-}
-
-/* Slight spacing between clear (×) and chevron for Select + MultiSelect
-   (feels less cramped / more intentional) */
-.filterField .valueWrapper :global(button[data-forminput]) :global(.dbc-flex),
-.filterField .valueWrapper > div > button {
-  column-gap: var(--spacing-xs);
-}
-
-/* Make the internal Select layout behave */
-.filterField .valueWrapper :global(.dbc-flex) {
-  width: 100% !important;
-  min-width: 0;
-}
-
-.filterField .valueWrapper :global(.dbc-flex > span:first-child) {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Keep ClearButton + chevron from stretching */
-.filterField .valueWrapper :global(.dbc-flex) > *:not(span:first-child) {
-  flex: 0 0 auto;
-}
-
-/* For MultiSelect: label + chip should truncate nicely */
-.filterField .valueWrapper > div > button > span:first-child {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-
-  flex: 1;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-/* Emphasize chosen value text in active state (but slightly less "boldy") */
-.filterField.active .valueWrapper input {
-  font-weight: 550;
-}
-.filterField.active .valueWrapper :global(button[data-forminput]),
-.filterField.active .valueWrapper > div > button {
-  font-weight: 550 !important;
-}
+/* subtle highlight when active */
 
-/* Icons calmer by default; crisp on hover/focus */
-.filterField.active .valueWrapper svg {
-  opacity: 0.72;
-}
-.filterField.active .valueWrapper:hover svg,
-.filterField.active .valueWrapper :global(button[data-forminput]):focus-visible svg,
-.filterField.active .valueWrapper > div > button:focus-visible svg {
-  opacity: 1;
+.filterField.active .valueWrapper {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-selected) 18%, transparent);
 }
 
 /* =========================
-   INPUT styling
+   TEXT
    ========================= */
 
-.filterField input {
-  appearance: none;
-  border: 0;
-  outline: none;
-  background: transparent;
-  color: var(--color-fg-default);
-  font: inherit;
-  inline-size: auto;
-  min-inline-size: 10ch;
-  block-size: 100%;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  /* a tiny bit more comfort */
-  padding-block: var(--spacing-3xs);
-}
-
-.filterField button {
-  border-radius: 0;
+.filterField .operatorText {
+  white-space: nowrap;
 }
 
 .filterField input::placeholder {
-  color: var(--color-fg-muted);
-}
-
-.filterField input:disabled {
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
+  color: var(--color-fg-subtle);
 }

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts

@@ -6,7 +6,6 @@ interface ChipToggleOption {
     icon?: React.ReactNode;
 }
 interface ChipMultiToggleProps {
-    /** Optional group label (e.g. "Fejlede i") */
     label?: string;
     options: ChipToggleOption[];
     selectedValues: string[];
@@ -17,11 +16,11 @@ interface ChipMultiToggleProps {
     unselectedSeverity?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
     fullWidth?: boolean;
     disabled?: boolean;
-    showSelectedIcon?: boolean;
     showAllOption?: boolean;
     allLabel?: string;
     allIcon?: React.ReactNode;
     dataCy?: string;
+    type?: 'default' | 'outlined' | 'subtle' | 'rounded';
     /**
      * If true, clicking "All" toggles between:
      * - All (no filtering) => []
@@ -34,5 +33,5 @@ interface ChipMultiToggleProps {
      */
     noneValue?: string;
 }
-export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, selectedSeverity, unselectedSeverity, fullWidth, disabled, showAllOption, allLabel, allIcon, showSelectedIcon, allTogglesNone, noneValue, dataCy, }: ChipMultiToggleProps): JSX.Element;
+export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, fullWidth, disabled, showAllOption, allLabel, allIcon, allTogglesNone, noneValue, type, dataCy, }: ChipMultiToggleProps): JSX.Element;
 export {};

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from 'lucide-react';
 import React from 'react';
 import { Chip } from '../../../components/chip/Chip';
 import styles from './ChipMultiToggle.module.css';
-export function ChipMultiToggle({ label, options, selectedValues = [], onChange, onToggle, size = 'sm', selectedSeverity = 'info', unselectedSeverity = null, fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, showSelectedIcon = false, allTogglesNone = false, noneValue = '__none__', dataCy, }) {
+export function ChipMultiToggle({ label, options, selectedValues = [], onChange, onToggle, size = 'sm', fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, allTogglesNone = false, noneValue = '__none__', type = 'subtle', dataCy, }) {
     const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
     const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
     const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
@@ -28,7 +27,6 @@ export function ChipMultiToggle({ label, options, selectedValues = [], onChange,
         if (disabled)
             return;
         if (!allTogglesNone) {
-            // Classic "All" = clear selection
             onChange([]);
             return;
         }
@@ -46,9 +44,9 @@ export function ChipMultiToggle({ label, options, selectedValues = [], onChange,
             onChange([]);
         }
     };
-    return (_jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ''}`, "data-cy": dataCy, children: [label && _jsx("span", { className: styles.label, children: label }), _jsxs("div", { className: styles.container, children: [showAllOption && (_jsx("button", { type: "button", className: styles.chipButton, onClick: toggleAll, "aria-pressed": isAllSelected || isNoneSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isAllSelected || isNoneSelected ? selectedSeverity : unselectedSeverity), customIcon: allIcon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: isNoneSelected ? `${allLabel} (ingen)` : allLabel }) }, "__all__")), options.map(opt => {
+    return (_jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ''}`, "data-cy": dataCy, children: [label && _jsx("span", { className: styles.label, children: label }), _jsxs("div", { className: styles.container, children: [showAllOption && (_jsx("button", { type: "button", className: styles.chipButton, onClick: toggleAll, "aria-pressed": isAllSelected || isNoneSelected, disabled: disabled, children: _jsx(Chip, { type: type, size: size, severity: null, customIcon: allIcon, selected: isAllSelected || isNoneSelected, children: isNoneSelected ? `${allLabel} (ingen)` : allLabel }) }, "__all__")), options.map(opt => {
                         // If none-state is active, everything else should look unselected
                         const isSelected = !isNoneSelected && selectedSet.has(opt.value);
-                        return (_jsx("button", { type: "button", className: styles.chipButton, onClick: () => toggleValue(opt.value), "aria-pressed": isSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isSelected ? selectedSeverity : unselectedSeverity), customIcon: showSelectedIcon ? isSelected ? _jsx(Check, {}) : null : opt.icon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: opt.label }) }, opt.value));
+                        return (_jsx("button", { type: "button", className: styles.chipButton, onClick: () => toggleValue(opt.value), "aria-pressed": isSelected, disabled: disabled, children: _jsx(Chip, { size: size, customIcon: opt.icon, severity: null, type: type, selected: isSelected, children: opt.label }) }, opt.value));
                     })] })] }));
 }

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css

@@ -4,8 +4,6 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
-  /* use theme spacing tokens */
   gap: var(--spacing-xs);
 }
 
@@ -15,10 +13,7 @@
 
 .label {
   font-weight: var(--font-weight-medium);
-
-  /* theme uses --color-fg-muted / --color-fg-subtle (not --color-text-muted) */
   color: var(--color-fg-muted);
-
   white-space: nowrap;
   line-height: var(--line-height-tight);
   font-size: var(--font-size-sm);
@@ -28,8 +23,6 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-
-  /* use theme spacing token */
   gap: var(--spacing-xxs);
 }
 
@@ -38,23 +31,30 @@
   border: 0;
   background: transparent;
   cursor: pointer;
-
-  /* avoid default button styles on some browsers */
   font: inherit;
   color: inherit;
 }
 
 .chipButton:disabled {
   cursor: not-allowed;
-
-  /* align with theme disabled */
   opacity: 1;
   color: var(--color-disabled-fg);
 }
 
-/* Focus ring should use theme focus tokens */
 .chipButton:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: none;
+}
+
+.chipButton:focus-visible > * {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.chipButton:focus-visible > .rounded {
   border-radius: var(--border-radius-rounded);
 }
+
+.chipButton:focus-visible > .default {
+  border-radius: var(--border-radius-default);
+}

package/dist/components/forms/input/Input.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Size } from '../../../types/sizes.types';
 import type { InputContainerProps } from '../input-container/InputContainer';
-export type InputVariant = 'outlined' | 'filled' | 'standalone';
+export type InputVariant = 'outlined' | 'surface' | 'subtle' | 'standalone' | 'embedded';
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
     icon?: React.ReactNode;
     autoFocus?: boolean;

package/dist/components/forms/input/Input.js

@@ -18,13 +18,7 @@ function mergeRefs(...refs) {
         }
     };
 }
-export const Input = forwardRef(function Input({ 
-// InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 
-// Input-only props
-icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, 
-// Native input props
-id, style, className, ...inputProps }, ref) {
+export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, style, className, ...inputProps }, ref) {
     const inputRef = useRef(null);
     const reactId = useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
@@ -39,12 +33,12 @@ id, style, className, ...inputProps }, ref) {
         ...(minWidth ? { ['--input-min-width']: minWidth } : null),
         ...(width ? { ['--input-width']: width } : null),
     };
-    // Anchor tooltip to the stable "field" wrapper (input + icon + clear button)
     const { triggerProps } = useTooltipTrigger({
         content: tooltip,
         placement: tooltipPlacement,
         offset: 8,
     });
+    const trailingButtonVariant = variant === 'outlined' || variant === 'standalone' ? 'outlined' : 'default';
     return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
                 styles.container,
                 fullWidth ? styles.fullWidth : '',
@@ -60,6 +54,6 @@ id, style, className, ...inputProps }, ref) {
                                 styles[variant],
                             ]
                                 .filter(Boolean)
-                                .join(' ') }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                                .join(' ') }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
 });
 Input.displayName = 'Input';