@dbcdk/react-components 0.0.19 → 0.0.21

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);

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';