@scalio-cloud/ui 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.14.0
+UI alignment round 1, follow-up (scalio-docs ADR 0042, Markus 2026-10-30).
+- `accountGroups({ lang, base, show })` and `accountArea(part)`: Konten und Rollen in the structure of the settings
+  page (groups Personen, Rechte, Sicherheit; one address per area, `/accounts/<area>`).
+- `SettingsLayout` takes `root` (e.g. "Konten und Rollen") for the crumb, title fallback and nav label.
+- `SubNav` with `value` and `onSelect` renders in-page tabs (buttons, `role="tablist"`).
+- New CSS classes `.scalio-tabs` / `.scalio-tab` in `nav.css`: in-page tabs (shadcn Tabs) look like the sub
+  navigation (underline, like Nexus "Gruppen").
+- **Visible change:** none until an app uses the new parts. No token changes.
+
 ## 0.13.0
 UI alignment round 1 (scalio-docs ADR 0041).
 - `editionBadges(license, { admin, demo, lang })` and `EditionBadges`: edition badge next to the product name from the

package/nav.css

@@ -48,6 +48,17 @@
 .scalio-subnav-item:hover { color: hsl(var(--foreground)); }
 .scalio-subnav-item.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
 .scalio-subnav-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+/* In-page tabs (shadcn/Radix Tabs in the apps: TabsList = .scalio-tabs, TabsTrigger = .scalio-tab) look like the sub navigation. */
+.scalio-tabs { display: flex; align-items: flex-end; gap: 0.25rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; background: transparent; }
+.scalio-tab {
+  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
+  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer;
+  font: inherit; font-size: 0.875rem; color: hsl(var(--muted-foreground));
+}
+.scalio-tab:hover { color: hsl(var(--foreground)); }
+.scalio-tab[data-state="active"], .scalio-tab.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-tab:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.scalio-tab:disabled { opacity: 0.5; pointer-events: none; }
 .scalio-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
 .scalio-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .scalio-nav-badge {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/labels.js

@@ -50,6 +50,7 @@ const LABELS = {
       graceDays: "Kulanz {n} T",
       graceTip: "Diese Version liegt nach Ihrem Lizenzdatum und wechselt nach der Kulanzzeit in den Nur-Lesen-Modus.",
     },
+    accountGroups: { people: "Personen", access: "Rechte" },
     accountTabs: { users: "Benutzer", roles: "Rollen", entra: "Microsoft Entra", signIn: "Anmeldung", organizations: "Organisationen" },
     passwordPolicy: {
       label: "Anmeldung mit Passwort",
@@ -278,6 +279,7 @@ const LABELS = {
       graceDays: "Grace {n} d",
       graceTip: "This version is past your license date and turns read-only after the grace period.",
     },
+    accountGroups: { people: "People", access: "Permissions" },
     accountTabs: { users: "Users", roles: "Roles", entra: "Microsoft Entra", signIn: "Sign-in", organizations: "Organizations" },
     passwordPolicy: {
       label: "Password sign-in",

package/react/nav.js

@@ -144,16 +144,23 @@ function Sidebar(props) {
 
 // Tabs as links on top of a page, for pages that belong together under one menu item
 // (e.g. Gruppen: Sicherheit, Verteiler, Microsoft 365, Teams). Each tab keeps its own address.
-function SubNav({ items, link, activePath, label, testId }) {
+// Tabs: as links (items with `to`, the router decides what is shown) or, with `onSelect`, as in-page tabs
+// (items with `id`, `value` is the active one). Both look the same (UISPEC: tabs like Nexus "Gruppen").
+function SubNav({ items, link, activePath, label, testId, value, onSelect }) {
   const visible = (items || []).filter((i) => i && !i.hidden);
   if (visible.length < 2) return null;
+  const buttons = typeof onSelect === "function";
   return h(
     "nav",
-    { className: "scalio-subnav", "aria-label": label || undefined, "data-testid": testId || "subnav" },
+    { className: "scalio-subnav", "aria-label": label || undefined, role: buttons ? "tablist" : undefined, "data-testid": testId || "subnav" },
     visible.map((item) => {
-      const tid = item.testId || `subnav-${slug(item.to)}`;
+      const tid = item.testId || `subnav-${buttons ? item.id : slug(item.to)}`;
       const cls = (active) => cx("scalio-subnav-item", active && "is-active");
       const content = [item.label, item.badge != null && item.badge !== false ? h("span", { key: "b", className: "scalio-nav-badge" }, item.badge) : null];
+      if (buttons) {
+        const active = item.id === value;
+        return h("button", { key: item.id, type: "button", role: "tab", "aria-selected": active, className: cls(active), onClick: () => onSelect(item.id), "data-testid": tid }, content);
+      }
       if (link) {
         return h(link, { key: item.to, to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), "data-testid": tid }, content);
       }

package/react/settings.js

@@ -57,9 +57,11 @@ function findSetting(groups, id) {
 // link: the router's NavLink for the list (optional, without it plain links + onSelect).
 // minItems: below this many areas the sub-navigation is left out (Citadel, Foundry), default 3.
 // search: true (default, filters the list), false, or the app's own search element.
+// root: label of the page when it is not the settings page (e.g. "Konten und Rollen"): crumb and nav label.
 function SettingsLayout(props) {
-  const { groups, active, onSelect, link, lang, labels, title, hint, actions, children, minItems, search, testId } = props;
+  const { groups, active, onSelect, link, lang, labels, title, hint, actions, children, minItems, search, testId, root } = props;
   const L = labelsFor(lang, labels);
+  const rootLabel = root || L.settings;
   const visible = settingsGroups(groups, L);
   const [query, setQuery] = React.useState("");
   const current = findSetting(visible, active);
@@ -126,7 +128,7 @@ function SettingsLayout(props) {
   const nav = showNav
     ? h(
         "nav",
-        { className: "scalio-settings-nav", "aria-label": L.settings, "data-testid": "settings-nav" },
+        { className: "scalio-settings-nav", "aria-label": rootLabel, "data-testid": "settings-nav" },
         searchBox,
         // Phones: one select instead of the list.
         h(
@@ -162,7 +164,7 @@ function SettingsLayout(props) {
       )
     : null;
 
-  const heading = title || (current && current.item.label) || L.settings;
+  const heading = title || (current && current.item.label) || rootLabel;
   const sub = hint !== undefined ? hint : current && current.item.hint;
   return h(
     "div",
@@ -180,7 +182,7 @@ function SettingsLayout(props) {
           h(
             "div",
             { className: "scalio-eyebrow", "data-testid": "settings-crumb" },
-            current && showNav ? `${L.settings} › ${current.group.label}` : L.settings
+            current && showNav ? `${rootLabel} › ${current.group.label}` : rootLabel
           ),
           h("h1", { className: "scalio-page-title", "data-testid": "settings-title" }, heading),
           sub ? h("p", { className: "scalio-page-subtitle" }, sub) : null

package/react/unify.js

@@ -139,6 +139,30 @@ function accountTabs(opts) {
   return ["users", "roles", "entra", "signIn", "organizations"].filter((id) => show[id]).map((id) => ({ id, label: L[id] }));
 }
 
+// Konten und Rollen in the structure of the settings page (SettingsLayout, UISPEC): areas on the left in groups,
+// one address per area (<base>/users, /organizations, /roles, /entra, /sign-in).
+const ACCOUNT_AREAS = { users: "users", organizations: "organizations", roles: "roles", entra: "entra", signIn: "sign-in" };
+
+function accountGroups(opts) {
+  const o = opts || {};
+  const all = labelsFor(o.lang, o.labels);
+  const L = all.accountTabs;
+  const base = (o.base || "/accounts").replace(/\/$/, "");
+  const show = Object.assign({ users: true, roles: true, entra: true, signIn: true, organizations: false }, o.show);
+  const item = (id) => ({ id, to: `${base}/${ACCOUNT_AREAS[id]}`, label: L[id], hidden: !show[id] });
+  return [
+    { id: "people", label: all.accountGroups.people, items: [item("users"), item("organizations")] },
+    { id: "access", label: all.accountGroups.access, items: [item("roles"), item("entra")] },
+    { id: "security", label: all.settingsGroups.security, items: [item("signIn")] },
+  ].map((g) => Object.assign({}, g, { items: g.items.filter((i) => !i.hidden) })).filter((g) => g.items.length);
+}
+
+// Area id from the address part (/accounts/sign-in -> signIn); unknown -> users.
+function accountArea(part) {
+  for (const id of Object.keys(ACCOUNT_AREAS)) if (part === id || part === ACCOUNT_AREAS[id]) return id;
+  return "users";
+}
+
 // Password sign-in: "local" (everybody), "emergency" (only emergency administrators), "off" (Microsoft only).
 // "emergency" and "off" need at least one emergency administrator; without one they stay disabled.
 const PASSWORD_POLICIES = ["local", "emergency", "off"];
@@ -189,6 +213,8 @@ module.exports = {
   useApiStatus,
   ApiStatus,
   accountTabs,
+  accountGroups,
+  accountArea,
   PASSWORD_POLICIES,
   policyAllowed,
   PasswordPolicySelect,