prime-ui-kit 0.4.1 → 0.6.0

package/README.md

@@ -25,6 +25,7 @@ A **React 19** component library built with **CSS Modules**, **design tokens** a
 - [Component catalog](#component-catalog)
 - [Package exports (`package.json` / `exports`)](#package-exports-packagejson--exports)
 - [TypeScript](#typescript)
+- [Application shell layout](#application-shell-layout)
 - [Where component docs live](#where-component-docs-live)
 - [License](#license)
 
@@ -203,7 +204,7 @@ Documentation base URL in the repo: `https://github.com/esurkov1/prime-ui/blob/m
 | Navigation & layout | **Stepper** | Multi-step flow on `<ol>` / `<li>` plus horizontal/vertical primitives. | [COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/components/stepper/COMPONENT.md) |
 | Navigation & layout | **Tabs** | Tablist, indicator, one visible panel at a time. | [COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/components/tabs/COMPONENT.md) |
 | Navigation & layout | **PageContent** | Main column: `Section` or `Root`, title, description (`measure`), body. | [COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/components/page-content/COMPONENT.md) |
-| Navigation & layout | **AppShell** | Application shell: grid root, nav slot, main region, optional full viewport. | [Source](https://github.com/esurkov1/prime-ui/tree/main/src/layout/app-shell) |
+| Navigation & layout | **AppShell** | Application shell: grid root, nav slot, scrollable **`main`** with page gutters (`x6`) on **`Main`**. | [COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-shell/COMPONENT.md) |
 | Navigation & layout | **ScrollContainer** | Scrollable region with horizontal or vertical axis (overflow wrapper). | [Source](https://github.com/esurkov1/prime-ui/tree/main/src/components/scroll-container) |
 | Data | **DataTable** | Table with scroll, sorting, pagination or infinite scroll, sticky regions. | [COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/components/data-table/COMPONENT.md) |
 | Display & content | **Avatar** | Circular avatar: image, fallback, group with overflow cell. | [COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/components/avatar/COMPONENT.md) |
@@ -252,7 +253,15 @@ Type definitions ship with the package (`dist/*.d.ts`).
 - **Why separate files (not one `examples.md`):** each file is one scenario with a clear filename — easier for humans to navigate and for LLMs to retrieve the right chunk without loading an entire mega-document.
 - **In the installed package:** `COMPONENT.md` and `examples/**` are published (`package.json` → `files`), e.g. `node_modules/prime-ui-kit/src/components/button/examples/` and `node_modules/prime-ui-kit/src/layout/sidebar/COMPONENT.md`.
 
-**AppShell**, **ExampleFrame**, and **ScrollContainer** do not have a dedicated `COMPONENT.md`; refer to the linked source folders and types in the `.tsx` files.
+**ExampleFrame** and **ScrollContainer** do not have a dedicated `COMPONENT.md`; refer to the linked source folders and types in the `.tsx` files.
+
+---
+
+## Application shell layout
+
+Use **`AppShell.Template`** so routes render inside **`AppShell.Main`**, which applies canonical **`--prime-sys-spacing-x6`** padding (no extra wrapper). **`PageContent.Root`** does **not** add edge padding; pair **`PageContent`** with the shell. Import **`prime-ui-kit/styles.css`** and **`prime-ui-kit/bundle.css`** so layout CSS applies.
+
+**Full diagram, token table, and troubleshooting** (“margins disappeared”): [src/layout/app-shell/COMPONENT.md](https://github.com/esurkov1/prime-ui/blob/main/src/layout/app-shell/COMPONENT.md).
 
 ---
 

package/dist/components/index.css

@@ -66,9 +66,10 @@
   flex-direction: column;
   min-width: 0;
   min-height: 0;
-  padding: 0;
   margin: 0;
   background: transparent;
+  padding-block: var(--prime-sys-spacing-x6);
+  padding-inline: var(--prime-sys-spacing-x6);
 }
 @media (min-width: 48rem) {
   .AppShell_layoutRoot2[data-layout-template=app]:has([data-sidebar-root=true][data-state=expanded], [data-sidebar-root=true][data-state=compact]) {
@@ -624,6 +625,12 @@
   outline: var(--prime-sys-border-width-focusRing) solid var(--prime-sys-color-focus-ring);
   outline-offset: var(--prime-sys-unit-2px);
 }
+.Sidebar_menuButtonActive2:focus-visible,
+.Sidebar_menuButton2[data-active=true]:focus-visible,
+.Sidebar_menuButton2[aria-current=page]:focus-visible {
+  outline: none;
+  box-shadow: var(--prime-sys-elevation-shadow-primaryFocus);
+}
 .Sidebar_menuButton2:disabled {
   opacity: 0.56;
   cursor: not-allowed;
@@ -631,7 +638,13 @@
 .Sidebar_menuButtonActive2,
 .Sidebar_menuButton2[data-active=true],
 .Sidebar_menuButton2[aria-current=page] {
-  background: var(--prime-sys-color-action-neutralBackgroundHover);
+  background: var(--prime-sys-color-action-primaryBackground);
+  color: var(--prime-sys-color-action-primaryForeground);
+}
+.Sidebar_menuButtonActive2:hover:not(:disabled),
+.Sidebar_menuButton2[data-active=true]:hover:not(:disabled),
+.Sidebar_menuButton2[aria-current=page]:hover:not(:disabled) {
+  background: var(--prime-sys-color-action-primaryBackgroundHover);
 }
 .Sidebar_menuIcon2 {
   display: inline-flex;
@@ -664,6 +677,17 @@
   opacity: var(--sb-item-trailing-opacity);
   transform: scale(var(--sb-item-trailing-scale));
 }
+.Sidebar_menuButtonActive2 .Sidebar_menuIcon2,
+.Sidebar_menuButton2[data-active=true] .Sidebar_menuIcon2,
+.Sidebar_menuButton2[aria-current=page] .Sidebar_menuIcon2 {
+  color: var(--prime-sys-color-action-primaryForeground);
+}
+.Sidebar_menuButtonActive2 .Sidebar_menuTrailing2,
+.Sidebar_menuButton2[data-active=true] .Sidebar_menuTrailing2,
+.Sidebar_menuButton2[aria-current=page] .Sidebar_menuTrailing2 {
+  color: var(--prime-sys-color-action-primaryForeground);
+  opacity: 0.72;
+}
 .Sidebar_menuAction2 {
   box-sizing: border-box;
   display: inline-flex;
@@ -7072,8 +7096,7 @@
   box-sizing: border-box;
   width: 100%;
   margin: 0 auto;
-  padding-block: var(--prime-sys-spacing-5xl);
-  padding-inline: var(--prime-sys-spacing-4xl);
+  padding: 0;
 }
 .PageContent_root2[data-max-width=readable] {
   max-width: var(--prime-sys-unit-48rem);