```
`.kshell` is a thin CSS Grid layout — see `app/orders.html` for the
canonical composition with sidebar + topbar + main + nested
`.ktab` + `.kc` + `.kdt`.
### Rail with hover-expand
To make `.knav-rail` expand on hover (common iPad portrait pattern),
add a transition + media query in your app layer:
```css
.knav-rail:hover {
--knav-w: 240px;
}
.knav-rail .knav-text,
.knav-rail .knav-trail { display: revert; }
```
Out of scope for the primitive itself — the rail variant is "icons
only" by default; consumers compose hover-expand if they want it.
## Do's and Don'ts
| ✅ Do | ❌ Don't |
|------|---------|
| Set `aria-current="page"` on the active item — let CSS style it. | Toggle a custom `.is-active` class. ARIA IS the state. |
| Give each `