@dbcdk/react-components 0.0.10 → 0.0.12

package/dist/components/card/Card.d.ts

@@ -1,10 +1,10 @@
+import type { ReactNode, JSX, HTMLAttributes } from 'react';
 import { JSXElementConstructor, ReactElement } from 'react';
-import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 type CardVariant = 'default' | 'subtle' | 'strong';
 type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
-interface CardProps {
+export interface CardProps {
     title?: string;
     loading?: boolean;
     variant?: CardVariant;
@@ -23,5 +23,23 @@ interface CardProps {
     link?: ReactElement<any, string | JSXElementConstructor<any>>;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
 }
-export declare function Card({ title, loading, variant, size, headerMarker, headerIcon, severity, image, imgPlacement, mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider, children, link, width, }: CardProps): JSX.Element;
+type CardMetaProps = {
+    columns?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDListElement>, 'children'>;
+type CardMetaRowProps = {
+    label: ReactNode;
+    labelWidth?: string;
+    value: ReactNode;
+    className?: string;
+    nowrapValue?: boolean;
+};
+declare function CardMeta({ columns, className, children, ...rest }: CardMetaProps): JSX.Element;
+declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }: CardMetaRowProps): JSX.Element;
+type CardComponent = ((props: CardProps) => JSX.Element) & {
+    Meta: typeof CardMeta;
+    MetaRow: typeof CardMetaRow;
+};
+export declare const Card: CardComponent;
 export {};

package/dist/components/card/Card.js

@@ -4,7 +4,7 @@ import styles from './Card.module.css';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Card({ title, loading, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
+function CardImpl({ title, loading, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
     const outerContainerStyle = width
         ? { ['--width']: `${width}%` }
         : undefined;
@@ -17,6 +17,21 @@ export function Card({ title, loading, variant = 'default', size = 'md', headerM
             ? styles.innerImgRight
             : styles.innerImgLeft;
     const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image && (_jsx("div", { className: styles.media, style: mediaStyle, children: image })), _jsxs("div", { className: styles.content, children: [(title || headerMeta) && (_jsxs("header", { className: styles.header, children: [title && (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })), headerMeta && _jsx("div", { className: styles.headerMeta, children: headerMeta })] })), loading && (_jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })), !loading && (showSectionDivider || sectionTitle) && (_jsxs("div", { className: styles.section, children: [showSectionDivider && _jsx("div", { className: styles.sectionDivider }), sectionTitle && _jsx("div", { className: styles.sectionTitle, children: sectionTitle })] })), !loading && children && _jsx("div", { className: styles.body, children: children }), !loading && actions && _jsx("div", { className: styles.actions, children: actions })] })] }));
-    const cardWithLink = link ? _jsx(Hyperlink, { component: link }) : inner;
+    // keep existing behavior
+    const cardWithLink = link ? _jsx(Hyperlink, { children: link }) : inner;
     return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: _jsx("div", { className: [styles.container, styles[variant]].filter(Boolean).join(' '), children: cardWithLink }) }));
 }
+// ---- subcomponents (declared normally) ----
+function CardMeta({ columns = 2, className, children, ...rest }) {
+    const colsClass = columns === 1 ? styles.metaCols1 : columns === 2 ? styles.metaCols2 : styles.metaCols3;
+    return (_jsx("dl", { ...rest, className: [styles.metaGrid, colsClass, className].filter(Boolean).join(' '), children: children }));
+}
+function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }) {
+    return (_jsxs("div", { className: [styles.metaRow, className].filter(Boolean).join(' '), style: { '--label-width': labelWidth }, children: [_jsx("dt", { className: styles.metaLabel, children: label }), _jsx("dd", { className: [styles.metaValue, nowrapValue ? styles.metaNowrap : undefined]
+                    .filter(Boolean)
+                    .join(' '), children: value })] }));
+}
+export const Card = Object.assign(CardImpl, {
+    Meta: CardMeta,
+    MetaRow: CardMetaRow,
+});

package/dist/components/card/Card.module.css

@@ -171,3 +171,62 @@
   justify-content: flex-end; /* right-align buttons */
   gap: var(--spacing-sm);
 }
+
+/* --- Meta grid primitives (optional) --- */
+
+.metaGrid {
+  margin: 0;
+  display: grid;
+  gap: var(--spacing-xs) var(--spacing-lg);
+}
+
+.metaCols1 {
+  grid-template-columns: 1fr;
+}
+
+.metaCols2 {
+  grid-template-columns: 1fr;
+}
+
+.metaCols3 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .metaCols2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .metaCols3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.metaRow {
+  --label-width: 120px;
+  display: grid;
+  grid-template-columns: var(--label-width, auto) 1fr;
+  gap: var(--spacing-xs);
+  align-items: baseline;
+  min-inline-size: 0;
+}
+
+.metaLabel {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.metaValue {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.metaNowrap {
+  white-space: nowrap;
+}

package/dist/components/circle/Circle.d.ts

@@ -5,8 +5,9 @@ interface CircleProps {
     severity: Severity;
     children?: ReactNode;
     glow?: boolean;
+    muted?: boolean;
     pulse?: boolean;
     size?: CircleSize;
 }
-export declare function Circle({ severity, children, glow, pulse, size }: CircleProps): JSX.Element;
+export declare function Circle({ severity, children, glow, muted, pulse, size, }: CircleProps): JSX.Element;
 export {};

package/dist/components/circle/Circle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Circle.module.css';
-export function Circle({ severity, children, glow, pulse, size = 'sm' }) {
-    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, className: `${styles.circle} ${styles[severity]}` }), children] }));
+export function Circle({ severity, children, glow, muted, pulse, size = 'sm', }) {
+    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, "data-muted": muted, className: `${styles.circle} ${styles[severity]}` }), children] }));
 }

package/dist/components/circle/Circle.module.css

@@ -16,10 +16,10 @@
   block-size: var(--component-size-sm);
   border-radius: var(--border-radius-round);
   flex-shrink: 0;
-
   transition:
     background-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    opacity var(--transition-normal) var(--ease-standard);
 }
 
 /* Density modifier (optional) */
@@ -77,6 +77,10 @@
   block-size: 18px;
 }
 
+.circle[data-muted='true'] {
+  opacity: 0.4;
+}
+
 .circle[data-size='lg'] {
   inline-size: 22px;
   block-size: 22px;

package/dist/components/code-block/CodeBlock.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './CodeBlock.module.css';
 import { CopyButton } from '../copy-button/CopyButton';
 export function CodeBlock({ code, copyButton, size = 'md' }) {
-    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
+    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { style: "link", text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -1,21 +1,33 @@
 .container {
-  background-color: var(--color-bg-contextual);
   position: relative;
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius-default);
-  border: var(--border-width-thin) solid var(--color-border-default);
   margin-block: 0;
-  font-family: var(--font-family-mono);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: break-word;
+
+  background: var(--color-bg-contextual-subtle);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-xs);
+
+  padding: var(--spacing-sm);
   padding-inline-end: calc(var(--spacing-sm) + 40px);
+
+  font-family: var(--font-family-mono);
+  line-height: var(--line-height-relaxed);
+
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* Nice: avoids layout shift if/when scrollbars appear (supported in modern browsers) */
+  scrollbar-gutter: stable;
+}
+
+.container:focus-within {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
 }
 
 .container.sm {
   padding: var(--spacing-xs);
-  padding-inline-end: calc(var(--spacing-xxs) + 40px);
-  min-height: 0;
+  padding-inline-end: calc(var(--spacing-xs) + 40px);
 }
 
 .container.sm .code {
@@ -25,6 +37,7 @@
 .container.md .code {
   font-size: var(--font-size-sm);
 }
+
 .container.lg .code {
   font-size: var(--font-size-base);
 }
@@ -33,11 +46,15 @@
   display: block;
   margin: 0;
   font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-break: anywhere;
-  word-break: break-all;
+  color: var(--color-fg-default);
+
+  /* ✅ Preserve formatting but avoid ugly breaking */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal; /* <- not break-all */
 }
 
+/* Copy button stays overlayed; does not affect layout */
 .copyButton {
   position: absolute;
   top: var(--spacing-xs);
@@ -54,7 +71,3 @@
   opacity: 1;
   pointer-events: auto;
 }
-
-.copyButton button {
-  pointer-events: auto;
-}

package/dist/components/copy-button/CopyButton.d.ts

@@ -5,6 +5,7 @@ interface CopyButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     children?: ReactNode;
+    style?: 'button' | 'link';
 }
 export declare function CopyButton(props: CopyButtonProps & ComponentProps<typeof Button>): ReactNode;
 export {};

package/dist/components/copy-button/CopyButton.js

@@ -4,8 +4,9 @@ import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 import styles from './CopyButton.module.css';
 import { Button } from '../button/Button';
+import { Hyperlink } from '../hyperlink/Hyperlink';
 export function CopyButton(props) {
-    var _a;
+    var _a, _b;
     const { text, variant = 'outlined', size = 'sm', children, ...rest } = props;
     const [copied, setCopied] = useState(false);
     const handleCopy = async () => {
@@ -18,5 +19,12 @@ export function CopyButton(props) {
             console.error('Failed to copy: ', err);
         }
     };
-    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
+    if (props.style === 'link') {
+        return (_jsx(Hyperlink, { asChild: true, variant: "secondary", inline: props.variant === 'inline', children: _jsxs("button", { "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleCopy();
+                }, className: `${styles.link} ${copied ? styles.copied : ''}`, children: [children, copied ? _jsx(Check, {}) : _jsx(Copy, {})] }) }));
+    }
+    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
 }

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,16 +10,22 @@
   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));
@@ -39,6 +45,7 @@
   user-select: none;
 }
 
+/* Operator trigger */
 .filterField .operatorTrigger {
   display: inline-flex;
   align-items: center;
@@ -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: calc(var(--spacing-3xs) + var(--density));
 }
 
 .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/input/Input.js

@@ -23,7 +23,7 @@ function mergeRefs(...refs) {
  */
 export const Input = forwardRef(function Input({ 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 
+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

package/dist/components/forms/input/Input.module.css

@@ -3,6 +3,7 @@
   /* inline-flex makes width behave weird in parents */
   display: inline-flex;
   align-items: stretch;
+  flex-grow: 1;
   gap: 0;
   /* width control */
   inline-size: var(--input-width, auto);

package/dist/components/forms/input-container/InputContainer.module.css

@@ -80,7 +80,7 @@
  */
 .inputContainer[data-modified] label:not(.label) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-default);
   padding: 2px 6px;
 }
 

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -1,10 +1,22 @@
 import * as React from 'react';
-interface HyperlinkProps {
-    component: React.ReactElement;
-    className?: string;
+type BaseProps = {
+    children: React.ReactNode;
     icon?: React.ReactNode;
-    disableIcon?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
-}
-export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
+    className?: string;
+    /**
+     * If true, Hyperlink will NOT render <a>.
+     * Instead, it will clone its only child (e.g. Next <Link>) and apply styling/props to it.
+     */
+    asChild?: boolean;
+    variant?: 'primary' | 'secondary';
+    inline?: boolean;
+};
+type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as?: 'a';
+};
+type ButtonProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as: 'button';
+};
+type HyperlinkProps = AnchorProps | ButtonProps;
+export declare function Hyperlink(props: HyperlinkProps): React.ReactElement;
 export {};