@stasho/ds 0.15.0 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",

package/src/components/sidebar/sidebar.tsx

@@ -9,7 +9,11 @@ import {
   type MouseEvent,
   type ReactNode,
 } from "react";
-import { CaretDoubleLeft, CaretDoubleRight } from "@phosphor-icons/react";
+import {
+  CaretDoubleLeft,
+  CaretDoubleRight,
+  CaretRight,
+} from "@phosphor-icons/react";
 import { LogoLetter, LogoWordmark } from "@ac/components/logo/logo";
 import {
   Tooltip,
@@ -167,12 +171,16 @@ export function SidebarNav({
 
 export interface SidebarSectionProps {
   title?: string;
+  titleHref?: string;
+  onTitleClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   children: ReactNode;
   className?: string;
 }
 
 export function SidebarSection({
   title,
+  titleHref,
+  onTitleClick,
   children,
   className,
 }: SidebarSectionProps) {
@@ -183,7 +191,24 @@ export function SidebarSection({
       aria-label={title ?? "Section"}
       className={cn("flex flex-col gap-1", className)}
     >
-      {title && !collapsed && (
+      {title && !collapsed && titleHref && (
+        <a
+          href={titleHref}
+          onClick={onTitleClick}
+          className={cn(
+            "flex items-center gap-0.5 rounded-sm px-2 pb-1 pt-2",
+            "text-[10px] font-semibold uppercase tracking-wider text-foreground/50",
+            "transition-colors duration-150 hover:text-foreground",
+            "focus-visible:outline-none focus-visible:ring-2",
+            "focus-visible:ring-accent focus-visible:ring-offset-2",
+            "motion-reduce:transition-none",
+          )}
+        >
+          {title}
+          <CaretRight size={10} aria-hidden="true" />
+        </a>
+      )}
+      {title && !collapsed && !titleHref && (
         <div className="px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-foreground/50">
           {title}
         </div>

package/src/styles/tokens.css

@@ -130,6 +130,8 @@
    Layer 2: Semantic Surface Tokens (theme-dependent)
    ────────────────────────────────────────────── */
 :root {
+  /* Native UI (scrollbars, form-control chrome) must render light with the theme. */
+  color-scheme: light;
   --background: oklch(0.99 0.005 270);
   --foreground: oklch(0.22 0.015 270);
 
@@ -162,6 +164,8 @@
 }
 
 .theme-dark {
+  /* Native UI (scrollbars, form-control chrome) must render dark with the theme. */
+  color-scheme: dark;
   --background: #07080a;
   --foreground: #f3f3f3;