@the-portland-company/shell 0.10.2 → 0.11.1

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+## 0.11.1 — 2026-07-20
+
+### Fixed (packaging — native install)
+
+- **Chakra-only peers are now `optional`** via `peerDependenciesMeta`
+  (`@chakra-ui/react`, `@emotion/react`, `@emotion/styled`,
+  `@supabase/supabase-js`, `react-icons`, `react-router-dom`). The `./native`
+  export imports none of them — only `react`/`react-dom` (still required) — so
+  the Next.js worker apps (Forms/Surveys/Polls) can `npm i
+  @the-portland-company/shell` without `ERESOLVE` and without
+  `--legacy-peer-deps`. The Chakra `.` export still expects these at runtime;
+  apps that use it already install them.
+- **Relaxed the `@supabase/supabase-js` peer range** from `~2.95.3`
+  (`>=2.95.3 <2.96`) to `>=2.95.3 <3` so it no longer conflicts with apps on a
+  newer 2.x (e.g. surveys on `^2.106.2`).
+
+## 0.11.0 — 2026-07-20
+
+### Added (native — icon-only tab strip)
+
+- **`NavTabStrip`** in the `./native` export: the standard icon-only secondary
+  navigation the Next.js worker apps (Forms / Surveys / Polls) render below the
+  top bar, promoted from each app's hand-rolled `.tabstrip`/`.tab-strip` markup
+  into the shell so they stop diverging. Icon-only tabs with `role="tablist"` /
+  `role="tab"`, `title` tooltips + `aria-label`; the **selected tab merges into
+  the content panel** (top/left/right border, no bottom border, shared
+  `--tab-content-bg`). All geometry is driven by the Brand `--tab-*` CSS vars
+  (`--tab-height`, `--tab-icon-size`, `--tab-radius`, `--tab-gap`,
+  `--tab-content-bg`, `--tab-unselected-opacity` [default `0.6`]) with literal
+  fallbacks. Items are `{ key, label, icon, href?, onSelect?, selected,
+  disabled?, disabledTitle? }`; `href` tabs render through the injectable
+  `linkComponent` (Next `<Link>`), no-`href` tabs render as `<button>`, and
+  `disabled` tabs render a dimmed non-interactive span (e.g. Surveys' Canvas /
+  Results before a survey is chosen). Pass `children` to render the merged
+  content panel, or omit to compose your own. No Chakra, no react-router.
+- `NavLinkProps` widened with optional passthrough attributes
+  (`role`, `aria-selected`, `aria-label`, `title`, `style`) so one injected link
+  can back both a nav row and a routed tab.
+- Tokens regenerated from Specs (`gen:tokens`, tokens v38).
+
+## 0.10.3 — 2026-07-13
+
+### Fixed (sidebar)
+
+- **Sidebar width is driven by the `--sidebar-width` Brand token** (default
+  `240px`) so the Chakra `Sidebar` tracks the Brand API value.
+
 ## 0.10.2 — 2026-07-13
 
 ### Security (XSS) + UI

package/dist/chrome.css

@@ -135,7 +135,7 @@
   --form-label-padding-x: 6px;
 
   /* Tabs */
-  --tab-header-bg: #888888;
+  --tab-header-bg: transparent;
   --tab-row-bg: #F0F4F8;
   --tab-content-bg: #F8FAFC;
   --tab-height: 44px;
@@ -145,7 +145,7 @@
   --tab-radius: 12px;
 
   /* Sidebar (nav chrome) */
-  --sidebar-width: 140px;
+  --sidebar-width: 240px;
   --sidebar-bg: #FFFFFF;
   --sidebar-border: #E2E8F0;
   --sidebar-brand-logo-height: 40px;

package/dist/index.cjs

@@ -1521,19 +1521,19 @@ function Header({ onOpen, id }) {
           /* @__PURE__ */ jsxRuntime.jsxs(
             react.HStack,
             {
-              spacing: 2,
+              spacing: "var(--topbar-icon-gap, 8px)",
               mr: "15px",
-              color: "gray.600",
+              color: "var(--topbar-icon-color, #4A5568)",
               sx: {
                 '& button:not([role="menuitem"]):not([data-menu-item])': {
-                  width: "32px",
-                  height: "32px",
-                  minWidth: "32px",
+                  width: "var(--topbar-icon-button-size, 32px)",
+                  height: "var(--topbar-icon-button-size, 32px)",
+                  minWidth: "var(--topbar-icon-button-size, 32px)",
                   padding: 0
                 },
-                '& button:not([role="menuitem"]):not([data-menu-item]) svg': {
-                  width: "20px",
-                  height: "20px"
+                '& button:not([role="menuitem"]):not([data-menu-item]) svg, & button:not([role="menuitem"]):not([data-menu-item]) img': {
+                  width: "var(--topbar-icon-size, 20px)",
+                  height: "var(--topbar-icon-size, 20px)"
                 }
               },
               children: [
@@ -2488,7 +2488,7 @@ function Sidebar({ onClose, id }) {
       bg: sidebarBg,
       borderRight: "1px",
       borderRightColor: sidebarBorderColor,
-      w: { base: "full", md: 60 },
+      w: { base: "full", md: "var(--sidebar-width, 240px)" },
       pos: "fixed",
       h: "100vh",
       direction: "column",
@@ -2655,6 +2655,53 @@ function AppLayout({
     overlaySlot
   ] });
 }
+function useSlotGlyphName(slot) {
+  const [name, setName] = react$1.useState(null);
+  react$1.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const read = () => {
+      const raw = window.getComputedStyle(document.documentElement).getPropertyValue(`--topbar-icon-${slot}`).trim().replace(/^['"]|['"]$/g, "");
+      setName(raw.length > 0 ? raw : null);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(document.head, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [slot]);
+  return name;
+}
+var TopBarIcon = react$1.forwardRef(
+  function TopBarIcon2({ slot, fallbackIcon, isSelected, ...rest }, ref) {
+    const glyphName = useSlotGlyphName(slot);
+    const icon = glyphName ? /* @__PURE__ */ jsxRuntime.jsx(
+      BrandIcon,
+      {
+        name: glyphName,
+        style: {
+          width: "var(--topbar-icon-size, 20px)",
+          height: "var(--topbar-icon-size, 20px)"
+        }
+      }
+    ) : fallbackIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.IconButton,
+      {
+        ref,
+        icon,
+        variant: "ghost",
+        minW: "var(--topbar-icon-button-size, 32px)",
+        h: "var(--topbar-icon-button-size, 32px)",
+        bg: isSelected ? "var(--topbar-icon-selected-bg, transparent)" : "transparent",
+        color: isSelected ? "var(--topbar-icon-selected-color, var(--topbar-icon-color, #64748B))" : "var(--topbar-icon-color, #64748B)",
+        _hover: {
+          bg: "var(--topbar-icon-hover-bg, transparent)",
+          color: "var(--topbar-icon-hover-color, var(--topbar-icon-color, #64748B))"
+        },
+        ...rest
+      }
+    );
+  }
+);
 var SUPPORT_REQUEST_SUCCESS_MESSAGE = "Your support request was sent to Politogy leadership.";
 function splitName(value) {
   const trimmed = String(value ?? "").trim();
@@ -3055,6 +3102,7 @@ exports.ShellRoleContext = ShellRoleContext;
 exports.ShellSupportProviderContext = ShellSupportProviderContext;
 exports.Sidebar = Sidebar;
 exports.SupportRequestButton = SupportRequestButton;
+exports.TopBarIcon = TopBarIcon;
 exports.UserMenu = UserMenu;
 exports.buildSpeculationRules = buildSpeculationRules;
 exports.getOrganizationBadgeLetters = getOrganizationBadgeLetters;