@dbcdk/react-components 0.0.19 → 0.0.21

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

@@ -1,11 +1,9 @@
 /* Root control group */
 .container {
-  /* 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);
   min-inline-size: var(--input-min-width, 0);
   max-inline-size: var(--input-max-width, none);
@@ -24,21 +22,23 @@
   display: flex;
   align-items: center;
   flex: 1 1 auto;
-  min-inline-size: 0; /* critical for ellipsis inside flex */
+  min-inline-size: 0;
   color: var(--color-fg-default);
 }
 
 /* Actual input */
 .input {
   flex: 1 1 auto;
-  min-inline-size: 0; /* critical */
+  min-inline-size: 0;
   inline-size: 100%;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  color: var(--color-fg-default);
   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);
@@ -49,7 +49,8 @@
   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);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
 }
 
 .input::placeholder {
@@ -58,11 +59,13 @@
 
 .input:disabled {
   background-color: var(--color-disabled-bg);
-  border: 0;
+  border-color: transparent;
   color: var(--color-disabled-fg);
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 1;
+  box-shadow: none;
 }
+
 /* Button group styling */
 .withButton .input {
   border-top-right-radius: 0;
@@ -74,27 +77,99 @@
   padding-inline-end: calc(var(--spacing-md) + 28px);
 }
 
-/* Hover & focus */
-.input:hover {
+/* Global focus reset - variants own visible focus treatment */
+.input:focus-visible {
+  outline: none;
+}
+
+/* =========================
+   Variants
+   ========================= */
+
+/* Stronger field chrome for forms/settings */
+.outlined {
+  background-color: var(--color-bg-surface);
+  border-color: var(--color-border-default);
+}
+
+.outlined:hover:not(:disabled) {
   border-color: var(--color-border-strong);
 }
 
-.input:focus-visible {
+.outlined:focus-visible:not(:disabled) {
   border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
-/* Variants */
-.filled {
+.surface {
   background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.surface:hover:not(:disabled) {
+  border-color: var(--color-border-default);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.surface:focus-visible:not(:disabled) {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* Old filled/tinted behavior, now renamed subtle */
+.subtle {
+  background-color: var(--color-bg-toolbar);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px transparent;
+}
+
+.subtle:hover:not(:disabled) {
+  background-color: var(--color-bg-toolbar-hover);
 }
+
+.subtle:focus-visible:not(:disabled) {
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* Embedded = chromeless input for grouped controls like FilterField */
+.embedded {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs));
+  padding-block: 0;
+}
+
+.embedded:hover:not(:disabled),
+.embedded:focus:not(:disabled),
+.embedded:focus-visible:not(:disabled) {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
 .standalone {
-  border-radius: var(--border-radius-rounded);
   background-color: var(--color-bg-surface);
+  border-color: var(--color-border-default);
+  border-radius: var(--border-radius-rounded);
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
 
-.outlined {
-  background-color: transparent;
+.standalone:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-sm), var(--shadow-md);
+}
+
+.standalone:focus-visible:not(:disabled) {
+  border-color: var(--color-border-selected);
+  box-shadow:
+    var(--shadow-xs),
+    var(--shadow-md),
+    inset 0 0 0 1px var(--color-border-selected);
 }
 
 /* Sizes */
@@ -103,14 +178,17 @@
   font-size: var(--font-size-sm);
   padding: 0 var(--spacing-xxs);
 }
+
 .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);
@@ -121,6 +199,10 @@
   padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
 }
 
+.embedded.inputWithIcon {
+  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-xl));
+}
+
 .icon {
   position: absolute;
   inset-inline-start: var(--spacing-md);
@@ -133,7 +215,13 @@
   block-size: var(--icon-size-md);
   pointer-events: none;
   color: var(--color-fg-subtle);
+  transition: color var(--transition-fast) var(--ease-standard);
 }
+
+.field:focus-within .icon {
+  color: var(--color-fg-muted);
+}
+
 .icon svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
@@ -147,6 +235,7 @@
   border-left: var(--border-width-thin) solid transparent;
   margin-left: calc(-1 * var(--border-width-thin));
 }
+
 .trailingButton:hover {
   border-color: var(--color-border-default);
   z-index: 2;

package/dist/components/hyperlink/Hyperlink.module.css

@@ -36,12 +36,24 @@
   }
 }
 
+.link {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.link {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
 .link::after {
   content: '';
   position: absolute;
   left: 0;
-  bottom: -2px;
-  width: 100%;
+  right: 0;
+  bottom: 1px;
   height: 1px;
   background-color: currentColor;
   transform: scaleX(0);
@@ -52,7 +64,6 @@
 .link:hover::after {
   transform: scaleX(1);
 }
-
 .link:focus-visible {
   outline: 2px solid var(--color-brand);
   outline-offset: 2px;

package/dist/components/interval-select/IntervalSelect.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Clock } from 'lucide-react';
+import { Check } from 'lucide-react';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../../components/button/Button';
 import { ClearButton } from '../../components/clear-button/ClearButton';
@@ -87,7 +87,7 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                         // Reset active to selected when opening
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = opt.minutesAgo === selectedValue;
                         const isActive = index === activeIndex;
                         return (_jsx(Menu.Item, { active: isActive, 

package/dist/components/overlay/modal/Modal.d.ts

@@ -19,5 +19,6 @@ export type ModalProps = {
     severity?: Severity;
     disableContentSpacing?: boolean;
     dataCy?: string;
+    width?: number | string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -5,7 +5,7 @@ import { useEffect, useId, useRef } from 'react';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './Modal.module.css';
-export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, }) {
+export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, width, }) {
     const titleId = useId();
     const dialogRef = useRef(null);
     const lastActiveElementRef = useRef(null);
@@ -30,7 +30,6 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
                 const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
                 const focusable = dialog.querySelectorAll(focusableSelectors);
                 if (focusable.length > 0) {
-                    // Prefer focusing the first input/select/textarea if present
                     const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
                     preferred.focus();
                 }
@@ -68,13 +67,11 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
         document.addEventListener('keydown', handleKeyDown);
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
-            // Restore focus only when closing (true -> false) happens elsewhere
-            // so we do it when modal unmounts while open.
             if (lastActiveElementRef.current) {
                 lastActiveElementRef.current.focus();
             }
         };
-    }, [isOpen]); // <-- IMPORTANT: only depend on isOpen
+    }, [isOpen]);
     if (!isOpen)
         return null;
     const handleOverlayClick = () => {
@@ -88,5 +85,8 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
-    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+    const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
+                ? { ['--modal-width']: resolvedWidth }
+                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
 }

package/dist/components/overlay/modal/Modal.module.css

@@ -2,62 +2,87 @@
   position: fixed;
   inset: 0;
   background: var(--overlay-scrim);
+
   display: flex;
-  align-items: flex-start;
   justify-content: center;
-  padding-top: clamp(var(--spacing-md), 12vh, 24vh);
-  padding-bottom: var(--spacing-md);
+
+  padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
   z-index: var(--z-backdrop-modal);
+
+  /* Overlay can scroll if modal is taller than viewport */
   overflow-y: auto;
 }
 
+/* Default width can be overridden by --modal-width from props */
 .modal {
+  --modal-width: 700px;
+
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
-  min-width: 320px;
-  max-width: 700px;
-  max-height: calc(100vh - (2 * var(--spacing-md)));
-  display: flex;
-  flex-direction: column;
   box-shadow: var(--shadow-lg);
   font-family: var(--font-family);
-  min-width: 500px;
-  z-index: var(--z-modal);
   color: var(--color-fg-default);
-}
+  z-index: var(--z-modal);
+
+  /* Responsive width: never exceed viewport */
+  width: min(
+    var(--modal-width),
+    calc(100vw - 2 * clamp(var(--spacing-sm), 4vw, var(--spacing-lg)))
+  );
+  min-width: 320px;
+
+  /* Critical: prevent “below bottom of screen”
+     Prefer svh on mobile; fallback to vh. */
+  max-height: calc(100svh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+  max-height: calc(100vh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+
+  display: flex;
+  flex-direction: column;
 
-/* Slightly more relaxed on small screens */
-@media (max-width: var(--bp-sm)) {
-  .modal {
-    width: calc(100% - 2 * var(--spacing-md));
-    max-width: 100%;
-  }
+  /* If you want it slightly lower than top padding, keep it aligned start */
+  align-self: flex-start;
+
+  /* Helps on iOS when address bar changes */
+  overscroll-behavior: contain;
 }
 
+/* Header/footer pinned; body scrolls */
 .header {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding: var(--spacing-md);
   padding-bottom: 0;
+
+  /* Keeps header readable if body scrolls underneath */
+  flex: 0 0 auto;
 }
 
 .body {
-  overflow-y: auto;
+  flex: 1 1 auto;
+  overflow: auto;
+
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   color: var(--color-fg-muted);
+
   padding: var(--spacing-md);
+  min-height: 0; /* IMPORTANT: allows flex child to actually scroll */
 }
 
 .footer {
+  flex: 0 0 auto;
+
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-xs);
-  padding-top: 0;
+
   padding: var(--spacing-md);
+  padding-top: 0;
 }
 
 .icon {
@@ -65,3 +90,11 @@
   align-items: center;
   justify-content: center;
 }
+
+.contentSpacing .body > :first-child {
+  margin-top: 0;
+}
+
+.contentSpacing .body > :last-child {
+  margin-bottom: 0;
+}

package/dist/components/popover/Popover.module.css

@@ -1,6 +1,9 @@
 .container {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+  min-width: 0;
 }
 
 .content {

package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TooltipPlacement } from '../../components/overlay/tooltip/TooltipProvider';
 import type { Severity } from '../../constants/severity.types';
+type ProgressSeverity = 'done' | 'progress' | 'missing';
 export type Segment = {
     value: number;
-    severity?: Severity;
+    severity?: Severity | ProgressSeverity;
     color?: string;
     label?: React.ReactNode;
 };
@@ -11,7 +12,7 @@ export interface SegmentedProgressBarProps {
     segments: Segment[];
     total?: number;
     showRemainder?: boolean;
-    remainderSeverity?: Severity;
+    remainderSeverity?: Severity | ProgressSeverity;
     centerLabel?: React.ReactNode | ((filledPct: number) => React.ReactNode);
     height?: number;
     rounded?: boolean;
@@ -22,3 +23,4 @@ export interface SegmentedProgressBarProps {
     'data-testid'?: string;
 }
 export declare const SegmentedProgressBar: React.FC<SegmentedProgressBarProps>;
+export {};

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -1,13 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
-import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
 import styles from './SegmentedProgressBar.module.css';
 function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
-    var _a, _b, _c, _d, _e;
-    const bg = (_a = seg.color) !== null && _a !== void 0 ? _a : SeverityBgColor[(_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral'];
-    const fg = SeverityTextColor[(_c = seg.severity) !== null && _c !== void 0 ? _c : 'neutral'];
-    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_d = seg.value) !== null && _d !== void 0 ? _d : 0);
+    var _a, _b;
+    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_a = seg.value) !== null && _a !== void 0 ? _a : 0);
     const tooltipEnabled = tooltipContent !== null && tooltipContent !== undefined && tooltipContent !== '';
     const { triggerProps } = useTooltipTrigger({
         content: tooltipEnabled ? tooltipContent : null,
@@ -16,11 +13,13 @@ function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
     });
     return (_jsx("span", { className: styles.segmentWrapper, style: {
             flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-            height: '100%',
-            minWidth: '2px',
-        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("div", { className: styles.progressSegment, "data-index": index, "data-severity": (_e = seg.severity) !== null && _e !== void 0 ? _e : 'neutral', style: { background: bg, color: fg } }) }));
+        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("span", { className: styles.progressSegment, "data-index": index, "data-severity": (_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral', style: seg.color
+                ? {
+                    ['--segment-color']: seg.color,
+                }
+                : undefined }) }));
 }
-export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor = 'var(--color-neutral)', tooltipPlacement = 'top', className, ...aria }) => {
+export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor, tooltipPlacement = 'top', className, ...aria }) => {
     const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
     const effectiveTotal = total !== null && total !== void 0 ? total : sum;
     const safeTotal = Math.max(effectiveTotal, 0.0001);
@@ -36,15 +35,14 @@ export const SegmentedProgressBar = ({ segments, total, showRemainder = true, re
             base.push(remainder);
         return base.join('/');
     })();
-    const rootClass = [styles.container, className].filter(Boolean).join(' ');
     const filteredSegments = computedSegments.filter(x => x.value > 0);
-    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, style: {
-                height: height ? `${height}px` : `var(--component-size-xs)`,
-                borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
-                background: trackColor,
-            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: centerLabel
-                        ? typeof centerLabel === 'function'
-                            ? centerLabel(pctFilled)
-                            : centerLabel
-                        : autoNumbers })] }) }));
+    const rootClass = [styles.container, className].filter(Boolean).join(' ');
+    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, "data-rounded": rounded ? 'true' : 'false', style: {
+                height: height ? `${height}px` : '24px',
+                background: trackColor !== null && trackColor !== void 0 ? trackColor : 'var(--color-bg-surface-subtle)',
+            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: _jsx("span", { className: styles.progressCenterLabel, children: centerLabel
+                            ? typeof centerLabel === 'function'
+                                ? centerLabel(pctFilled)
+                                : centerLabel
+                            : autoNumbers }) })] }) }));
 };