@godxjp/ui 18.4.0 → 18.5.0

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

@@ -5,20 +5,35 @@ export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexP
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
+export { OrgSwitcher } from "./org-switcher.js";
+export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProps, } from "./org-switcher.js";
 export { AuthShell } from "./auth-shell.js";
 export type { AuthShellProp, AuthShellProps } from "./auth-shell.js";
+export type { AuthShellPresetProp } from "../../props/vocabulary/index.js";
+export { AuthDivider } from "./auth-divider.js";
+export type { AuthDividerProp, AuthDividerProps } from "./auth-divider.js";
+export { AuthIdentity } from "./auth-identity.js";
+export type { AuthIdentityProp, AuthIdentityProps } from "./auth-identity.js";
+export { AuthFooter } from "./auth-footer.js";
+export type { AuthFooterProp, AuthFooterProps } from "./auth-footer.js";
+export { AuthStack } from "./auth-stack.js";
+export type { AuthStackProps } from "./auth-stack.js";
 export { CenteredShell } from "./centered-shell.js";
 export type { CenteredShellProp, CenteredShellProps } from "./centered-shell.js";
-export type { CenteredShellWidthProp } from "../../props/vocabulary/index.js";
+export type { CenteredShellWidthProp, CenteredShellAlignProp } from "../../props/vocabulary/index.js";
 export { Breadcrumb } from "./breadcrumb.js";
 export type { BreadcrumbProps } from "./breadcrumb.js";
-export { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
-export type { SidebarItemData, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarSectionProp, } from "../../props/components/layout.prop.js";
+export { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
+export type { SidebarItemData, SidebarLinkComponentProp, SidebarLinkProp, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarRenderItemProp, SidebarSectionProp, } from "../../props/components/layout.prop.js";
 export { Topbar } from "./topbar.js";
 export type { TopbarProp, TopbarProps } from "./topbar.js";
 export { ResponsiveGrid } from "./responsive-grid.js";
 export type { ResponsiveGridProps } from "./responsive-grid.js";
+export { MasterDetail } from "./master-detail.js";
+export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
 export { Separator } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
+export { LegalDocumentShell } from "./legal-document-shell.js";
+export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";

package/dist/components/layout/index.js

@@ -2,22 +2,36 @@ import { PageContainer } from "./page-container.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
+import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
+import { AuthDivider } from "./auth-divider.js";
+import { AuthIdentity } from "./auth-identity.js";
+import { AuthFooter } from "./auth-footer.js";
+import { AuthStack } from "./auth-stack.js";
 import { CenteredShell } from "./centered-shell.js";
 import { Breadcrumb } from "./breadcrumb.js";
-import { Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
+import { createSidebarLink, Sidebar, SidebarHeader, SidebarItem, SidebarSection } from "./sidebar.js";
 import { Topbar } from "./topbar.js";
 import { ResponsiveGrid } from "./responsive-grid.js";
+import { MasterDetail } from "./master-detail.js";
 import { SplitPane } from "./split-pane.js";
 import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
+import { LegalDocumentShell } from "./legal-document-shell.js";
 export {
   AppShell,
   AspectRatio,
+  AuthDivider,
+  AuthFooter,
+  AuthIdentity,
   AuthShell,
+  AuthStack,
   Breadcrumb,
   CenteredShell,
   Flex,
+  LegalDocumentShell,
+  MasterDetail,
+  OrgSwitcher,
   PageContainer,
   ResizableHandle,
   ResizablePanel,
@@ -29,5 +43,6 @@ export {
   SidebarItem,
   SidebarSection,
   SplitPane,
-  Topbar
+  Topbar,
+  createSidebarLink
 };

package/dist/components/layout/legal-document-shell.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { LegalDocumentShellProp } from "../../props/components/layout.prop.js";
+export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProp as LegalDocumentShellProps, } from "../../props/components/layout.prop.js";
+/**
+ * LegalDocumentShell — the long-form **legal / policy document** surface: terms of service, privacy
+ * policy, DPA, cookie policy, SLA, EULA, security policy.
+ *
+ * It exists because a legal page is NOT expressible as `CenteredShell` + `SplitPane` + tokens: the
+ * geometry is the easy half, and the half that keeps getting hand-rolled per app is the behaviour —
+ *
+ * - **scroll spy**: an `IntersectionObserver` marks the section at the reading line active, so the
+ *   contents list tracks the reader (`aria-current="location"`, never colour-only);
+ * - **hash deep links**: `?#section-id` on load selects that section; activating a contents anchor
+ *   rewrites the hash (`history.replaceState`, so the Back button is never hijacked);
+ * - **scroll offset**: `scroll-margin-block-start` from `--legal-document-scroll-offset`, so a jump
+ *   lands below sticky chrome with no offset arithmetic;
+ * - **focus handoff**: the target `<section tabIndex={-1}>` takes focus (`preventScroll`), so a
+ *   keyboard/screen-reader user actually arrives IN the section, with a visible ring;
+ * - **reduced motion**: the smooth scroll degrades to an instant jump under
+ *   `prefers-reduced-motion: reduce`.
+ *
+ * Semantics: `<article>` labelled by the `<h1>` · a NAMED `<nav>` for the contents · REAL
+ * `<a href="#…">` anchors (middle-clickable, deep-linkable, work before JS boots) · one `<section>`
+ * per entry labelled by its `<h2>`.
+ *
+ * Layout: the shell owns its query container, so the one-column ⇄ two-column decision comes from
+ * its OWN width (the SplitPane precedent, gh#165). At ≥56rem the contents become a sticky rail
+ * beside a measure-capped column; below that (the 390×844 case) the shell is a single column and
+ * the contents are a static compact block between the header and the first section — never pinned,
+ * so a phone loses no vertical space.
+ *
+ * ALL legal text stays consumer-owned: the shell only receives `sections` and slots.
+ */
+export declare const LegalDocumentShell: React.ForwardRefExoticComponent<LegalDocumentShellProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/legal-document-shell.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useControlledLatch } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Heading } from "../general/typography.js";
+const SPY_ROOT_MARGIN = "-10% 0px -75% 0px";
+const ISO_CALENDAR_DATE = /^\d{4}-\d{2}-\d{2}$/;
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function formatEffectiveDate(value, locale) {
+  const iso = value.trim();
+  const isCalendarDate = ISO_CALENDAR_DATE.test(iso);
+  const date = new Date(isCalendarDate ? `${iso}T00:00:00Z` : iso);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    ...isCalendarDate ? { timeZone: "UTC" } : {}
+  }).format(date);
+}
+const LegalDocumentShell = React.forwardRef(
+  function LegalDocumentShell2({
+    title,
+    version,
+    effectiveDate,
+    summary,
+    contentsLabel,
+    sections,
+    activeSection,
+    defaultActiveSection,
+    onActiveSectionChange,
+    documentNavigation,
+    footerAction,
+    id,
+    className
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const generatedId = React.useId();
+    const baseId = id ?? generatedId;
+    const titleId = `${baseId}-title`;
+    const contentsId = `${baseId}-contents`;
+    const rootRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = useControlledLatch(activeSection !== void 0);
+    const [internalActive, setInternalActive] = React.useState(
+      () => defaultActiveSection ?? sections[0]?.id
+    );
+    const active = isControlled ? activeSection : internalActive;
+    const emit = React.useCallback(
+      (sectionId) => {
+        if (!isControlled) setInternalActive(sectionId);
+        onActiveSectionChange?.(sectionId);
+      },
+      [isControlled, onActiveSectionChange]
+    );
+    const activeRef = React.useRef(active);
+    const emitRef = React.useRef(emit);
+    React.useEffect(() => {
+      activeRef.current = active;
+      emitRef.current = emit;
+    });
+    const sectionIdsKey = sections.map((section) => section.id).join("\0");
+    const hashHandledRef = React.useRef(false);
+    React.useEffect(() => {
+      if (hashHandledRef.current || typeof window === "undefined") return;
+      hashHandledRef.current = true;
+      const hash = decodeURIComponent(window.location.hash.replace(/^#/, ""));
+      if (hash && sectionIdsKey.split("\0").includes(hash)) emitRef.current(hash);
+    }, [sectionIdsKey]);
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (!root || typeof IntersectionObserver === "undefined") return;
+      const ids = sectionIdsKey ? sectionIdsKey.split("\0") : [];
+      const intersecting = /* @__PURE__ */ new Map();
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            const entryId = entry.target.dataset.legalSection;
+            if (entryId) intersecting.set(entryId, entry.isIntersecting);
+          }
+          const next = ids.find((sectionId) => intersecting.get(sectionId));
+          if (next && next !== activeRef.current) emitRef.current(next);
+        },
+        { rootMargin: SPY_ROOT_MARGIN, threshold: 0 }
+      );
+      for (const element of root.querySelectorAll("[data-legal-section]")) {
+        observer.observe(element);
+      }
+      return () => observer.disconnect();
+    }, [sectionIdsKey]);
+    const handleContentsClick = (event, sectionId) => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      emit(sectionId);
+      const target = typeof document === "undefined" ? null : document.getElementById(sectionId);
+      if (!target) return;
+      event.preventDefault();
+      window.history?.replaceState?.(null, "", `#${sectionId}`);
+      target.scrollIntoView?.({
+        behavior: prefersReducedMotion() ? "auto" : "smooth",
+        block: "start"
+      });
+      target.focus({ preventScroll: true });
+    };
+    const contentsName = contentsLabel ?? t("layout.legalDocumentShell.contents");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRefs,
+        id,
+        "data-slot": "legal-document-shell",
+        className: cn("ui-legal-document-scope", className),
+        children: /* @__PURE__ */ jsxs("article", { className: "ui-legal-document", "aria-labelledby": titleId, children: [
+          /* @__PURE__ */ jsxs("header", { className: "ui-legal-document-header", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 1, id: titleId, children: title }),
+            (version !== void 0 || effectiveDate !== void 0) && /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-meta", children: [
+              version !== void 0 && /* @__PURE__ */ jsx("span", { children: t("layout.legalDocumentShell.version", { version }) }),
+              effectiveDate !== void 0 && // <time dateTime> keeps the MACHINE-readable value as the ISO 8601 input while
+              // the visible text is the Intl-formatted, locale-correct rendering.
+              /* @__PURE__ */ jsx("time", { dateTime: effectiveDate, children: t("layout.legalDocumentShell.effectiveDate", {
+                date: formatEffectiveDate(effectiveDate, locale)
+              }) })
+            ] }),
+            summary !== void 0 && // A <div> (not <p>): the summary slot may carry block content, and a <p> inside a <p>
+            // is invalid HTML the browser silently un-nests.
+            /* @__PURE__ */ jsx("div", { className: "ui-legal-document-summary", children: summary })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ui-legal-document-rail", children: [
+            documentNavigation !== void 0 && /* @__PURE__ */ jsx("div", { "data-slot": "legal-document-navigation", children: documentNavigation }),
+            /* @__PURE__ */ jsxs("nav", { className: "ui-legal-document-toc", "aria-labelledby": contentsId, children: [
+              /* @__PURE__ */ jsx("p", { id: contentsId, className: "ui-legal-document-toc-title", children: contentsName }),
+              /* @__PURE__ */ jsx("ol", { className: "ui-legal-document-toc-list", children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `#${section.id}`,
+                  className: "ui-legal-document-toc-link",
+                  "data-active": section.id === active ? "" : void 0,
+                  "aria-current": section.id === active ? "location" : void 0,
+                  onClick: (event) => handleContentsClick(event, section.id),
+                  children: section.title
+                }
+              ) }, section.id)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ui-legal-document-content", children: sections.map((section) => /* @__PURE__ */ jsxs(
+            "section",
+            {
+              id: section.id,
+              tabIndex: -1,
+              "data-legal-section": section.id,
+              "aria-labelledby": `${section.id}-heading`,
+              className: "ui-legal-document-section",
+              children: [
+                /* @__PURE__ */ jsx(Heading, { level: 2, id: `${section.id}-heading`, children: section.title }),
+                /* @__PURE__ */ jsx("div", { className: "ui-legal-document-section-body", children: section.content })
+              ]
+            },
+            section.id
+          )) }),
+          footerAction !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-legal-document-footer", children: footerAction })
+        ] })
+      }
+    );
+  }
+);
+LegalDocumentShell.displayName = "LegalDocumentShell";
+export {
+  LegalDocumentShell
+};

package/dist/components/layout/master-detail.d.ts

@@ -0,0 +1,24 @@
+import type { MasterDetailProp } from "../../props/components/layout.prop.js";
+export type MasterDetailProps = MasterDetailProp;
+/**
+ * Token-owned master-detail composition: a selectable collection beside the detail surface it
+ * drives. Geometry is the component's only responsibility — the tracks (`--master-detail-rail-*`),
+ * the gap (`--master-detail-gap`) and the stacking threshold (`--master-detail-collapse-below`)
+ * are all tokens, so a consumer never authors grid tracks or per-screen spacing (gh#223).
+ *
+ * `rail` chooses which region keeps the fixed track: `detail` (default) is the canonical fluid
+ * list + fixed detail rail; `master` is the leading navigator rail. Either way `master` comes
+ * first in DOM order, so below the threshold the regions stack list-then-detail.
+ *
+ * `masterViewport` bounds the collection (gh#231): `auto` (default) lets it grow with its content
+ * exactly as before, while `compact`/`standard` cap its block size with a token and scroll it
+ * INSIDE the region — the only thing that stops a long real collection from pushing the detail
+ * thousands of pixels below the fold once the layout stacks.
+ *
+ * SELECTION AND KEYBOARD STAY WITH THE CALLER — deliberately. The controls inside `master` may be
+ * a listbox, a tablist, a link list or toggle buttons, and only the caller knows which APG pattern
+ * applies; a layout that imposed one would fight it. What the layout DOES own is the wiring those
+ * patterns need: two named landmark regions, a stable `detailId` for `aria-controls`, and a
+ * `tabIndex={-1}` detail region so the app can move focus to the new detail after a selection.
+ */
+export declare function MasterDetail({ master, children, rail, railWidth, masterViewport, collapseBelow, masterLabel, detailLabel, detailId, }: MasterDetailProps): import("react").JSX.Element;

package/dist/components/layout/master-detail.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function MasterDetail({
+  master,
+  children,
+  rail = "detail",
+  railWidth = "standard",
+  masterViewport = "auto",
+  collapseBelow,
+  masterLabel,
+  detailLabel,
+  detailId
+}) {
+  const bounded = masterViewport !== "auto";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-master-detail",
+      "data-rail": rail,
+      "data-rail-width": railWidth,
+      "data-master-viewport": masterViewport,
+      "data-collapse-below": collapseBelow === void 0 ? void 0 : String(collapseBelow),
+      children: [
+        /* @__PURE__ */ jsx(
+          "section",
+          {
+            className: "ui-master-detail-master",
+            "aria-label": masterLabel,
+            tabIndex: bounded ? 0 : void 0,
+            children: master
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "section",
+          {
+            className: "ui-master-detail-detail",
+            id: detailId,
+            "aria-label": detailLabel,
+            tabIndex: -1,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MasterDetail
+};

package/dist/components/layout/org-switcher.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { OrgSwitcherProp } from "../../props/components/layout.prop.js";
+export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProp as OrgSwitcherProps, } from "../../props/components/layout.prop.js";
+/**
+ * Organization switcher with one stable shell contract: canonical trigger geometry, an optional
+ * status badge, a searchable desktop popover, a focus-trapped bottom Sheet at/below the shared
+ * `--sheet-responsive-breakpoint-width`, and explicit loading/empty/error states.
+ */
+export declare function OrgSwitcher({ organizations, value, onValueChange, collapsed, disabled, loading, error, onRetry, labels, responsive, open, onOpenChange, className, }: OrgSwitcherProp): React.JSX.Element;

package/dist/components/layout/org-switcher.js

@@ -0,0 +1,218 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronsUpDown, Loader2, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../data-entry/command.js";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+  useSheetResponsiveMode
+} from "../feedback/sheet.js";
+import { Button } from "../general/button.js";
+function OrganizationMark({ organization }) {
+  return /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-avatar", "aria-hidden": "true", children: organization?.avatar ?? organization?.name.trim().charAt(0).toUpperCase() ?? "?" });
+}
+function OrganizationBadge({ organization }) {
+  if (organization.badge == null) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "org-switcher-badge",
+      className: "shrink-0",
+      "aria-hidden": organization.badgeLabel != null ? "true" : void 0,
+      children: organization.badge
+    }
+  );
+}
+const OrgSwitcherTrigger = React.forwardRef(
+  ({ organization, collapsed, disabled, label, ...props }, ref) => {
+    const reactId = React.useId();
+    const badgeDescriptionId = !collapsed && organization?.badge != null && organization.badgeLabel != null ? `${reactId}-badge` : void 0;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        type: "button",
+        variant: "ghost",
+        className: "ui-org-switcher-trigger",
+        "data-collapsed": collapsed ? "true" : void 0,
+        disabled,
+        "aria-label": label,
+        "aria-describedby": badgeDescriptionId,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(OrganizationMark, { organization }),
+          !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-current", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-name", children: organization?.name ?? label }),
+              organization?.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-meta", children: organization.meta }) : null
+            ] }),
+            organization != null ? /* @__PURE__ */ jsx(OrganizationBadge, { organization }) : null,
+            badgeDescriptionId != null ? /* @__PURE__ */ jsx("span", { id: badgeDescriptionId, className: "sr-only", children: organization?.badgeLabel }) : null,
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ui-org-switcher-chevron", "aria-hidden": "true" })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+OrgSwitcherTrigger.displayName = "OrgSwitcherTrigger";
+function OrgSwitcherPanel({
+  organizations,
+  value,
+  onValueChange,
+  loading,
+  error,
+  onRetry,
+  labels,
+  close
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-org-switcher-state", role: "status", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ui-org-switcher-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: labels.loading })
+    ] });
+  }
+  if (error != null) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-org-switcher-state", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry != null ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }),
+        labels.retry
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Command, { label: labels.title, className: "ui-org-switcher-command", children: [
+    /* @__PURE__ */ jsx(CommandInput, { placeholder: labels.search, "aria-label": labels.search }),
+    /* @__PURE__ */ jsxs(CommandList, { children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
+      /* @__PURE__ */ jsx(CommandGroup, { children: organizations.map((organization) => {
+        const selected = organization.id === value;
+        return /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: `${organization.name} ${String(organization.meta ?? "")}`,
+            keywords: organization.badgeLabel != null ? [organization.id, organization.badgeLabel] : [organization.id],
+            disabled: organization.disabled,
+            onSelect: () => {
+              onValueChange?.(organization.id);
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsx(OrganizationMark, { organization }),
+              /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-option", children: [
+                /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-name", children: organization.name }),
+                organization.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-meta", children: organization.meta }) : null
+              ] }),
+              /* @__PURE__ */ jsx(OrganizationBadge, { organization }),
+              organization.badge != null && organization.badgeLabel != null ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: organization.badgeLabel }) : null,
+              selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Check, { className: "ui-org-switcher-check", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                  "(",
+                  labels.title,
+                  ")"
+                ] })
+              ] }) : null
+            ]
+          },
+          organization.id
+        );
+      }) })
+    ] })
+  ] });
+}
+function OrgSwitcher({
+  organizations,
+  value,
+  onValueChange,
+  collapsed = false,
+  disabled = false,
+  loading = false,
+  error,
+  onRetry,
+  labels,
+  responsive = "auto",
+  open,
+  onOpenChange,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const controlled = open !== void 0;
+  const resolvedOpen = controlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (!controlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [controlled, onOpenChange]
+  );
+  const compactViewport = useSheetResponsiveMode("auto") === "bottom";
+  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const current = organizations.find((organization) => organization.id === value);
+  const fallbackName = current?.name ?? labels.title;
+  const triggerLabel = labels.trigger(fallbackName);
+  const triggerDisabled = disabled;
+  const trigger = /* @__PURE__ */ jsx(
+    OrgSwitcherTrigger,
+    {
+      organization: current,
+      collapsed,
+      disabled: triggerDisabled,
+      label: triggerLabel
+    }
+  );
+  const panel = /* @__PURE__ */ jsx(
+    OrgSwitcherPanel,
+    {
+      organizations,
+      value,
+      onValueChange,
+      loading,
+      error,
+      onRetry,
+      labels,
+      close: () => setOpen(false)
+    }
+  );
+  if (sheet) {
+    return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          responsive: "bottom",
+          className: "ui-org-switcher-sheet",
+          style: {
+            "--sheet-bottom-max-height": "var(--org-switcher-sheet-max-height)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { title: labels.title }),
+            /* @__PURE__ */ jsx(SheetBody, { children: panel })
+          ]
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "ui-org-switcher-popover", "aria-label": labels.title, children: panel })
+  ] }) });
+}
+export {
+  OrgSwitcher
+};

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, headerLayout, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -44,6 +44,7 @@ function PageContainerRoot({
   linkComponent: LinkComponent = "a",
   density,
   variant = "default",
+  headerLayout = "stack",
   stickyFooter = false,
   footerReveal = "always",
   fill = false,
@@ -69,7 +70,7 @@ function PageContainerRoot({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", children: [
+        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", "data-layout": headerLayout, children: [
           breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
             "nav",
             {
@@ -100,7 +101,7 @@ function PageContainerRoot({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
               /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
               subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
             ] }),