@dbcdk/react-components 0.0.10 → 0.0.13

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

@@ -61,10 +61,18 @@ function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }
                 return (_jsx(Menu.Item, { active: selected, children: _jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled: disabled, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: selected ? _jsx(Check, { size: 16 }) : null }), LABELS[op]] }) }, op));
             }) }) }));
 }
+function isFilterActive(value) {
+    if (Array.isArray(value))
+        return value.length > 0;
+    if (typeof value === 'string')
+        return value.trim().length > 0;
+    return value != null;
+}
 export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
     var _a, _b;
     const [selectedOperator, setSelectedOperator] = useState(operator);
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+    const active = isFilterActive(value);
     // 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);
@@ -92,7 +100,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
         debounceRef.current = setTimeout(() => {
             isTypingRef.current = false;
             emit({ value: nextVal });
-        }, 250); // tweak debounce as needed
+        }, 250);
     };
     // Sync internal value when parent value changes (e.g. URL updates)
     useEffect(() => {
@@ -100,7 +108,6 @@ export function FilterField({ field, control, operator, value, onChange, operato
         if (control !== 'input')
             return;
         const incoming = (_a = value) !== null && _a !== void 0 ? _a : '';
-        // don't fight the user mid-typing; once parent catches up, we allow sync again
         if (!isTypingRef.current && incoming !== localValue) {
             setLocalValue(incoming);
         }
@@ -115,25 +122,23 @@ export function FilterField({ field, control, operator, value, onChange, operato
                 clearTimeout(debounceRef.current);
         };
     }, []);
-    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: ` ${styles.filterField} ${styles[size]} ${value ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+    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: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         isTypingRef.current = true;
-                        setLocalValue(next); // immediate UI update
-                        scheduleEmitValue(next); // debounced parent update
-                    }, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
+                        setLocalValue(next);
+                        scheduleEmitValue(next);
+                    }, fullWidth: true, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
                         isTypingRef.current = false;
                         if (debounceRef.current)
                             clearTimeout(debounceRef.current);
                         setLocalValue('');
-                        emit({ value: '' }); // clear should be immediate
+                        emit({ value: '' });
                     } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }) })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: v => {
                         const current = new Set((Array.isArray(value) ? value : []));
-                        if (current.has(v)) {
+                        if (current.has(v))
                             current.delete(v);
-                        }
-                        else {
+                        else
                             current.add(v);
-                        }
                         emit({ value: Array.from(current) });
                     }, onClear: () => emit({ value: [] }), children: placeholder })) })] }));
 }

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

@@ -10,28 +10,34 @@
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 
+  position: relative;
+
   transition:
     border-color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
     background-color var(--transition-fast) var(--ease-standard);
 }
 
-/* .filterField.active {
-  border-color: var(--color-border-selected);
-  background: var(--color-bg-selected);
-} */
+/* 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));
+}
 
 .filterField.sm {
-  block-size: calc(var(--component-size-sm) + var(--density));
+  block-size: var(--component-size-sm);
 }
 .filterField.md {
-  block-size: calc(var(--component-size-md) + var(--density));
+  block-size: var(--component-size-md);
 }
 
 .filterField .label {
   display: inline-flex;
   align-items: center;
-  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-block: var(--spacing-2xs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-sm);
   color: var(--color-fg-muted);
@@ -39,12 +45,13 @@
   user-select: none;
 }
 
+/* Operator trigger */
 .filterField .operatorTrigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-block: var(--spacing-2xs);
   padding-inline: var(--spacing-sm);
   background: var(--opac-bg-default);
   color: var(--color-fg-default);
@@ -68,30 +75,139 @@
   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.active .operatorTrigger:hover {
+  background: var(--opac-bg-dark);
+  color: var(--color-fg-default);
+}
+
+/* Wrapper for the select / multiselect control */
 .filterField .valueWrapper {
   display: inline-flex;
   align-items: center;
   padding: 0;
   height: 100%;
+
+  flex: 1;
+  min-width: 0;
 }
 
-.valueWrapper > * {
+/* Ensure the control inside can stretch/shrink */
+.filterField .valueWrapper > * {
   height: 100%;
-  & > * {
-    height: 100% !important;
-  }
+  width: 100%;
+  min-width: 0;
 }
-
-.valueWrapper button {
+.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%;
+  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: var(--spacing-sm) !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;
+}
+
+/* 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;
+}
+
+/* =========================
+   INPUT styling
+   ========================= */
 
 .filterField input {
   appearance: none;
@@ -103,6 +219,11 @@
   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 {

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 type Variant = 'default' | 'primary' | 'outlined';
 type Size = 'sm' | 'md' | 'lg';
 interface CheckboxProps {
@@ -8,7 +8,7 @@ interface CheckboxProps {
     variant?: Variant;
     disabled?: boolean;
     modified?: boolean;
-    label?: string;
+    label?: ReactNode;
     size?: Size;
     containerLabel?: string;
     error?: string;

package/dist/components/forms/checkbox-group/CheckboxGroup.js

@@ -66,7 +66,7 @@ export function CheckboxGroup({ label, options, selectedValues, onChange, onTogg
     return (_jsxs("div", { className: wrapperClassName, "data-cy": dataCy, style: { ['--checkboxgroup-action-min-width']: actionMinWidth }, children: [label && _jsx("span", { className: styles.groupLabel, children: label }), _jsx("div", { className: itemsClassName, role: "group", "aria-label": label, children: options.map(opt => {
                     const isChecked = selectedSet.has(opt.value);
                     const isDisabled = disabled || !!opt.disabled;
-                    return (_jsx(Checkbox, { label: opt.label, checked: isChecked, disabled: isDisabled, variant: variant, size: size, onChange: () => {
+                    return (_jsx(Checkbox, { label: opt.label, checked: isChecked, disabled: isDisabled, variant: variant, size: "sm", onChange: () => {
                             if (isDisabled)
                                 return;
                             toggleValue(opt.value);

package/dist/components/forms/checkbox-group/CheckboxGroup.module.css

@@ -30,7 +30,7 @@
 .contained {
   padding: 0 var(--spacing-xs);
   border: var(--border-width-thin) solid var(--color-border-subtle);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-default);
   background: var(--color-bg-surface);
 }
 

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { InputContainer } from '../input-container/InputContainer';
+import { MultiselectOption } from '../multi-select/MultiSelect';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    name?: string;
+    options: MultiselectOption<T>[];
+    selectedValue: T | null;
+    onChange: (value: T) => void;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'outlined' | 'filled' | 'standalone';
+    onClear?: () => void;
+    /**
+     * Needed if T is an object and you want to use native select.
+     * Native <select> requires string values; we serialize using value[datakey].
+     */
+    datakey?: string;
+    dataCy?: string;
+    disabled?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    includePlaceholderOption?: boolean;
+    /**
+     * Default false. If true, we allow clearing even when required=true:
+     * - placeholder becomes selectable
+     * - clear button is shown
+     *
+     * This is "odd" UX in many forms, so it's opt-in.
+     */
+    allowClearWhenRequired?: boolean;
+};
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export {};

package/dist/components/forms/form-select/FormSelect.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, X } from 'lucide-react';
+import * as React from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './FormSelect.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+function isEqualValue(a, b, datakey) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    if (typeof a === 'object' && typeof b === 'object' && datakey) {
+        return a[datakey] === b[datakey];
+    }
+    return false;
+}
+function serializeValue(value, datakey) {
+    if (typeof value === 'string' || typeof value === 'number')
+        return String(value);
+    if (datakey && value && typeof value === 'object') {
+        const v = value[datakey];
+        return v == null ? '' : String(v);
+    }
+    throw new Error('FormSelect: option value is an object but no `datakey` was provided. Native select requires string/number values.');
+}
+function findSelectedOption(options, selectedValue, datakey) {
+    return options.find(o => isEqualValue(o.value, selectedValue, datakey));
+}
+export function FormSelect({ 
+// InputContainer props
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
+// FormSelect props
+id, name, options, selectedValue, onChange, placeholder = 'Vælg', size = 'md', variant = 'outlined', onClear, datakey, dataCy, disabled, includePlaceholderOption = true, allowClearWhenRequired = false, }) {
+    const generatedId = React.useId();
+    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const selected = React.useMemo(() => findSelectedOption(options, selectedValue, datakey), [options, selectedValue, datakey]);
+    const tooltipEnabled = Boolean(tooltip);
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    const describedBy = (() => {
+        const ids = [];
+        if (error || helpText)
+            ids.push(describedById);
+        if (tooltipEnabled)
+            ids.push(tooltipId);
+        return ids.length ? ids.join(' ') : undefined;
+    })();
+    const nativeValue = React.useMemo(() => {
+        if (selected && selected.value != null)
+            return serializeValue(selected.value, datakey);
+        return '';
+    }, [selected, datakey]);
+    const canClear = Boolean(onClear) && !disabled && (allowClearWhenRequired || !required);
+    const showClear = canClear && Boolean(selected);
+    const placeholderDisabled = Boolean(required) && !allowClearWhenRequired;
+    const handleNativeChange = e => {
+        const raw = e.target.value;
+        if (raw === '') {
+            // Clear only if consumer provided onClear
+            onClear === null || onClear === void 0 ? void 0 : onClear();
+            return;
+        }
+        const opt = options.find(o => serializeValue(o.value, datakey) === raw);
+        if (opt)
+            onChange(opt.value);
+    };
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsxs("div", { className: [
+                    styles.container,
+                    fullWidth ? styles.fullWidth : '',
+                    canClear ? styles.withButton : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: [_jsxs("div", { className: styles.field, children: [_jsxs("select", { ...(tooltipEnabled ? triggerProps : {}), id: controlId, name: name, className: [styles.input, styles[size], styles[variant]].filter(Boolean).join(' '), value: nativeValue, onChange: handleNativeChange, disabled: disabled, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'formselect', "data-forminput": true, children: [includePlaceholderOption && (_jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder })), options.map(opt => {
+                                        const v = serializeValue(opt.value, datakey);
+                                        return (_jsx("option", { value: v, children: opt.label }, v));
+                                    })] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, { size: 20 }) })] }), canClear && (_jsx("button", { type: "button", className: styles.trailingButton, onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                        }, "aria-label": "Ryd valg", disabled: !showClear, "data-cy": dataCy ? `${dataCy}-clear` : 'formselect-clear', children: _jsx(X, { size: 18, "aria-hidden": "true" }) }))] }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/dist/components/forms/form-select/FormSelect.module.css

@@ -0,0 +1,236 @@
+/* FormSelect.module.css */
+
+/* =========================================
+   Root container (select + optional clear)
+   ========================================= */
+
+.container {
+  display: inline-flex;
+  align-items: stretch;
+  flex-grow: 1;
+  gap: 0;
+
+  inline-size: var(--input-width, auto);
+  min-inline-size: var(--input-min-width, 0);
+  max-inline-size: var(--input-max-width, none);
+
+  position: relative;
+  border-radius: var(--border-radius-default);
+}
+
+/* Full width variant */
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* =========================================
+   Focus ring (GROUP LEVEL)
+   ========================================= */
+
+.container:focus-within {
+  box-shadow: 0 0 0 2px var(--color-border-selected);
+  z-index: 1;
+}
+
+/* IMPORTANT:
+   When focused, do NOT also turn the select's border blue,
+   otherwise you get the vertical seam line next to the button. */
+.container:focus-within .input {
+  border-color: var(--color-border-default);
+}
+.container:focus-within .trailingButton {
+  border-color: var(--color-border-default);
+}
+
+/* =========================================
+   Field wrapper (native select + chevron)
+   ========================================= */
+
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  color: var(--color-fg-default);
+}
+
+/* =========================================
+   Native select styling
+   ========================================= */
+
+.input {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+
+  background: var(--color-bg-surface);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+
+  /* Reserve space for chevron */
+  padding-inline-end: calc(var(--spacing-lg) + 28px);
+
+  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);
+}
+
+/* Disabled select */
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}
+
+/* Hover state */
+.input:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+}
+
+/* Remove default focus ring (we use group-level ring) */
+.input:focus-visible {
+  outline: none;
+  /* DO NOT set border-color here */
+}
+
+/* =========================================
+   Variants
+   ========================================= */
+
+.filled {
+  background-color: var(--color-bg-surface);
+}
+
+.standalone {
+  border-radius: var(--border-radius-rounded);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+
+.outlined {
+  background-color: transparent;
+}
+
+/* =========================================
+   Sizes
+   ========================================= */
+
+.sm {
+  block-size: var(--component-size-sm);
+  font-size: var(--font-size-sm);
+}
+
+.md {
+  block-size: var(--component-size-md);
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  block-size: var(--component-size-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* =========================================
+   Chevron (decorative only)
+   ========================================= */
+
+.chevron {
+  position: absolute;
+  inset-inline-end: var(--spacing-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--color-fg-subtle);
+}
+
+.chevron svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+/* =========================================
+   Clear button integration
+   ========================================= */
+
+/* Remove right radius from select when button exists */
+.withButton .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  /* Prevent double border seam; the button provides the right side */
+  border-right-color: transparent;
+}
+
+/* Trailing clear button */
+.trailingButton {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 auto;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-inline: var(--spacing-sm);
+
+  border: var(--border-width-thin) solid var(--color-border-default);
+
+  /* Seam join: don't draw left border; select covers it */
+  border-left-color: transparent;
+  margin-left: calc(-1 * var(--border-width-thin));
+
+  border-top-right-radius: var(--border-radius-default);
+  border-bottom-right-radius: var(--border-radius-default);
+
+  background: var(--color-bg-surface);
+  cursor: pointer;
+
+  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);
+}
+
+/* Hover state */
+.trailingButton:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-bg-surface-hover, var(--color-bg-surface));
+}
+
+/* Remove individual focus ring (group handles it) */
+.trailingButton:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Disabled clear button:
+   keep border/background stable; dim only icon */
+.trailingButton:disabled {
+  cursor: default;
+  background: var(--color-bg-surface);
+}
+
+.trailingButton:disabled svg {
+  opacity: 0.4;
+}