@k2b/cloud 0.33.0 → 0.34.0

package/src/ssr/LayoutHelpTrigger.tsx

@@ -2,7 +2,6 @@ import { IconButton, Tooltip, useLocale } from "@k2b/ui";
 import { importOnDemand } from "../browser/reload";
 import { createBusyAction } from "./busy-action";
 import { platformMessages } from "./platform-messages";
-import { useShellData } from "./shell-data";
 
 type LayoutHelpTriggerProps = {
   variant: "header" | "rail";
@@ -13,12 +12,11 @@ type LayoutHelpTriggerProps = {
 export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
-  const data = useShellData();
   const action = createBusyAction();
   const openHelp = () =>
     action.run(
       () => importOnDemand(() => import("./LayoutHelp")),
-      (help) => help.openLayoutHelpDialog(data?.searchHelpApps ?? [], data?.accent),
+      (help) => help.openLayoutHelpDialog(),
     );
 
   if (props.variant === "rail")

package/src/ssr/LayoutPreferences.tsx

@@ -12,10 +12,20 @@ export default function LayoutPreferences(props: LayoutPreferencesProps) {
   const preferences = createPreferenceController(props.initialTheme, locale);
 
   return (
-    <Dropdown.Root items={preferences.items()} label={preferences.messages().preferencesMenuLabel} position={props.position} width="14rem">
-      <Dropdown.Trigger iconOnly label={preferences.messages().preferencesMenuLabel} size="sm" variant="secondary">
-        <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
-      </Dropdown.Trigger>
-    </Dropdown.Root>
+    <>
+      <Dropdown.Root
+        items={preferences.items()}
+        label={preferences.messages().preferencesMenuLabel}
+        position={props.position}
+        width="14rem"
+      >
+        <Dropdown.Trigger iconOnly label={preferences.messages().preferencesMenuLabel} size="sm" variant="secondary">
+          <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
+        </Dropdown.Trigger>
+      </Dropdown.Root>
+      <span class="sr-only" aria-live="polite">
+        {preferences.themeAnnouncement()}
+      </span>
+    </>
   );
 }

package/src/ssr/MinimalLayoutPreferences.island.tsx

@@ -3,13 +3,13 @@ import { canonicalLocale } from "../shared/locale";
 import { type ProfilePreferenceLocale, profilePreferenceLocale, setLocalePreference } from "../shared/locale-preference";
 import type { CloudThemePreference } from "../shared/theme";
 import { createPreferenceController } from "./preference-controller";
+import { ThemeCycleButton } from "./ThemeCycleButton";
 
-/** Both menus name the current choice; compact triggers keep accessible names below md. */
+/** Language opens a menu; appearance cycles in place and keeps its accessible name below md. */
 export default function MinimalLayoutPreferences(props: { initialTheme: CloudThemePreference }) {
   const locale = useLocale();
   const preferences = createPreferenceController(props.initialTheme, locale);
   const t = preferences.messages;
-  const currentTheme = () => preferences.themeOption(preferences.theme());
   const language = () => profilePreferenceLocale(locale());
   const languageName = () => (language() === "de" ? t().switchToGerman : t().switchToEnglish);
   // Keep a regional locale such as en-GB when its language is chosen again,
@@ -37,13 +37,7 @@ export default function MinimalLayoutPreferences(props: { initialTheme: CloudThe
           <i class="ti ti-chevron-down hidden md:inline" aria-hidden="true" />
         </Dropdown.Trigger>
       </Dropdown.Root>
-      <Dropdown.Root label={t().appearance} position="top-right" width="12rem" items={preferences.appearance().items}>
-        <Dropdown.Trigger label={`${t().appearance}: ${currentTheme().label}`} size="sm" tooltip={false} variant="ghost">
-          <i class={currentTheme().icon} aria-hidden="true" />
-          <span class="hidden md:inline">{currentTheme().label}</span>
-          <i class="ti ti-chevron-down hidden md:inline" aria-hidden="true" />
-        </Dropdown.Trigger>
-      </Dropdown.Root>
+      <ThemeCycleButton preferences={preferences} size="sm" variant="ghost" compact />
     </div>
   );
 }

package/src/ssr/MobileProfileActions.tsx

@@ -1,7 +1,8 @@
 import { documentNavigate } from "@k2b/ssr/nav";
-import { Button, ButtonLink, SegmentedControl } from "@k2b/ui";
+import { Button, ButtonLink } from "@k2b/ui";
 import type { CloudThemePreference } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
+import { ThemeCycleButton } from "./ThemeCycleButton";
 
 export function MobileProfileActions(props: {
   profile: { name: string; theme: CloudThemePreference; appHref?: string };
@@ -17,13 +18,7 @@ export function MobileProfileActions(props: {
   };
   return (
     <section class="cloud-mobile-profile" aria-label={preferences.messages().menuLabel}>
-      <SegmentedControl
-        class="cloud-mobile-profile__appearance"
-        ariaLabel={preferences.messages().appearance}
-        options={preferences.themeOptions()}
-        value={preferences.theme}
-        onValueChange={preferences.setTheme}
-      />
+      <ThemeCycleButton preferences={preferences} variant="ghost" />
       <ButtonLink href="/me" variant="ghost" onClick={navigate("/me")}>
         <i class="ti ti-user-circle" aria-hidden="true" />
         {preferences.messages().profileSettings}

package/src/ssr/ProfilePreferences.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Dropdown, SegmentedControl } from "@k2b/ui";
+import { Avatar, Dropdown } from "@k2b/ui";
 import type { CloudThemePreference } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
 
@@ -26,15 +26,10 @@ export default function ProfilePreferences(props: ProfilePreferencesProps) {
         {avatar()}
       </button>
       <div class="layout-profile-preferences__panel dropdown-menu-surface">
-        <div class="layout-profile-preferences__appearance">
-          <SegmentedControl
-            size="sm"
-            ariaLabel={preferences.messages().appearance}
-            options={preferences.themeOptions().map(({ value, label }) => ({ value, label }))}
-            value={preferences.theme}
-            onValueChange={preferences.setTheme}
-          />
-        </div>
+        <button type="button" class="menu-item" aria-label={preferences.themeCycleLabel()} onClick={preferences.cycleTheme}>
+          <i class={preferences.themeOption(preferences.theme()).icon} aria-hidden="true" />
+          <span>{preferences.themeOption(preferences.theme()).label}</span>
+        </button>
         <button type="button" class="menu-item" onClick={preferences.toggleLanguage}>
           <i class="ti ti-language" aria-hidden="true" />
           <span>{preferences.languageLabel()}</span>
@@ -71,6 +66,9 @@ export default function ProfilePreferences(props: ProfilePreferencesProps) {
           {avatar()}
         </Dropdown.Trigger>
       </Dropdown.Root>
+      <span class="sr-only" aria-live="polite">
+        {preferences.themeAnnouncement()}
+      </span>
     </div>
   );
 }

package/src/ssr/ShellRuntime.island.tsx

@@ -128,11 +128,7 @@ export default function ShellRuntime(props: ShellRuntimeProps) {
           icon: "ti ti-help-circle",
           shortcut: "shift+/",
           // Returning the load keeps the Command busy until the dialog is open; a second press opens no second dialog.
-          action: () =>
-            importOnDemand(() => import("./LayoutHelp")).then((help) => {
-              const data = readShellData();
-              help?.openLayoutHelpDialog(data?.searchHelpApps ?? [], data?.accent);
-            }),
+          action: () => importOnDemand(() => import("./LayoutHelp")).then((help) => help?.openLayoutHelpDialog()),
         }),
       ),
     );

package/src/ssr/ThemeCycleButton.tsx

@@ -0,0 +1,46 @@
+import { Button, type ButtonSize, type ButtonVariant } from "@k2b/ui";
+import { type createPreferenceController, THEME_CYCLE } from "./preference-controller";
+
+type Props = {
+  preferences: ReturnType<typeof createPreferenceController>;
+  variant: ButtonVariant;
+  size?: ButtonSize;
+  /** Shows only the icon below `md`; the accessible name still states the choice. */
+  compact?: boolean;
+};
+
+/**
+ * One button for the appearance: it shows the current choice and each click switches to the next. The label reserves
+ * the width of the two other choices, so the button and its neighbors stay in place.
+ */
+export function ThemeCycleButton(props: Props) {
+  const current = () => props.preferences.themeOption(props.preferences.theme());
+  const otherLabels = () =>
+    THEME_CYCLE.filter((value) => value !== props.preferences.theme()).map((value) => props.preferences.themeOption(value).label);
+
+  return (
+    <>
+      <Button
+        type="button"
+        class="cloud-theme-cycle"
+        variant={props.variant}
+        size={props.size}
+        aria-label={props.preferences.themeCycleLabel()}
+        onClick={props.preferences.cycleTheme}
+      >
+        <i class={current().icon} aria-hidden="true" />
+        <span
+          class="cloud-theme-cycle__label"
+          data-compact={props.compact ? "true" : undefined}
+          data-reserve-a={otherLabels()[0]}
+          data-reserve-b={otherLabels()[1]}
+        >
+          <span>{current().label}</span>
+        </span>
+      </Button>
+      <span class="sr-only" aria-live="polite">
+        {props.preferences.themeAnnouncement()}
+      </span>
+    </>
+  );
+}

package/src/ssr/app-appearance.ts

@@ -1,5 +1,6 @@
 import type { AppAppearance } from "../contracts/app";
 import { resolveRuntimeRoute } from "./app-navigation";
+import { helpPageAppId } from "./layout-help-url";
 import type { RuntimeContext } from "./runtime";
 
 const isHexColor = (value: string | undefined): value is `#${string}` => /^#[0-9a-f]{6}$/i.test(value ?? "");
@@ -20,4 +21,8 @@ export const appAppearanceStyle = (appearance: AppAppearance | undefined): strin
 export const appAccentStyle = (accent: string | undefined): string | undefined =>
   isHexColor(accent) ? `--app-accent:${accent}` : undefined;
 
-export const resolveCurrentApp = (apps: RuntimeContext["apps"], pathname: string) => resolveRuntimeRoute(apps, pathname)?.app;
+/** Core's full-page Help of an app belongs to that app. */
+export const resolveCurrentApp = (apps: RuntimeContext["apps"], pathname: string) => {
+  const helpAppId = helpPageAppId(pathname);
+  return apps.find((app) => app.id === helpAppId) ?? resolveRuntimeRoute(apps, pathname)?.app;
+};

package/src/ssr/layout-help-url.ts

@@ -3,3 +3,42 @@ export const layoutHelpTopicHref = (pageBase: string, topicId: string | null) =>
   const base = pageBase.endsWith("/") ? pageBase.slice(0, -1) : pageBase;
   return topicId ? `${base}/${encodeURIComponent(topicId)}` : base;
 };
+
+/** The app named by Core's exact full-page Help route. */
+export const helpPageAppId = (pathname: string): string | null => {
+  const match = /^\/help\/apps\/([^/]+)(?:\/[^/]+)?\/?$/.exec(pathname);
+  if (!match?.[1]) return null;
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return null;
+  }
+};
+
+type HelpLinkTarget = { kind: "section"; hash: string } | { kind: "topic"; topicId: string | null; hash: string };
+
+/** Same-app Help links that the reader can open in place. */
+export const helpLinkTarget = (href: string, current: string, help: { appId?: string; pageBase?: string }): HelpLinkTarget | null => {
+  try {
+    if (href.startsWith("#")) {
+      const hash = decodeURIComponent(href.slice(1));
+      return hash ? { kind: "section", hash } : null;
+    }
+    const source = new URL(current);
+    const target = new URL(href, source);
+    if (target.origin !== source.origin || target.search) return null;
+    const bases = [help.pageBase?.replace(/\/$/, ""), help.appId ? `/help/apps/${encodeURIComponent(help.appId)}` : undefined];
+    const hash = decodeURIComponent(target.hash.slice(1));
+    for (const base of bases) {
+      if (!base) continue;
+      const path = target.pathname.replace(/\/$/, "");
+      if (path === base) return { kind: "topic", topicId: null, hash };
+      if (!path.startsWith(`${base}/`)) continue;
+      const segment = path.slice(base.length + 1);
+      if (segment && !segment.includes("/")) return { kind: "topic", topicId: decodeURIComponent(segment), hash };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+};

package/src/ssr/platform-messages.ts

@@ -56,10 +56,6 @@ export const platformMessages = i18n.define({
       latestPlatformUpdates: "Latest platform updates",
       gotIt: "Got it",
       dismissBanner: "Dismiss banner",
-      searchTags: "Search tags",
-      searchTagsDescription: ({ tag }: { tag: string }) => `Use ${tag} to narrow your search. You can combine text and multiple tags.`,
-      tags: "Tags",
-      noAppSearchTags: "No app-specific search tags are available.",
       openGlobalSearch: "Open global search",
       globalSearchDescription: "Search across apps, pages, files, and items.",
       searchShortcut: "Search (⌘/Ctrl+K)",
@@ -127,10 +123,6 @@ export const platformMessages = i18n.define({
       latestPlatformUpdates: "Neuigkeiten zur Plattform",
       gotIt: "Verstanden",
       dismissBanner: "Banner ausblenden",
-      searchTags: "Such-Tags",
-      searchTagsDescription: ({ tag }) => `Verwende ${tag} für eine gezieltere Suche. Text und mehrere Tags lassen sich kombinieren.`,
-      tags: "Tags",
-      noAppSearchTags: "Keine app-spezifischen Such-Tags verfügbar.",
       openGlobalSearch: "Globale Suche öffnen",
       globalSearchDescription: "Apps, Seiten, Dateien und weitere Inhalte durchsuchen.",
       searchShortcut: "Suchen (⌘/Strg+K)",

package/src/ssr/preference-controller.ts

@@ -1,15 +1,19 @@
-import type { DropdownAction, DropdownItem, DropdownSection } from "@k2b/ui";
+import type { DropdownAction, DropdownItem } from "@k2b/ui";
 import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { profilePreferenceLocale, setLocalePreference } from "../shared/locale-preference";
 import { type CloudThemePreference, getCurrentThemePreference, setThemePreference } from "../shared/theme";
 import { profilePreferencesMessages } from "./profile-preferences-messages";
 
 const THEME_PREFERENCE_EVENT = "cloud:theme-preference";
-const THEME_PREFERENCES = ["light", "dark", "system"] as const satisfies readonly CloudThemePreference[];
-const THEME_ICONS: Record<CloudThemePreference, string> = { light: "ti ti-sun-high", dark: "ti ti-moon", system: "ti ti-sun-moon" };
+export const THEME_CYCLE = ["system", "light", "dark"] as const satisfies readonly CloudThemePreference[];
+const THEME_ICONS: Record<CloudThemePreference, string> = { light: "ti ti-sun-high", dark: "ti ti-moon", system: "ti ti-device-laptop" };
+
+export const nextThemePreference = (current: CloudThemePreference): CloudThemePreference =>
+  THEME_CYCLE[(THEME_CYCLE.indexOf(current) + 1) % THEME_CYCLE.length]!;
 
 export const createPreferenceController = (initialTheme: CloudThemePreference, locale: () => string) => {
   const [theme, updateTheme] = createSignal(initialTheme);
+  const [announcedTheme, setAnnouncedTheme] = createSignal<CloudThemePreference>();
   const messages = () => profilePreferencesMessages.resolve([locale()]).t;
   const language = () => profilePreferenceLocale(locale());
   const nextLanguage = () => (language() === "de" ? "en" : "de");
@@ -22,7 +26,10 @@ export const createPreferenceController = (initialTheme: CloudThemePreference, l
   const toggleLanguage = () => setLocalePreference(nextLanguage());
 
   onMount(() => {
-    const syncTheme = () => updateTheme(getCurrentThemePreference());
+    const syncTheme = () => {
+      const syncedTheme = updateTheme(getCurrentThemePreference());
+      if (syncedTheme !== announcedTheme()) setAnnouncedTheme(undefined);
+    };
     syncTheme();
     window.addEventListener(THEME_PREFERENCE_EVENT, syncTheme);
     onCleanup(() => window.removeEventListener(THEME_PREFERENCE_EVENT, syncTheme));
@@ -33,21 +40,48 @@ export const createPreferenceController = (initialTheme: CloudThemePreference, l
     icon: THEME_ICONS[value],
     label: { light: messages().themeLight, dark: messages().themeDark, system: messages().themeSystem }[value],
   });
-  const themeOptions = () => THEME_PREFERENCES.map(themeOption);
-  const appearance = (): DropdownSection => ({
-    sectionLabel: messages().appearance,
-    layout: "row",
-    items: themeOptions().map(({ value, label, icon }) => ({
-      label,
-      icon,
-      choice: "radio",
-      checked: () => theme() === value,
-      closeOnSelect: false,
-      action: () => setTheme(value),
-    })),
-  });
+  const cycleTheme = () => {
+    const next = nextThemePreference(theme());
+    setTheme(next);
+    setAnnouncedTheme(next);
+  };
+  const themeCycleLabel = () =>
+    messages().themeCycle({
+      current: themeOption(theme()).label,
+      next: themeOption(nextThemePreference(theme())).label,
+    });
+  const themeAnnouncement = () => {
+    const current = announcedTheme();
+    return current === undefined ? "" : messages().themeChanged({ current: themeOption(current).label });
+  };
+  const appearanceItem: DropdownAction = {
+    get icon() {
+      return themeOption(theme()).icon;
+    },
+    get label() {
+      return themeOption(theme()).label;
+    },
+    get ariaLabel() {
+      return themeCycleLabel();
+    },
+    closeOnSelect: false,
+    action: cycleTheme,
+  };
   const languageItem = (): DropdownAction => ({ action: toggleLanguage, icon: "ti ti-language", label: languageLabel() });
-  const items = createMemo<DropdownItem[]>(() => [appearance(), { items: [languageItem()] }]);
+  const items = createMemo<DropdownItem[]>(() => [appearanceItem, languageItem()]);
 
-  return { items, appearance, languageItem, themeOption, themeOptions, language, languageLabel, messages, theme, setTheme, toggleLanguage };
+  return {
+    items,
+    appearanceItem,
+    languageItem,
+    themeOption,
+    language,
+    languageLabel,
+    messages,
+    theme,
+    cycleTheme,
+    themeCycleLabel,
+    themeAnnouncement,
+    toggleLanguage,
+  };
 };

package/src/ssr/profile-actions.ts

@@ -31,23 +31,19 @@ export function createProfileActions(initialTheme: CloudThemePreference, appHref
   };
 
   const items = createMemo<DropdownItem[]>(() => [
-    preferences.appearance(),
+    preferences.appearanceItem,
+    preferences.languageItem(),
     {
-      items: [
-        preferences.languageItem(),
-        {
-          href: "/me",
-          icon: "ti ti-user-circle",
-          label: preferences.messages().profileSettings,
-        },
-        ...(appHref ? [{ href: appHref, icon: "ti ti-device-mobile", label: preferences.messages().app }] : []),
-        {
-          action: signOut,
-          icon: "ti ti-logout",
-          label: preferences.messages().signOut,
-          disabled: signingOut(),
-        },
-      ],
+      href: "/me",
+      icon: "ti ti-user-circle",
+      label: preferences.messages().profileSettings,
+    },
+    ...(appHref ? [{ href: appHref, icon: "ti ti-device-mobile", label: preferences.messages().app }] : []),
+    {
+      action: signOut,
+      icon: "ti ti-logout",
+      label: preferences.messages().signOut,
+      disabled: signingOut(),
     },
   ]);
 

package/src/ssr/profile-preferences-messages.ts

@@ -12,10 +12,11 @@ export const profilePreferencesMessages = i18n.define({
       app: "App",
       signOut: "Sign out",
       signOutFailed: "Sign out failed. Please try again.",
-      appearance: "Appearance",
       themeLight: "Light",
       themeDark: "Dark",
       themeSystem: "Automatic",
+      themeCycle: ({ current, next }: { current: string; next: string }) => `Appearance: ${current}. Switches to ${next}.`,
+      themeChanged: ({ current }: { current: string }) => `Appearance: ${current}`,
       switchToGerman: "Deutsch",
       switchToEnglish: "English",
     },
@@ -28,10 +29,11 @@ export const profilePreferencesMessages = i18n.define({
       app: "App",
       signOut: "Abmelden",
       signOutFailed: "Abmelden fehlgeschlagen. Bitte versuche es erneut.",
-      appearance: "Darstellung",
       themeLight: "Hell",
       themeDark: "Dunkel",
       themeSystem: "Automatisch",
+      themeCycle: ({ current, next }) => `Darstellung: ${current}. Wechselt zu ${next}.`,
+      themeChanged: ({ current }) => `Darstellung: ${current}`,
       switchToGerman: "Deutsch",
       switchToEnglish: "English",
     },

package/src/ssr/rail-navigation.ts

@@ -1,4 +1,5 @@
 import type { RailPreferences, RailSnapshot } from "../contracts/rail-preferences";
+import { helpPageAppId } from "./layout-help-url";
 
 export type RailApp = {
   id: string;
@@ -55,6 +56,8 @@ export const projectRailNavigation = (apps: readonly RailApp[], settings: RailSn
 /** `currentPath` is the route as `pathname + search`; an absolute URL is accepted but never required. */
 export const railLinkActive = (link: RailLink, currentPath: string): boolean => {
   const current = new URL(currentPath, "https://cloud.invalid");
+  const helpAppId = helpPageAppId(current.pathname);
+  if (helpAppId && link.appId) return link.appId === helpAppId;
   const target = new URL(link.match, current);
   if (target.origin !== current.origin) return false;
   if (link.exact) return target.pathname === current.pathname && target.search === current.search && target.hash === current.hash;

package/src/ssr/shell-data.tsx

@@ -3,7 +3,6 @@ import type { AppSearchLink } from "../contracts/app";
 import type { RailSnapshot } from "../contracts/rail-preferences";
 import type { CloudThemePreference } from "../shared/theme";
 import type { AppLaunchpadLegalLink } from "./app-launchpad";
-import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
 import type { RailApp } from "./rail-navigation";
 
 export type ShellData = {
@@ -19,7 +18,8 @@ export type ShellData = {
   accent?: string;
   /** The search destinations of each app in `apps`, by app id in registry order; the search host expands them into rows. */
   searchLinks: Record<string, readonly AppSearchLink[]>;
-  searchHelpApps: GlobalSearchHelpApp[];
+  /** The current app, for links inside its Help. */
+  appId?: string;
 };
 
 const ShellDataContext = createContext<() => ShellData>();

package/src/styles/effects.css

@@ -345,12 +345,22 @@
   background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 10%, var(--ui-surface-muted));
 }
 
+/* The reader's layout steps follow its own width: a dialog, a full page, or
+   an app's embedded reader, never the window. */
+.help-article {
+  container: help-article / inline-size;
+}
+
+.help-article-toc[data-empty] {
+  visibility: hidden;
+}
+
 .help-article-layout {
   display: grid;
   grid-template-columns: minmax(10rem, 13rem) minmax(0, 52rem);
   justify-content: center;
   align-items: start;
-  gap: clamp(2rem, 4vw, 4rem);
+  gap: clamp(2rem, 4cqi, 4rem);
 }
 
 .help-article-copy {
@@ -892,7 +902,7 @@
   border: 0;
 }
 
-@media (max-width: 72rem) {
+@container help-article (max-width: 56rem) {
   .help-article-layout {
     grid-template-columns: 3.25rem minmax(0, 52rem);
     gap: 2rem;
@@ -919,7 +929,7 @@
   }
 }
 
-@media (max-width: 48rem) {
+@container help-article (max-width: 40rem) {
   .help-article-layout {
     grid-template-columns: minmax(0, 1fr);
     gap: 1.5rem;

package/src/styles/global.css

@@ -303,6 +303,10 @@ solid-island {
      so short and long pages keep the same width. Full-page surfaces own their
      inner scrolling. */
   html:has(.cloud-app-canvas:not([data-layout-full-page])) { scrollbar-gutter: stable; }
+  /* A page that scrolls its content in a ScrollArea grows with it here, so
+     the area does not scroll and reserves no second gutter beside the
+     document's. From md, `main` bounds its height and it scrolls. */
+  .cloud-app-canvas:not([data-layout-full-page]) .layout-content-main > .k2b-scroll-area { scrollbar-gutter: auto; }
   .cloud-app-canvas > .layout-shell-content { gap: 0; }
   .cloud-app-canvas .layout-header {
     border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border);
@@ -316,6 +320,29 @@ solid-island {
 
 }
 
+/* Card: the outermost workspace is the app card, so it gets the card's radius
+   and frame also when it is flat. Its sidebar and content round their corners
+   with that radius and clip what they show. A workspace that is `main`'s own
+   child fills `main` and scrolls inside itself, so `main` neither scrolls nor
+   clips: it keeps no scrollbar gutter beside the card, the card keeps the
+   shell spacing on every side, and its frame shadow shows in that spacing. A
+   workspace nested in other page content leaves `main` the page scroller. For
+   signed-in people, the flush range below removes the frame again; it comes
+   later at equal specificity. */
+@media (min-width: 768px) {
+  .cloud-app-canvas .layout-content-main:has(> .k2b-app-workspace, > :is(solid-island, solid-client) > .k2b-app-workspace) {
+    overflow: visible;
+    scrollbar-gutter: auto;
+  }
+  .cloud-app-canvas .layout-content-main .k2b-app-workspace[data-flat="true"]:not(.k2b-app-workspace *) {
+    --k2b-workspace-radius: var(--k2b-radius-dialog);
+    box-shadow: var(--k2b-shadow-frame);
+  }
+  .dark .cloud-app-canvas .layout-content-main .k2b-app-workspace[data-flat="true"]:not(.k2b-app-workspace *) {
+    border-color: var(--k2b-border);
+  }
+}
+
 /* Flush: the app area is one opaque surface from the rail to the window's
    edges, without padding, radius, shadow, or border. The rail keeps the app
    canvas, so the change of surface alone separates the two; no line does. The
@@ -388,4 +415,3 @@ solid-island {
 }
 .cloud-mobile-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border-top: 1px solid var(--ui-border); padding-top: 1rem; }
 .cloud-mobile-profile > :is(a, button) { min-height: 2.75rem; white-space: normal; text-align: start; justify-content: flex-start; }
-.cloud-mobile-profile__appearance { grid-column: 1 / -1; }

package/src/styles/input.css

@@ -38,10 +38,6 @@ button[disabled],
     @apply text-white;
   }
 
-  input[type="checkbox"]:hover {
-    transform: var(--ui-check-hover-transform);
-  }
-
   input[type="checkbox"]:focus {
     @apply outline-none;
   }
@@ -53,8 +49,4 @@ button[disabled],
   input[type="checkbox"]:disabled {
     @apply opacity-50 cursor-not-allowed;
   }
-
-  input[type="checkbox"]:disabled:hover {
-    transform: none;
-  }
 }

package/src/styles/tokens.css

@@ -38,7 +38,6 @@
   --ui-check-surface: var(--ui-field);
   --ui-check-border: var(--ui-border-strong);
   --ui-check-shadow: none;
-  --ui-check-hover-transform: none;
   --ui-data-header: var(--ui-surface-subtle);
   --ui-data-divider: var(--ui-border);
   --ui-data-row-divider: color-mix(in srgb, var(--ui-border) 72%, transparent);
@@ -165,7 +164,6 @@
   --ui-check-surface: var(--ui-field);
   --ui-check-border: var(--ui-border-strong);
   --ui-check-shadow: none;
-  --ui-check-hover-transform: none;
   --ui-data-row-hover: rgb(255 255 255 / 0.045);
   --ui-data-column-hover: rgb(255 255 255 / 0.018);
   --ui-dropdown-menu-surface: var(--ui-surface-raised);

package/src/styles/utilities-navigation.css

@@ -883,19 +883,6 @@
   transition: opacity 120ms ease-out;
 }
 
-.layout-profile-preferences__appearance {
-  padding: 0.125rem 0.125rem 0.25rem;
-}
-
-.layout-profile-preferences__appearance .k2b-segmented-control {
-  width: 100%;
-}
-
-/* Content-sized segments: "Automatisch" needs more room than "Hell" in the narrow panel. */
-.layout-profile-preferences__appearance .k2b-segmented-control__option {
-  flex: 1 1 auto;
-}
-
 .dark .layout-profile-preferences__panel {
   color: var(--color-zinc-300);
 }
@@ -945,6 +932,16 @@
   }
 }
 
+/* Reserves the width of the longest appearance label, so cycling never resizes the button. */
+.cloud-theme-cycle__label { display: inline-grid; justify-items: start; }
+.cloud-theme-cycle__label::before { content: attr(data-reserve-a); }
+.cloud-theme-cycle__label::after { content: attr(data-reserve-b); }
+.cloud-theme-cycle__label::before, .cloud-theme-cycle__label::after { height: 0; overflow: hidden; visibility: hidden; }
+
+@media (width < 48rem) {
+  .cloud-theme-cycle__label[data-compact] { display: none; }
+}
+
 /* MinimalLayout stacks the page content and its footer in a column at least
    one viewport tall, so the footer ends a short page and follows a long one.
    Content that should fill the remaining height grows with flex-1. */