@kiefer-tek/sophea-design-system 0.15.5 → 0.15.7

package/dist/index.css

@@ -10475,6 +10475,45 @@ tbody tr:hover .sn-Table-module__td--jv9tA {
   box-shadow: 0 0 0 2px var(--action-link-04);
 }
 
+/* Full-width "bar" trigger — avatar + name/email row for a wide sidebar. */
+.sn-AccountMenu-module__triggerBar--1deLW {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  min-width: 0;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  background: transparent;
+  border-radius: 12px;
+  cursor: pointer;
+  text-align: start;
+  outline: none;
+}
+
+.sn-AccountMenu-module__triggerBar--1deLW:hover {
+  background: var(--shell-chrome-hover-bg);
+}
+
+.sn-AccountMenu-module__triggerBar--1deLW:focus-visible {
+  box-shadow: 0 0 0 2px var(--action-link-04);
+}
+
+.sn-AccountMenu-module__barIdentity--UoPcg {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+/* Avatar + badge anchor (so the badge positions to the avatar in either
+   trigger shape). */
+.sn-AccountMenu-module__avatarWrap--j5Q62 {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
 /* Unread badge on the avatar — top-right pill. */
 .sn-AccountMenu-module__avatarBadge--2qs2m {
   position: absolute;
@@ -10865,6 +10904,34 @@ tbody tr:hover .sn-Table-module__td--jv9tA {
   transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+/* SingleSidebar — full-height flush panel for the one-sidebar shell variant.
+   Width is set inline (collapsed/expanded px); a flex column so the consumer's
+   content fills and an `mt-auto` footer pins. The Root's overflow:hidden +
+   border-radius clip its outer corners; the right edge is square against Main
+   with a divider. */
+.sn-AppShell-module__singleSidebar--lYabJ {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  border-inline-end: 1px solid var(--shell-divider);
+  /* Glass (default): frosted over the aurora — mirrors the rail glass. */
+  background: var(--shell-region-glass);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Solid: opaque surface, no blur — a shade below the s2 widgets inside it so
+   they still read as elevated cards. */
+.sn-AppShell-module__singleSidebar--lYabJ[data-glass="false"] {
+  background: var(--shell-solid-sidebar, var(--surface-s1));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 @media (min-width: 768px) {
   .sn-AppShell-module__sidebar--9-Zb9 {
     width: var(--shell-sidebar-width, 15rem);
@@ -10966,7 +11033,10 @@ html[data-resizing] .sn-AppShell-module__sidebar--9-Zb9 {
   inset: 0;
   z-index: -1;
   overflow: hidden;
-  background: var(--shell-region-glass);
+  /* Glass by default (aurora frosts through the content pane). Tunable so a host
+     can make the main pane opaque while keeping the rail/sidebar glass — e.g. a
+     glass sidebar over an opaque content area. */
+  background: var(--shell-main-backdrop, var(--shell-region-glass));
 }
 
 .sn-AppShell-module__mainBackdropImage--bjtQh {
@@ -11070,6 +11140,46 @@ html[data-resizing] .sn-AppShell-module__sidebar--9-Zb9 {
   width: 100%;
   flex-shrink: 0;
 }
+
+/* ------------------------------------------------------------ Solid variant
+   <AppShell.Root surface="solid"> — opaque theme surfaces, no glass/blur.
+   Flat dark shell in the dark theme. Each region is tunable via a
+   --shell-solid-* variable (falling back to the DS solid surface tokens). */
+.sn-AppShell-module__root--PpqXq[data-surface="solid"] {
+  background: var(--shell-solid-bg, var(--surface-s1));
+  /* Sidebar shares the main pane's surface (s1) so the shell reads as one flat
+     dark slab separated only by the divider — and so elevated widgets inside it
+     (utility chips, account bar) stand out at s2 instead of blending into a
+     same-surface sidebar. */
+  --shell-solid-sidebar: var(--surface-s1);
+  /* Soften descendant search fields (e.g. CommandPalette.Trigger) so they read
+     as a subtle elevated surface on the flat dark shell, not a bright box. */
+  --command-palette-trigger-bg: var(--surface-s2);
+  --command-palette-trigger-bg-hover: var(--surface-s3);
+  --command-palette-trigger-border: var(--shell-divider);
+}
+.sn-AppShell-module__root--PpqXq[data-surface="solid"] .sn-AppShell-module__rail--RlMBL {
+  background: var(--shell-solid-rail, var(--surface-s2));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.sn-AppShell-module__root--PpqXq[data-surface="solid"] .sn-AppShell-module__sidebar--9-Zb9 {
+  background: var(--shell-solid-sidebar, var(--surface-s2));
+}
+.sn-AppShell-module__root--PpqXq[data-surface="solid"] .sn-AppShell-module__drawer--3Zhql {
+  background-color: var(--shell-solid-sidebar, var(--surface-s2));
+  background-image: none;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.sn-AppShell-module__root--PpqXq[data-surface="solid"] .sn-AppShell-module__mainBackdrop--oikM- {
+  background: var(--shell-solid-main, var(--surface-s1));
+}
+.sn-AppShell-module__root--PpqXq[data-surface="solid"] .sn-AppShell-module__mainBackdropFrost--BmFr9 {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
 /* CommandPalette — tokens only. Trigger mirrors the AppShell header search
    field; overlay/panel mirror the DS Modal substrate; result highlight reuses
    the shell rail-item selection tint. */
@@ -11085,9 +11195,13 @@ html[data-resizing] .sn-AppShell-module__sidebar--9-Zb9 {
   max-width: 448px;
   height: 36px;
   padding: 0 10px 0 12px;
-  border: 1px solid var(--border-04);
-  border-radius: 8px;
-  background: var(--shell-search-bg);
+  /* Matches the DS SearchInput field by default (surface-s3 / border-04 / 10px
+     radius). The fill + border are tunable so a host shell can soften them —
+     e.g. AppShell `surface="solid"` makes them a subtle elevated surface so the
+     field doesn't read as a bright floating box on a flat dark page. */
+  border: 1px solid var(--command-palette-trigger-border, var(--border-04));
+  border-radius: 10px;
+  background: var(--command-palette-trigger-bg, var(--surface-s3));
   color: var(--text-03);
   font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
   font-size: 14px;
@@ -11098,7 +11212,7 @@ html[data-resizing] .sn-AppShell-module__sidebar--9-Zb9 {
 }
 
 .sn-CommandPalette-module__trigger--ZE1so:hover {
-  background: var(--shell-search-bg-open);
+  background: var(--command-palette-trigger-bg-hover, var(--surface-s4));
 }
 
 .sn-CommandPalette-module__trigger--ZE1so:focus-visible {

package/dist/index.js

@@ -8189,6 +8189,9 @@ const IllustrationContent = forwardRef(
   }
 );
 const trigger$1 = "sn-AccountMenu-module__trigger--EHklO";
+const triggerBar = "sn-AccountMenu-module__triggerBar--1deLW";
+const barIdentity = "sn-AccountMenu-module__barIdentity--UoPcg";
+const avatarWrap = "sn-AccountMenu-module__avatarWrap--j5Q62";
 const avatarBadge = "sn-AccountMenu-module__avatarBadge--2qs2m";
 const itemBadge = "sn-AccountMenu-module__itemBadge--7gWAX";
 const identityName = "sn-AccountMenu-module__identityName--h6xu9";
@@ -8201,6 +8204,9 @@ const notifTitle$1 = "sn-AccountMenu-module__notifTitle--MR2jU";
 const notifBody$1 = "sn-AccountMenu-module__notifBody--RH0Ym";
 const styles$i = {
   trigger: trigger$1,
+  triggerBar,
+  barIdentity,
+  avatarWrap,
   avatarBadge,
   itemBadge,
   identityName,
@@ -8223,6 +8229,7 @@ const AccountMenu = forwardRef(function AccountMenu2({
   avatarTone = "brand",
   avatarSize = "md",
   items,
+  triggerVariant = "avatar",
   notifications,
   side = "right",
   align = "end",
@@ -8240,10 +8247,25 @@ const AccountMenu = forwardRef(function AccountMenu2({
     if (!next) setView("menu");
   };
   return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { ref, type: "button", "aria-label": ariaLabel, className: cx$2(styles$i.trigger, className), children: [
-      /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, tone: avatarTone, size: avatarSize, children: initials }),
-      notifications && hasUnread ? /* @__PURE__ */ jsx("span", { className: styles$i.avatarBadge, "aria-hidden": "true", children: formatBadge(count2) }) : null
-    ] }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": ariaLabel,
+        className: cx$2(triggerVariant === "bar" ? styles$i.triggerBar : styles$i.trigger, className),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: styles$i.avatarWrap, children: [
+            /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, tone: avatarTone, size: avatarSize, children: initials }),
+            notifications && hasUnread ? /* @__PURE__ */ jsx("span", { className: styles$i.avatarBadge, "aria-hidden": "true", children: formatBadge(count2) }) : null
+          ] }),
+          triggerVariant === "bar" ? /* @__PURE__ */ jsxs("span", { className: styles$i.barIdentity, children: [
+            name2 ? /* @__PURE__ */ jsx("span", { className: styles$i.identityName, children: name2 }) : null,
+            email ? /* @__PURE__ */ jsx("span", { className: styles$i.identityEmail, children: email }) : null
+          ] }) : null
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       DropdownMenuContent,
       {
@@ -8312,6 +8334,7 @@ const railItemIconOnly = "sn-AppShell-module__railItemIconOnly--SKMyQ";
 const railItemPill = "sn-AppShell-module__railItemPill--B67qF";
 const railItemIcon = "sn-AppShell-module__railItemIcon--pLfnP";
 const railItemLabel = "sn-AppShell-module__railItemLabel--1CFas";
+const singleSidebar = "sn-AppShell-module__singleSidebar--lYabJ";
 const sidebarInner = "sn-AppShell-module__sidebarInner--8gOCY";
 const sidebarToggle = "sn-AppShell-module__sidebarToggle--Pof9K";
 const resizeHandle = "sn-AppShell-module__resizeHandle--uB0bK";
@@ -8340,6 +8363,7 @@ const styles$h = {
   railItemPill,
   railItemIcon,
   railItemLabel,
+  singleSidebar,
   sidebarInner,
   sidebarToggle,
   resizeHandle,
@@ -8382,7 +8406,7 @@ function AppShellProvider({
     }
   );
 }
-const AppShellRoot = forwardRef(function AppShellRoot2({ drawerOpen, onDrawerOpenChange, children, className, ...rest }, ref) {
+const AppShellRoot = forwardRef(function AppShellRoot2({ drawerOpen, onDrawerOpenChange, surface = "glass", children, className, ...rest }, ref) {
   const ctx = useContext(AppShellContext);
   const open = drawerOpen ?? ctx?.drawerOpen ?? false;
   const setOpen = onDrawerOpenChange ?? ctx?.setDrawerOpen;
@@ -8392,7 +8416,7 @@ const AppShellRoot = forwardRef(function AppShellRoot2({ drawerOpen, onDrawerOpe
     if (roleOf(child) === "drawer") drawerChildren.push(child);
     else rowChildren.push(child);
   });
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx$1(styles$h.root, className), ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx$1(styles$h.root, className), "data-surface": surface, ...rest, children: [
     /* @__PURE__ */ jsx("span", { className: styles$h.topAccent, "aria-hidden": "true" }),
     /* @__PURE__ */ jsx(
       "button",
@@ -8547,6 +8571,36 @@ const AppShellSidebar = forwardRef(function AppShellSidebar2({
   );
 });
 AppShellSidebar[ROLE] = "drawer";
+const AppShellSingleSidebar = forwardRef(
+  function AppShellSingleSidebar2({
+    glass = true,
+    collapsed,
+    expandedWidth = 232,
+    collapsedWidth = 64,
+    children,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) {
+    const ctx = useContext(AppShellContext);
+    const isCollapsed = collapsed ?? ctx?.sidebarFolded ?? false;
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        className: cx$1(styles$h.singleSidebar, className),
+        "data-glass": glass ? "true" : "false",
+        "data-collapsed": isCollapsed ? "true" : "false",
+        "aria-label": ariaLabel ?? "Sidebar",
+        style: { width: isCollapsed ? collapsedWidth : expandedWidth, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+AppShellSingleSidebar[ROLE] = "drawer";
 const SidebarToggleIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", width: 16, height: 16, ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeWidth: 1.5, d: "M2.5 9h19M8 21.5V9" }),
   /* @__PURE__ */ jsx(
@@ -8602,12 +8656,12 @@ const AppShellMain = forwardRef(function AppShellMain2({ backgroundCss, children
     footer2
   ] });
 });
-const AppShellHeader = forwardRef(function AppShellHeader2({ left, center, right: right2, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs("header", { ref, className: cx$1(styles$h.header, className), ...rest, children: [
+const AppShellHeader = forwardRef(function AppShellHeader2({ left, center, right: right2, children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("header", { ref, className: cx$1(styles$h.header, className), ...rest, children: children != null ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: styles$h.headerLeft, children: left }),
     /* @__PURE__ */ jsx("div", { className: styles$h.headerCenter, children: center }),
     /* @__PURE__ */ jsx("div", { className: styles$h.headerRight, children: right2 })
-  ] });
+  ] }) });
 });
 AppShellHeader[ROLE] = "header";
 const AppShellMainFooter = forwardRef(
@@ -8621,6 +8675,7 @@ const AppShell = Object.assign(AppShellRoot, {
   Rail: AppShellRail,
   RailItem: AppShellRailItem,
   Sidebar: AppShellSidebar,
+  SingleSidebar: AppShellSingleSidebar,
   SidebarToggle: AppShellSidebarToggle,
   Main: AppShellMain,
   Header: AppShellHeader,
@@ -11592,6 +11647,7 @@ export {
   AppShellRoot,
   AppShellSidebar,
   AppShellSidebarToggle,
+  AppShellSingleSidebar,
   AspectRatio,
   Attachment,
   Avatar,