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

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;
@@ -1239,6 +1266,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 +1560,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);
@@ -1643,7 +1686,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 +1870,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 +2625,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 +3049,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 +3245,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 +3311,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);
@@ -3327,6 +3411,27 @@
   --rail-background: oklch(20.46% 0.0000 0);
   --rail-border: oklch(26.86% 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);
@@ -3532,7 +3637,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 +3792,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 +3988,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 +4054,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 +4154,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 +4380,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 +4644,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 +4847,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 +4922,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 +5031,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 +5390,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.4",
   "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.3"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.2.15",