prime-ui-kit 0.13.1 → 0.14.0

package/src/components/voice-player/COMPONENT.md

@@ -84,7 +84,7 @@ One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-s
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `unplayed` | an accent dot after the time; it leaves with a fade and scale | the recipient has not listened yet | |
+| `unplayed` | an accent dot after the time; it rises in with a fade and sinks out the same way | the recipient has not listened yet | |
 | `disabled` | muted disk, no played bars, disabled time | the recording cannot be played (deleted, expired) | |
 
 ## States

package/src/layout/app-header/examples/in-app-shell.tsx

@@ -54,7 +54,7 @@ export default function AppHeaderInAppShellExample() {
           <AppHeader.Search>Поиск</AppHeader.Search>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Section>
+          <PageContent.Page>
             <PageContent.Body>
               {ORDERS.map((order) => (
                 <Typography key={order} variant="body-m">
@@ -62,7 +62,7 @@ export default function AppHeaderInAppShellExample() {
                 </Typography>
               ))}
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </AppShell.Main>
       </AppShell.Root>
     </div>

package/src/layout/app-shell/COMPONENT.md

@@ -113,7 +113,7 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 
 ## Layout & spacing
 - Two full-height planes edge to edge: no inset, radius, shadow or border — the boundary is the fill change (the Sidebar rail is layer 1, the panel the page: white rail beside a gray page in light, a rail one step lighter than the near-black page in dark).
-- Gutters in Main (and in an `AppHeader.Root` in the panel): `--prime-layout-gutter-s` (16) → `-m` (24) from 640px → `-l` (32) from 1024px. Main top padding `--prime-space-6` (24) → `--prime-space-10` (40) from 1024px; bottom `--prime-space-16`. Children of Main start from their own gutters, not the shell's.
+- Gutters in Main (and in an `AppHeader.Root` in the panel): `--prime-layout-gutter-s` (16) → `-m` (24) from 640px → `-l` (32) from 1024px. Main top padding `--prime-space-6` (24) → `--prime-space-8` (32) from 1024px; bottom `--prime-space-16`. Children of Main start from their own gutters, not the shell's.
 - A page that fills the panel height (`PageContent.Root fill`): Main's bottom padding drops to the side gutter, so no long scroll tail stays under it.
 - Main scrolls with `overscroll-behavior: contain`, so its scroll never chains to the document.
 - Nav column: sticky at the top, viewport high, `z-index: --prime-z-sticky` (above the panel, so the compact Sidebar toggle can ride the rail edge); with `fillViewport` it fills the shell height instead.

package/src/layout/app-shell/examples/footer.tsx

@@ -31,7 +31,7 @@ export default function AppShellFooterExample() {
           </AppHeader.Start>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Section>
+          <PageContent.Page>
             <PageContent.Body>
               {INVOICES.map((invoice) => (
                 <Typography key={invoice} variant="body-m">
@@ -39,7 +39,7 @@ export default function AppShellFooterExample() {
                 </Typography>
               ))}
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>

package/src/layout/app-shell/examples/overview.tsx

@@ -55,7 +55,7 @@ export default function AppShellOverviewExample() {
           </AppHeader.Start>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Section>
+          <PageContent.Page>
             <PageContent.Header>
               {/* In a real app this is PageContent.Title (the page h1). */}
               <Typography as="h2" variant="heading-m">
@@ -75,7 +75,7 @@ export default function AppShellOverviewExample() {
                 Выручка за месяц — 4,8 млн ₽, 37 сделок в работе.
               </Typography>
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </AppShell.Main>
       </AppShell.Root>
     </div>

package/src/layout/app-shell/examples/template.tsx

@@ -39,7 +39,7 @@ export default function AppShellTemplateExample() {
           </Sidebar.Root>
         }
       >
-        <PageContent.Section>
+        <PageContent.Page>
           <PageContent.Header>
             {/* In a real app this is PageContent.Title (the page h1). */}
             <Typography as="h2" variant="heading-m">
@@ -47,7 +47,7 @@ export default function AppShellTemplateExample() {
             </Typography>
             <PageContent.Description>{page.text}</PageContent.Description>
           </PageContent.Header>
-        </PageContent.Section>
+        </PageContent.Page>
       </AppShell.Template>
     </div>
   );

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

@@ -43,7 +43,7 @@ export default function BottomNavFloatingActionExample() {
           </AppHeader.Start>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Section>
+          <PageContent.Page>
             <PageContent.Body>
               <div className={styles.options}>
                 <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
@@ -64,7 +64,7 @@ export default function BottomNavFloatingActionExample() {
                 </div>
               ))}
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root floating iconOnly={iconOnly}>

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

@@ -44,7 +44,7 @@ export default function BottomNavFloatingExample() {
           </AppHeader.Start>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Section>
+          <PageContent.Page>
             <PageContent.Body>
               <div className={styles.options}>
                 <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
@@ -65,7 +65,7 @@ export default function BottomNavFloatingExample() {
                 </div>
               ))}
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root floating iconOnly={iconOnly}>

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

@@ -30,7 +30,7 @@ export default function BottomNavInAppShellExample() {
           </AppHeader.Start>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Section>
+          <PageContent.Page>
             <PageContent.Body>
               {ORDERS.map((order) => (
                 <Typography key={order} variant="body-m">
@@ -44,7 +44,7 @@ export default function BottomNavInAppShellExample() {
                 Новый заказ
               </Button.Root>
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>

package/src/styles/theme-light.css

@@ -342,6 +342,7 @@
   --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-bar-width: 40rem;
   --prime-media-viewer-inset: var(--prime-ref-space-4);
   --prime-media-viewer-page-gap: var(--prime-ref-space-6);
   --prime-message-card-width: 16rem;