prime-ui-kit 0.9.3 → 0.11.0

package/src/layout/bottom-nav/examples/floating.tsx

@@ -1,4 +1,4 @@
-/** A glass capsule over the page: the client list scrolls under its blur, with labels or icons alone — `floating`, `iconOnly`. */
+/** A glass capsule over the page across the width: the client list scrolls under its blur, the selection glides to a tapped section, with labels or icons alone — `floating`, `iconOnly`. */
 import {
   AppHeader,
   AppShell,
@@ -42,15 +42,15 @@ export default function BottomNavFloatingExample() {
           <AppHeader.Start>
             <AppHeader.Title>Клиенты</AppHeader.Title>
           </AppHeader.Start>
-          <AppHeader.Actions>
-            <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
-              <Switch.Label>Только иконки</Switch.Label>
-            </Switch.Root>
-          </AppHeader.Actions>
         </AppHeader.Root>
         <AppShell.Main>
           <PageContent.Section>
             <PageContent.Body>
+              <div className={styles.options}>
+                <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
+                  <Switch.Label>Только иконки</Switch.Label>
+                </Switch.Root>
+              </div>
               {CLIENTS.map((client) => (
                 <div key={client.name} className={styles.client}>
                   <Avatar.Root color={client.color} aria-hidden="true">

package/src/layout/bottom-nav/examples/in-app-shell.tsx

@@ -1,4 +1,4 @@
-/** The app frame on a phone: the AppHeader, the page and the bar in the footer, which leaves once the panel is 640px wide — `AppShell.Footer`. */
+/** The app frame on a phone: the AppHeader, the page and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. */
 import {
   AppHeader,
   AppShell,

package/src/layout/sidebar/COMPONENT.md

@@ -90,8 +90,8 @@ useSidebar()                       state hook for custom parts inside Root
 | `open` | `boolean` | — | Off-canvas panel on narrow viewports (controlled). |
 | `defaultOpen` | `boolean` | `false` | Initial off-canvas state (uncontrolled). |
 | `onOpenChange` | `(open: boolean) => void` | — | Off-canvas open / close: Toggle, scrim, Escape, navigation, leaving the narrow viewport. |
-| `offCanvas` | `"auto" \| "always" \| "never"` | `"auto"` | When the rail leaves the layout and becomes an off-canvas panel with a scrim and a focus trap, opened by `open`: `auto` — below 768px (viewport); `always` — at any width (navigation behind a menu button); `never` — always a rail. |
-| `persistKey` | `string` | — | Remembers the navigation across reloads in `localStorage` under this key: the mode and which collapsible groups and sub-lists are open, by their `id`, else their label text (give an `id` when labels are translated or change). The stored state wins over `defaultMode` / `defaultOpen`; controlled `mode` / `open` are not stored. Unavailable storage is ignored. |
+| `offCanvas` | `"auto" \| "always" \| "never"` | `"auto"` | When the rail becomes an off-canvas panel opened by `open`: `auto` — below 768px (viewport); `always` — at any width; `never` — always a rail. |
+| `persistKey` | `string` | — | `localStorage` key that keeps the mode and the open groups and sub-lists across reloads (keyed by `id`, else label text). Wins over `defaultMode` / `defaultOpen`. |
 | `labels` | `Partial<SidebarLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
@@ -103,7 +103,7 @@ useSidebar()                       state hook for custom parts inside Root
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
 ### Sidebar.Brand
-`forwardRef` → the rendered element. Product block: `Sidebar.BrandLogo`, the name and a muted line; an `<a>` with `href`, the single child with `asChild`, else a `<div>`. In compact mode only the logo stays, without a tooltip (it would cover the edge toggle); the faded name still names the link.
+`forwardRef` → the rendered element. Product block: `Sidebar.BrandLogo`, the name and a muted line; an `<a>` with `href`, the single child with `asChild`, else a `<div>`. In compact mode only the logo stays.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -129,7 +129,7 @@ useSidebar()                       state hook for custom parts inside Root
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children` (Groups, Items, Subs), `className` and the other attributes. |
 
 ### Sidebar.Group
-`ref` → `HTMLDivElement`. `<div role="group">` named by its label. With `collapsible` the heading is a disclosure button (`aria-expanded`, `aria-controls`) with a chevron at its end; the items fold away (inert). On the compact rail the heading keeps its height and layout: its text slides toward the edge, scales down and is cut by the rail with a fade, so the first letters still name the section, and it still folds and unfolds the group. An open group keeps its items on the rail; a folded one stays folded and becomes one `…` row (named by the label, `aria-haspopup="dialog"`) whose items open in a flyout, like a sub-list. A folded group with a count that needs attention inside shows its dot (after the heading, or on the `…` row).
+`ref` → `HTMLDivElement`. `<div role="group">` named by its label. With `collapsible` the heading is a disclosure button that folds the items away; on the compact rail a folded group becomes one `…` row whose items open in a flyout.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -145,7 +145,7 @@ useSidebar()                       state hook for custom parts inside Root
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `current` | `boolean` | `false` | Current page: `aria-current="page"`, `data-state="active"`; surface fill and a raised shadow (a deeper wash in a flyout). |
+| `current` | `boolean` | `false` | Current page: `aria-current="page"`, `data-state="active"`; a muted fill and primary text and icon colour. |
 | `disabled` | `boolean` | `false` | Not interactive: `disabled` / `aria-disabled`, `data-disabled`; a link loses its `href`. |
 | `href` | `string` | — | Renders an `<a>` (with `target`, `rel`). |
 | `asChild` | `boolean` | `false` | Renders the single child (e.g. a router `NavLink`) as the item; its children are the label and parts. |
@@ -161,7 +161,7 @@ useSidebar()                       state hook for custom parts inside Root
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### Sidebar.ItemCount
-`ref` → `HTMLSpanElement` (the number or the Badge). A count after the label: a plain muted number by default; a `Badge` (one tier down) when `color` or `variant` is set. In compact mode the number leaves the row (still read by screen readers) and a badge leaves a dot of its hue on the icon; a folded sub-list or group shows the dot of a badge inside it.
+`ref` → `HTMLSpanElement` (the number or the Badge). A count after the label: a plain muted number by default; a `Badge` (one tier down) when `color` or `variant` is set — on the compact rail it becomes a dot of its hue.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -179,7 +179,7 @@ useSidebar()                       state hook for custom parts inside Root
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### Sidebar.ItemAction
-`ref` → `HTMLButtonElement`. A row action (create, add): a ghost icon `Button` one tier down with a tooltip, next to the item element — never inside it. It shows on hover and focus of the row, always on touch screens, while the trail (count, hint) steps aside; hidden on the compact rail.
+`ref` → `HTMLButtonElement`. A row action (create, add): a ghost icon `Button` one tier down with a tooltip, next to the item element — never inside it. Shows on hover and focus of the row (always on touch); hidden on the compact rail.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -190,7 +190,7 @@ useSidebar()                       state hook for custom parts inside Root
 | `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" \| "onClick" \| "aria-label">` | — | `className` and the other attributes of the Button. |
 
 ### Sidebar.Sub
-`ref` → `HTMLDivElement`. A parent item with child items: `Sidebar.SubTrigger` + `Sidebar.SubContent` in a `<div>`. Expanded, the children unfold under the parent on a guide line; on the compact rail they open in a flyout (the kit Popover to the right, with the rows and spacing of a kit menu). A current child opens the sub-list and marks the parent as on the active path (`data-active-path`). While folded (and always on the rail) the parent shows the dot of a count inside that needs attention.
+`ref` → `HTMLDivElement`. A parent item with child items: `Sidebar.SubTrigger` + `Sidebar.SubContent` in a `<div>`. Children unfold on a guide line, or in a flyout on the compact rail. A current child opens the sub-list and marks the parent (`data-active-path`).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -200,7 +200,7 @@ useSidebar()                       state hook for custom parts inside Root
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
 ### Sidebar.SubTrigger
-`forwardRef` → `HTMLButtonElement`. The parent row: a disclosure `<button>` (`aria-expanded`, `aria-controls`) with a chevron at the end of the row. Expanded: click, `→` / `←` open and close. Compact: hover (after a short intent delay), click, `Enter` · `Space` · `→` open the flyout (`aria-haspopup="dialog"`); on the active path it takes the current lift.
+`forwardRef` → `HTMLButtonElement`. The parent row: a disclosure `<button>` (`aria-expanded`, `aria-controls`) with a chevron at the end of the row. On the compact rail it opens the flyout (`aria-haspopup="dialog"`).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -228,7 +228,7 @@ useSidebar()                       state hook for custom parts inside Root
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `variant` | `"item" \| "header"` | `"item"` | `item` — a row in the rail. `header` — an icon button «‹‹» at the end of `Sidebar.Header`; in compact mode the same button moves onto the rail's outer edge, shrinks and turns round, and its chevrons turn to point out. Off-canvas it stays in the header and closes the panel. |
+| `variant` | `"item" \| "header"` | `"item"` | `item` — a row in the rail. `header` — an icon button «‹‹» at the end of `Sidebar.Header` that moves onto the rail edge in compact mode. |
 | `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" \| "aria-label" \| "aria-expanded" \| "aria-controls">` | — | `onClick` (runs first; `preventDefault()` stops the toggle), `className` and the other button attributes. |
 
 ### useSidebar()
@@ -287,7 +287,7 @@ The rail width does not depend on `size`.
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `collapsible` (Group) | the heading is a button with a chevron at its end; items fold away; folded on the rail, one `…` row opens them in a flyout | long navigation with sections | off |
-| `current` (Item) | surface fill + raised shadow, primary text and icon | the current page | off |
+| `current` (Item) | `fill-muted-hover` fill (a `fill-subtle-active` wash in a flyout), primary text and icon | the current page | off |
 | `disabled` (Item) | `text-disabled`, no hover, `cursor: not-allowed` | an unavailable section | off |
 
 Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header, or `Sidebar.Toggle` in the footer for a rail without a brand; on phones (`offCanvas="auto"`) or always (`offCanvas="always"`) pair it with `AppHeader.MenuButton` (`open` / `onOpenChange`). One current item at a time; give every top-level item an icon when the rail can go compact (child items need none).
@@ -306,6 +306,10 @@ Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header,
 | persisted | `persistKey` on Root | the mode and the open state of collapsible groups and sub-lists are read from and written to `localStorage` |
 | disabled | `disabled` | Item `disabled` / `aria-disabled`, `data-disabled` |
 
+`persistKey` stores collapsible groups and sub-lists by their `id`, else by their label text — give an `id` when labels are translated or change. The stored state wins over `defaultMode` / `defaultOpen`; controlled `mode` / `open` are not stored, and unavailable storage is ignored.
+
+On the active path a SubTrigger takes the current fill. On the compact rail a SubTrigger opens its flyout on hover after a short intent delay, as well as on click and from the keyboard.
+
 Leaving the narrow viewport closes the off-canvas panel; navigating from an `href` / `asChild` item (or the brand) closes it too. Navigating from a flyout closes the flyout.
 
 ## Layout & spacing
@@ -346,7 +350,8 @@ Leaving the narrow viewport closes the off-canvas panel; navigating from an `hre
 - A collapsible group heading and a SubTrigger are buttons with `aria-expanded` and `aria-controls`; folded content is `inert`.
 - On the compact rail a SubTrigger and the `…` row of a folded group have `aria-haspopup="dialog"`; the flyout is a non-modal dialog named by the parent (the `…` row by the group label).
 - On the rail a collapsible group heading stays the same disclosure button (folding it there brings the `…` row); hovering it shows the whole name in a tooltip.
-- An attention dot is decorative: the count it stands for is read inside.
+- An attention dot is decorative: the count it stands for is read inside. On the compact rail a plain count leaves the row visually but stays readable by screen readers.
+- In compact mode the brand's name fades out but still names the link.
 - A row action is its own button next to the item (never nested), named by `label` with a tooltip.
 - The account avatar is hidden from screen readers; the name and the muted line name the button.
 - Off-canvas: scrim, focus trap and Escape; the scrim is a button labelled `labels.close`.
@@ -393,5 +398,5 @@ Leaving the narrow viewport closes the off-canvas panel; navigating from an `hre
 - Your own `localStorage` code for the rail mode → `persistKey` keeps the mode and the folded groups.
 
 ## Related
-- **Built from:** [ScrollContainer](../../components/scroll-container/COMPONENT.md), [Badge](../../components/badge/COMPONENT.md), [Tooltip](../../components/tooltip/COMPONENT.md), [Popover](../../components/popover/COMPONENT.md) (compact flyout), [Button](../../components/button/COMPONENT.md) (header toggle, row action), [Avatar](../../components/avatar/COMPONENT.md) slot, Icon (`nav.sidebarCollapse`, `nav.sidebarExpand`, `nav.chevronsLeft`, `nav.chevronDown`, `nav.chevronsUpDown`, `action.add`)
+- **Built from:** [ScrollContainer](../../components/scroll-container/COMPONENT.md), [Badge](../../components/badge/COMPONENT.md), [Tooltip](../../components/tooltip/COMPONENT.md), [Popover](../../components/popover/COMPONENT.md) (compact flyout), [Button](../../components/button/COMPONENT.md) (header toggle, row action), [Avatar](../../components/avatar/COMPONENT.md) slot, Icon (`nav.sidebarCollapse`, `nav.sidebarExpand`, `nav.chevronsLeft`, `nav.chevronDown`, `nav.chevronsUpDown`, `action.add`, `action.more`)
 - **See also:** [AppShell](../app-shell/COMPONENT.md), [Dropdown](../../components/dropdown/COMPONENT.md) (account menu), [Drawer](../../components/drawer/COMPONENT.md), [Kbd](../../components/kbd/COMPONENT.md)

package/src/layout/sidebar/examples/account.tsx

@@ -63,7 +63,7 @@ export default function SidebarAccountExample() {
                 Анна Смирнова
               </Sidebar.Account>
             </Dropdown.Trigger>
-            <Dropdown.Content side="right" align="end">
+            <Dropdown.Content side="right">
               <Dropdown.Item>
                 <Dropdown.ItemIcon>
                   <Icon name="object.users" />

package/src/layout/sidebar/examples/overview.tsx

@@ -96,7 +96,7 @@ export default function SidebarOverviewExample() {
                 Анна Смирнова
               </Sidebar.Account>
             </Dropdown.Trigger>
-            <Dropdown.Content side="right" align="end">
+            <Dropdown.Content side="right">
               <Dropdown.Item>
                 <Dropdown.ItemIcon>
                   <Icon name="object.user" />

package/src/styles/controls.css

@@ -0,0 +1,138 @@
+/* Browser form-control styles switched off (part of `bundle.css`, always on). Every UA look —
+   native chrome, autofill paint, spin buttons, pickers, credential badges — is removed, so a
+   control is drawn only by its component and looks the same in every browser. Everything sits in
+   the `prime-reset` cascade layer: any unlayered rule wins over it whatever the specificity and the
+   file order — every component rule, the zero-specificity shared ones too (`:where(.trigger)`). */
+
+@layer prime-reset {
+  :where(html) {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  :where(button, input, select, textarea, optgroup) {
+    margin: 0;
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  :where(button, input:not([type="checkbox"], [type="radio"]), select, textarea) {
+    border-radius: 0;
+  }
+
+  :where(button, [type="button"], [type="submit"], [type="reset"]) {
+    padding: 0;
+    border: 0;
+    background: none;
+    text-align: inherit;
+  }
+
+  :where(fieldset) {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  :where(legend) {
+    padding: 0;
+  }
+
+  :where(progress, meter) {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  :where(select)::-ms-expand {
+    display: none;
+  }
+
+  /* Number: no spin buttons. */
+  :where(input[type="number"]) {
+    -moz-appearance: textfield;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Search: no native clear / magnifier. */
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    display: none;
+  }
+
+  /* Date / time: no native picker glyph, no inner padding. */
+  input::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+  }
+
+  input::-webkit-date-and-time-value {
+    min-height: 0;
+    text-align: inherit;
+  }
+
+  input::-webkit-datetime-edit,
+  input::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  /* File / color: no native button or swatch frame. */
+  input[type="file"]::file-selector-button,
+  input[type="file"]::-webkit-file-upload-button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+  }
+
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  input[type="color"]::-webkit-color-swatch {
+    border: 0;
+  }
+
+  input[type="color"]::-moz-color-swatch {
+    border: 0;
+  }
+
+  /* Safari's autofill / credentials / contacts badges. */
+  input::-webkit-contacts-auto-fill-button,
+  input::-webkit-credentials-auto-fill-button,
+  input::-webkit-strong-password-auto-fill-button {
+    /* biome-ignore lint/complexity/noImportantStyles: the UA badge is `!important` itself */
+    display: none !important;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  /* Autofill paint (Chrome yellow / blue fill, forced text colour) never shows: the field keeps its
+     own surface and text. The background cannot be overridden directly, so its transition is pushed
+     out of reach; the text colour and caret are set explicitly. */
+  input:is(:-webkit-autofill, :autofill),
+  textarea:is(:-webkit-autofill, :autofill),
+  select:is(:-webkit-autofill, :autofill) {
+    -webkit-text-fill-color: var(--prime-color-text-primary);
+    caret-color: var(--prime-color-text-primary);
+    transition:
+      background-color 600000s 0s,
+      color 600000s 0s;
+  }
+
+  input:is(:-webkit-autofill, :autofill):disabled {
+    -webkit-text-fill-color: var(--prime-color-text-disabled);
+  }
+}

package/src/styles/globals.css

@@ -4,6 +4,7 @@
 @import "./tokens.css";
 @import "./theme-light.css";
 @import "./theme-dark.css";
+@import "./controls.css";
 
 :root {
   font-family: var(--prime-font-family-sans);
@@ -50,6 +51,12 @@ body {
   outline: none;
 }
 
+/* Focus that came back to a control a pointer used (a layer opened with a click, closed with
+   Escape) shows no ring until the next key: every kit ring is drawn with this token. */
+[data-focus-quiet] {
+  --prime-color-focus-ring: transparent;
+}
+
 :where(a, button, input, textarea, select, [role="button"], [tabindex]) {
   -webkit-tap-highlight-color: transparent;
 }
@@ -228,6 +235,7 @@ input::-moz-focus-inner {
     --prime-motion-duration-base: 0ms;
     --prime-motion-duration-slow: 0ms;
     --prime-motion-stagger: 0ms;
+    --prime-message-morph-duration: 0ms;
     --prime-motion-press-scale: 1;
     --prime-motion-press-scale-compact: 1;
   }

package/src/styles/reset.css

@@ -1,37 +1,41 @@
 /* Opt-in (`prime-ui-kit/reset.css`): a minimal document reset for a new app. Components do not need
-   it — they set their own box sizing — so an app with its own reset can skip this file. */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+   it — they set their own box sizing — so an app with its own reset can skip this file. In the
+   `prime-reset` cascade layer, like `controls.css`: a component rule always wins over it. */
 
-* {
-  margin: 0;
-}
+@layer prime-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-html,
-body {
-  height: 100%;
-}
+  * {
+    margin: 0;
+  }
 
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
+  html,
+  body {
+    height: 100%;
+  }
 
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
+  body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
 
-input,
-button,
-textarea,
-select {
-  font: inherit;
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
 }

package/src/styles/theme-dark.css

@@ -7,13 +7,30 @@
   --prime-color-accent-soft-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-400);
   --prime-color-bg-edge-shadow: rgba(0, 0, 0, 0.5);
-  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 56%, transparent);
-  --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.16);
+  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 76%, transparent);
+  --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.28);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-100);
   --prime-color-bg-scrim: rgba(0, 0, 0, 0.6);
   --prime-color-border-default: var(--prime-ref-color-gray-750);
   --prime-color-border-faint: var(--prime-ref-color-gray-850);
   --prime-color-border-subtle: var(--prime-ref-color-gray-800);
+  --prime-color-chart-1: var(--prime-ref-color-cobalt-500);
+  --prime-color-chart-2: var(--prime-ref-color-chart-dark-orange);
+  --prime-color-chart-3: var(--prime-ref-color-chart-dark-teal);
+  --prime-color-chart-4: var(--prime-ref-color-chart-dark-yellow);
+  --prime-color-chart-5: var(--prime-ref-color-chart-dark-pink);
+  --prime-color-chart-6: var(--prime-ref-color-chart-dark-green);
+  --prime-color-chart-7: var(--prime-ref-color-chart-dark-purple);
+  --prime-color-chart-8: var(--prime-ref-color-chart-dark-red);
+  --prime-color-chart-axis: var(--prime-ref-color-gray-700);
+  --prime-color-chart-grid: var(--prime-ref-color-gray-800);
+  --prime-color-chart-other: var(--prime-ref-color-gray-500);
+  --prime-color-chart-scale-1: var(--prime-ref-color-cobalt-950);
+  --prime-color-chart-scale-2: var(--prime-ref-color-cobalt-900);
+  --prime-color-chart-scale-3: var(--prime-ref-color-cobalt-600);
+  --prime-color-chart-scale-4: var(--prime-ref-color-cobalt-400);
+  --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-200);
+  --prime-color-chart-scale-fg: var(--prime-ref-color-gray-950);
   --prime-color-control-thumb: var(--prime-ref-color-gray-100);
   --prime-color-danger-border: var(--prime-ref-color-red-400);
   --prime-color-danger-hover: var(--prime-ref-color-red-500);
@@ -62,6 +79,17 @@
   --prime-color-layer-floating2-fill: #303237;
   --prime-color-layer-floating2-fill-hover: #373a3e;
   --prime-color-layer-floating2-selected: #3f4146;
+  --prime-color-message-outgoing-accent: var(--prime-ref-color-white);
+  --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-cobalt-700);
+  --prime-color-message-outgoing-bg: var(--prime-ref-color-cobalt-700);
+  --prime-color-message-outgoing-chip: color-mix(in srgb, var(--prime-ref-color-white) 14%, var(--prime-ref-color-cobalt-700));
+  --prime-color-message-outgoing-chip-hover: color-mix(in srgb, var(--prime-ref-color-white) 20%, var(--prime-ref-color-cobalt-700));
+  --prime-color-message-outgoing-danger: var(--prime-ref-color-red-100);
+  --prime-color-message-outgoing-fill: rgba(255, 255, 255, 0.14);
+  --prime-color-message-outgoing-fill-hover: rgba(255, 255, 255, 0.2);
+  --prime-color-message-outgoing-muted: var(--prime-ref-color-cobalt-200);
+  --prime-color-message-outgoing-text: var(--prime-ref-color-white);
+  --prime-color-message-outgoing-track: rgba(255, 255, 255, 0.36);
   --prime-color-palette-blue-soft: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 16%, transparent);
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-400);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-gray-950);
@@ -103,6 +131,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
+  --prime-color-success-hover: var(--prime-ref-color-green-300);
   --prime-color-success-soft: color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent);
   --prime-color-success-text: var(--prime-ref-color-green-300);
   --prime-color-text-disabled: var(--prime-ref-color-gray-600);

package/src/styles/theme-light.css

@@ -39,15 +39,21 @@
   --prime-badge-xs-radius: var(--prime-ref-radius-4);
   --prime-badge-xs-text-size: var(--prime-ref-font-size-12);
   --prime-border-width: 1px;
-  --prime-bottom-nav-blur: 0.5rem;
+  --prime-bottom-nav-blur: 0.875rem;
+  --prime-bottom-nav-floating-gap: var(--prime-ref-space-2);
+  --prime-bottom-nav-floating-height: 2.875rem;
+  --prime-bottom-nav-floating-icon-only-height: 2.5rem;
+  --prime-bottom-nav-floating-icon-size: 1.125rem;
   --prime-bottom-nav-floating-inset: var(--prime-ref-space-3);
-  --prime-bottom-nav-floating-item-size: 2.75rem;
+  --prime-bottom-nav-floating-item-gap: 0.125rem;
+  --prime-bottom-nav-floating-label-line-height: 0.6875rem;
+  --prime-bottom-nav-floating-label-size: 0.5625rem;
   --prime-bottom-nav-floating-padding: var(--prime-ref-space-1);
+  --prime-bottom-nav-glyph-height: var(--prime-ref-space-5);
+  --prime-bottom-nav-glyph-width: var(--prime-ref-space-7);
   --prime-bottom-nav-height: 3.25rem;
   --prime-bottom-nav-icon-only-height: var(--prime-ref-space-12);
   --prime-bottom-nav-icon-size: var(--prime-ref-icon-20);
-  --prime-bottom-nav-indicator-height: var(--prime-ref-space-5);
-  --prime-bottom-nav-indicator-width: var(--prime-ref-space-7);
   --prime-bottom-nav-item-gap: var(--prime-ref-space-1);
   --prime-bottom-nav-label-line-height: var(--prime-ref-font-line-height-12);
   --prime-bottom-nav-label-size: var(--prime-ref-font-size-10);
@@ -64,7 +70,7 @@
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
   --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
-  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent);
+  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 72%, transparent);
   --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
   --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
@@ -72,6 +78,23 @@
   --prime-color-border-default: var(--prime-ref-color-gray-150);
   --prime-color-border-faint: var(--prime-ref-color-gray-75);
   --prime-color-border-subtle: var(--prime-ref-color-gray-100);
+  --prime-color-chart-1: var(--prime-ref-color-cobalt-600);
+  --prime-color-chart-2: var(--prime-ref-color-chart-light-orange);
+  --prime-color-chart-3: var(--prime-ref-color-chart-light-teal);
+  --prime-color-chart-4: var(--prime-ref-color-chart-light-yellow);
+  --prime-color-chart-5: var(--prime-ref-color-chart-light-pink);
+  --prime-color-chart-6: var(--prime-ref-color-chart-light-green);
+  --prime-color-chart-7: var(--prime-ref-color-chart-light-purple);
+  --prime-color-chart-8: var(--prime-ref-color-chart-light-red);
+  --prime-color-chart-axis: var(--prime-ref-color-gray-300);
+  --prime-color-chart-grid: var(--prime-ref-color-gray-100);
+  --prime-color-chart-other: var(--prime-ref-color-gray-400);
+  --prime-color-chart-scale-1: var(--prime-ref-color-cobalt-100);
+  --prime-color-chart-scale-2: var(--prime-ref-color-cobalt-200);
+  --prime-color-chart-scale-3: var(--prime-ref-color-cobalt-300);
+  --prime-color-chart-scale-4: var(--prime-ref-color-cobalt-600);
+  --prime-color-chart-scale-5: var(--prime-ref-color-cobalt-800);
+  --prime-color-chart-scale-fg: var(--prime-ref-color-white);
   --prime-color-control-thumb: var(--prime-ref-color-white);
   --prime-color-danger-border: var(--prime-ref-color-red-500);
   --prime-color-danger-default: var(--prime-ref-color-red-600);
@@ -122,6 +145,23 @@
   --prime-color-layer-floating2-fill: #f4f5f7;
   --prime-color-layer-floating2-fill-hover: #eaebed;
   --prime-color-layer-floating2-selected: #ffffff;
+  --prime-color-media-disk: rgba(17, 19, 24, 0.48);
+  --prime-color-media-pill: rgba(17, 19, 24, 0.72);
+  --prime-color-media-pill-fg: rgba(255, 255, 255, 0.8);
+  --prime-color-media-shade: rgba(17, 19, 24, 0.56);
+  --prime-color-media-shade-fg: var(--prime-ref-color-gray-0);
+  --prime-color-media-stage: var(--prime-ref-color-gray-950);
+  --prime-color-message-outgoing-accent: var(--prime-ref-color-cobalt-700);
+  --prime-color-message-outgoing-accent-fg: var(--prime-ref-color-white);
+  --prime-color-message-outgoing-bg: var(--prime-ref-color-cobalt-100);
+  --prime-color-message-outgoing-chip: color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, var(--prime-ref-color-cobalt-100));
+  --prime-color-message-outgoing-chip-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, var(--prime-ref-color-cobalt-100));
+  --prime-color-message-outgoing-danger: var(--prime-ref-color-red-700);
+  --prime-color-message-outgoing-fill: color-mix(in srgb, var(--prime-ref-color-cobalt-700) 10%, transparent);
+  --prime-color-message-outgoing-fill-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-700) 16%, transparent);
+  --prime-color-message-outgoing-muted: var(--prime-ref-color-gray-600);
+  --prime-color-message-outgoing-text: var(--prime-ref-color-gray-925);
+  --prime-color-message-outgoing-track: color-mix(in srgb, var(--prime-ref-color-cobalt-700) 28%, transparent);
   --prime-color-palette-blue-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-700);
   --prime-color-palette-blue-solid-fg: var(--prime-ref-color-white);
@@ -164,6 +204,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
+  --prime-color-success-hover: var(--prime-ref-color-green-800);
   --prime-color-success-soft: var(--prime-ref-color-green-100);
   --prime-color-success-text: var(--prime-ref-color-green-700);
   --prime-color-text-disabled: var(--prime-ref-color-gray-400);
@@ -285,6 +326,9 @@
   --prime-font-weight-medium: var(--prime-ref-font-weight-medium);
   --prime-font-weight-regular: var(--prime-ref-font-weight-regular);
   --prime-font-weight-semibold: var(--prime-ref-font-weight-semibold);
+  --prime-gallery-gap: 2px;
+  --prime-gallery-max-size: 22.5rem;
+  --prime-gallery-min-size: 16rem;
   --prime-icon-l: var(--prime-ref-icon-24);
   --prime-icon-m: var(--prime-ref-icon-20);
   --prime-icon-s: var(--prime-ref-icon-16);
@@ -297,6 +341,24 @@
   --prime-layout-reading-max-width: 42rem;
   --prime-layout-sidebar-collapsed-width: var(--prime-ref-space-14);
   --prime-layout-sidebar-width: 15.5rem;
+  --prime-media-disk-blur: var(--prime-ref-space-1);
+  --prime-media-viewer-inset: var(--prime-ref-space-4);
+  --prime-media-viewer-page-gap: var(--prime-ref-space-6);
+  --prime-message-card-width: 16rem;
+  --prime-message-dim-opacity: 0.42;
+  --prime-message-dim-saturation: 0.6;
+  --prime-message-gap: var(--prime-ref-space-4);
+  --prime-message-group-gap: var(--prime-ref-space-2);
+  --prime-message-max-width: 30rem;
+  --prime-message-media-max-height: 22.5rem;
+  --prime-message-morph-duration: var(--prime-ref-duration-300);
+  --prime-message-padding-x: var(--prime-ref-space-3);
+  --prime-message-padding-y: var(--prime-ref-space-2);
+  --prime-message-radius: var(--prime-ref-radius-14);
+  --prime-message-tail-height: var(--prime-ref-space-4);
+  --prime-message-tail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E");
+  --prime-message-tail-width: var(--prime-ref-space-2);
+  --prime-message-video-note: 14.5rem;
   --prime-modal-padding: var(--prime-ref-space-6);
   --prime-modal-radius: var(--prime-ref-radius-16);
   --prime-modal-viewport-padding: var(--prime-ref-space-4);
@@ -304,6 +366,7 @@
   --prime-modal-width-m: 35rem;
   --prime-modal-width-s: 27.5rem;
   --prime-modal-width-xl: 60rem;
+  --prime-modal-width-xs: 22.5rem;
   --prime-motion-blur: 2px;
   --prime-motion-duration-base: var(--prime-ref-duration-380);
   --prime-motion-duration-fast: var(--prime-ref-duration-230);
@@ -313,6 +376,7 @@
   --prime-motion-easing-enter: var(--prime-ref-easing-enter);
   --prime-motion-easing-exit: var(--prime-ref-easing-exit);
   --prime-motion-easing-standard: var(--prime-ref-easing-standard);
+  --prime-motion-loop: var(--prime-ref-duration-570);
   --prime-motion-press-scale: 0.98;
   --prime-motion-press-scale-compact: 0.96;
   --prime-motion-stagger: var(--prime-ref-duration-80);
@@ -338,9 +402,10 @@
   --prime-sheet-handle-area: var(--prime-ref-space-5);
   --prime-sheet-handle-height: var(--prime-ref-space-1);
   --prime-sheet-handle-width: 2.25rem;
-  --prime-sheet-min-width: 35rem;
+  --prime-sheet-padding: var(--prime-ref-space-6);
   --prime-sheet-radius: var(--prime-ref-radius-16);
   --prime-sheet-top-gap: var(--prime-ref-space-10);
+  --prime-sheet-width: 35rem;
   --prime-space-0: var(--prime-ref-space-0);
   --prime-space-1: var(--prime-ref-space-1);
   --prime-space-10: var(--prime-ref-space-10);
@@ -375,6 +440,8 @@
   --prime-table-row-height-l: 3.25rem;
   --prime-table-row-height-m: 2.75rem;
   --prime-table-row-height-s: var(--prime-ref-space-9);
+  --prime-table-row-height-xl: 3.25rem;
+  --prime-table-row-height-xs: var(--prime-ref-space-9);
   --prime-text-body-l-line-height: var(--prime-ref-font-line-height-24);
   --prime-text-body-l-size: var(--prime-ref-font-size-16);
   --prime-text-body-l-tracking: var(--prime-ref-font-tracking-normal);