diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e0df1ce..27452ae 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,6 +10,8 @@ npm start
 
 The repository pins its Node.js version in `.nvmrc` and its npm version in `package.json`.
 
+For a phone on the same trusted network, use `npm run start:network` and open the printed `Network` URL.
+
 `sushi/` is the published Angular library. `playground/` contains examples and generated documentation. `tools/` contains repository-only generators and build checks.
 
 ## Choose the relevant guide
diff --git a/docs/styling-and-themes.md b/docs/styling-and-themes.md
index 0c98abf..6a9e7d5 100644
--- a/docs/styling-and-themes.md
+++ b/docs/styling-and-themes.md
@@ -77,16 +77,16 @@ Use the DaisyUI color roles for the application palette. Every background color
 
 Sushi derives shared interaction and overlay styles from these semantic tokens. Override them when a theme needs a different treatment instead of changing several components:
 
-| Token                    | Purpose                       |
-| ------------------------ | ----------------------------- |
-| `--sui-color-border`     | Default component border      |
-| `--sui-color-muted`      | Secondary text and actions    |
-| `--sui-color-subtle`     | Low-emphasis labels           |
-| `--sui-color-hover`      | Neutral hover surface         |
-| `--sui-color-overlay`    | Dialog and popover surface    |
-| `--sui-focus-ring-color` | Keyboard focus indicator      |
-| `--sui-shadow-overlay`   | Dialog and popover elevation  |
-| `--sui-disabled-opacity` | Shared disabled-state opacity |
+| Token                    | Purpose                                                    |
+| ------------------------ | ---------------------------------------------------------- |
+| `--sui-color-border`     | Default component border                                   |
+| `--sui-color-muted`      | Secondary text and actions                                 |
+| `--sui-color-subtle`     | Low-emphasis labels                                        |
+| `--sui-color-hover`      | Neutral hover surface                                      |
+| `--sui-color-overlay`    | Dialog and popover surface                                 |
+| `--sui-focus-ring-color` | Optional global focus color; otherwise follows the control |
+| `--sui-shadow-overlay`   | Dialog and popover elevation                               |
+| `--sui-disabled-opacity` | Shared disabled-state opacity                              |
 
 Component tokens remain the correct choice for a local exception. For example, `--sui-popover-shadow` defaults to `--sui-shadow-overlay` but can be changed on one popover.
 
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index b5b0f93..cebb9c3 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -27,6 +27,11 @@ export default defineConfig({
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
+    {
+      name: 'mobile-webkit',
+      testMatch: ['**/responsive-layout.spec.ts', '**/mobile-overlay.spec.ts'],
+      use: { ...devices['iPhone 13'] },
+    },
   ],
   webServer: {
     command: 'npm run preview:playground',
diff --git a/e2e/specs/drawer.spec.ts b/e2e/specs/drawer.spec.ts
index bc7a825..c59e132 100644
--- a/e2e/specs/drawer.spec.ts
+++ b/e2e/specs/drawer.spec.ts
@@ -7,6 +7,14 @@ interface BoxGeometry {
   readonly y: number;
 }
 
+interface DrawerGeometry {
+  readonly left: number;
+  readonly right: number;
+  readonly width: number;
+  readonly viewportWidth: number;
+  readonly documentWidth: number;
+}
+
 test('modal Drawer closes with Escape and restores focus to its trigger', async ({ page }: { page: Page }): Promise<void> => {
   await page.goto('/drawer');
   const trigger: Locator = page.getByRole('button', { name: /Cart/ });
@@ -80,24 +88,27 @@ test('responsive Drawers use one Sidebar as an overlay and persistent desktop la
   await expect(mobileTrigger).toBeFocused();
 });
 
-test('small Drawers fill narrow viewports without horizontal overflow', async ({ page }: { page: Page }): Promise<void> => {
+test('Drawers stay inside narrow viewports without horizontal overflow', async ({ page }: { page: Page }): Promise<void> => {
   await page.setViewportSize({ width: 360, height: 640 });
   await page.goto('/drawer');
   await page.getByRole('button', { name: /Cart/ }).click();
   const panel: Locator = page.getByRole('dialog', { name: 'Your cart' });
-  await expect
-    .poll(async (): Promise<boolean> => {
-      const box: BoxGeometry | null = await panel.boundingBox();
-      if (box === null) return false;
-
-      const viewportWidth: number = await page.evaluate((): number => innerWidth);
-      const horizontalMargin: number = viewportWidth * 0.02;
-      const fillsViewport: boolean = box.width >= viewportWidth - horizontalMargin;
-      const staysContained: boolean = box.x >= -horizontalMargin && box.x + box.width <= viewportWidth + horizontalMargin;
-      return fillsViewport && staysContained;
-    })
-    .toBe(true);
-  await expect
-    .poll(async (): Promise<boolean> => page.evaluate((): boolean => document.documentElement.scrollWidth <= innerWidth))
-    .toBe(true);
+  await expect(panel).toBeVisible();
+  await expect(async (): Promise<void> => {
+    const geometry: DrawerGeometry = await panel.evaluate((element: HTMLElement): DrawerGeometry => {
+      const bounds: DOMRect = element.getBoundingClientRect();
+      return {
+        left: bounds.left,
+        right: bounds.right,
+        width: bounds.width,
+        viewportWidth: document.documentElement.clientWidth,
+        documentWidth: document.documentElement.scrollWidth,
+      };
+    });
+    const details: string = `Drawer geometry: ${JSON.stringify(geometry)}`;
+    // Ignore subpixel rounding, not clipping or reserved scrollbar space.
+    expect(Math.round(geometry.left), details).toBeGreaterThanOrEqual(0);
+    expect(Math.round(geometry.right), details).toBeLessThanOrEqual(geometry.viewportWidth);
+    expect(geometry.documentWidth, details).toBeLessThanOrEqual(geometry.viewportWidth);
+  }).toPass({ timeout: 5_000 });
 });
diff --git a/e2e/specs/mobile-overlay.spec.ts b/e2e/specs/mobile-overlay.spec.ts
new file mode 100644
index 0000000..f43ab2c
--- /dev/null
+++ b/e2e/specs/mobile-overlay.spec.ts
@@ -0,0 +1,103 @@
+import { expect, Locator, Page, test } from '@playwright/test';
+
+interface Bounds {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+async function scrollContainer(trigger: Locator, distance: number): Promise<void> {
+  await trigger.evaluate((element: HTMLElement, amount: number): void => {
+    let parent: HTMLElement | null = element.parentElement;
+    while (parent) {
+      const overflow: string = getComputedStyle(parent).overflowY;
+      if (/(auto|scroll)/.test(overflow) && parent.scrollHeight > parent.clientHeight) {
+        parent.scrollBy(0, amount);
+        return;
+      }
+      parent = parent.parentElement;
+    }
+    window.scrollBy(0, amount);
+  }, distance);
+}
+
+async function expectAnchoredAbove(popup: Locator, trigger: Locator): Promise<void> {
+  await expect
+    .poll(
+      async (): Promise<boolean> => {
+        const control: Bounds | null = await trigger.boundingBox();
+        const panel: Bounds | null = await popup.boundingBox();
+        if (!control || !panel) return false;
+
+        const gap: number = control.y - panel.y - panel.height;
+        return panel.y >= 0 && gap >= 0 && gap < control.height / 2;
+      },
+      { message: 'The popup should stay above and beside its trigger without clipping.' },
+    )
+    .toBe(true);
+}
+
+test('large Popover stays within a short viewport when opened at the bottom', async ({ page }: { page: Page }): Promise<void> => {
+  await page.setViewportSize({ width: 390, height: 360 });
+  await page.goto('/popover');
+  const trigger: Locator = page.getByRole('button', { name: 'Assign chef', exact: true });
+  await trigger.evaluate((element: HTMLElement): void => element.scrollIntoView({ block: 'end' }));
+  await trigger.click();
+  const popup: Locator = page.getByRole('dialog', { name: 'Select a chef' });
+  await expect(popup).toBeVisible();
+  await expect
+    .poll(async (): Promise<boolean> => {
+      const panel: Bounds | null = await popup.boundingBox();
+      return !!panel && panel.y >= 0 && panel.y + panel.height <= 360;
+    })
+    .toBe(true);
+});
+
+test('Popover stays above its separate target near the bottom edge', async ({ page }: { page: Page }): Promise<void> => {
+  await page.setViewportSize({ width: 390, height: 740 });
+  await page.goto('/popover');
+  const trigger: Locator = page.getByRole('button', { name: 'Show details', exact: true });
+  const target: Locator = page.getByRole('button', { name: 'Salmon nigiri €12', exact: true });
+  await target.evaluate((element: HTMLElement): void => element.scrollIntoView({ block: 'end' }));
+  await trigger.click();
+  const popup: Locator = page.getByRole('dialog', { name: 'Product details' });
+  await expect(popup).toBeVisible();
+  await expectAnchoredAbove(popup, target);
+  await scrollContainer(target, 80);
+  await expectAnchoredAbove(popup, target);
+});
+
+for (const [route, role, name, popupRole, popupName] of [
+  ['select', 'combobox', 'Favorite color', 'listbox', ''],
+  ['multi-select', 'combobox', 'Message labels', 'listbox', ''],
+  ['popover', 'button', 'Share menu', 'dialog', 'Share this menu'],
+  ['popover', 'button', 'Assign chef', 'dialog', 'Select a chef'],
+] as const) {
+  test(`${name} popup stays anchored above its trigger while scrolling a narrow page`, async ({
+    page,
+    isMobile,
+  }: {
+    page: Page;
+    isMobile: boolean;
+  }): Promise<void> => {
+    await page.setViewportSize({ width: 390, height: 600 });
+    await page.goto(`/${route}`);
+    const trigger: Locator = page.getByRole(role, { name, exact: true });
+    await trigger.evaluate((element: HTMLElement): void => element.scrollIntoView({ block: 'end' }));
+    if (isMobile) await trigger.tap();
+    else await trigger.click();
+
+    const popup: Locator = popupName ? page.getByRole(popupRole, { name: popupName }) : page.getByRole(popupRole).first();
+    await expect(popup).toBeVisible();
+    await expectAnchoredAbove(popup, trigger);
+
+    const initial: Bounds | null = await trigger.boundingBox();
+    if (!initial) throw new Error('Expected a visible overlay trigger.');
+    await scrollContainer(trigger, initial.height * 2);
+    await expect
+      .poll(async (): Promise<number> => (await trigger.boundingBox())?.y ?? initial.y)
+      .toBeLessThan(initial.y - initial.height);
+    await expectAnchoredAbove(popup, trigger);
+  });
+}
diff --git a/e2e/specs/responsive-layout.spec.ts b/e2e/specs/responsive-layout.spec.ts
index e5962ab..079ccec 100644
--- a/e2e/specs/responsive-layout.spec.ts
+++ b/e2e/specs/responsive-layout.spec.ts
@@ -1,7 +1,68 @@
 import { expect, Locator, Page, test } from '@playwright/test';
 
+interface Bounds {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+
 test.use({ viewport: { width: 390, height: 844 } });
 
+test('Input keeps its configured text size when focused', async ({
+  page,
+  isMobile,
+}: {
+  page: Page;
+  isMobile: boolean;
+}): Promise<void> => {
+  await page.goto('/input');
+  for (const placeholder of ['XS input', 'LG input']) {
+    const input: Locator = page.getByPlaceholder(placeholder, { exact: true });
+    await input.scrollIntoViewIfNeeded();
+    const fontSize: string = await input.evaluate((element: HTMLElement): string => getComputedStyle(element).fontSize);
+    if (isMobile) await input.tap();
+    else await input.click();
+
+    await expect(input).toBeFocused();
+    await expect(input).toHaveCSS('font-size', fontSize);
+  }
+});
+
+for (const width of [390, 1280]) {
+  test(`Playground scrolls ${width < 1024 ? 'the document on mobile' : 'its content independently on desktop'}`, async ({
+    page,
+  }: {
+    page: Page;
+  }): Promise<void> => {
+    await page.setViewportSize({ width, height: 700 });
+    await page.goto('/input');
+    const content: Locator = page.getByTestId('playground-content');
+    await expect(page.getByRole('textbox', { name: 'Name', exact: true })).toBeVisible();
+
+    await content.evaluate((element: HTMLElement): void => {
+      element.scrollTo(0, 200);
+      window.scrollTo(0, 200);
+    });
+    await expect
+      .poll((): Promise<boolean> =>
+        content.evaluate((element: HTMLElement): boolean => {
+          const documentScroll: number = document.scrollingElement?.scrollTop ?? 0;
+          return window.innerWidth < 1024
+            ? documentScroll > 0 && element.scrollTop === 0
+            : documentScroll === 0 && element.scrollTop > 0;
+        }),
+      )
+      .toBe(true);
+  });
+}
+
+async function boundsOf(locator: Locator): Promise<Bounds> {
+  const bounds: Bounds | null = await locator.boundingBox();
+  if (!bounds) throw new Error('Expected a visible layout surface.');
+  return bounds;
+}
+
 test('collapsible Navbar exposes mobile navigation and restores toggle focus on Escape', async ({
   page,
 }: {
@@ -39,11 +100,7 @@ test('Navbar switches at its configured breakpoint without hiding persistent act
   await expect(action).toBeVisible();
 });
 
-test('responsive Table remains inside a narrow viewport and exposes horizontal scrolling', async ({
-  page,
-}: {
-  page: Page;
-}): Promise<void> => {
+test('Table stays inside a narrow viewport and exposes horizontal scrolling', async ({ page }: { page: Page }): Promise<void> => {
   await page.goto('/table');
   const table: Locator = page.getByRole('table', { name: 'Release queue' });
   const viewport: Locator = table.locator('..');
@@ -60,3 +117,175 @@ test('responsive Table remains inside a narrow viewport and exposes horizontal s
     )
     .toBe(true);
 });
+
+test('Table keeps only its first column pinned and aligns the remaining headings with their cells', async ({
+  page,
+}: {
+  page: Page;
+}): Promise<void> => {
+  await page.goto('/table');
+  const table: Locator = page.getByRole('table', { name: 'Release queue' });
+  const viewport: Locator = table.locator('..');
+  await expect(table).toBeVisible();
+  const pinnedHeading: Locator = table.getByRole('columnheader').first();
+  const movingHeading: Locator = table.getByRole('columnheader').nth(1);
+  const firstRow: Locator = table.locator('tbody tr').first();
+  const pinnedBefore: Bounds = await boundsOf(pinnedHeading);
+  const movingBefore: Bounds = await boundsOf(movingHeading);
+
+  await viewport.evaluate((element: HTMLElement): void => {
+    element.scrollLeft = element.scrollWidth - element.clientWidth;
+  });
+
+  await expect
+    .poll(async (): Promise<boolean> => {
+      const pinned: Bounds = await boundsOf(pinnedHeading);
+      const rowHeading: Bounds = await boundsOf(firstRow.getByRole('rowheader'));
+      const moving: Bounds = await boundsOf(movingHeading);
+      const bodyCell: Bounds = await boundsOf(firstRow.getByRole('cell').first());
+      const tolerance: number = pinned.width * 0.03;
+
+      return (
+        Math.abs(pinned.x - pinnedBefore.x) < tolerance &&
+        Math.abs(rowHeading.x - pinned.x) < tolerance &&
+        moving.x < movingBefore.x - moving.width / 2 &&
+        Math.abs(moving.x - bodyCell.x) < tolerance
+      );
+    })
+    .toBe(true);
+});
+
+test('Table keeps its heading visible while its rows scroll vertically', async ({ page }: { page: Page }): Promise<void> => {
+  await page.goto('/table');
+  const table: Locator = page.getByRole('table', { name: 'Scrollable team directory' });
+  const viewport: Locator = table.locator('..');
+  await viewport.scrollIntoViewIfNeeded();
+
+  const heading: Locator = table.getByRole('columnheader').first();
+  const row: Locator = table.locator('tbody tr').first();
+  const headingBefore: Bounds = await boundsOf(heading);
+  const rowBefore: Bounds = await boundsOf(row);
+
+  await viewport.evaluate((element: HTMLElement): void => {
+    element.scrollTop = element.scrollHeight - element.clientHeight;
+  });
+
+  await expect
+    .poll(async (): Promise<boolean> => {
+      const headingAfter: Bounds = await boundsOf(heading);
+      const rowAfter: Bounds = await boundsOf(row);
+      return (
+        Math.abs(headingAfter.y - headingBefore.y) < headingBefore.height * 0.05 &&
+        rowAfter.y < rowBefore.y - rowBefore.height / 2
+      );
+    })
+    .toBe(true);
+});
+
+for (const route of ['input', 'file-input', 'fieldset', 'range']) {
+  test(`${route} controls stay inside their labels and fieldsets on narrow screens`, async ({
+    page,
+  }: {
+    page: Page;
+  }): Promise<void> => {
+    await page.goto(`/${route}`);
+    const controls: Locator = page.locator(
+      'input[suiInput], input[suiInputSurfaceControl], input[suiFileInput], input[suiRange]',
+    );
+    await expect(controls.first()).toBeVisible();
+
+    for (const width of [320, 390]) {
+      await page.setViewportSize({ width, height: 844 });
+      await expect
+        .poll(async () =>
+          controls.evaluateAll((elements: Element[]) =>
+            elements
+              .filter((element: Element): boolean => element.getBoundingClientRect().width > 0)
+              .flatMap((element: Element) => {
+                const bounds: DOMRect = element.getBoundingClientRect();
+                const parentElement: HTMLElement | null = element.parentElement;
+                if (!parentElement) throw new Error('Expected a form control inside a layout container.');
+                const parent: DOMRect = parentElement.getBoundingClientRect();
+                const fieldset: DOMRect | undefined = element.closest('fieldset')?.getBoundingClientRect();
+                const right: number = Math.min(parent.right, fieldset?.right ?? innerWidth, innerWidth);
+                if (bounds.left >= parent.left - 2 && bounds.right <= right + 2) return [];
+                return [
+                  {
+                    name: element.getAttribute('aria-label') ?? element.getAttribute('type'),
+                    left: bounds.left,
+                    right: bounds.right,
+                    availableRight: right,
+                  },
+                ];
+              }),
+          ),
+        )
+        .toEqual([]);
+    }
+  });
+}
+
+test('Budget controls stack on mobile and remain usable', async ({
+  page,
+  isMobile,
+}: {
+  page: Page;
+  isMobile: boolean;
+}): Promise<void> => {
+  await page.goto('/input-group');
+  const amount: Locator = page.getByRole('spinbutton', { name: 'Budget amount' });
+  const period: Locator = page.getByRole('combobox', { name: 'Billing period' });
+  const action: Locator = page.getByRole('button', { name: 'Apply', exact: true });
+  const group: Locator = amount.locator('../..');
+
+  await expect
+    .poll(async (): Promise<boolean> => {
+      const input: Bounds = await boundsOf(amount);
+      const select: Bounds = await boundsOf(period);
+      const button: Bounds = await boundsOf(action);
+      const container: Bounds = await boundsOf(group);
+      const tolerance: number = container.width * 0.03;
+      return (
+        select.y >= input.y + input.height - tolerance &&
+        button.y >= select.y + select.height - tolerance &&
+        input.height >= button.height * 0.9 &&
+        Math.abs(select.width - container.width) < tolerance
+      );
+    })
+    .toBe(true);
+
+  await amount.fill('25');
+  if (isMobile) await period.tap();
+  else await period.click();
+  const option: Locator = page.getByRole('option', { name: 'Monthly', exact: true });
+  await expect(option).toBeVisible();
+  if (isMobile) await option.tap();
+  else await option.click();
+  await expect(period).toContainText('Monthly');
+  await expect(amount).toHaveValue('25');
+});
+
+test('Budget controls fit on one row above the desktop breakpoint', async ({ page }: { page: Page }): Promise<void> => {
+  await page.setViewportSize({ width: 800, height: 844 });
+  await page.goto('/input-group');
+  const amount: Locator = page.getByRole('spinbutton', { name: 'Budget amount' });
+  const period: Locator = page.getByRole('combobox', { name: 'Billing period' });
+  const action: Locator = page.getByRole('button', { name: 'Apply', exact: true });
+  const group: Locator = amount.locator('../..');
+
+  await expect
+    .poll(async (): Promise<boolean> => {
+      const input: Bounds = await boundsOf(amount);
+      const select: Bounds = await boundsOf(period);
+      const button: Bounds = await boundsOf(action);
+      const container: Bounds = await boundsOf(group);
+      const tolerance: number = input.height * 0.05;
+      return (
+        Math.abs(input.y - select.y) < tolerance &&
+        Math.abs(input.y - button.y) < tolerance &&
+        select.x >= input.x + input.width - tolerance &&
+        button.x + button.width <= container.x + container.width + tolerance
+      );
+    })
+    .toBe(true);
+});
diff --git a/package.json b/package.json
index 4b360b5..8e0818d 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "preview:playground": "npx serve dist/playground/browser -l 4201 -s",
     "release": "commit-and-tag-version",
     "start": "npm run generate:api && ng serve playground",
+    "start:network": "npm start -- --host 0.0.0.0",
     "test": "ng test sushi --no-watch && npm run test:tools",
     "test:coverage": "ng test sushi --no-watch --coverage",
     "test:e2e": "npm run build:playground && playwright test --config e2e/playwright.config.ts",
diff --git a/playground/src/app/app.html b/playground/src/app/app.html
index d36d7c9..eebb370 100644
--- a/playground/src/app/app.html
+++ b/playground/src/app/app.html
@@ -1,11 +1,11 @@
 <sui-drawer
   #libraryDrawer="suiDrawer"
-  class="h-screen overflow-hidden bg-base-100 text-base-content"
+  class="bg-base-100 text-base-content lg:h-screen lg:overflow-hidden"
   persistentAt="lg"
   size="sm"
   ariaLabel="Component library navigation"
 >
-  <div #contentScroll suiDrawerContent class="h-screen overflow-y-auto bg-base-100">
+  <div #contentScroll suiDrawerContent cdkScrollable data-testid="playground-content" class="bg-base-100 lg:h-screen lg:overflow-y-auto">
     <header class="sticky top-0 z-30 h-[65px] border-b border-base-300 bg-base-100/95 backdrop-blur">
       <div class="mx-auto flex h-full max-w-7xl items-center px-0 sm:px-3">
         <sui-navbar
diff --git a/playground/src/app/app.ts b/playground/src/app/app.ts
index f02d34b..158ecd9 100644
--- a/playground/src/app/app.ts
+++ b/playground/src/app/app.ts
@@ -1,4 +1,5 @@
 import { DOCUMENT, Location } from '@angular/common';
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import {
   afterRenderEffect,
   ChangeDetectionStrategy,
@@ -54,6 +55,7 @@ type PlaygroundTheme = 'sushi' | 'sushi-dark';
   selector: 'pg-root',
   imports: [
     Button,
+    CdkScrollable,
     Drawer,
     DrawerClose,
     DrawerContent,
diff --git a/playground/src/app/generated/api-reference.generated.ts b/playground/src/app/generated/api-reference.generated.ts
index d9a64c0..8e53d59 100644
--- a/playground/src/app/generated/api-reference.generated.ts
+++ b/playground/src/app/generated/api-reference.generated.ts
@@ -5316,7 +5316,7 @@ export const apiReference: Readonly<{
         kind: 'input',
         type: 'InputGroupOrientation',
         defaultValue: "'horizontal'",
-        description: 'Controls whether items flow horizontally, vertically, or responsively.',
+        description: 'Defaults to horizontal. Responsive groups stack below 48rem and become horizontal at 48rem.',
       },
     ],
     templates: [],
@@ -5967,7 +5967,7 @@ export const apiReference: Readonly<{
     className: 'Label',
     declaration: 'Label',
     selector: '[suiLabel]',
-    description: 'Styles a visible control label without prescribing its native or ARIA association.',
+    description: 'Styles a visible control label with wrapping text without prescribing its native or ARIA association.',
     members: [
       {
         name: 'floating',
diff --git a/playground/src/app/generated/theme-token-reference.generated.ts b/playground/src/app/generated/theme-token-reference.generated.ts
index a28f2c5..4cda6a2 100644
--- a/playground/src/app/generated/theme-token-reference.generated.ts
+++ b/playground/src/app/generated/theme-token-reference.generated.ts
@@ -242,10 +242,10 @@ export const THEME_TOKEN_REFERENCES: readonly ThemeTokenReference[] = [
   },
   {
     token: '--sui-focus-ring-color',
-    lightValue: 'var(--color-primary)',
-    darkValue: 'var(--color-primary)',
+    lightValue: 'initial',
+    darkValue: 'initial',
     group: 'Semantic UI',
-    purpose: 'Keyboard focus indicator.',
+    purpose: "Optional focus color override. Unset by default to retain each control's color.",
   },
   {
     token: '--sui-shadow-overlay',
diff --git a/playground/src/app/pages/data-view/data-view.page.html b/playground/src/app/pages/data-view/data-view.page.html
index e916ff1..7665559 100644
--- a/playground/src/app/pages/data-view/data-view.page.html
+++ b/playground/src/app/pages/data-view/data-view.page.html
@@ -23,8 +23,10 @@ <h2 class="text-2xl font-bold tracking-tight">Basic collection</h2>
 
   <section class="space-y-6">
     <div class="space-y-2">
-      <h2 class="text-2xl font-bold tracking-tight">List and grid</h2>
-      <p class="text-base-content/60">Switch layout through controlled state while one item template adapts its presentation.</p>
+      <h2 class="text-2xl font-bold tracking-tight">Custom layout switcher</h2>
+      <p class="text-base-content/60">
+        Use suiDataViewHeader for your own controls, bind layout, and set layouts to an empty array to hide the built-in switcher.
+      </p>
     </div>
     <pg-example-code [html]="examples.layout.html" [typescript]="examples.layout.typescript"
       ><ng-template pgExamplePreview><pg-data-view-layout-example /></ng-template
diff --git a/playground/src/app/pages/data-view/examples/layout/layout.example.html b/playground/src/app/pages/data-view/examples/layout/layout.example.html
index 7c42613..6e4e0ce 100644
--- a/playground/src/app/pages/data-view/examples/layout/layout.example.html
+++ b/playground/src/app/pages/data-view/examples/layout/layout.example.html
@@ -1,4 +1,31 @@
-<sui-data-view [items]="products" [layouts]="['list', 'grid']" minItemWidth="17rem" ariaLabel="Product catalog">
+<sui-data-view [items]="products" [layouts]="[]" [(layout)]="layout" minItemWidth="17rem" ariaLabel="Product catalog">
+  <ng-template suiDataViewHeader>
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <strong>Products</strong>
+      <div class="flex gap-2" role="group" aria-label="Product layout">
+        <button
+          suiButton
+          type="button"
+          size="sm"
+          severity="neutral"
+          variant="outlined"
+          [attr.aria-pressed]="layout() === 'list'"
+          (click)="layout.set('list')">
+          List
+        </button>
+        <button
+          suiButton
+          type="button"
+          size="sm"
+          severity="neutral"
+          variant="outlined"
+          [attr.aria-pressed]="layout() === 'grid'"
+          (click)="layout.set('grid')">
+          Grid
+        </button>
+      </div>
+    </div>
+  </ng-template>
   <ng-template suiDataViewItem let-product let-layout="layout">
     @if (layout === 'grid') {
       <sui-card size="sm" class="h-full overflow-hidden">
diff --git a/playground/src/app/pages/data-view/examples/layout/layout.example.ts b/playground/src/app/pages/data-view/examples/layout/layout.example.ts
index 020c10a..4467b24 100644
--- a/playground/src/app/pages/data-view/examples/layout/layout.example.ts
+++ b/playground/src/app/pages/data-view/examples/layout/layout.example.ts
@@ -1,5 +1,15 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Badge, Button, Card, CardActions, CardTitle, DataView, DataViewItemTemplate } from '@sushi-kit/angular';
+import { ChangeDetectionStrategy, Component, signal, WritableSignal } from '@angular/core';
+import {
+  Badge,
+  Button,
+  Card,
+  CardActions,
+  CardTitle,
+  DataView,
+  DataViewHeaderTemplate,
+  DataViewItemTemplate,
+  DataViewLayout,
+} from '@sushi-kit/angular';
 import { LucideShoppingCart } from '@lucide/angular';
 
 interface Product {
@@ -14,11 +24,23 @@ interface Product {
 
 @Component({
   selector: 'pg-data-view-layout-example',
-  imports: [Badge, Button, Card, CardActions, CardTitle, DataView, DataViewItemTemplate, LucideShoppingCart],
+  imports: [
+    Badge,
+    Button,
+    Card,
+    CardActions,
+    CardTitle,
+    DataView,
+    DataViewHeaderTemplate,
+    DataViewItemTemplate,
+    LucideShoppingCart,
+  ],
   templateUrl: './layout.example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewLayoutExample {
+  protected readonly layout: WritableSignal<DataViewLayout> = signal<DataViewLayout>('list');
+
   protected readonly products: readonly Product[] = [
     {
       id: 1,
diff --git a/playground/src/app/pages/file-input/examples/options/options.example.html b/playground/src/app/pages/file-input/examples/options/options.example.html
index 9e33667..32f7fad 100644
--- a/playground/src/app/pages/file-input/examples/options/options.example.html
+++ b/playground/src/app/pages/file-input/examples/options/options.example.html
@@ -1,5 +1,5 @@
-<div class="grid gap-8">
-  <label suiLabel class="grid w-96 max-w-full gap-2">
+<div class="grid grid-cols-1 gap-8">
+  <label suiLabel class="grid w-full max-w-96 gap-2">
     <span class="font-medium">Profile photo from camera</span>
     <input suiFileInput type="file" accept="image/*" capture="user" />
   </label>
diff --git a/playground/src/app/pages/input-group/examples/address/address.example.html b/playground/src/app/pages/input-group/examples/address/address.example.html
index 6f207c9..dd7b482 100644
--- a/playground/src/app/pages/input-group/examples/address/address.example.html
+++ b/playground/src/app/pages/input-group/examples/address/address.example.html
@@ -6,8 +6,8 @@
   </div>
 
   <div suiInputGroup orientation="responsive" class="w-full max-w-xl">
-    <input suiInput suiJoinItem placeholder="Street" aria-label="Street" />
-    <input suiInput suiJoinItem placeholder="City" aria-label="City" />
-    <input suiInput suiJoinItem placeholder="Postal code" aria-label="Postal code" />
+    <input suiInput suiJoinItem fluid placeholder="Street" aria-label="Street" />
+    <input suiInput suiJoinItem fluid placeholder="City" aria-label="City" />
+    <input suiInput suiJoinItem fluid placeholder="Postal code" aria-label="Postal code" />
   </div>
 </div>
diff --git a/playground/src/app/pages/input-group/examples/commerce/commerce.example.html b/playground/src/app/pages/input-group/examples/commerce/commerce.example.html
index b6c5f5c..733f4fa 100644
--- a/playground/src/app/pages/input-group/examples/commerce/commerce.example.html
+++ b/playground/src/app/pages/input-group/examples/commerce/commerce.example.html
@@ -1,7 +1,18 @@
-<div suiInputGroup orientation="responsive" class="w-full max-w-2xl">
-  <span suiInputGroupAddon>Budget</span>
-  <input suiInput suiJoinItem type="number" class="min-w-0 flex-1" placeholder="0.00" aria-label="Budget amount" />
-  <span suiInputGroupAddon>EUR</span>
-  <sui-select suiJoinItem class="w-36" ariaLabel="Billing period" [options]="periods" />
-  <button suiButton suiJoinItem type="button">Apply</button>
+<div class="grid w-full max-w-2xl gap-2">
+  <label suiLabel for="budget-amount">Budget</label>
+  <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_9rem_auto]">
+    <div suiInputGroup class="w-full">
+      <input
+        id="budget-amount"
+        suiInput
+        suiJoinItem
+        type="number"
+        class="min-w-0 flex-1"
+        placeholder="0.00"
+        aria-label="Budget amount" />
+      <span suiInputGroupAddon>EUR</span>
+    </div>
+    <sui-select fluid ariaLabel="Billing period" [options]="periods" />
+    <button suiButton type="button">Apply</button>
+  </div>
 </div>
diff --git a/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts b/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts
index 61e5755..1f1a03f 100644
--- a/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts
+++ b/playground/src/app/pages/input-group/examples/commerce/commerce.example.ts
@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Button, Input, InputGroup, InputGroupAddon, JoinItem, Select, SelectOption } from '@sushi-kit/angular';
+import { Button, Input, InputGroup, InputGroupAddon, JoinItem, Label, Select, SelectOption } from '@sushi-kit/angular';
 
 @Component({
   selector: 'pg-input-group-commerce-example',
-  imports: [Button, Input, InputGroup, InputGroupAddon, JoinItem, Select],
+  imports: [Button, Input, InputGroup, InputGroupAddon, JoinItem, Label, Select],
   templateUrl: './commerce.example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/playground/src/app/pages/input-group/input-group.page.html b/playground/src/app/pages/input-group/input-group.page.html
index 4e8b1c2..87915c8 100644
--- a/playground/src/app/pages/input-group/input-group.page.html
+++ b/playground/src/app/pages/input-group/input-group.page.html
@@ -13,7 +13,8 @@ <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Input Group</h1>
     <div class="space-y-2">
       <h2 class="text-2xl font-bold tracking-tight">Addresses and responsive fields</h2>
       <p class="text-base-content/60">
-        Use add-ons for fixed text and responsive orientation when controls should stack on narrow screens.
+        Groups are horizontal by default. Responsive groups stack below 48rem (768px at the default font size). Apply direction-specific
+        widths and flex sizing at the same breakpoint.
       </p>
     </div>
     <pg-example-code [html]="examples.address.html" [typescript]="examples.address.typescript">
@@ -24,7 +25,7 @@ <h2 class="text-2xl font-bold tracking-tight">Addresses and responsive fields</h
   <section class="space-y-6">
     <div class="space-y-2">
       <h2 class="text-2xl font-bold tracking-tight">Mixed controls</h2>
-      <p class="text-base-content/60">Inputs, add-ons, Select, and Button retain their semantics inside one visual group.</p>
+      <p class="text-base-content/60">Keep the amount and currency together. Stack the period and action below on narrow screens.</p>
     </div>
     <pg-example-code [html]="examples.commerce.html" [typescript]="examples.commerce.typescript">
       <ng-template pgExamplePreview><pg-input-group-commerce-example /></ng-template>
diff --git a/playground/src/app/pages/input/examples/basic/basic.example.html b/playground/src/app/pages/input/examples/basic/basic.example.html
index eea6d47..8e14160 100644
--- a/playground/src/app/pages/input/examples/basic/basic.example.html
+++ b/playground/src/app/pages/input/examples/basic/basic.example.html
@@ -1,11 +1,11 @@
-<div class="grid w-fit max-w-full gap-2">
+<div class="grid w-full max-w-xl gap-2">
   <label suiLabel for="input-name">Name</label>
-  <div suiJoin class="w-full max-w-full sm:w-fit">
+  <div suiInputGroup orientation="responsive" class="w-full">
     <input
       id="input-name"
       suiInput
       suiJoinItem
-      class="w-0 min-w-0 flex-1 sm:w-72 sm:flex-none"
+      class="w-full min-w-0 md:w-auto md:flex-1"
       placeholder="Ada Lovelace"
       [formField]="form.name" />
 
diff --git a/playground/src/app/pages/input/examples/basic/basic.example.ts b/playground/src/app/pages/input/examples/basic/basic.example.ts
index f9309f2..86a1a49 100644
--- a/playground/src/app/pages/input/examples/basic/basic.example.ts
+++ b/playground/src/app/pages/input/examples/basic/basic.example.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, signal, WritableSignal } from '@angular/core';
 import { FieldTree, form, FormField, required, SchemaPathTree } from '@angular/forms/signals';
-import { Button, Input, Join, JoinItem, Label } from '@sushi-kit/angular';
+import { Button, Input, InputGroup, JoinItem, Label } from '@sushi-kit/angular';
 
 interface InputModel {
   name: string;
@@ -8,7 +8,7 @@ interface InputModel {
 
 @Component({
   selector: 'pg-input-basic-example',
-  imports: [FormField, Button, Input, Join, JoinItem, Label],
+  imports: [FormField, Button, Input, InputGroup, JoinItem, Label],
   templateUrl: './basic.example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/playground/src/app/pages/input/examples/composition/composition.example.html b/playground/src/app/pages/input/examples/composition/composition.example.html
index de099f6..bfcd124 100644
--- a/playground/src/app/pages/input/examples/composition/composition.example.html
+++ b/playground/src/app/pages/input/examples/composition/composition.example.html
@@ -3,7 +3,7 @@
     <legend suiFieldsetLegend>Search controls</legend>
 
     <div class="grid gap-4">
-      <div suiInputSurface class="w-80 max-w-full">
+      <div suiInputSurface class="w-full max-w-80">
         <svg lucideSearch class="size-4 opacity-50" aria-hidden="true"></svg>
         <input
           suiInputSurfaceControl
@@ -28,12 +28,12 @@
     <legend suiFieldsetLegend>Account fields</legend>
 
     <div class="grid gap-4">
-      <label suiLabel class="grid w-80 max-w-full gap-2">
+      <label suiLabel class="grid w-full max-w-80 gap-2">
         <span class="font-medium">Work email</span>
         <input suiInput type="email" severity="info" placeholder="name@company.com" />
       </label>
 
-      <label suiLabel class="grid w-80 max-w-full gap-2">
+      <label suiLabel class="grid w-full max-w-80 gap-2">
         <span class="font-medium">Persistent search</span>
         <input suiInput type="search" size="sm" value="Quarterly report" [showClear]="false" />
       </label>
diff --git a/playground/src/app/pages/input/examples/states/states.example.html b/playground/src/app/pages/input/examples/states/states.example.html
index d44acfe..be0c2a7 100644
--- a/playground/src/app/pages/input/examples/states/states.example.html
+++ b/playground/src/app/pages/input/examples/states/states.example.html
@@ -1,15 +1,15 @@
-<div class="grid w-fit max-w-full items-start gap-4">
-  <div class="grid gap-2 w-80 max-w-full">
+<div class="grid w-full max-w-80 items-start gap-4">
+  <div class="grid gap-2">
     <label suiLabel for="input-readonly">Readonly</label>
     <input suiInput id="input-readonly" type="email" value="reader@example.com" readonly />
   </div>
 
-  <div class="grid gap-2 w-80 max-w-full">
+  <div class="grid gap-2">
     <label suiLabel for="input-disabled">Disabled</label>
     <input suiInput id="input-disabled" value="Unavailable" disabled />
   </div>
 
-  <div class="grid gap-2 w-80 max-w-full">
+  <div class="grid gap-2">
     <label suiLabel for="input-invalid">Invalid</label>
     <input suiInput id="input-invalid" invalid touched value="Invalid value" />
   </div>
diff --git a/playground/src/app/pages/popover/examples/selection/selection.example.html b/playground/src/app/pages/popover/examples/selection/selection.example.html
index 2d072cb..bfc2668 100644
--- a/playground/src/app/pages/popover/examples/selection/selection.example.html
+++ b/playground/src/app/pages/popover/examples/selection/selection.example.html
@@ -3,7 +3,7 @@
   {{ selected()?.name ?? 'Assign chef' }}
 </button>
 <sui-popover #chefPopover ariaLabel="Select a chef" placement="bottom">
-  <div class="grid w-72 gap-1">
+  <div class="grid w-72 max-w-full gap-1">
     <div class="mb-1 grid gap-0.5 px-3 pb-2">
       <strong>Assign this order</strong>
       <span class="text-sm text-base-content/60">Choose an available chef.</span>
diff --git a/playground/src/app/pages/popover/examples/usage/usage.example.html b/playground/src/app/pages/popover/examples/usage/usage.example.html
index b9adbba..79718af 100644
--- a/playground/src/app/pages/popover/examples/usage/usage.example.html
+++ b/playground/src/app/pages/popover/examples/usage/usage.example.html
@@ -3,7 +3,7 @@
   Share menu
 </button>
 <sui-popover #share ariaLabelledby="share-title" showCloseButton>
-  <div class="grid w-80 gap-4">
+  <div class="grid w-80 max-w-full gap-4">
     <div class="grid gap-1">
       <h3 id="share-title" class="font-semibold">Share this menu</h3>
       <p class="text-sm text-base-content/60">Anyone with the link can view it.</p>
diff --git a/playground/src/app/shared/example-code/example-code.component.html b/playground/src/app/shared/example-code/example-code.component.html
index e3dcb9d..cbb4a12 100644
--- a/playground/src/app/shared/example-code/example-code.component.html
+++ b/playground/src/app/shared/example-code/example-code.component.html
@@ -1,7 +1,7 @@
-<sui-tabs ariaLabel="Example preview and source" variant="lift" [(value)]="activeTab">
+<sui-tabs ariaLabel="Example preview and source" variant="lift" style="--sui-tabs-panel-padding: 0" [(value)]="activeTab">
   @if (preview(); as previewTemplate) {
     <ng-template suiTab value="preview" label="Preview">
-      <div class="p-5 sm:p-6">
+      <div class="p-4 sm:p-6">
         <ng-container [ngTemplateOutlet]="previewTemplate" />
       </div>
     </ng-template>
diff --git a/sushi/src/lib/breadcrumb/breadcrumb.component.css b/sushi/src/lib/breadcrumb/breadcrumb.component.css
index c95418f..8c0acc1 100644
--- a/sushi/src/lib/breadcrumb/breadcrumb.component.css
+++ b/sushi/src/lib/breadcrumb/breadcrumb.component.css
@@ -27,4 +27,22 @@ a:focus-visible {
 
 nav {
   padding: calc(var(--sui-focus-ring-offset) + var(--sui-focus-ring-width));
+  overflow: visible;
+}
+
+ol {
+  flex-wrap: wrap;
+  row-gap: 0.5rem;
+  white-space: normal;
+}
+
+li {
+  min-width: 0;
+  max-width: 100%;
+}
+
+a,
+[aria-current='page'] {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
diff --git a/sushi/src/lib/code/code.component.css b/sushi/src/lib/code/code.component.css
index 1efce67..48f1abb 100644
--- a/sushi/src/lib/code/code.component.css
+++ b/sushi/src/lib/code/code.component.css
@@ -57,6 +57,7 @@
 }
 
 .sui-code__content {
+  padding-block-start: 0.75rem;
   max-width: 100%;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
diff --git a/sushi/src/lib/drawer/drawer.component.css b/sushi/src/lib/drawer/drawer.component.css
index 537509b..86f86d2 100644
--- a/sushi/src/lib/drawer/drawer.component.css
+++ b/sushi/src/lib/drawer/drawer.component.css
@@ -33,6 +33,8 @@
 .sui-drawer__panel {
   @apply flex h-full min-h-0 min-w-0 flex-col;
   width: min(var(--sui-drawer-width), 100vw);
+  /* The containing block can be narrower than 100vw when a scrollbar gutter is reserved. */
+  max-width: 100%;
 }
 
 :host(.sui-drawer--sm) {
diff --git a/sushi/src/lib/input-group/input-group.directive.ts b/sushi/src/lib/input-group/input-group.directive.ts
index a808e2b..abc1182 100644
--- a/sushi/src/lib/input-group/input-group.directive.ts
+++ b/sushi/src/lib/input-group/input-group.directive.ts
@@ -15,6 +15,6 @@ export type InputGroupOrientation = JoinOrientation | 'responsive';
 })
 /** Connects inputs, add-ons, and actions as one visual group without changing their semantics. */
 export class InputGroup {
-  /** Controls whether items flow horizontally, vertically, or responsively. */
+  /** Defaults to horizontal. Responsive groups stack below 48rem and become horizontal at 48rem. */
   public readonly orientation: InputSignal<InputGroupOrientation> = input<InputGroupOrientation>('horizontal');
 }
diff --git a/sushi/src/lib/label/label.directive.ts b/sushi/src/lib/label/label.directive.ts
index bfdcb3e..627da4f 100644
--- a/sushi/src/lib/label/label.directive.ts
+++ b/sushi/src/lib/label/label.directive.ts
@@ -3,12 +3,12 @@ import { booleanAttribute, Directive, input, InputSignalWithTransform } from '@a
 @Directive({
   selector: '[suiLabel]',
   host: {
-    class: 'sui-label',
+    class: 'sui-label min-w-0 whitespace-normal',
     '[class.label]': '!floating()',
     '[class.floating-label]': 'floating()',
   },
 })
-/** Styles a visible control label without prescribing its native or ARIA association. */
+/** Styles a visible control label with wrapping text without prescribing its native or ARIA association. */
 export class Label {
   /** Floats a native label above its wrapped control on focus or when a value is present. */
   public readonly floating: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
diff --git a/sushi/src/lib/selection/selection-overlay.ts b/sushi/src/lib/selection/selection-overlay.ts
index 01302c2..3231088 100644
--- a/sushi/src/lib/selection/selection-overlay.ts
+++ b/sushi/src/lib/selection/selection-overlay.ts
@@ -18,9 +18,12 @@ export const SELECTION_ABOVE: ConnectedPosition = {
 
 export function selectionOverlayPositions(origin: HTMLElement, panelHeight: number): ConnectedPosition[] {
   const rect: DOMRect = origin.getBoundingClientRect();
-  const viewportHeight: number = window.visualViewport?.height ?? document.documentElement.clientHeight;
-  const availableAbove: number = rect.top - 8;
-  const availableBelow: number = viewportHeight - rect.bottom - 8;
+  // The on-screen keyboard can shrink and shift the visible area within the layout viewport.
+  const viewport: VisualViewport | null = window.visualViewport;
+  const viewportTop: number = viewport?.offsetTop ?? 0;
+  const viewportBottom: number = viewportTop + (viewport?.height ?? document.documentElement.clientHeight);
+  const availableAbove: number = rect.top - viewportTop - 8;
+  const availableBelow: number = viewportBottom - rect.bottom - 8;
 
   return availableBelow < panelHeight && availableAbove > availableBelow
     ? [SELECTION_ABOVE, SELECTION_BELOW]
diff --git a/sushi/src/lib/selection/testing/selection-overlay.spec.ts b/sushi/src/lib/selection/testing/selection-overlay.spec.ts
index caeb911..90f021e 100644
--- a/sushi/src/lib/selection/testing/selection-overlay.spec.ts
+++ b/sushi/src/lib/selection/testing/selection-overlay.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { selectionOverlayPositions, SELECTION_ABOVE, SELECTION_BELOW } from '../selection-overlay';
 
 function originAt(top: number, bottom: number): HTMLElement {
@@ -7,6 +7,11 @@ function originAt(top: number, bottom: number): HTMLElement {
   return origin;
 }
 
+afterEach((): void => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
 describe('selection overlay positions', (): void => {
   it('prefers the space below when the panel fits', (): void => {
     vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue(800);
@@ -19,4 +24,11 @@ describe('selection overlay positions', (): void => {
 
     expect(selectionOverlayPositions(originAt(500, 540), 240)).toEqual([SELECTION_ABOVE, SELECTION_BELOW]);
   });
+
+  it('measures available space relative to a shifted visual viewport', (): void => {
+    vi.stubGlobal('visualViewport', { offsetTop: 300, height: 400 });
+
+    expect(selectionOverlayPositions(originAt(400, 440), 240)).toEqual([SELECTION_BELOW, SELECTION_ABOVE]);
+    expect(selectionOverlayPositions(originAt(600, 640), 240)).toEqual([SELECTION_ABOVE, SELECTION_BELOW]);
+  });
 });
diff --git a/sushi/src/lib/table/table.component.html b/sushi/src/lib/table/table.component.html
index 25b1606..379dde8 100644
--- a/sushi/src/lib/table/table.component.html
+++ b/sushi/src/lib/table/table.component.html
@@ -12,7 +12,6 @@
     [class.table-xl]="size() === 'xl'"
     [class.table-zebra]="zebra()"
     [class.table-pin-rows]="stickyHeader()"
-    [class.table-pin-cols]="pinFirstColumn()"
     [class.sui-table--sticky-header]="stickyHeader()"
     [class.sui-table--pin-first-column]="pinFirstColumn()"
     [class.sui-table--gridlines]="showGridlines()"
diff --git a/sushi/src/lib/table/testing/table.component.spec.ts b/sushi/src/lib/table/testing/table.component.spec.ts
index c8bb82e..f77414a 100644
--- a/sushi/src/lib/table/testing/table.component.spec.ts
+++ b/sushi/src/lib/table/testing/table.component.spec.ts
@@ -122,8 +122,6 @@ describe('Table native structure and templates', (): void => {
     expect(query(fixture, 'thead th').textContent).toContain('Name');
     expect(query(fixture, 'tbody th[scope="row"]').textContent.trim()).toBe('Miso');
     expect(query(fixture, 'tbody td').textContent.trim()).toBe('4');
-    expect(query(fixture, 'table').classList).toContain('table-pin-cols');
-    expect(query(fixture, 'table').classList).toContain('table-pin-rows');
   });
 
   it('renders a custom row with its row index', (): void => {
diff --git a/sushi/src/styles/features/focus.styles.css b/sushi/src/styles/features/focus.styles.css
index 256451b..61c9266 100644
--- a/sushi/src/styles/features/focus.styles.css
+++ b/sushi/src/styles/features/focus.styles.css
@@ -4,7 +4,7 @@
 }
 
 :is(.btn, .input, .file-input, .select, .textarea, .checkbox, .radio, .toggle, .range, .tab, .kbd):is(:focus, :focus-visible, :focus-within) {
-  outline-color: var(--sui-focus-ring-color);
+  outline-color: var(--sui-focus-ring-color, revert-layer);
   outline-width: var(--sui-focus-ring-width);
   outline-offset: var(--sui-focus-ring-offset);
 }
diff --git a/sushi/src/styles/features/form-control.styles.css b/sushi/src/styles/features/form-control.styles.css
index 8ebe782..95c5584 100644
--- a/sushi/src/styles/features/form-control.styles.css
+++ b/sushi/src/styles/features/form-control.styles.css
@@ -1,3 +1,13 @@
+.sui-form-control {
+  /* Keep the configured size; DaisyUI otherwise changes this variable on touch focus. */
+  --font-size: initial;
+}
+
+.sui-form-control,
+.sui-form-control::file-selector-button {
+  box-shadow: none;
+}
+
 .sui-form-control--disabled {
   @apply text-base-content/40;
 }
diff --git a/sushi/src/styles/features/selection.styles.css b/sushi/src/styles/features/selection.styles.css
index 1eb8bb1..92f4807 100644
--- a/sushi/src/styles/features/selection.styles.css
+++ b/sushi/src/styles/features/selection.styles.css
@@ -23,9 +23,9 @@
 
 .sui-selection-option:not([aria-disabled='true']):not([aria-selected='true'], [data-matched='true']):active {
   /** Background of an enabled option while pressed. */
-  background-color: var(--sui-selection-option-active-background, color-mix(in oklab, var(--color-primary) 20%, transparent));
+  background-color: var(--sui-selection-option-active-background, var(--sui-selection-option-hover-background, var(--color-base-200)));
   /** Text color of an enabled option while pressed. */
-  color: var(--sui-selection-option-active-color, var(--color-primary));
+  color: var(--sui-selection-option-active-color, var(--sui-selection-option-hover-color, var(--color-base-content)));
 }
 
 .sui-selection-option:is([aria-selected='true'], [data-matched='true']) {
@@ -35,7 +35,7 @@
   color: var(--sui-selection-option-selected-color, var(--color-primary));
 }
 
-.sui-selection-option:not([aria-disabled='true']):is([aria-selected='true'], [data-matched='true']):is(:hover, :active),
+.sui-selection-option:not([aria-disabled='true']):is([aria-selected='true'], [data-matched='true']):hover,
 .sui-selection-list:not(.sui-selection-list--focus-bound) .sui-selection-option:not([aria-disabled='true']):is([aria-selected='true'], [data-matched='true'])[data-active='true'],
 .sui-selection-list--focus-bound:focus .sui-selection-option:not([aria-disabled='true']):is([aria-selected='true'], [data-matched='true'])[data-active='true'] {
   /** Background of a selected option when hovered, pressed, or actively navigated. */
diff --git a/sushi/src/styles/sushi.themes.css b/sushi/src/styles/sushi.themes.css
index 5773123..54cb7e0 100644
--- a/sushi/src/styles/sushi.themes.css
+++ b/sushi/src/styles/sushi.themes.css
@@ -89,8 +89,8 @@
   --sui-color-hover: color-mix(in oklab, var(--color-base-content) 7%, transparent);
   /** @group Semantic UI | Dialog and popover surface. */
   --sui-color-overlay: var(--color-base-100);
-  /** @group Semantic UI | Keyboard focus indicator. */
-  --sui-focus-ring-color: var(--color-primary);
+  /** @group Semantic UI | Optional focus color override. Unset by default to retain each control's color. */
+  --sui-focus-ring-color: initial;
   /** @group Semantic UI | Dialog and popover elevation. */
   --sui-shadow-overlay: 0 0.75rem 2rem rgb(0 0 0 / 12%);
   /** @group Semantic UI | Shared disabled-state opacity. */
@@ -155,7 +155,7 @@
   --sui-color-subtle: color-mix(in oklab, var(--color-base-content) 45%, transparent);
   --sui-color-hover: color-mix(in oklab, var(--color-base-content) 7%, transparent);
   --sui-color-overlay: var(--color-base-100);
-  --sui-focus-ring-color: var(--color-primary);
+  --sui-focus-ring-color: initial;
   --sui-shadow-overlay: 0 0.75rem 2rem rgb(0 0 0 / 28%);
   --sui-disabled-opacity: 0.5;
 }