@optimum-intelligence/opti-ui 0.4.0 → 0.5.1

package/dist/llms.txt

@@ -41,9 +41,43 @@ so the components work in Next.js App Router.
 - `ThemeProvider` — Scopes a theme to its children. Popups opened inside are portalled into the provider so they pick up the same tokens.
 - `themeToStyle` — Converts a theme object into CSS custom properties for a `style` prop.
 
+## Forms
+
+- `Calendar` — Month grid for picking one day. Keyboard: arrows move by day / week, Home / End jump within the week, PageUp / PageDown change month (with Shift: year). The month and year in the title open a list to jump straight to another one. With `granularity="month"` or `"year"` it shows a month or year grid instead.
+- `Checkbox` — Checkbox with optional `label` and `description`. Supports `indeterminate`.
+- `CheckboxGroup` — Manages the checked values of several `Checkbox` children (`value` / `onValueChange`).
+- `Combobox` — Searchable select. `<Combobox items={…} />` covers single and `multiple` (chips) selection; compose the parts for anything custom. (parts: Root, InputGroup, Input, Trigger, Clear, Value, Chips, Chip, Content, List, Item, Empty, Group, GroupLabel, Collection, useFilter)
+- `DateConfigProvider` — Sets default locale, time zone, week start and display formats for every date picker and calendar inside it. Props on a component still win. Nested providers override only the settings they pass.
+- `DatePicker` — Date field with a calendar popover. Day values are ISO dates (`"2026-03-09"`), the same format as `<input type="date">`. `granularity="month"` or `"year"` opens a month or year grid and stores the period's first day (`"2026-03-01"`); a time granularity behaves like `DateTimePicker`.
+- `DateRangePicker` — Date range field with a calendar popover and optional presets. Values are `{ start, end }` ISO dates (`"2026-03-09"`), both inclusive. With `granularity="month"` or `"year"` it picks whole months or years, and each end is the first day of its period.
+- `DateTimePicker` — Date and time field. Values are UTC instants (`"2026-03-09T13:30:00Z"`) shown and edited in `timeZone` (the browser's by default) on a 24-hour clock, as `2026-03-09 14:30`. Values without an offset (`"2026-03-09T14:30"`) are read as wall-clock time in `timeZone`.
+- `Dropzone` — Drop target that also opens the file browser on click, Enter or Space.
+- `Field` — Field parts wire up labels, descriptions and validation for any control inside (Input, Select, Checkbox, Switch, NumberField…). (parts: Root, Label, Description, Error, Item, Validity)
+- `Fieldset` — Groups related fields under a legend. (parts: Root, Legend)
+- `FileItem` — One file in a list: name, size, upload progress or error, and a remove button.
+- `FileUpload` — File field: a dropzone plus the list of chosen files. It only collects `File` objects; upload them yourself and report progress through `fileState`.
+- `Form` — Form with Base UI validation wiring and vertical field spacing.
+- `formatDate` — Formats a date or date-time the way the date pickers show it: ISO-style (`2026-03-09 14:30`) on a 24-hour clock by default, or with a custom `format`. Instants (`"2026-03-09T13:30:00Z"`) are shown in `timeZone`. Returns `""` for an invalid value.
+- `formatFileSize` — `1536` → `"1.5 KB"`.
+- `Input` — Text input, optionally with `startAdornment` / `endAdornment` inside the box. Use `TextField` for a labelled one.
+- `NumberField` — Numeric input with stepper buttons, locale formatting and keyboard stepping.
+- `PasswordField` — Labelled password input with description and error message.
+- `PasswordInput` — Password input with a button that reveals the value.
+- `Radio` — Radio button with optional `label` and `description`. Use inside `RadioGroup`; each needs a `value`.
+- `RadioGroup` — Single-choice group for `Radio` children (`value` / `onValueChange`).
+- `RangeCalendar` — Month grid for picking a range of days: the first pick sets one end, the second completes the range (in either order). Same keyboard as Calendar. Disabled days cannot be picked as an end but may fall inside a range.
+- `SearchInput` — Text input with a search icon and a clear button that appears once there is a value.
+- `Select` — `<Select items={…} />` renders a complete labelled select. For full control compose the parts: `Select.Root`, `Select.Trigger`, `Select.Content`, `Select.Item`, `Select.Group`, `Select.GroupLabel`, `Select.Separator`. (parts: Root, Label, Trigger, Value, Content, Item, Group, GroupLabel, Separator)
+- `Slider` — Single value or range (pass an array) slider.
+- `Switch` — On/off switch with optional `label` and `description`.
+- `Textarea` — Multi-line text input. Use `TextareaField` for a labelled one.
+- `TextareaField` — Labelled textarea with description and error message.
+- `TextField` — Labelled input with description and error message.
+- `useDateConfig` — The date settings from the nearest `DateConfigProvider`. Spread it into `formatDate` options to format dates the same way the pickers do.
+
 ## Layout
 
-- `AppShell` — Full-height layout with a fixed navbar and an internally scrolling main area. Below 900px the navbar moves into a slide-in drawer. Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.
+- `AppShell` — Full-height layout with a fixed navbar and an internally scrolling main area. Below 900px the navbar moves into a slide-in drawer, and `NavbarItem`s marked `pinned` show in a tab bar (see `mobileNavPosition`). Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.
 - `Card` — Surface that groups related content. Compose with `CardHeader` (`CardTitle`, `CardDescription`, `CardActions`), `CardContent` and `CardFooter`.
 - `CardActions` — Right-aligned slot inside CardHeader for icon buttons or menus. (parts: displayName)
 - `CardContent` — Styled `<div>` (`.oui-card__content`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
@@ -55,8 +89,9 @@ so the components work in Next.js App Router.
 - `Navbar` — Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`), `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.
 - `NavbarBrand` — Logo, title and subtitle block for the top of a `Navbar`.
 - `NavbarFooter` — Styled `<div>` (`.oui-navbar__footer`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
+- `NavbarGroup` — Expandable parent row in a `Navbar` with nested `NavbarItem` sub-links. Place it in a `NavbarSection` next to other items. On a collapsed rail the sub-links are hidden and the parent shows as active when one of them is; the hover peek shows the full tree.
 - `NavbarHeader` — Styled `<div>` (`.oui-navbar__header`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
-- `NavbarItem` — Navigation link. Renders an `<a>`; use `render={<Link to="…" />}` for a router link or `render={<button />}` for an action.
+- `NavbarItem` — Navigation link. Renders an `<a>`; use `render={<Link to="…" />}` for a router link or `render={<button />}` for an action. Inside a `NavbarGroup` it becomes an indented sub-link.
 - `NavbarSection` — Styled `<div>` (`.oui-navbar__section`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
 - `NavbarSectionLabel` — Styled `<div>` (`.oui-navbar__section-label`). Accepts `className`, `style`, the `render` prop and all `<div>` attributes. (parts: displayName)
 - `PageHeader` — Page title block with optional breadcrumbs, eyebrow, description and actions.
@@ -83,39 +118,6 @@ so the components work in Next.js App Router.
 - `ToggleGroup` — Group of `Toggle` buttons that share selection state (single or multiple).
 - `Toolbar` — Row of controls that is a single tab stop; arrow keys move between them. Other controls join through `render`: `<Toolbar.Button render={<Toggle />} />`, `<Toolbar.Button render={<Menu.Trigger />} />`. (parts: Root, Button, Link, Group, Separator, Input)
 
-## Forms
-
-- `Calendar` — Month grid for picking one day. Keyboard: arrows move by day / week, Home / End jump within the week, PageUp / PageDown change month (with Shift: year). The month and year in the title open a list to jump straight to another one.
-- `Checkbox` — Checkbox with optional `label` and `description`. Supports `indeterminate`.
-- `CheckboxGroup` — Manages the checked values of several `Checkbox` children (`value` / `onValueChange`).
-- `Combobox` — Searchable select. `<Combobox items={…} />` covers single and `multiple` (chips) selection; compose the parts for anything custom. (parts: Root, InputGroup, Input, Trigger, Clear, Value, Chips, Chip, Content, List, Item, Empty, Group, GroupLabel, Collection, useFilter)
-- `DatePicker` — Date field with a calendar popover. Values are ISO dates (`"2026-03-09"`), the same format as `<input type="date">`, and are shown the same way.
-- `DateRangePicker` — Date range field with a calendar popover and optional presets. Values are `{ start, end }` ISO dates (`"2026-03-09"`), both inclusive.
-- `DateTimePicker` — Date and time field. Values are local ISO date-times (`"2026-03-09T14:30"`), the same format as `<input type="datetime-local">`, shown as `2026-03-09 14:30:00` on a 24-hour clock whatever the locale.
-- `Dropzone` — Drop target that also opens the file browser on click, Enter or Space.
-- `Field` — Field parts wire up labels, descriptions and validation for any control inside (Input, Select, Checkbox, Switch, NumberField…). (parts: Root, Label, Description, Error, Item, Validity)
-- `Fieldset` — Groups related fields under a legend. (parts: Root, Legend)
-- `FileItem` — One file in a list: name, size, upload progress or error, and a remove button.
-- `FileUpload` — File field: a dropzone plus the list of chosen files. It only collects `File` objects; upload them yourself and report progress through `fileState`.
-- `Form` — Form with Base UI validation wiring and vertical field spacing.
-- `formatDate` — `"2026-03-09"`, or `"2026-03-09 14:30:00"` for a date-time: the same everywhere, on a 24-hour clock.
-- `formatDateLong` — The written form, `"2026. March 9."`, or `"2026. March 9. 14:30"` for a date-time. The order and the 24-hour clock are fixed; `locale` only translates the month name.
-- `formatFileSize` — `1536` → `"1.5 KB"`.
-- `Input` — Text input, optionally with `startAdornment` / `endAdornment` inside the box. Use `TextField` for a labelled one.
-- `NumberField` — Numeric input with stepper buttons, locale formatting and keyboard stepping.
-- `PasswordField` — Labelled password input with description and error message.
-- `PasswordInput` — Password input with a button that reveals the value.
-- `Radio` — Radio button with optional `label` and `description`. Use inside `RadioGroup`; each needs a `value`.
-- `RadioGroup` — Single-choice group for `Radio` children (`value` / `onValueChange`).
-- `RangeCalendar` — Month grid for picking a range of days: the first pick sets one end, the second completes the range (in either order). Same keyboard as Calendar. Disabled days cannot be picked as an end but may fall inside a range.
-- `SearchInput` — Text input with a search icon and a clear button that appears once there is a value.
-- `Select` — `<Select items={…} />` renders a complete labelled select. For full control compose the parts: `Select.Root`, `Select.Trigger`, `Select.Content`, `Select.Item`, `Select.Group`, `Select.GroupLabel`, `Select.Separator`. (parts: Root, Label, Trigger, Value, Content, Item, Group, GroupLabel, Separator)
-- `Slider` — Single value or range (pass an array) slider.
-- `Switch` — On/off switch with optional `label` and `description`.
-- `Textarea` — Multi-line text input. Use `TextareaField` for a labelled one.
-- `TextareaField` — Labelled textarea with description and error message.
-- `TextField` — Labelled input with description and error message.
-
 ## Overlays
 
 - `AlertDialog` — Confirmation dialog that requires an explicit choice (no outside-click dismissal). (parts: Root, Trigger, Content, Header, Title, Description, Body, Footer, Close)

package/dist/opti-ui.css

@@ -33,9 +33,18 @@
     --oui-radius-md: 12px;
     --oui-radius-card: 16px;
     --oui-radius-pill: 999px;
-    --oui-control-height-sm: 2rem;
-    --oui-control-height-md: 2.5rem;
-    --oui-control-height-lg: 3rem;
+    --oui-space-1: 0.125rem;
+    --oui-space-2: 0.25rem;
+    --oui-space-3: 0.375rem;
+    --oui-space-4: 0.5rem;
+    --oui-space-5: 0.625rem;
+    --oui-space-6: 0.75rem;
+    --oui-space-8: 1rem;
+    --oui-space-10: 1.25rem;
+    --oui-space-12: 1.5rem;
+    --oui-control-height-sm: 1.875rem;
+    --oui-control-height-md: 2.375rem;
+    --oui-control-height-lg: 2.875rem;
     --oui-control-border-width: 2px;
     --oui-control-disabled-opacity: 0.5;
     --oui-duration-fast: 0.15s;
@@ -501,7 +510,7 @@
     align-items: center;
     gap: 0.7rem;
     width: 100%;
-    padding: 0.55rem 0.7rem;
+    padding: var(--oui-space-5) 0.7rem;
     border: 0;
     border-radius: var(--oui-radius-control);
     background: transparent;
@@ -566,6 +575,41 @@
     line-height: 1.3;
     text-align: center;
   }
+  .oui-navbar__item-chevron {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.7;
+    transition: transform var(--oui-duration-normal) var(--oui-ease-out), opacity var(--oui-duration-fast) var(--oui-ease) var(--oui-duration-normal);
+  }
+  [data-open] > .oui-navbar__item-chevron {
+    transform: rotate(90deg);
+  }
+  .oui-navbar__group {
+    display: flex;
+    flex-direction: column;
+  }
+  .oui-navbar__group-panel {
+    height: var(--collapsible-panel-height);
+    overflow: hidden;
+    transition: height var(--oui-duration-normal) var(--oui-ease-out);
+  }
+  .oui-navbar__group-panel[data-starting-style], .oui-navbar__group-panel[data-ending-style] {
+    height: 0;
+  }
+  .oui-navbar__group-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    margin: 0.15rem 0 0.15rem 1.625rem;
+    padding-left: var(--oui-space-3);
+    border-left: 1px solid var(--_border);
+  }
+  .oui-navbar__group-items .oui-navbar__item {
+    padding-block: var(--oui-space-4);
+    padding-left: calc(1.625rem - 1px - var(--oui-space-3));
+    font-size: var(--oui-font-size-sm);
+  }
   .oui-navbar__footer {
     display: flex;
     flex-direction: column;
@@ -577,7 +621,7 @@
   .oui-navbar__toggle {
     position: absolute;
     top: 1.625rem;
-    right: 0.75rem;
+    left: calc(100% - 2.75rem);
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -590,7 +634,7 @@
     background: transparent;
     color: var(--_fg-muted);
     cursor: pointer;
-    transition: top var(--_motion), right var(--_motion), background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
+    transition: top var(--_motion), left var(--_motion), background-color var(--oui-duration-normal) var(--oui-ease), color var(--oui-duration-normal) var(--oui-ease);
   }
   .oui-navbar__toggle svg {
     flex-shrink: 0;
@@ -623,6 +667,7 @@
   .oui-navbar[data-collapsed] .oui-navbar__toggle,
   .oui-navbar[data-peek] .oui-navbar__toggle {
     top: 1.125rem;
+    left: calc((var(--oui-navbar-collapsed-width, 4.25rem) - 2rem) / 2);
   }
   .oui-navbar[data-collapsed] .oui-navbar__header,
   .oui-navbar[data-peek] .oui-navbar__header {
@@ -632,14 +677,12 @@
     width: var(--oui-navbar-collapsed-width, 4.25rem);
     padding-inline: 0.5rem;
   }
-  .oui-navbar[data-collapsed] .oui-navbar__toggle {
-    right: calc((var(--oui-navbar-collapsed-width, 4.25rem) - 2rem) / 2);
-  }
   .oui-navbar[data-collapsed] .oui-navbar__header {
     padding-inline: 0;
   }
   .oui-navbar[data-collapsed] .oui-navbar__brand-text,
-  .oui-navbar[data-collapsed] .oui-navbar__item-label {
+  .oui-navbar[data-collapsed] .oui-navbar__item-label,
+  .oui-navbar[data-collapsed] .oui-navbar__item-chevron {
     opacity: 0;
     transition: opacity var(--oui-duration-fast) var(--oui-ease);
   }
@@ -649,6 +692,9 @@
     color: transparent;
     font-size: 0;
   }
+  .oui-navbar[data-collapsed] .oui-navbar__group-panel {
+    display: none;
+  }
   .oui-navbar[data-collapsed] .oui-navbar__item-badge {
     position: absolute;
     top: 0.3rem;
@@ -709,39 +755,82 @@
     overflow-y: auto;
     background: var(--oui-app-shell-bg, var(--oui-color-bg));
   }
-  .oui-app-shell__mobile-bar {
+  .oui-app-shell__mobile-bar,
+  .oui-app-shell__tabbar {
     display: none;
   }
-  .oui-app-shell__menu-button,
-  .oui-app-shell__drawer-close {
-    display: inline-flex;
+  .oui-app-shell__tabbar {
+    gap: 0.25rem;
+    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom));
+    border-top: 1px solid var(--oui-color-inverse-border);
+    background: var(--oui-navbar-bg, var(--oui-color-inverse));
+    color: var(--oui-color-on-inverse-muted);
+  }
+  .oui-app-shell__tabbar[data-position=top] {
+    padding-bottom: 0.3rem;
+    border-top: 0;
+    border-bottom: 1px solid var(--oui-color-inverse-border);
+  }
+  .oui-app-shell__tab {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    padding: 0;
+    gap: 0.2rem;
+    min-width: 0;
+    padding: 0.3rem 0.25rem;
     border: 0;
     border-radius: var(--oui-radius-control);
     background: transparent;
     color: inherit;
+    font-size: var(--oui-font-size-2xs);
+    font-weight: var(--oui-font-weight-medium);
+    text-decoration: none;
     cursor: pointer;
-    transition: background-color var(--oui-duration-fast) var(--oui-ease);
-  }
-  .oui-app-shell__menu-button svg,
-  .oui-app-shell__drawer-close svg {
-    flex-shrink: 0;
-    width: 1.3rem;
-    height: 1.3rem;
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease);
   }
-  .oui-app-shell__menu-button:hover,
-  .oui-app-shell__drawer-close:hover {
+  .oui-app-shell__tab:hover {
     background: var(--oui-color-inverse-hover);
+    color: var(--oui-color-on-inverse);
   }
-  .oui-app-shell__menu-button:focus-visible,
-  .oui-app-shell__drawer-close:focus-visible {
+  .oui-app-shell__tab:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: -2px;
   }
+  .oui-app-shell__tab[data-active] {
+    color: var(--oui-color-on-inverse);
+    font-weight: var(--oui-font-weight-semibold);
+  }
+  .oui-app-shell__tab[data-active] .oui-app-shell__tab-icon {
+    background: var(--oui-color-accent);
+    color: var(--oui-color-on-accent);
+  }
+  .oui-app-shell__tab-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 1.75rem;
+    border-radius: var(--oui-radius-pill);
+    transition: background-color var(--oui-duration-fast) var(--oui-ease), color var(--oui-duration-fast) var(--oui-ease);
+  }
+  .oui-app-shell__tab-icon svg {
+    flex-shrink: 0;
+    width: 1.15rem;
+    height: 1.15rem;
+  }
+  .oui-app-shell__tab-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .oui-app-shell__drawer {
     position: fixed;
     top: 0;
@@ -765,8 +854,14 @@
   }
   @media (max-width: 900px) {
     .oui-app-shell {
-      grid-template-columns: minmax(0, 1fr);
-      grid-template-rows: auto minmax(0, 1fr);
+      display: flex;
+      flex-direction: column;
+    }
+    .oui-app-shell__main {
+      flex: 1;
+    }
+    .oui-app-shell__tabbar {
+      display: flex;
     }
     .oui-app-shell__navbar {
       display: none;
@@ -796,15 +891,15 @@
     flex-wrap: wrap;
     align-items: flex-end;
     justify-content: space-between;
-    gap: 1rem 1.5rem;
+    gap: var(--oui-space-6) var(--oui-space-10);
   }
   .oui-page-header__text {
     display: grid;
-    gap: 0.35rem;
+    gap: var(--oui-space-2);
     min-width: 0;
   }
   .oui-page-header__breadcrumbs {
-    margin-bottom: 0.4rem;
+    margin-bottom: var(--oui-space-3);
   }
   .oui-page-header__title {
     margin: 0;
@@ -827,12 +922,12 @@
   .oui-page-header__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.6rem;
+    gap: var(--oui-space-4);
   }
   .oui-grid {
     display: grid;
     grid-template-columns: repeat(var(--_cols, 3), minmax(0, 1fr));
-    gap: var(--_gap, 1rem);
+    gap: var(--_gap, var(--oui-space-6));
     min-width: 0;
   }
   .oui-grid > * {
@@ -857,10 +952,10 @@
     --_cols: 6;
   }
   .oui-grid[data-gap=sm] {
-    --_gap: 0.6rem;
+    --_gap: var(--oui-space-4);
   }
   .oui-grid[data-gap=lg] {
-    --_gap: 1.5rem;
+    --_gap: var(--oui-space-10);
   }
   @media (max-width: 1200px) {
     .oui-grid[data-columns="4"], .oui-grid[data-columns="5"], .oui-grid[data-columns="6"] {
@@ -1018,12 +1113,6 @@
     border-color: var(--_tone-border);
     background: transparent;
   }
-  .oui-badge__dot {
-    width: 0.45rem;
-    height: 0.45rem;
-    border-radius: 50%;
-    background: var(--_tone);
-  }
 }
 @layer oui.components {
   .oui-breadcrumbs {
@@ -1422,10 +1511,10 @@
     font-family: var(--oui-font-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    --_padding: 1.25rem;
+    --_padding: var(--oui-space-8);
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;
+    gap: var(--oui-space-6);
     min-width: 0;
     padding: var(--oui-card-padding, var(--_padding));
     border: 1.5px solid var(--oui-card-border, var(--oui-color-border));
@@ -1439,10 +1528,10 @@
     --_padding: 0;
   }
   .oui-card[data-padding=sm] {
-    --_padding: 1rem;
+    --_padding: var(--oui-space-6);
   }
   .oui-card[data-padding=lg] {
-    --_padding: 1.75rem;
+    --_padding: var(--oui-space-12);
   }
   .oui-card[data-variant=elevated] {
     border-color: transparent;
@@ -1474,7 +1563,7 @@
   }
   @media (max-width: 640px) {
     .oui-card[data-padding=md], .oui-card[data-padding=lg] {
-      --_padding: 1rem;
+      --_padding: var(--oui-space-6);
     }
   }
   .oui-card__header {
@@ -1519,7 +1608,7 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
-    padding-top: 0.9rem;
+    padding-top: var(--oui-space-6);
     border-top: 1px solid var(--oui-color-border-subtle);
   }
 }
@@ -1829,7 +1918,7 @@
     --_height: var(--oui-control-height-lg);
   }
   .oui-combobox__group[data-multiple] {
-    padding-block: 0.25rem;
+    padding-block: max(0px, (var(--oui-input-height, var(--_height)) - 2 * var(--oui-control-border-width) - 1.5rem) / 2);
     padding-left: 0.35rem;
   }
   .oui-combobox__group[data-invalid]:focus-within, .oui-combobox__group:has([data-invalid]):focus-within {
@@ -1858,7 +1947,7 @@
   }
   .oui-combobox__chips .oui-combobox__input {
     min-width: 2.5rem;
-    height: 1.75rem;
+    height: 1.5rem;
     padding-left: 0.4rem;
   }
   .oui-combobox__actions {
@@ -1871,8 +1960,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
+    --_size: min(1.75rem, calc(var(--oui-input-height, var(--_height)) - 2 * var(--oui-control-border-width) - 0.25rem));
+    width: var(--_size);
+    height: var(--_size);
     padding: 0;
     border: 0;
     border-radius: var(--oui-radius-sm);
@@ -1912,7 +2002,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.2rem;
-    height: 1.75rem;
+    height: 1.5rem;
     padding: 0 0.2rem 0 0.6rem;
     border-radius: var(--oui-radius-sm);
     background: var(--oui-color-accent-subtle);
@@ -2253,7 +2343,7 @@
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--oui-space-5);
     min-width: 0;
   }
   .oui-data-table__toolbar {
@@ -2261,7 +2351,7 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 0.6rem 1rem;
+    gap: var(--oui-space-4) var(--oui-space-6);
   }
   .oui-data-table__toolbar > .oui-input-group {
     flex: 1 1 14rem;
@@ -2641,13 +2731,13 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     --_width: 32rem;
-    --_padding: 1.5rem;
+    --_padding: var(--oui-space-10);
     --_radius: var(--oui-dialog-radius, var(--oui-radius-card));
     position: fixed;
     z-index: var(--oui-z-dialog);
     display: flex;
     flex-direction: column;
-    gap: 1.1rem;
+    gap: var(--oui-space-8);
     box-sizing: border-box;
     width: min(var(--oui-dialog-width, var(--_width)), 100vw - 2rem);
     max-height: calc(100dvh - 2rem);
@@ -2736,7 +2826,7 @@
   }
   @media (max-width: 640px) {
     .oui-dialog {
-      --_padding: 1.15rem;
+      --_padding: var(--oui-space-8);
     }
   }
   .oui-dialog__header {
@@ -2821,7 +2911,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     --_width: 32rem;
-    --_padding: 1.5rem;
+    --_padding: var(--oui-space-10);
     position: fixed;
     top: 0;
     bottom: 0;
@@ -2873,7 +2963,7 @@
   }
   @media (max-width: 640px) {
     .oui-drawer {
-      --_padding: 1.15rem;
+      --_padding: var(--oui-space-8);
       border-radius: 0 !important;
     }
   }
@@ -2883,7 +2973,7 @@
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
-    padding: 1rem var(--oui-drawer-padding, var(--_padding));
+    padding: var(--oui-space-6) var(--oui-drawer-padding, var(--_padding));
     border-bottom: 1px solid var(--oui-color-border-subtle);
   }
   .oui-drawer__heading {
@@ -2939,7 +3029,7 @@
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.6rem;
-    padding: 1rem var(--oui-drawer-padding, var(--_padding));
+    padding: var(--oui-space-6) var(--oui-drawer-padding, var(--_padding));
     border-top: 1px solid var(--oui-color-border-subtle);
   }
 }
@@ -3008,7 +3098,7 @@
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: var(--oui-space-3);
     min-width: 0;
   }
   .oui-field[data-disabled] .oui-field__label {
@@ -3055,7 +3145,7 @@
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--oui-space-5);
     min-width: 0;
     padding: 0;
     border: 0;
@@ -3070,7 +3160,7 @@
   .oui-form {
     display: flex;
     flex-direction: column;
-    gap: 1.1rem;
+    gap: var(--oui-space-8);
   }
 }
 @layer oui.components {
@@ -3802,10 +3892,10 @@
   .oui-popover {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: var(--oui-space-5);
     max-width: min(var(--available-width), 24rem);
     max-height: var(--available-height);
-    padding: var(--oui-popover-padding, 1rem);
+    padding: var(--oui-popover-padding, var(--oui-space-6));
     overflow: auto;
   }
   .oui-popover__title {
@@ -4418,7 +4508,7 @@
 }
 @layer oui.components {
   .oui-stack {
-    --_gap: 1rem;
+    --_gap: var(--oui-space-6);
     display: flex;
     flex-direction: column;
     gap: var(--oui-stack-gap, var(--_gap));
@@ -4435,16 +4525,16 @@
     --_gap: 0;
   }
   .oui-stack[data-gap=xs] {
-    --_gap: 0.25rem;
+    --_gap: var(--oui-space-2);
   }
   .oui-stack[data-gap=sm] {
-    --_gap: 0.6rem;
+    --_gap: var(--oui-space-4);
   }
   .oui-stack[data-gap=lg] {
-    --_gap: 1.5rem;
+    --_gap: var(--oui-space-10);
   }
   .oui-stack[data-gap=xl] {
-    --_gap: 2rem;
+    --_gap: var(--oui-space-12);
   }
   .oui-stack[data-align=start] {
     align-items: flex-start;
@@ -4726,21 +4816,21 @@
     font-family: var(--oui-font-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    --_py: 0.65rem;
-    --_px: 0.75rem;
+    --_py: var(--oui-space-3);
+    --_px: var(--oui-space-5);
     width: 100%;
     border-collapse: collapse;
     color: var(--oui-color-text-strong);
-    font-size: var(--oui-font-size-md);
+    font-size: var(--oui-font-size-sm);
   }
   .oui-table[data-density=compact] {
-    --_py: 0.4rem;
-    --_px: 0.6rem;
-    font-size: var(--oui-font-size-sm);
+    --_py: var(--oui-space-2);
+    --_px: var(--oui-space-4);
   }
   .oui-table[data-density=comfortable] {
-    --_py: 0.95rem;
-    --_px: 1rem;
+    --_py: var(--oui-space-5);
+    --_px: var(--oui-space-6);
+    font-size: var(--oui-font-size-md);
   }
   .oui-table[data-striped] .oui-table__body .oui-table__row:nth-child(even) {
     background: var(--oui-color-surface-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optimum-intelligence/opti-ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Optimum's customizable React component library, built on Base UI.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Optimum Intelligence",