@kolkrabbi/kol-framework 0.3.2 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/kol-framework.css +4 -14
- package/package.json +2 -2
- package/src/ShellHeader.jsx +2 -2
package/README.md
CHANGED
|
@@ -28,3 +28,11 @@ import { NAV_TREE, getActivePage } from './sidebars.config'
|
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Exports: `AppShell`, `SideNav`, `ThemeToggle`, `Layout`, `PageSection`, `PortalFooter`, `ScrollToTop`, `BrandHero`, `SubPageHero`.
|
|
31
|
+
|
|
32
|
+
## Tailwind v4 consumers
|
|
33
|
+
|
|
34
|
+
Tailwind skips `node_modules` when scanning, so add this next to the imports above — otherwise the shell's layout utilities never generate and the AppShell grid collapses:
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
@source "../node_modules/@kolkrabbi/kol-framework/src";
|
|
38
|
+
```
|
package/kol-framework.css
CHANGED
|
@@ -285,13 +285,8 @@ code, pre {
|
|
|
285
285
|
gap: 4px;
|
|
286
286
|
}
|
|
287
287
|
|
|
288
|
-
/*
|
|
289
|
-
|
|
290
|
-
CSS retains the adjacent-sibling border-top that separates stacked samples. */
|
|
291
|
-
|
|
292
|
-
.kol-type-sample + .kol-type-sample {
|
|
293
|
-
border-top: 1px solid var(--kol-fg-08);
|
|
294
|
-
}
|
|
288
|
+
/* Type-sample rule removed 2026-07-09 — was drift-flagged duplicate of the
|
|
289
|
+
theme-owned rule (now packages/theme/kol-components-foundry.css). */
|
|
295
290
|
|
|
296
291
|
/* Prose moved to DS typography — see kol-typography-mono.css.
|
|
297
292
|
See docs/documentation/06-framework/06-amendments.md 2026-04-23. */
|
|
@@ -529,13 +524,8 @@ code, pre {
|
|
|
529
524
|
max-width: 100%;
|
|
530
525
|
}
|
|
531
526
|
|
|
532
|
-
/*
|
|
533
|
-
|
|
534
|
-
CSS retains the descendant <p> overrides for sample prose (Preflight zeros
|
|
535
|
-
<p> margin; specs need 16px gap between paragraphs). */
|
|
536
|
-
|
|
537
|
-
.kol-type-spec-sample p { margin: 0 0 16px; }
|
|
538
|
-
.kol-type-spec-sample p:last-child { margin-bottom: 0; }
|
|
527
|
+
/* Type-spec-card rules removed 2026-07-09 — were drift-flagged duplicates of
|
|
528
|
+
the theme-owned rules (now packages/theme/kol-components-foundry.css). */
|
|
539
529
|
|
|
540
530
|
/* ───── Exit preview (floating × button on client surfaces) ───── */
|
|
541
531
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-framework",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"description": "KOL app shell — sidenav, layout, theme toggle, footer, heroes + brand color layer. SideNav takes nav data as props so the tree stays app-local.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"app-shell"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@kolkrabbi/kol-component": "0.
|
|
30
|
+
"@kolkrabbi/kol-component": "0.8.0",
|
|
31
31
|
"@kolkrabbi/kol-icons": "0.5.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
package/src/ShellHeader.jsx
CHANGED
|
@@ -61,7 +61,7 @@ export default function ShellHeader({
|
|
|
61
61
|
<div className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
|
|
62
62
|
{/* Row 1: brand block + controls */}
|
|
63
63
|
<div className="border-b border-fg-08">
|
|
64
|
-
<div className="
|
|
64
|
+
<div className="w-full px-4 py-4 md:px-5 lg:px-6">
|
|
65
65
|
<div className="flex items-center justify-between">
|
|
66
66
|
{/* kol-shell-header-brand reserves the nav-column width at lg+ so
|
|
67
67
|
* the Row-2 tabs align to the shell grid. */}
|
|
@@ -89,7 +89,7 @@ export default function ShellHeader({
|
|
|
89
89
|
{/* Row 2: section tabs + inline search + rail toggles */}
|
|
90
90
|
{hasTabRow && (
|
|
91
91
|
<div className="border-b border-fg-08">
|
|
92
|
-
<div className="
|
|
92
|
+
<div className="w-full px-4 md:px-5 lg:px-6">
|
|
93
93
|
<div className="kol-shell-header-tabs">
|
|
94
94
|
<nav className="flex flex-1 gap-6" aria-label="Sections">
|
|
95
95
|
{nav.map((item) => {
|