kaze-design-system 0.2.0 → 0.2.2

package/components.css

@@ -3440,27 +3440,18 @@
 
 .app-layout__main {
   flex: 1;
-  margin-left: 0;
+  min-width: 0;
   display: flex;
   flex-direction: column;
 }
 
 .app-layout__content {
   flex: 1;
-  padding: var(--space-4);
+  padding: var(--space-6);
   max-width: var(--content-max-width);
   width: 100%;
 }
 
-@media (min-width: 768px) {
-  .app-layout__main {
-    margin-left: var(--sidebar-width);
-  }
-  .app-layout__content {
-    padding: var(--space-6);
-  }
-}
-
 /* ── TopBar ──────────────────────────────────────────────── */
 
 .top-bar {
@@ -3486,15 +3477,15 @@
 
 .sidebar {
   width: var(--sidebar-width);
-  position: fixed;
+  position: sticky;
   top: 0;
-  left: 0;
-  bottom: 0;
-  background-color: var(--color-surface);
+  height: 100dvh;
+  flex-shrink: 0;
+  overflow-y: auto;
+  background-color: var(--color-bg);
   border-right: 1px solid var(--color-border);
-  display: none;
+  display: flex;
   flex-direction: column;
-  z-index: var(--z-sticky);
   padding: var(--space-5) var(--space-3);
 }
 
@@ -3522,12 +3513,23 @@
   border-top: 1px solid var(--color-border-subtle);
 }
 
-@media (min-width: 768px) {
-  .sidebar {
-    display: flex;
-  }
+.sidebar__group-label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-fg-muted);
+  padding: var(--space-4) var(--space-4) var(--space-1);
+  letter-spacing: 0.03em;
 }
 
+.sidebar__divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-2) var(--space-4);
+}
+
+/* Sidebar is always visible (sticky in flex layout).
+   Consumers can add their own @media rules to hide on mobile. */
+
 /* ── Logo ────────────────────────────────────────────────── */
 
 .logo {

package/dist/components/Sidebar/Sidebar.js

@@ -38,7 +38,37 @@ const NavItem = forwardRef(
   }
 );
 NavItem.displayName = "NavItem";
+const SidebarGroupLabel = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("sidebar__group-label", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarDivider = forwardRef(
+  ({ className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("sidebar__divider", className),
+        role: "separator",
+        ...rest
+      }
+    );
+  }
+);
+SidebarDivider.displayName = "SidebarDivider";
 export {
   NavItem,
-  Sidebar
+  Sidebar,
+  SidebarDivider,
+  SidebarGroupLabel
 };

package/dist/index.js

@@ -33,7 +33,7 @@ import { List, ListItem } from "./components/List/List.js";
 import { Logo } from "./components/Logo/Logo.js";
 import { Meter } from "./components/Meter/Meter.js";
 import { Metric } from "./components/Metric/Metric.js";
-import { NavItem, Sidebar } from "./components/Sidebar/Sidebar.js";
+import { NavItem, Sidebar, SidebarDivider, SidebarGroupLabel } from "./components/Sidebar/Sidebar.js";
 import { Navbar, NavbarLink, NavbarLinks } from "./components/Navbar/Navbar.js";
 import { NumberField } from "./components/NumberField/NumberField.js";
 import { Pagination } from "./components/Pagination/Pagination.js";
@@ -127,6 +127,8 @@ export {
   SectionHeader,
   Select,
   Sidebar,
+  SidebarDivider,
+  SidebarGroupLabel,
   Skeleton,
   Sparkline,
   SplitSection,

package/dist/types/components/Sidebar/Sidebar.d.ts

@@ -15,3 +15,10 @@ export interface NavItemProps extends HTMLAttributes<HTMLElement> {
     href?: string;
 }
 export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLElement>>;
+export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare const SidebarGroupLabel: import("react").ForwardRefExoticComponent<SidebarGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SidebarDividerProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const SidebarDivider: import("react").ForwardRefExoticComponent<SidebarDividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Sidebar/index.d.ts

@@ -1,2 +1,2 @@
-export { Sidebar, NavItem } from "./Sidebar";
-export type { SidebarProps, NavItemProps } from "./Sidebar";
+export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
+export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";

package/dist/types/components/index.d.ts

@@ -34,8 +34,8 @@ export { Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter, } from "./
 export type { DialogProps, DialogHeaderProps, DialogTitleProps, DialogBodyProps, DialogFooterProps, } from "./Dialog";
 export { Divider } from "./Divider";
 export type { DividerProps } from "./Divider";
-export { Sidebar, NavItem } from "./Sidebar";
-export type { SidebarProps, NavItemProps } from "./Sidebar";
+export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
+export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";
 export { TopBar } from "./TopBar";
 export type { TopBarProps } from "./TopBar";
 export { AppLayout } from "./Layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
   "license": "MIT",