prime-ui-kit 0.15.0 → 0.16.0

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

@@ -1,53 +1,55 @@
-/** Below 768px the rail leaves the layout and slides in over the page from the menu button; from 768px it is the rail again, and the button leaves — `offCanvas`, `labels`. */
-import { AppHeader, Icon, Sidebar } from "prime-ui-kit";
-import * as React from "react";
+/** Below 768px the rail leaves the layout and slides in over the page from the menu button the header draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
+import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 const LABELS = { close: "Закрыть меню" };
 
 export default function SidebarNarrowExample() {
-  const [open, setOpen] = React.useState(false);
-
   return (
     <div className={styles.stage}>
-      <Sidebar.Root open={open} onOpenChange={setOpen} labels={LABELS}>
-        <Sidebar.Header>
-          <Sidebar.Brand href="#home" description="Отдел продаж">
-            <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
-            </Sidebar.BrandLogo>
-            Прайм CRM
-          </Sidebar.Brand>
-          <Sidebar.Toggle variant="header" />
-        </Sidebar.Header>
-        <Sidebar.Content>
-          <Sidebar.Item href="#deals" current>
-            <Sidebar.ItemIcon>
-              <Icon name="object.document" />
-            </Sidebar.ItemIcon>
-            Сделки
-          </Sidebar.Item>
-          <Sidebar.Item href="#clients">
-            <Sidebar.ItemIcon>
-              <Icon name="object.users" />
-            </Sidebar.ItemIcon>
-            Клиенты
-          </Sidebar.Item>
-          <Sidebar.Item href="#tasks">
-            <Sidebar.ItemIcon>
-              <Icon name="object.tasks" />
-            </Sidebar.ItemIcon>
-            Задачи
-            <Sidebar.ItemCount>5</Sidebar.ItemCount>
-          </Sidebar.Item>
-        </Sidebar.Content>
-      </Sidebar.Root>
-      <div className={styles.content}>
-        <AppHeader.MenuButton aria-expanded={open} onClick={() => setOpen(true)} />
-      </div>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          <Sidebar.Root labels={LABELS}>
+            <Sidebar.Header>
+              <Sidebar.Brand href="#home" description="Отдел продаж">
+                <Sidebar.BrandLogo>
+                  <Icon name="nav.layoutGrid" />
+                </Sidebar.BrandLogo>
+                Прайм CRM
+              </Sidebar.Brand>
+              <Sidebar.Toggle variant="header" />
+            </Sidebar.Header>
+            <Sidebar.Content>
+              <Sidebar.Item href="#deals" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.document" />
+                </Sidebar.ItemIcon>
+                Сделки
+              </Sidebar.Item>
+              <Sidebar.Item href="#clients">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.users" />
+                </Sidebar.ItemIcon>
+                Клиенты
+              </Sidebar.Item>
+              <Sidebar.Item href="#tasks">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.tasks" />
+                </Sidebar.ItemIcon>
+                Задачи
+                <Sidebar.ItemCount>5</Sidebar.ItemCount>
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppHeader.Root>
+          <AppHeader.Start>
+            <AppHeader.Title>Сделки</AppHeader.Title>
+          </AppHeader.Start>
+        </AppHeader.Root>
+        <AppShell.Main />
+      </AppShell.Root>
     </div>
   );
 }

package/src/layout/sidebar/examples/nested-items.tsx

@@ -17,9 +17,7 @@ export default function SidebarNestedItemsExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

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

@@ -10,9 +10,7 @@ export default function SidebarOverviewExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

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

@@ -10,9 +10,7 @@ export default function SidebarPersistExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

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

@@ -1,13 +1,13 @@
-/** Router links as the brand and the items: the router sets `aria-current` and the item shows as current; render it inside a router — `asChild`. */
-import { Icon, Sidebar } from "prime-ui-kit";
+/** Router links as the brand and the items: the router marks the current link and the item shows it as current; render it inside a router — `asChild`. */
+import { Icon, type IconName, Sidebar } from "prime-ui-kit";
 import { Link, NavLink } from "react-router-dom";
 
 import styles from "./examples.module.css";
 
-const LINKS = [
-  { to: "/app-shell", label: "AppShell" },
-  { to: "/page-content", label: "PageContent" },
-  { to: "/sidebar", label: "Sidebar" },
+const LINKS: { to: string; label: string; icon: IconName }[] = [
+  { to: "/", label: "Обзор", icon: "nav.home" },
+  { to: "/deals", label: "Сделки", icon: "object.funnel" },
+  { to: "/clients", label: "Клиенты", icon: "object.users" },
 ];
 
 export default function SidebarRouterExample() {
@@ -15,23 +15,22 @@ export default function SidebarRouterExample() {
     <div className={styles.stage}>
       <Sidebar.Root offCanvas="never">
         <Sidebar.Header>
-          <Sidebar.Brand asChild description="Документация">
+          <Sidebar.Brand asChild description="Отдел продаж">
             <Link to="/">
               <Sidebar.BrandLogo>
-                <span className={styles.logo}>
-                  <Icon name="object.book" />
-                </span>
+                <Icon name="nav.layoutGrid" />
               </Sidebar.BrandLogo>
-              Prime UI
+              Прайм CRM
             </Link>
           </Sidebar.Brand>
         </Sidebar.Header>
         <Sidebar.Content>
           {LINKS.map((link) => (
             <Sidebar.Item key={link.to} asChild>
-              <NavLink to={link.to}>
+              {/* `end`: the overview is current only on its own page, not under every route. */}
+              <NavLink to={link.to} end={link.to === "/"}>
                 <Sidebar.ItemIcon>
-                  <Icon name="nav.layoutGrid" />
+                  <Icon name={link.icon} />
                 </Sidebar.ItemIcon>
                 {link.label}
               </NavLink>

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

@@ -7,12 +7,9 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function SidebarSizesExample() {
   return (
-    <div className={styles.sizes}>
+    <>
       {SIZES.map((size) => (
-        <div key={size} className={styles.sizeColumn}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
           <div className={`${styles.stage} ${styles.stageShort}`}>
             <Sidebar.Root size={size} offCanvas="never">
               <Sidebar.Content>
@@ -32,8 +29,11 @@ export default function SidebarSizesExample() {
               </Sidebar.Content>
             </Sidebar.Root>
           </div>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/styles/controls.css

@@ -128,8 +128,8 @@
     -webkit-text-fill-color: var(--prime-color-text-primary);
     caret-color: var(--prime-color-text-primary);
     transition:
-      background-color 600000s 0s,
-      color 600000s 0s;
+      background-color var(--prime-motion-never),
+      color var(--prime-motion-never);
   }
 
   input:is(:-webkit-autofill, :autofill):disabled {

package/src/styles/fonts.css

@@ -2,3 +2,25 @@
    Golos Text: interface face with full Cyrillic; JetBrains Mono: code and IDs.
    Self-host them instead and the token stacks pick them up by family name. */
 @import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
+
+/* Metric-matched fallbacks: until a face arrives (`display=swap`), text is set in a local face
+   scaled to its width and line box, so nothing moves when it swaps in. The overrides are measured
+   from the faces' own tables (average advance of running text, hhea ascender / descender) against
+   Arial and Courier New; the token stacks name these families right after the real ones. */
+@font-face {
+  font-family: "Golos Text Fallback";
+  src: local("Arial"), local("ArialMT");
+  size-adjust: 108.89%;
+  ascent-override: 90%;
+  descent-override: 20.2%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "JetBrains Mono Fallback";
+  src: local("Courier New"), local("CourierNewPSMT");
+  size-adjust: 99.98%;
+  ascent-override: 102.02%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}

package/src/styles/globals.css

@@ -71,6 +71,28 @@ input::-moz-focus-inner {
   cursor: not-allowed;
 }
 
+/* A disabled field's value and placeholder take the disabled text color; WebKit paints a disabled
+   value with its own dimmed fill unless `-webkit-text-fill-color` says otherwise. Not in the reset
+   layer (`controls.css`): a field's own `color: inherit` must not undo it. */
+input:not(
+    [type="checkbox"],
+    [type="radio"],
+    [type="range"],
+    [type="color"],
+    [type="file"]
+  ):disabled,
+textarea:disabled,
+select:disabled {
+  color: var(--prime-color-text-disabled);
+  -webkit-text-fill-color: var(--prime-color-text-disabled);
+}
+
+input:disabled::placeholder,
+textarea:disabled::placeholder {
+  color: var(--prime-color-text-disabled);
+  -webkit-text-fill-color: var(--prime-color-text-disabled);
+}
+
 /* Inline code inside running text (an identifier, a prop, a token): mono on a muted fill. Code in
    a block (CodeBlock, <pre>) and code set as text roles (Typography variant="code") stay plain. */
 :where(:not(pre) > code:not([data-variant])) {
@@ -88,6 +110,7 @@ input::-moz-focus-inner {
 
 /* Fill-based controls have no visible outline. Users who ask for more contrast get one. */
 @media (prefers-contrast: more) {
+  :root[data-theme],
   :root,
   [data-theme] {
     --prime-color-border-control: var(--prime-color-text-muted);
@@ -95,6 +118,16 @@ input::-moz-focus-inner {
   }
 }
 
+/*
+ * Host hooks: context variables a host sets for the kit parts inside it, with no value of their
+ * own. `initial` is the guaranteed-invalid value, so a reader's fallback applies until a host
+ * sets one:
+ *   --prime-icon-size   the glyph size of the kit icons inside (a Button, a Badge, an Avatar…)
+ */
+:root {
+  --prime-icon-size: initial;
+}
+
 /*
  * Surface depth (foundation §4). The page (and the AppShell panel) is layer 0; every surface (Card,
  * Sidebar, Accordion, DataTable…) sets `data-depth` one above the surface around it, floating layers set
@@ -218,24 +251,68 @@ input::-moz-focus-inner {
   --prime-layer-shadow: none;
 }
 
-/* Theme switches are instant: a running color transition would start from the old theme and blink. */
+/*
+ * Context variables of the page frame, read by components and set by hosts:
+ *   layout-gutter   the side air of the page at this viewport (gutter s → m from 640 → l from 1024)
+ *   bleed-inline    the side padding of a host that lets a part reach its edges (a dialog header
+ *                   hands it to the tab strip inside); 0 everywhere else
+ *   control-height  the height a host gives the Buttons inside it (a glass disk as tall as the
+ *                   BottomNav capsule); unset (`initial`) everywhere else, so a Button keeps the
+ *                   height of its tier
+ *   icon-size       the glyph size a host gives the icons inside it (a Button, a Badge, a menu row
+ *                   sets it from its tier; `internal/iconBox`, an Icon without `size`, reads it);
+ *                   unset (`initial`) everywhere else, so an icon takes the nearest control tier
+ */
+:root {
+  --prime-layout-gutter: var(--prime-layout-gutter-s);
+  --prime-bleed-inline: var(--prime-space-0);
+  --prime-control-height: initial;
+  --prime-icon-size: initial;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --prime-layout-gutter: var(--prime-layout-gutter-m);
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --prime-layout-gutter: var(--prime-layout-gutter-l);
+  }
+}
+
+/* Theme switches are instant: a running color transition would start from the old theme and blink.
+   `applyTheme` sets the attribute, paints the new theme with every clock at 0 and takes it off in
+   the same task. A theme island inside declares the clocks again, so it is zeroed too. */
+:root[data-theme-switching],
 [data-theme-switching],
-[data-theme-switching] *,
-[data-theme-switching] *::before,
-[data-theme-switching] *::after {
-  /* biome-ignore lint/complexity/noImportantStyles: must beat component-module transitions for one frame */
-  transition: none !important;
+[data-theme-switching] [data-theme] {
+  --prime-motion-duration-xfast: var(--prime-motion-instant);
+  --prime-motion-duration-fast: var(--prime-motion-instant);
+  --prime-motion-duration-base: var(--prime-motion-instant);
+  --prime-motion-duration-slow: var(--prime-motion-instant);
+  --prime-motion-fade-xfast: var(--prime-motion-instant);
+  --prime-motion-fade-fast: var(--prime-motion-instant);
+  --prime-motion-fade-base: var(--prime-motion-instant);
+  --prime-motion-fade-slow: var(--prime-motion-instant);
+  --prime-message-morph-duration: var(--prime-motion-instant);
 }
 
+/* Reduced motion: movement goes — durations, stagger and press scale collapse — while fades and
+   color changes keep their clock (`--prime-motion-fade-*`, foundation §7 rule 12), and so do the
+   loading loop and gesture clocks (`--prime-motion-loop`, `--prime-motion-hold-confirm`). */
 @media (prefers-reduced-motion: reduce) {
+  /* `:root[data-theme]` outranks the light theme's own `:root[data-theme="light"]` block. */
+  :root[data-theme],
   :root,
   [data-theme] {
-    --prime-motion-duration-xfast: 0ms;
-    --prime-motion-duration-fast: 0ms;
-    --prime-motion-duration-base: 0ms;
-    --prime-motion-duration-slow: 0ms;
-    --prime-motion-stagger: 0ms;
-    --prime-message-morph-duration: 0ms;
+    --prime-motion-duration-xfast: var(--prime-motion-instant);
+    --prime-motion-duration-fast: var(--prime-motion-instant);
+    --prime-motion-duration-base: var(--prime-motion-instant);
+    --prime-motion-duration-slow: var(--prime-motion-instant);
+    --prime-motion-stagger: var(--prime-motion-instant);
+    --prime-message-morph-duration: var(--prime-motion-instant);
     --prime-motion-press-scale: 1;
     --prime-motion-press-scale-compact: 1;
   }

package/src/styles/theme-dark.css

@@ -6,11 +6,11 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-950);
   --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-edge-shadow: color-mix(in srgb, var(--prime-ref-color-black) 50%, transparent);
   --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-glass-edge: color-mix(in srgb, var(--prime-ref-color-white) 28%, transparent);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-100);
-  --prime-color-bg-scrim: rgba(0, 0, 0, 0.6);
+  --prime-color-bg-scrim: color-mix(in srgb, var(--prime-ref-color-black) 60%, transparent);
   --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);
@@ -37,11 +37,11 @@
   --prime-color-danger-soft: color-mix(in srgb, var(--prime-ref-color-red-500) 16%, transparent);
   --prime-color-danger-text: var(--prime-ref-color-red-300);
   --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-100) 4%, transparent);
-  --prime-color-fill-faint: rgba(233, 235, 240, 0.02);
+  --prime-color-fill-faint: color-mix(in srgb, var(--prime-ref-color-gray-100) 2%, transparent);
   --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-100) 16%, transparent);
   --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-100) 22%, transparent);
-  --prime-color-fill-subtle: rgba(233, 235, 240, 0.05);
-  --prime-color-fill-subtle-active: rgba(233, 235, 240, 0.09);
+  --prime-color-fill-subtle: color-mix(in srgb, var(--prime-ref-color-gray-100) 5%, transparent);
+  --prime-color-fill-subtle-active: color-mix(in srgb, var(--prime-ref-color-gray-100) 9%, transparent);
   --prime-color-focus-ring: var(--prime-ref-color-cobalt-400);
   --prime-color-info-default: var(--prime-ref-color-sky-400);
   --prime-color-info-fg: var(--prime-ref-color-gray-950);
@@ -85,16 +85,15 @@
   --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-fill: color-mix(in srgb, var(--prime-ref-color-white) 14%, transparent);
+  --prime-color-message-outgoing-fill-hover: color-mix(in srgb, var(--prime-ref-color-white) 20%, transparent);
   --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-message-outgoing-track: color-mix(in srgb, var(--prime-ref-color-white) 36%, transparent);
   --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);
   --prime-color-palette-blue-text: var(--prime-ref-color-cobalt-300);
-  --prime-color-palette-gray-soft: color-mix(in srgb, var(--prime-ref-color-gray-100) 12%, transparent);
   --prime-color-palette-gray-solid: var(--prime-ref-color-gray-300);
   --prime-color-palette-gray-solid-fg: var(--prime-ref-color-gray-950);
   --prime-color-palette-gray-text: var(--prime-ref-color-gray-300);
@@ -141,15 +140,15 @@
   --prime-color-text-primary: var(--prime-ref-color-gray-100);
   --prime-color-text-secondary: var(--prime-ref-color-gray-300);
   --prime-color-tooltip-bg: var(--prime-ref-color-gray-100);
-  --prime-color-tooltip-fill: rgba(17, 19, 24, 0.08);
+  --prime-color-tooltip-fill: color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, transparent);
   --prime-color-tooltip-muted: var(--prime-ref-color-gray-600);
   --prime-color-tooltip-text: var(--prime-ref-color-gray-925);
   --prime-color-warning-default: var(--prime-ref-color-orange-400);
   --prime-color-warning-fg: var(--prime-ref-color-gray-950);
   --prime-color-warning-soft: color-mix(in srgb, var(--prime-ref-color-orange-500) 16%, transparent);
   --prime-color-warning-text: var(--prime-ref-color-orange-300);
-  --prime-shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 72px -16px rgba(0, 0, 0, 0.75);
-  --prime-shadow-overlay: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
+  --prime-shadow-modal: 0 0 0 1px color-mix(in srgb, var(--prime-ref-color-white) 6%, transparent), 0 32px 72px -16px color-mix(in srgb, var(--prime-ref-color-black) 75%, transparent);
+  --prime-shadow-overlay: 0 0 0 1px color-mix(in srgb, var(--prime-ref-color-white) 6%, transparent), 0 16px 40px -8px color-mix(in srgb, var(--prime-ref-color-black) 60%, transparent);
   --prime-shadow-raised: none;
-  --prime-shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --prime-shadow-thumb: 0 1px 3px color-mix(in srgb, var(--prime-ref-color-black) 50%, transparent);
 }