@etus/ui 0.4.0-beta.3 → 0.4.0-beta.5

package/dist/styles.css

@@ -19,7 +19,7 @@
   --accordion-item-border-width: 1px;
   --accordion-item-padding-x: 16px;
   --accordion-item-radius: 0.5rem;
-  --accordion-root-gap: 8px;
+  --accordion-root-gap: 16px;
   --accordion-trigger-gap: 16px;
   --accordion-trigger-padding-y-lg: 24px;
   --accordion-trigger-padding-y-md: 16px;
@@ -508,6 +508,33 @@
   --chart-3: oklch(62.31% 0.1880 259.81);
   --chart-4: oklch(86.06% 0.1731 91.94);
   --chart-5: oklch(63.68% 0.2078 25.33);
+  --chart-card-bg: oklch(100.00% 0.0000 0);
+  --chart-card-border: oklch(92.19% 0.0000 0);
+  --chart-card-chart-height: 8rem;
+  --chart-card-empty-state-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-empty-state-caption-line-height: 24px;
+  --chart-card-empty-state-caption-size: 16px;
+  --chart-card-empty-state-icon-radius: 12px;
+  --chart-card-empty-state-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-empty-state-title-line-height: 32px;
+  --chart-card-empty-state-title-size: 24px;
+  --chart-card-empty-state-title-weight: 700;
+  --chart-card-featured-icon-bg: oklch(97.02% 0.0000 0);
+  --chart-card-fg: oklch(14.48% 0.0000 0);
+  --chart-card-footer-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-footer-trend-color: oklch(14.48% 0.0000 0);
+  --chart-card-gap: 24px;
+  --chart-card-padding-bottom: 24px;
+  --chart-card-padding-top: 20px;
+  --chart-card-padding-x: 24px;
+  --chart-card-previous-color: oklch(55.55% 0.0000 0);
+  --chart-card-radius: 16px;
+  --chart-card-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-title-line-height: 24px;
+  --chart-card-title-size: 18px;
+  --chart-card-title-weight: 600;
+  --chart-card-value-color: oklch(14.48% 0.0000 0);
+  --chart-card-value-size: 20px;
   --chart-indicator-dot-size: 10px;
   --chart-indicator-line-width: 4px;
   --chart-legend-gap: 16px;
@@ -776,7 +803,7 @@
   --date-picker-footer-gap: 8px;
   --date-picker-footer-padding: 12px;
   --date-picker-preset-item-height: 32px;
-  --date-picker-preset-min-width: 140px;
+  --date-picker-preset-min-width: 168px;
   --date-picker-trigger-border-default: oklch(92.19% 0.0000 0);
   --date-picker-trigger-border-focus: oklch(81.75% 0.1821 159.79);
   --date-picker-trigger-disabled-bg: oklch(97.02% 0.0000 0);
@@ -797,7 +824,7 @@
   --date-picker-trigger-ring-width: 3px;
   --date-picker-trigger-text-lg: 16px;
   --date-picker-trigger-text-md: 14px;
-  --date-picker-trigger-text-sm: 12px;
+  --date-picker-trigger-text-sm: 14px;
   --date-range-picker-calendar-gap: 16px;
   --date-range-picker-today-button-height: 28px;
   --date-range-picker-today-button-text-size: 0.75rem;
@@ -1169,10 +1196,12 @@
   --green-800: oklch(44.79% 0.1083 151.33);
   --green-900: oklch(39.25% 0.0896 152.54);
   --green-950: oklch(26.64% 0.0628 152.93);
+  --header-content-height: 36px;
+  --header-height: 64px;
   --header-root-bg: oklch(100.00% 0.0000 0);
   --header-root-border-color: oklch(92.19% 0.0000 0);
-  --header-root-padding-x: 16px;
-  --header-root-padding-y: 12px;
+  --header-root-padding-x: 32px;
+  --header-root-padding-y: 20px;
   --header-size-lg-height: 80px;
   --header-size-md-height: 64px;
   --header-size-sm-height: 48px;
@@ -1239,6 +1268,13 @@
   --ifta-label-wrapper-height: 60px;
   --ifta-label-wrapper-padding-bottom: 8px;
   --ifta-label-wrapper-padding-top: 24px;
+  --image-gallery-empty-border-color: oklch(97.02% 0.0000 0);
+  --image-gallery-empty-radius: 12px;
+  --image-gallery-item-radius: 8px;
+  --image-gallery-loading-background: oklch(97.02% 0.0000 0);
+  --image-gallery-selection-opacity: 0.5;
+  --image-gallery-selection-ring-color: oklch(81.75% 0.1821 159.79);
+  --image-gallery-selection-ring-width: 2px;
   --image-rounded-circle: 9999px;
   --image-rounded-default: 0px;
   --image-rounded-rounded: 0.375rem;
@@ -1526,6 +1562,15 @@
   --modal-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --modal-footer-gap: 8px;
   --modal-header-gap: 8px;
+  --modal-icon-pill-color-default-bg: oklch(97.02% 0.0000 0);
+  --modal-icon-pill-color-default-fg: oklch(55.55% 0.0000 0);
+  --modal-icon-pill-color-destructive-bg: oklch(97.05% 0.0129 17.38);
+  --modal-icon-pill-color-destructive-fg: oklch(50.54% 0.1905 27.52);
+  --modal-icon-pill-color-warning-bg: oklch(98.73% 0.0262 102.21);
+  --modal-icon-pill-color-warning-fg: oklch(55.38% 0.1207 66.44);
+  --modal-icon-pill-icon-size: 16px;
+  --modal-icon-pill-padding: 8px;
+  --modal-icon-pill-radius: 999px;
   --modal-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --multiselect-content-bg: oklch(100.00% 0.0000 0);
   --multiselect-content-fg: oklch(20.46% 0.0000 0);
@@ -1627,9 +1672,8 @@
   --notification-dot-color-info: oklch(54.61% 0.2152 262.88);
   --notification-dot-color-success: oklch(62.71% 0.1699 149.21);
   --notification-dot-color-warning: oklch(86.06% 0.1731 91.94);
-  --notification-dot-left: 6px;
+  --notification-dot-gap: 6px;
   --notification-dot-size: 8px;
-  --notification-dot-top: 16px;
   --notification-root-gap: 12px;
   --notification-root-padding: 12px;
   --overlay: oklch(0.00% 0.0000 0 / 60.0%);
@@ -1643,7 +1687,7 @@
   --panel-header-padding-y: 12px;
   --panel-root-border-color: oklch(92.19% 0.0000 0);
   --panel-root-radius: 8px;
-  --panel-root-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --panel-root-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.10), 0 2px 4px 0 rgb(0 0 0 / 0.06);
   --panel-size-lg: 400px;
   --panel-size-md: 320px;
   --panel-size-sm: 280px;
@@ -1827,6 +1871,27 @@
   --red-800: oklch(44.37% 0.1613 26.90);
   --red-900: oklch(39.58% 0.1331 25.72);
   --red-950: oklch(25.75% 0.0886 26.04);
+  --report-builder-accent-bg-subtle: oklch(97.14% 0.0108 256.69);
+  --report-builder-accent-bg: oklch(95.32% 0.0207 261.77);
+  --report-builder-accent-border: oklch(91.09% 0.0388 257.92);
+  --report-builder-accent-bright: oklch(63.04% 0.1800 259.96);
+  --report-builder-accent-hover: oklch(53.18% 0.1807 258.26);
+  --report-builder-accent: oklch(57.37% 0.1946 257.86);
+  --report-builder-border-strong: oklch(90.67% 0.0000 0);
+  --report-builder-border: oklch(89.41% 0.0059 264.53);
+  --report-builder-fg-muted: oklch(49.79% 0.0094 253.91);
+  --report-builder-fg-secondary: oklch(36.88% 0.0074 240.02);
+  --report-builder-fg-strong: rgba(0, 0, 0, 0.87);
+  --report-builder-fg-subtle: oklch(56.24% 0.0000 0);
+  --report-builder-fg: oklch(24.79% 0.0058 271.18);
+  --report-builder-on-accent: oklch(100.00% 0.0000 0);
+  --report-builder-positive: oklch(64.75% 0.1603 148.50);
+  --report-builder-shadow-subtle: rgba(60, 64, 67, 0.15);
+  --report-builder-shadow: rgba(60, 64, 67, 0.3);
+  --report-builder-surface-hover: oklch(96.29% 0.0025 228.78);
+  --report-builder-surface-muted: oklch(97.02% 0.0000 0);
+  --report-builder-surface-subtle: oklch(98.16% 0.0017 247.84);
+  --report-builder-surface: oklch(100.00% 0.0000 0);
   --report-generator-output-max-height-lg: 500px;
   --report-generator-root-min-height-lg: 500px;
   --resizable-handle-bg: oklch(92.19% 0.0000 0);
@@ -2561,7 +2626,7 @@
   --tooltip-content-text-size: 0.75rem;
   --tooltip-content-z-index: 50;
   --topbar-leading-gap: 8px;
-  --topbar-root-background: oklch(97.02% 0.0000 0);
+  --topbar-root-background: oklch(98.51% 0.0000 0);
   --topbar-root-border-color: oklch(92.19% 0.0000 0);
   --topbar-root-gap: 16px;
   --topbar-root-height-default: 3.5rem;
@@ -2985,6 +3050,17 @@
   --chart-3: oklch(62.31% 0.1880 259.81);
   --chart-4: oklch(86.06% 0.1731 91.94);
   --chart-5: oklch(63.68% 0.2078 25.33);
+  --chart-card-bg: oklch(26.86% 0.0000 0);
+  --chart-card-border: oklch(37.15% 0.0000 0);
+  --chart-card-empty-state-caption-color: oklch(71.55% 0.0000 0);
+  --chart-card-empty-state-title-color: oklch(98.51% 0.0000 0);
+  --chart-card-featured-icon-bg: oklch(26.86% 0.0000 0);
+  --chart-card-fg: oklch(98.51% 0.0000 0);
+  --chart-card-footer-caption-color: oklch(71.55% 0.0000 0);
+  --chart-card-footer-trend-color: oklch(98.51% 0.0000 0);
+  --chart-card-previous-color: oklch(71.55% 0.0000 0);
+  --chart-card-title-color: oklch(97.02% 0.0000 0);
+  --chart-card-value-color: oklch(98.51% 0.0000 0);
   --chart-tooltip-bg: oklch(14.48% 0.0000 0);
   --chart-tooltip-border: oklch(37.15% 0.0000 0);
   --checkbox-indicator-color: oklch(18.34% 0.0338 166.67);
@@ -3170,6 +3246,9 @@
   --ifta-label-label-color-muted: oklch(71.55% 0.0000 0);
   --ifta-label-ring-destructive: oklch(63.68% 0.2078 25.33);
   --ifta-label-ring-primary: oklch(84.11% 0.1609 163.31);
+  --image-gallery-empty-border-color: oklch(26.86% 0.0000 0);
+  --image-gallery-loading-background: oklch(26.86% 0.0000 0);
+  --image-gallery-selection-ring-color: oklch(84.11% 0.1609 163.31);
   --image-skeleton-bg: oklch(26.86% 0.0000 0);
   --info-border: oklch(54.61% 0.2152 262.88);
   --info-foreground: oklch(100.00% 0.0000 0);
@@ -3233,6 +3312,12 @@
   --menu-item-fg-hover: oklch(95.21% 0.0467 171.12);
   --modal-content-bg: oklch(14.48% 0.0000 0);
   --modal-content-border: oklch(37.15% 0.0000 0);
+  --modal-icon-pill-color-default-bg: oklch(26.86% 0.0000 0);
+  --modal-icon-pill-color-default-fg: oklch(71.55% 0.0000 0);
+  --modal-icon-pill-color-destructive-bg: oklch(25.75% 0.0886 26.04);
+  --modal-icon-pill-color-destructive-fg: oklch(80.77% 0.1035 19.57);
+  --modal-icon-pill-color-warning-bg: oklch(28.57% 0.0639 53.81);
+  --modal-icon-pill-color-warning-fg: oklch(90.52% 0.1657 98.11);
   --modal-overlay-bg: oklch(0.00% 0.0000 0 / 80.0%);
   --multiselect-content-bg: oklch(20.46% 0.0000 0);
   --multiselect-content-fg: oklch(98.51% 0.0000 0);
@@ -3325,8 +3410,29 @@
   --rail-accent-foreground: oklch(95.21% 0.0467 171.12);
   --rail-accent: oklch(26.88% 0.0527 163.85);
   --rail-background: oklch(20.46% 0.0000 0);
-  --rail-border: oklch(26.86% 0.0000 0);
+  --rail-border: oklch(37.15% 0.0000 0);
   --rating-icon-color-filled: oklch(79.52% 0.1617 86.05);
+  --report-builder-accent-bg-subtle: oklch(33.49% 0.0383 251.89);
+  --report-builder-accent-bg: oklch(34.67% 0.0731 256.69);
+  --report-builder-accent-border: oklch(46.92% 0.0851 258.47);
+  --report-builder-accent-bright: oklch(76.61% 0.1083 259.79);
+  --report-builder-accent-hover: oklch(83.69% 0.0733 259.99);
+  --report-builder-accent: oklch(76.61% 0.1083 259.79);
+  --report-builder-border-strong: oklch(36.88% 0.0074 240.02);
+  --report-builder-border: oklch(49.79% 0.0094 253.91);
+  --report-builder-fg-muted: oklch(70.28% 0.0111 247.99);
+  --report-builder-fg-secondary: oklch(80.93% 0.0083 253.87);
+  --report-builder-fg-strong: rgba(232, 234, 237, 0.87);
+  --report-builder-fg-subtle: oklch(70.28% 0.0111 247.99);
+  --report-builder-fg: oklch(93.64% 0.0046 258.33);
+  --report-builder-on-accent: oklch(24.79% 0.0058 271.18);
+  --report-builder-positive: oklch(77.44% 0.1039 152.19);
+  --report-builder-shadow-subtle: rgba(0, 0, 0, 0.3);
+  --report-builder-shadow: rgba(0, 0, 0, 0.5);
+  --report-builder-surface-hover: oklch(33.34% 0.0071 274.76);
+  --report-builder-surface-muted: oklch(28.52% 0.0056 271.22);
+  --report-builder-surface-subtle: oklch(28.52% 0.0056 271.22);
+  --report-builder-surface: oklch(24.79% 0.0058 271.18);
   --resizable-handle-bg: oklch(37.15% 0.0000 0);
   --resizable-handle-grip-bg: oklch(37.15% 0.0000 0);
   --resizable-handle-ring: oklch(84.11% 0.1609 163.31);
@@ -3365,7 +3471,7 @@
   --sidebar-accent-foreground: oklch(95.21% 0.0467 171.12);
   --sidebar-accent: oklch(26.88% 0.0527 163.85);
   --sidebar-background: oklch(20.46% 0.0000 0);
-  --sidebar-border: oklch(26.86% 0.0000 0);
+  --sidebar-border: oklch(37.15% 0.0000 0);
   --sidebar-container-background: oklch(20.46% 0.0000 0);
   --sidebar-foreground: oklch(97.02% 0.0000 0);
   --sidebar-input-background: oklch(14.48% 0.0000 0);
@@ -3532,7 +3638,7 @@
   --toolbar-separator-color: oklch(37.15% 0.0000 0);
   --tooltip-content-background: oklch(98.51% 0.0000 0);
   --tooltip-content-foreground: oklch(14.48% 0.0000 0);
-  --topbar-root-background: oklch(26.86% 0.0000 0);
+  --topbar-root-background: oklch(20.46% 0.0000 0);
   --topbar-root-border-color: oklch(37.15% 0.0000 0);
   --warning-border: oklch(55.38% 0.1207 66.44);
   --warning-foreground: oklch(28.57% 0.0639 53.81);
@@ -3687,6 +3793,17 @@
   --chart-3: oklch(62.31% 0.1880 259.81);
   --chart-4: oklch(86.06% 0.1731 91.94);
   --chart-5: oklch(63.68% 0.2078 25.33);
+  --chart-card-bg: oklch(100.00% 0.0000 0);
+  --chart-card-border: oklch(92.19% 0.0000 0);
+  --chart-card-empty-state-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-empty-state-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-featured-icon-bg: oklch(97.02% 0.0000 0);
+  --chart-card-fg: oklch(14.48% 0.0000 0);
+  --chart-card-footer-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-footer-trend-color: oklch(14.48% 0.0000 0);
+  --chart-card-previous-color: oklch(55.55% 0.0000 0);
+  --chart-card-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-value-color: oklch(14.48% 0.0000 0);
   --chart-tooltip-bg: oklch(100.00% 0.0000 0);
   --chart-tooltip-border: oklch(92.19% 0.0000 0);
   --checkbox-indicator-color: oklch(18.34% 0.0338 166.67);
@@ -3872,6 +3989,9 @@
   --ifta-label-label-color-muted: oklch(55.55% 0.0000 0);
   --ifta-label-ring-destructive: oklch(63.68% 0.2078 25.33);
   --ifta-label-ring-primary: oklch(81.75% 0.1821 159.79);
+  --image-gallery-empty-border-color: oklch(97.02% 0.0000 0);
+  --image-gallery-loading-background: oklch(97.02% 0.0000 0);
+  --image-gallery-selection-ring-color: oklch(81.75% 0.1821 159.79);
   --image-skeleton-bg: oklch(97.02% 0.0000 0);
   --info-border: oklch(88.23% 0.0571 254.13);
   --info-foreground: oklch(100.00% 0.0000 0);
@@ -3935,6 +4055,12 @@
   --menu-item-fg-hover: oklch(26.88% 0.0527 163.85);
   --modal-content-bg: oklch(100.00% 0.0000 0);
   --modal-content-border: oklch(92.19% 0.0000 0);
+  --modal-icon-pill-color-default-bg: oklch(97.02% 0.0000 0);
+  --modal-icon-pill-color-default-fg: oklch(55.55% 0.0000 0);
+  --modal-icon-pill-color-destructive-bg: oklch(97.05% 0.0129 17.38);
+  --modal-icon-pill-color-destructive-fg: oklch(50.54% 0.1905 27.52);
+  --modal-icon-pill-color-warning-bg: oklch(98.73% 0.0262 102.21);
+  --modal-icon-pill-color-warning-fg: oklch(55.38% 0.1207 66.44);
   --modal-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --multiselect-content-bg: oklch(100.00% 0.0000 0);
   --multiselect-content-fg: oklch(20.46% 0.0000 0);
@@ -4029,6 +4155,27 @@
   --rail-background: oklch(98.51% 0.0000 0);
   --rail-border: oklch(92.19% 0.0000 0);
   --rating-icon-color-filled: oklch(86.06% 0.1731 91.94);
+  --report-builder-accent-bg-subtle: oklch(97.14% 0.0108 256.69);
+  --report-builder-accent-bg: oklch(95.32% 0.0207 261.77);
+  --report-builder-accent-border: oklch(91.09% 0.0388 257.92);
+  --report-builder-accent-bright: oklch(63.04% 0.1800 259.96);
+  --report-builder-accent-hover: oklch(53.18% 0.1807 258.26);
+  --report-builder-accent: oklch(57.37% 0.1946 257.86);
+  --report-builder-border-strong: oklch(90.67% 0.0000 0);
+  --report-builder-border: oklch(89.41% 0.0059 264.53);
+  --report-builder-fg-muted: oklch(49.79% 0.0094 253.91);
+  --report-builder-fg-secondary: oklch(36.88% 0.0074 240.02);
+  --report-builder-fg-strong: rgba(0, 0, 0, 0.87);
+  --report-builder-fg-subtle: oklch(56.24% 0.0000 0);
+  --report-builder-fg: oklch(24.79% 0.0058 271.18);
+  --report-builder-on-accent: oklch(100.00% 0.0000 0);
+  --report-builder-positive: oklch(64.75% 0.1603 148.50);
+  --report-builder-shadow-subtle: rgba(60, 64, 67, 0.15);
+  --report-builder-shadow: rgba(60, 64, 67, 0.3);
+  --report-builder-surface-hover: oklch(96.29% 0.0025 228.78);
+  --report-builder-surface-muted: oklch(97.02% 0.0000 0);
+  --report-builder-surface-subtle: oklch(98.16% 0.0017 247.84);
+  --report-builder-surface: oklch(100.00% 0.0000 0);
   --resizable-handle-bg: oklch(92.19% 0.0000 0);
   --resizable-handle-grip-bg: oklch(92.19% 0.0000 0);
   --resizable-handle-ring: oklch(81.75% 0.1821 159.79);
@@ -4234,7 +4381,7 @@
   --toolbar-separator-color: oklch(92.19% 0.0000 0);
   --tooltip-content-background: oklch(14.48% 0.0000 0);
   --tooltip-content-foreground: oklch(100.00% 0.0000 0);
-  --topbar-root-background: oklch(97.02% 0.0000 0);
+  --topbar-root-background: oklch(98.51% 0.0000 0);
   --topbar-root-border-color: oklch(92.19% 0.0000 0);
   --warning-border: oklch(94.51% 0.1243 101.54);
   --warning-foreground: oklch(28.57% 0.0639 53.81);
@@ -4498,6 +4645,17 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-chart-card-bg: var(--chart-card-bg);
+  --color-chart-card-border: var(--chart-card-border);
+  --color-chart-card-empty-state-caption-color: var(--chart-card-empty-state-caption-color);
+  --color-chart-card-empty-state-title-color: var(--chart-card-empty-state-title-color);
+  --color-chart-card-featured-icon-bg: var(--chart-card-featured-icon-bg);
+  --color-chart-card-fg: var(--chart-card-fg);
+  --color-chart-card-footer-caption-color: var(--chart-card-footer-caption-color);
+  --color-chart-card-footer-trend-color: var(--chart-card-footer-trend-color);
+  --color-chart-card-previous-color: var(--chart-card-previous-color);
+  --color-chart-card-title-color: var(--chart-card-title-color);
+  --color-chart-card-value-color: var(--chart-card-value-color);
   --color-chart-tooltip-bg: var(--chart-tooltip-bg);
   --color-chart-tooltip-border: var(--chart-tooltip-border);
   --color-checkbox-indicator-color: var(--checkbox-indicator-color);
@@ -4690,6 +4848,9 @@
   --color-ifta-label-label-color-muted: var(--ifta-label-label-color-muted);
   --color-ifta-label-ring-destructive: var(--ifta-label-ring-destructive);
   --color-ifta-label-ring-primary: var(--ifta-label-ring-primary);
+  --color-image-gallery-empty-border-color: var(--image-gallery-empty-border-color);
+  --color-image-gallery-loading-background: var(--image-gallery-loading-background);
+  --color-image-gallery-selection-ring-color: var(--image-gallery-selection-ring-color);
   --color-image-rounded-circle: var(--image-rounded-circle);
   --color-image-rounded-rounded: var(--image-rounded-rounded);
   --color-image-skeleton-bg: var(--image-skeleton-bg);
@@ -4762,6 +4923,12 @@
   --color-menu-item-fg-hover: var(--menu-item-fg-hover);
   --color-modal-content-bg: var(--modal-content-bg);
   --color-modal-content-border: var(--modal-content-border);
+  --color-modal-icon-pill-color-default-bg: var(--modal-icon-pill-color-default-bg);
+  --color-modal-icon-pill-color-default-fg: var(--modal-icon-pill-color-default-fg);
+  --color-modal-icon-pill-color-destructive-bg: var(--modal-icon-pill-color-destructive-bg);
+  --color-modal-icon-pill-color-destructive-fg: var(--modal-icon-pill-color-destructive-fg);
+  --color-modal-icon-pill-color-warning-bg: var(--modal-icon-pill-color-warning-bg);
+  --color-modal-icon-pill-color-warning-fg: var(--modal-icon-pill-color-warning-fg);
   --color-modal-overlay-bg: var(--modal-overlay-bg);
   --color-multiselect-content-bg: var(--multiselect-content-bg);
   --color-multiselect-content-fg: var(--multiselect-content-fg);
@@ -4865,6 +5032,27 @@
   --color-rail-border: var(--rail-border);
   --color-rating-icon-color-empty: var(--rating-icon-color-empty);
   --color-rating-icon-color-filled: var(--rating-icon-color-filled);
+  --color-report-builder-accent-bg-subtle: var(--report-builder-accent-bg-subtle);
+  --color-report-builder-accent-bg: var(--report-builder-accent-bg);
+  --color-report-builder-accent-border: var(--report-builder-accent-border);
+  --color-report-builder-accent-bright: var(--report-builder-accent-bright);
+  --color-report-builder-accent-hover: var(--report-builder-accent-hover);
+  --color-report-builder-accent: var(--report-builder-accent);
+  --color-report-builder-border-strong: var(--report-builder-border-strong);
+  --color-report-builder-border: var(--report-builder-border);
+  --color-report-builder-fg-muted: var(--report-builder-fg-muted);
+  --color-report-builder-fg-secondary: var(--report-builder-fg-secondary);
+  --color-report-builder-fg-strong: var(--report-builder-fg-strong);
+  --color-report-builder-fg-subtle: var(--report-builder-fg-subtle);
+  --color-report-builder-fg: var(--report-builder-fg);
+  --color-report-builder-on-accent: var(--report-builder-on-accent);
+  --color-report-builder-positive: var(--report-builder-positive);
+  --color-report-builder-shadow-subtle: var(--report-builder-shadow-subtle);
+  --color-report-builder-shadow: var(--report-builder-shadow);
+  --color-report-builder-surface-hover: var(--report-builder-surface-hover);
+  --color-report-builder-surface-muted: var(--report-builder-surface-muted);
+  --color-report-builder-surface-subtle: var(--report-builder-surface-subtle);
+  --color-report-builder-surface: var(--report-builder-surface);
   --color-resizable-handle-bg: var(--resizable-handle-bg);
   --color-resizable-handle-grip-bg: var(--resizable-handle-grip-bg);
   --color-resizable-handle-ring: var(--resizable-handle-ring);
@@ -5203,6 +5391,96 @@
   --text-xl: var(--text-font-size-xl);
   --text-xs: var(--text-font-size-xs);
 }
+/* =========================================================================
+   Typography — self-hosted brand faces (Inter + JetBrains Mono)
+   =========================================================================
+
+   Per DESIGN.md: Inter is the only sans face (UI, body, headings, display);
+   JetBrains Mono is the code/keyboard face. Both are self-hosted (SIL OFL 1.1
+   — see ./fonts/inter-OFL.txt and ./fonts/jetbrains-mono-OFL.txt) so
+   `font-sans`/`font-mono` and `var(--font-sans)`/`var(--font-mono)` resolve to
+   real branded faces for every @etus/ui consumer instead of falling back to
+   the OS sans/monospace stacks.
+
+   Loaded via @font-face — never an import rule — on purpose: the
+   self-contained dist/styles.css build (tsup.config.ts onSuccess) hard-fails
+   on any surviving import at-rule. The woff2 files are copied to dist/fonts/
+   by the same step, so `./fonts/*` URLs resolve relative to the published
+   stylesheet. Browsers fetch each weight lazily, so a consumer that overrides
+   --font-sans/--font-mono (e.g. the showcase) never downloads unused faces.
+   ========================================================================= */
+
+/* Inter — sans face. Only 400/500/600/700 ship (DESIGN.md). */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/inter-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/inter-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./fonts/inter-latin-600-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/inter-latin-700-normal.woff2") format("woff2");
+}
+
+/* JetBrains Mono — mono/code face. */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
+}
+
+:root {
+  /* Seven brand faces (DESIGN.md). Consumers may override locally. */
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+@theme inline {
+  /* Drive Tailwind v4's `font-sans` / `font-mono` utilities from the tokens. */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
 /* =========================================================================
    Scrollbar — tokenized, cross-browser, theme-aware
    =========================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etus/ui",
-  "version": "0.4.0-beta.3",
+  "version": "0.4.0-beta.5",
   "description": "Seven Design System - UI components for ETUS applications",
   "license": "MIT",
   "repository": {
@@ -113,7 +113,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vaul": "^1.1.2",
-    "@etus/tokens": "^0.4.0-beta.2"
+    "@etus/tokens": "^0.4.0-beta.4"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.2.15",

package/dist/chunk-5ZKKXLPF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/Header/Header.variants.ts","../src/components/navigation/Header/Header.tsx"],"names":[],"mappings":"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","file":"chunk-5ZKKXLPF.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Header root variant styles\n */\nexport const headerVariants = cva(\n  [\n    // Base styles\n    \"flex w-full items-center\",\n    // Transition\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-background border-b border-border\",\n        transparent: \"bg-transparent\",\n        floating: \"bg-background/80 backdrop-blur-sm border-b border-border/50 shadow-sm\",\n      },\n      size: {\n        sm: \"h-12\",\n        md: \"h-14\",\n        lg: \"h-16\",\n      },\n      sticky: {\n        true: \"sticky top-0 z-[var(--header-sticky-z-index)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n      sticky: false,\n    },\n  }\n)\n\n/**\n * Header container variant styles (inner wrapper)\n */\nexport const headerContainerVariants = cva(\n  [\n    \"flex w-full items-center gap-4 px-4\",\n  ],\n  {\n    variants: {\n      contained: {\n        true: \"mx-auto max-w-7xl\",\n        false: \"\",\n      },\n      layout: {\n        // Brand left, Nav middle, Actions right (default)\n        default: \"justify-between\",\n        // Brand center; Nav and Actions on sides if provided\n        \"logo-centered\":\n          \"justify-center [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3 [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-actions]]:flex-1\",\n        // Nav left, Brand right (mirror of default)\n        \"links-left\":\n          \"justify-between [&>[data-slot=header-brand]]:order-2 [&>[data-slot=header-nav]]:order-1 [&>[data-slot=header-actions]]:order-3\",\n        // Brand + Nav clustered center, Actions right\n        centered:\n          \"[&>[data-slot=header-brand]]:flex-none [&>[data-slot=header-nav]]:flex-1 [&>[data-slot=header-nav]]:justify-center [&>[data-slot=header-actions]]:flex-none [&>[data-slot=header-actions]]:ml-auto\",\n      },\n    },\n    defaultVariants: {\n      contained: false,\n      layout: \"default\",\n    },\n  }\n)\n\n/**\n * HeaderBrand variant styles\n */\nexport const headerBrandVariants = cva([\n  \"flex shrink-0 items-center gap-2\",\n])\n\n/**\n * HeaderNav variant styles\n */\nexport const headerNavVariants = cva([\n  \"hidden md:flex items-center gap-1\",\n])\n\n/**\n * HeaderActions variant styles\n */\nexport const headerActionsVariants = cva(\n  [\n    \"flex items-center gap-2\",\n  ],\n  {\n    variants: {\n      align: {\n        start: \"justify-start\",\n        center: \"justify-center\",\n        end: \"justify-end\",\n      },\n    },\n    defaultVariants: {\n      align: \"end\",\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  HeaderActionsProps,\n  HeaderBrandProps,\n  HeaderNavProps,\n  HeaderProps,\n} from \"./Header.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  headerActionsVariants,\n  headerBrandVariants,\n  headerContainerVariants,\n  headerNavVariants,\n  headerVariants,\n} from \"./Header.variants\"\n\n/**\n * Header - A responsive header component for site navigation.\n *\n * Supports multiple visual variants, sizes, and sticky positioning.\n *\n * @example\n * <Header variant=\"default\" size=\"md\" sticky>\n *   <HeaderBrand asLink href=\"/\">Logo</HeaderBrand>\n *   <HeaderNav>\n *     <a href=\"/about\">About</a>\n *     <a href=\"/contact\">Contact</a>\n *   </HeaderNav>\n *   <HeaderActions>\n *     <Button>Sign In</Button>\n *   </HeaderActions>\n * </Header>\n */\nfunction Header({\n  className,\n  variant = \"default\",\n  size = \"md\",\n  sticky = false,\n  contained = false,\n  layout = \"default\",\n  containerClassName,\n  children,\n  ...props\n}: HeaderProps) {\n  return (\n    <header\n      className={cn(headerVariants({ variant, size, sticky }), className)}\n      data-slot=\"header\"\n      {...props}\n    >\n      <div\n        className={cn(\n          headerContainerVariants({ contained, layout }),\n          containerClassName\n        )}\n        data-layout={layout}\n        data-slot=\"header-container\"\n      >\n        {children}\n      </div>\n    </header>\n  )\n}\n\n/**\n * HeaderBrand - Logo/brand area of the header.\n *\n * Can optionally render as a link when asLink is true.\n */\nfunction HeaderBrand({\n  className,\n  asLink = false,\n  href = \"/\",\n  children,\n  ...props\n}: HeaderBrandProps) {\n  if (asLink) {\n    return (\n      <a\n        className={cn(headerBrandVariants(), className)}\n        data-slot=\"header-brand\"\n        href={href}\n        {...(props as React.ComponentProps<\"a\">)}\n      >\n        {children}\n      </a>\n    )\n  }\n\n  return (\n    <div\n      className={cn(headerBrandVariants(), className)}\n      data-slot=\"header-brand\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * HeaderNav - Navigation container for header links.\n */\nfunction HeaderNav({ className, children, ...props }: HeaderNavProps) {\n  return (\n    <nav\n      className={cn(headerNavVariants(), className)}\n      data-slot=\"header-nav\"\n      {...props}\n    >\n      {children}\n    </nav>\n  )\n}\n\n/**\n * HeaderActions - Actions container for buttons/controls.\n */\nfunction HeaderActions({\n  className,\n  align = \"end\",\n  children,\n  ...props\n}: HeaderActionsProps) {\n  return (\n    <div\n      className={cn(headerActionsVariants({ align }), className)}\n      data-slot=\"header-actions\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { Header, HeaderActions, HeaderBrand, HeaderNav }\n"]}