diff --git a/.vscode/custom.css-data.json b/.vscode/custom.css-data.json
index f0ccbd5..216bb8f 100644
--- a/.vscode/custom.css-data.json
+++ b/.vscode/custom.css-data.json
@@ -1,4 +1,5 @@
 {
+  // https://github.com/microsoft/vscode-custom-data
   "version": 1.1,
   "properties": [
     { "name": "interpolate-size" },
diff --git a/src/components/actions/Button/Button.module.scss b/src/components/actions/Button/Button.module.scss
index ac91775..cd08692 100644
--- a/src/components/actions/Button/Button.module.scss
+++ b/src/components/actions/Button/Button.module.scss
@@ -16,7 +16,10 @@
     cursor: pointer;
     
     margin: 0;
-    padding: calc(bk.$spacing-2 - 0.125lh) bk.$spacing-3; /* Note: compensate for line-height difference with Figma */
+    padding: 0;
+    &:not(.bk-button--compact) {
+      padding: calc(bk.$spacing-2 - 0.125lh) bk.$spacing-3; /* Note: compensate for line-height difference with Figma */
+    }
     
     /* Transparent border for consistency with other variants that have a border */
     border: bk.$size-1 solid transparent;
@@ -67,7 +70,7 @@
       --bk-button-color-contrast: #{bk.$theme-button-primary-text-non-active};
       cursor: not-allowed;
     }
-
+    
     @media (prefers-reduced-motion: no-preference) {
       transition: none 150ms ease-in-out;
       transition-property: border, background, color;
diff --git a/src/components/actions/Button/Button.stories.tsx b/src/components/actions/Button/Button.stories.tsx
index 4b6129c..099d16e 100644
--- a/src/components/actions/Button/Button.stories.tsx
+++ b/src/components/actions/Button/Button.stories.tsx
@@ -10,7 +10,7 @@ import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { Icon } from '../../graphics/Icon/Icon.tsx';
-import { Alert } from '../../containers/Alert/Alert.tsx';
+import { Banner } from '../../containers/Banner/Banner.tsx';
 
 import { Button } from './Button.tsx';
 
@@ -40,10 +40,12 @@ export default {
     Story => (
       <ErrorBoundary
         FallbackComponent={({ error, resetErrorBoundary }) =>
-          <Alert kind="error" style={{ width: '80cqi' }}>
-            <p>Error: {error?.message}</p>
-            <p><Button variant="tertiary" label="Reset" onClick={resetErrorBoundary}/></p>
-          </Alert>
+          <Banner variant="error" style={{ width: '60cqi' }}
+            title="Error"
+            actions={<Banner.ActionButton label="Reset" onPress={resetErrorBoundary}/>}
+          >
+            {error?.message}
+          </Banner>
         }
       >
         <Story/>
diff --git a/src/components/actions/Button/Button.tsx b/src/components/actions/Button/Button.tsx
index 5b00ae4..54ed661 100644
--- a/src/components/actions/Button/Button.tsx
+++ b/src/components/actions/Button/Button.tsx
@@ -20,6 +20,9 @@ export type ButtonProps = React.PropsWithChildren<Omit<ComponentProps<'button'>,
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
   
+  /** Whether this tooltip should be rendered compact (minimal padding). */
+  compact?: undefined | boolean,
+  
   /**
    * The label of the button. Additional UI elements may be added, e.g. a loading indicator. If full control over
    * the button content is desired, use `children` instead, this overrides the `label`.
@@ -48,6 +51,7 @@ export const Button = (props: ButtonProps) => {
   const {
     children,
     unstyled = false,
+    compact = false,
     label,
     nonactive = false,
     variant = 'tertiary',
@@ -112,14 +116,19 @@ export const Button = (props: ButtonProps) => {
     buttonType = 'submit';
   }
   
+  // If both children and label are specified, use the `label` as the accessible name by default
+  const accessibleName = typeof children !== 'undefined' && label ? label : undefined;
+  
   return (
     <button
+      aria-label={accessibleName}
       {...propsRest}
       type={buttonType} // Not overridable
       disabled={!isInteractive}
       className={cx({
         bk: true,
         [cl['bk-button']]: !unstyled,
+        [cl['bk-button--compact']]: compact,
         [cl['bk-button--primary']]: variant === 'primary',
         [cl['bk-button--secondary']]: variant === 'secondary',
         [cl['bk-button--nonactive']]: isNonactive,
diff --git a/src/components/containers/Banner/Banner.module.scss b/src/components/containers/Banner/Banner.module.scss
index c90d308..bb92c58 100644
--- a/src/components/containers/Banner/Banner.module.scss
+++ b/src/components/containers/Banner/Banner.module.scss
@@ -14,6 +14,7 @@
     --bk-banner-indent: #{bk.$spacing-9};
     
     overflow: hidden;
+    overflow-y: scroll;
     
     padding-block: bk.$spacing-2;
     padding-inline: bk.$spacing-4 - bk.$radius-2;
@@ -71,30 +72,26 @@
     
     .bk-banner__actions {
       display: flex;
-      flex-direction: row-reverse;
+      flex-direction: row;
       align-items: center;
-      gap: bk.$spacing-3 bk.$spacing-7;
+      gap: bk.$spacing-3 calc(bk.$spacing-7 / 2);
       
-      > * {
+      > button {
         // Keep each item to a max of 1lh, so that in the case of all items being on one line, all the items
         // are properly aligned with the title (which implicitly has height `1lh`).
         height: 1lh;
       }
       
       .bk-banner__action {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex: none;
         
-        button {
-          border: 0;
-          font-weight: bk.$font-weight-semibold;
-          padding: 0;
-        }
+        .bk-banner__action--button { --keep: ; }
+        .bk-banner__action--icon { --keep: ; }
       }
       
       .bk-banner__action-close {
         flex: none;
+        margin-inline-start: calc(bk.$spacing-7 / 2); // Total gap should be `bk.$spacing-7`
         
         display: flex;
         color: bk.$theme-banner-icon-default;
@@ -122,4 +119,8 @@
       --bk-banner-color-background: #{bk.$theme-banner-success-background-default};
     }
   }
+  
+  .bk-banner + .bk-banner {
+    margin-block-start: bk.$spacing-2;
+  }
 }
diff --git a/src/components/containers/Banner/Banner.stories.tsx b/src/components/containers/Banner/Banner.stories.tsx
index 41ce601..97168f8 100644
--- a/src/components/containers/Banner/Banner.stories.tsx
+++ b/src/components/containers/Banner/Banner.stories.tsx
@@ -3,18 +3,51 @@
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react';
+import { idToCssIdent } from '../../../util/reactUtil.ts';
+import { startViewTransition } from '../../../util/reactDomUtil.ts';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { LayoutDecorator } from '../../../util/storybook/LayoutDecorator.tsx';
 import { loremIpsum, LoremIpsum } from '../../../util/storybook/LoremIpsum.tsx';
 
-import { Banner, BannerAction } from './Banner.tsx';
+import { Icon } from '../../graphics/Icon/Icon.tsx';
 import { Button } from '../../actions/Button/Button.tsx';
+import { SegmentedControl } from '../../forms/controls/SegmentedControl/SegmentedControl.tsx';
+
+import { Banner } from './Banner.tsx';
 
 
 type BannerArgs = React.ComponentProps<typeof Banner>;
 type Story = StoryObj<BannerArgs>;
 
+// Controlled version of `Banner` (handles close state)
+const BannerControlled = (props: React.ComponentProps<typeof Banner>) => {
+  const viewTransitionName = idToCssIdent(React.useId());
+  const [isVisible, setIsVisible] = React.useState(true);
+  
+  // Use a view transition to get an exit animation in supported browsers
+  const handleClose = React.useCallback(() => {
+    startViewTransition(() => {
+      setIsVisible(false);
+      props.onClose?.();
+    });
+  }, [props.onClose]);
+  
+  if (!isVisible) { return null; }
+  
+  return (
+    <Banner
+      {...props}
+      onClose={props.onClose ? handleClose : undefined}
+      style={{
+        viewTransitionName,
+        //resize: 'inline',
+        ...(props.style ?? {}),
+      }}
+    />
+  );
+};
+
 export default {
   component: Banner,
   parameters: {
@@ -28,23 +61,14 @@ export default {
   args: {
     title: 'Banner title',
   },
-  render: (args) => <Banner {...args}/>,
+  render: (args) => <BannerControlled {...args}/>,
 } satisfies Meta<BannerArgs>;
 
 
-// Utility components
-const BannerWithCloseState = (props: React.ComponentProps<typeof Banner>) => {
-  const [isVisible, setIsVisible] = React.useState(true);
-  
-  if (!isVisible) { return null; }
-  return <Banner {...props} onClose={() => { setIsVisible(false); }}/>;
-};
-
-const BannerActionExample = () => (
-  <BannerAction>
-    <Button variant="tertiary" onPress={() => alert('clicked')}>Button</Button>
-  </BannerAction>
-);
+const ExampleActionButton = () =>
+  <Banner.ActionButton onPress={() => alert('clicked')}>Button</Banner.ActionButton>;
+const ExampleActionIcon = () =>
+  <Banner.ActionIcon label="Copy" onPress={() => alert('clicked')}><Icon icon="copy"/></Banner.ActionIcon>;
 
 
 export const BannerStandard: Story = {};
@@ -53,21 +77,33 @@ export const BannerWithCloseButton: Story = {
   args: {
     onClose: () => {},
   },
-  render: (args) => <BannerWithCloseState {...args}/>,
 };
 
 export const BannerWithMessage: Story = {
   args: {
-    message: 'This is the main message of the banner.',
+    children: 'This is the main message of the banner.',
     onClose: () => {},
   },
 };
 
 export const BannerWithButton: Story = {
   args: {
-    message: 'Message text',
+    children: 'Message text',
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
+  },
+};
+
+export const BannerWithButtonAndIcon: Story = {
+  args: {
+    children: 'Message text',
+    onClose: () => {},
+    actions: (
+      <>
+        <ExampleActionButton/>
+        <ExampleActionIcon/>
+      </>
+    ),
   },
 };
 
@@ -76,34 +112,54 @@ export const BannerWithTitleOverflow: Story = {
   args: {
     title: loremIpsum(),
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
   },
 };
 
 export const BannerWithTextWrap: Story = {
   args: {
-    message: <LoremIpsum/>,
+    children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
   },
 };
 
 export const BannerWithTitleOverflowAndTextWrap: Story = {
   args: {
     title: loremIpsum(),
-    message: <LoremIpsum/>,
+    children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
+  },
+};
+
+export const BannerWithThemedContent: Story = {
+  args: {
+    title: loremIpsum(),
+    children: (
+      <article>
+        <p className="bk-body-text">
+          Banners look visually light, even in dark mode. The following components should always have a light theme:
+        </p>
+        <p>
+          <Button nonactive variant="primary" onPress={() => alert('clicked')}>Button</Button>
+        </p>
+        <SegmentedControl
+          options={['Test 1', 'Test 2']}
+          defaultValue="Test 1"
+        />
+      </article>
+    ),
   },
 };
 
 export const BannerInformational: Story = {
   args: {
-    variant: 'informational',
+    variant: 'info',
     title: loremIpsum(),
-    message: <LoremIpsum/>,
+    children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
   },
 };
 
@@ -111,9 +167,9 @@ export const BannerSuccess: Story = {
   args: {
     variant: 'success',
     title: loremIpsum(),
-    message: <LoremIpsum/>,
+    children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
   },
 };
 
@@ -121,9 +177,9 @@ export const BannerWarning: Story = {
   args: {
     variant: 'warning',
     title: loremIpsum(),
-    message: <LoremIpsum/>,
+    children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
   },
 };
 
@@ -131,8 +187,19 @@ export const BannerError: Story = {
   args: {
     variant: 'error',
     title: loremIpsum(),
-    message: <LoremIpsum/>,
+    children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <BannerActionExample/>,
+    actions: <ExampleActionButton/>,
   },
 };
+
+export const BannersStacked: Story = {
+  render: args => (
+    <>
+      <BannerControlled {...args} variant="informational" onClose={() => {}}/>
+      <BannerControlled {...args} variant="warning" onClose={() => {}}/>
+      <BannerControlled {...args} variant="error" onClose={() => {}}/>
+      <BannerControlled {...args} variant="success" onClose={() => {}}/>
+    </>
+  ),
+};
diff --git a/src/components/containers/Banner/Banner.tsx b/src/components/containers/Banner/Banner.tsx
index ce33c5d..25ce003 100644
--- a/src/components/containers/Banner/Banner.tsx
+++ b/src/components/containers/Banner/Banner.tsx
@@ -9,116 +9,145 @@ import { classNames as cx, type ComponentProps } from '../../../util/componentUt
 
 import { type IconName, type IconProps, Icon } from '../../graphics/Icon/Icon.tsx';
 import { Button } from '../../actions/Button/Button.tsx';
+import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider.tsx';
 
 import cl from './Banner.module.scss';
 
 
 export { cl as BannerClassNames };
 
-type BannerVariant = 'informational' | 'warning' | 'error' | 'success';
+type BannerVariant = 'info' | 'warning' | 'error' | 'success';
 
-type BannerIconProps = Omit<IconProps, 'icon'> & {
+type BannerVariantIconProps = Omit<IconProps, 'icon'> & {
   icon?: IconProps['icon'], // Make optional
   variant: BannerVariant,
 };
-const BannerIcon = (props: BannerIconProps) => {
-  const { variant } = props;
+const BannerVariantIcon = ({ variant, ...propsRest }: BannerVariantIconProps) => {
   const icon = ((): IconName => {
     switch (variant) {
-      case 'informational': return 'info';
+      case 'info': return 'info';
       case 'warning': return 'warning';
       case 'error': return 'status-failed';
       case 'success': return 'status-success';
       default: return assertUnreachable(variant);
     }
   })();
-  return <Icon icon={icon} {...props}/>;
+  return <Icon icon={icon} {...propsRest}/>;
 };
 
+
+export type ActionButtonProps = ComponentProps<typeof Button>;
+/**
+ * A customized version of the `<Button/>` component specifically meant to be used for banner actions.
+ */
+export const ActionButton = (props: ActionButtonProps) => {
+  return (
+    <Button
+      compact
+      {...props}
+      className={cx(cl['bk-banner__action'], cl['bk-banner__action--button'], props.className)}
+    />
+  );
+};
+
+export type ActionIconProps = ComponentProps<typeof Button> & {
+  /** There must be `label` on an icon-only button, for accessibility. */
+  label: Required<ComponentProps<typeof Button>>['label'],
+  
+  /** Optional custom tooltip text, if different from `label`. */
+  tooltip?: undefined | ComponentProps<typeof TooltipProvider>['tooltip'],
+};
+/**
+ * An action that is rendered as just an icon.
+ */
+export const ActionIcon = ({ tooltip, ...buttonProps }: ActionIconProps) => {
+  return (
+    <TooltipProvider compact tooltip={typeof tooltip !== 'undefined' ? tooltip : buttonProps.label}>
+      <Button
+        compact
+        {...buttonProps}
+        className={cx(cl['bk-banner__action'], cl['bk-banner__action--icon'], buttonProps.className)}
+      />
+    </TooltipProvider>
+  );
+};
+
+
 export type BannerProps = Omit<ComponentProps<'div'>, 'title'> & {
-  /**
-   * Whether the component should include the default styling. Defaults to false.
-   */
+  /** Whether the component should include the default styling. Defaults to false. */
   unstyled?: undefined | boolean,
   
-  /**
-   * Which variant to display, which changes the color and left icon. Defaults to "informational".
-   */
+  /** Which variant to display, which changes the color and left icon. Defaults to "info". */
   variant?: undefined | BannerVariant,
   
-  /**
-   * The title of the banner. Required.
-   */
+  /** The title of the banner. Required. */
   title: React.ReactNode,
   
-  /** The message to display. Optional. */
-  message?: undefined | React.ReactNode,
-  
   /** If specified, a close action is displayed. Defines the action to perform on close. */
   onClose?: undefined | (() => void),
   
   /** Any additional actions to be shown in the banner. */
   actions?: undefined | React.ReactNode,
 };
-
 /**
  * An inline banner that displays a message to the user.
  */
-export const Banner = (props: BannerProps) => {
-  const {
-    unstyled = false,
-    variant = 'informational',
-    title = '',
-    message,
-    onClose,
-    actions = null,
-    ...propsRest
-  } = props;
-  
-  return (
-    <div
-      // Note: `role=alert` implies the banner is time-sensitive. If the banner is not time-sensitive, this may need to
-      // be overridden with a more appropriate role (depends on use case).
-      role="alert"
-      {...propsRest}
-      className={cx(
-        'bk',
-        { [cl['bk-banner']]: !unstyled },
-        { [cl[`bk-banner--${variant}`]]: variant },
-        propsRest.className,
-      )}
-    >
-      <div className={cl['bk-banner__content']}>
-        <strong className={cl['bk-banner__title']}>
-          <BannerIcon variant={variant} className={cl['bk-banner__title__icon']}/>
-          <span className={cl['bk-banner__title__text']}>{title}</span>
-        </strong>
-        {message &&
-          <span className={cx('bk-body-text', cl['bk-banner__message'])}>{message}</span>
-        }
-      </div>
-      
-      <div className={cl['bk-banner__actions']}>
+export const Banner = Object.assign(
+  (props: BannerProps) => {
+    const {
+      unstyled = false,
+      variant = 'info',
+      title = '',
+      onClose,
+      actions = null,
+      children,
+      ...propsRest
+    } = props;
+    
+    return (
+      <div
+        // Note: `role=alert` implies the banner is time-sensitive. If the banner is not time-sensitive, this may need
+        // to be overridden with a more appropriate role (depends on use case).
+        role="alert"
+        {...propsRest}
+        className={cx(
+          'bk',
+          'bk-theme--light',
+          { [cl['bk-banner']]: !unstyled },
+          { [cl[`bk-banner--${variant}`]]: variant },
+          propsRest.className,
+        )}
+      >
+        <div className={cx(cl['bk-banner__content'])}>
+          <strong className={cx(cl['bk-banner__title'])}>
+            <BannerVariantIcon variant={variant} className={cx(cl['bk-banner__title__icon'])}/>
+            <span className={cx(cl['bk-banner__title__text'])}>{title}</span>
+          </strong>
+          {children &&
+            <div className={cx('bk-body-text', cl['bk-banner__message'])}>{children}</div>
+          }
+        </div>
+        
+        <div className={cx(cl['bk-banner__actions'])}>
+          {actions}
+        </div>
         {onClose &&
-          <Button unstyled className={cl['bk-banner__action-close']} onPress={onClose} aria-label="Close banner">
-            <Icon icon="cross"/>
-          </Button>
+          <div className={cx(cl['bk-banner__actions'])}>
+            <ActionIcon
+              label="Close banner"
+              tooltip={null}
+              className={cx(cl['bk-banner__action-close'])}
+              onPress={onClose}
+            >
+              <Icon icon="cross"/>
+            </ActionIcon>
+          </div>
         }
-        {actions}
       </div>
-    </div>
-  );
-};
-
-export type BannerActionProps = ComponentProps<'div'>;
-/**
- * A wrapper component, intended to easily add some styling to children's `<Button/>`'s. UX expects that such buttons
- * are `<Button variant="tertiary"/>`.
- */
-export const BannerAction = (props: BannerActionProps) => {
-  return (
-    <div className={cl['bk-banner__action']}>
-      {props.children}
-    </div>
-  );
-};
+    );
+  },
+  {
+    ActionButton,
+    ActionIcon,
+  },
+);
diff --git a/src/components/containers/Card/Card.stories.tsx b/src/components/containers/Card/Card.stories.tsx
index 8cb09ea..3848302 100644
--- a/src/components/containers/Card/Card.stories.tsx
+++ b/src/components/containers/Card/Card.stories.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Alert } from '../Alert/Alert.tsx';
+import { Banner } from '../Banner/Banner.tsx';
 
 import { Card } from './Card.tsx';
 
@@ -57,9 +57,9 @@ export const Multiple: Story = {
   decorators: [
     Story => (
       <div style={{ width: '70vw', display: 'flex', flexFlow: 'column', gap: '1.2rem' }}>
-        <Alert kind="info">
+        <Banner variant="info" title="Note:">
           Cards have no margin by default. Use a flex/grid container to space the cards.
-        </Alert>
+        </Banner>
         <Story/>
       </div>
     ),
diff --git a/src/components/containers/Panel/Panel.stories.tsx b/src/components/containers/Panel/Panel.stories.tsx
index 24f74af..4912d54 100644
--- a/src/components/containers/Panel/Panel.stories.tsx
+++ b/src/components/containers/Panel/Panel.stories.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Alert } from '../Alert/Alert.tsx';
+import { Banner } from '../Banner/Banner.tsx';
 
 import { Panel } from './Panel.tsx';
 
@@ -36,9 +36,9 @@ export const Standard: Story = {};
 export const Stacked: Story = {
   render: (args) => (
     <div style={{ display: 'flex', flexFlow: 'column', gap: '1.2rem' }}>
-      <Alert kind="info">
+      <Banner variant="info" title="Note:">
         Panels have no margin by default. Use a flex/grid container to space the panels.
-      </Alert>
+      </Banner>
       <Panel {...args}><Panel.Heading>Panel 1</Panel.Heading></Panel>
       <Panel {...args}><Panel.Heading>Panel 2</Panel.Heading></Panel>
     </div>
diff --git a/src/components/forms/context/SubmitButton/SubmitButton.stories.tsx b/src/components/forms/context/SubmitButton/SubmitButton.stories.tsx
index 6e84997..169ab9d 100644
--- a/src/components/forms/context/SubmitButton/SubmitButton.stories.tsx
+++ b/src/components/forms/context/SubmitButton/SubmitButton.stories.tsx
@@ -9,7 +9,7 @@ import { delay } from '../../../../util/time.ts';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { Alert } from '../../../containers/Alert/Alert.tsx';
+import { Banner } from '../../../containers/Banner/Banner.tsx';
 import { Form } from '../Form/Form.tsx';
 import { InputField } from '../../fields/InputField/InputField.tsx';
 import { FormLayout } from '../../../../layouts/FormLayout/FormLayout.tsx';
@@ -40,10 +40,12 @@ const StoryMeta = {
     Story => (
       <ErrorBoundary
         FallbackComponent={({ error, resetErrorBoundary }) =>
-          <Alert kind="error" style={{ width: '80cqi' }}>
-            <p>Error: {error?.message}</p>
-            <p><SubmitButton variant="tertiary" label="Reset" onClick={resetErrorBoundary}/></p>
-          </Alert>
+          <Banner variant="error" style={{ width: '60cqi' }}
+            title="Error"
+            actions={<Banner.ActionButton label="Reset" onPress={resetErrorBoundary}/>}
+          >
+            {error?.message}
+          </Banner>
         }
       >
         <Form nestable>
diff --git a/src/components/forms/controls/SegmentedControl/SegmentedControl.module.scss b/src/components/forms/controls/SegmentedControl/SegmentedControl.module.scss
index 1806e90..e8f7edb 100644
--- a/src/components/forms/controls/SegmentedControl/SegmentedControl.module.scss
+++ b/src/components/forms/controls/SegmentedControl/SegmentedControl.module.scss
@@ -13,10 +13,14 @@
       --bk-segmented-control-toggle-background-color: #{bk.$theme-segmented-control-background-default};
       --bk-segmented-control-toggle-border-color: #{bk.$theme-segmented-control-border-unselected};
       --bk-segmented-control-toggle-text-color: #{bk.$theme-segmented-control-text-unselected};
+      
+      user-select: none;
+      
       padding: bk.$spacing-1 bk.$spacing-3;
       background-color: var(--bk-segmented-control-toggle-background-color);
       border: 1px solid var(--bk-segmented-control-toggle-border-color);
       border-left: 0;
+      
       color: var(--bk-segmented-control-toggle-text-color);
       font-weight: bk.$font-weight-semibold;
       text-transform: uppercase;
diff --git a/src/components/forms/controls/SegmentedControl/SegmentedControl.tsx b/src/components/forms/controls/SegmentedControl/SegmentedControl.tsx
index fbb961b..5ca5c3f 100644
--- a/src/components/forms/controls/SegmentedControl/SegmentedControl.tsx
+++ b/src/components/forms/controls/SegmentedControl/SegmentedControl.tsx
@@ -28,10 +28,10 @@ export type SegmentedControlProps = React.PropsWithChildren<ComponentProps<'ul'>
   defaultValue: string,
   
   /** Whether segmented control is disabled or not */
-  disabled?: boolean,
+  disabled?: undefined | boolean,
   
   /** Event handler for segmented-control button change events. */
-  onChange?: (option: string) => void,
+  onChange?: undefined | ((option: string) => void),
 }>;
 /**
  * Set of buttons to switch between various options.
diff --git a/src/components/overlays/Tooltip/Tooltip.module.scss b/src/components/overlays/Tooltip/Tooltip.module.scss
index 9c45338..41edb8f 100644
--- a/src/components/overlays/Tooltip/Tooltip.module.scss
+++ b/src/components/overlays/Tooltip/Tooltip.module.scss
@@ -138,8 +138,12 @@
     max-height: calc(100svh - var(--bk-sizing-2));
     */
     
-    padding: bk.$spacing-4;
-    padding-bottom: bk.$spacing-7;
+    padding: bk.$spacing-2;
+    &:not(.bk-tooltip--compact) {
+      padding: bk.$spacing-4;
+      padding-bottom: bk.$spacing-7;
+    }
+    
     border-radius: bk.$radius-s;
     background: var(--bk-tooltip-background-color);
     border: 1px solid var(--bk-tooltip-border-color);
@@ -162,6 +166,7 @@
     --h: 6px; /* Height of the triangle. Note: must match the `offset` in `useFloating()`. */
     --b: calc(var(--h) * 2); /* Base of the triangle */
     @include bk-tooltip-arrow;
+    &.bk-tooltip--arrow { --keep: ; }
     &.bk-tooltip--arrow-top { @include bk-tooltip-arrow-top; }
     &.bk-tooltip--arrow-right { @include bk-tooltip-arrow-right; }
     &.bk-tooltip--arrow-bottom { @include bk-tooltip-arrow-bottom; }
diff --git a/src/components/overlays/Tooltip/Tooltip.tsx b/src/components/overlays/Tooltip/Tooltip.tsx
index c6530b6..7f7473a 100644
--- a/src/components/overlays/Tooltip/Tooltip.tsx
+++ b/src/components/overlays/Tooltip/Tooltip.tsx
@@ -21,6 +21,9 @@ export type TooltipProps = React.PropsWithChildren<ComponentProps<'div'> & {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
   
+  /** Whether this tooltip should be rendered compact (minimal padding). */
+  compact?: undefined | boolean,
+  
   /** Whether you want the component to have a fixed width. If unset, it will have dynamic size. */
   size?: undefined | TooltipSize,
   
@@ -30,7 +33,16 @@ export type TooltipProps = React.PropsWithChildren<ComponentProps<'div'> & {
 /**
  * A tooltip. Used by `TooltipProvider` to display a tooltip popover.
  */
-export const Tooltip = ({ children, unstyled = false, arrow, size = undefined, ...propsRest }: TooltipProps) => {
+export const Tooltip = (props: TooltipProps) => {
+  const {
+    children,
+    unstyled = false,
+    compact = false,
+    arrow,
+    size = undefined,
+    ...propsRest
+  } = props;
+  
   const arrowClassNames = ((): ClassNameArgument => {
     if (!arrow) { return; }
     
@@ -51,6 +63,7 @@ export const Tooltip = ({ children, unstyled = false, arrow, size = undefined, .
         {
           bk: true,
           [cl['bk-tooltip']]: !unstyled,
+          [cl['bk-tooltip--compact']]: compact,
           [cl['bk-tooltip--small']]: size === 'small',
           [cl['bk-tooltip--medium']]: size === 'medium',
           [cl['bk-tooltip--large']]: size === 'large',
diff --git a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
index 1e573f2..e92d796 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
@@ -10,7 +10,6 @@ import { Draggable } from '../../../util/drag.ts';
 import { TooltipProvider } from './TooltipProvider.tsx';
 import { TooltipIcon, TooltipItem, TooltipTitle } from './Tooltip.tsx';
 import { Button } from '../../actions/Button/Button.tsx';
-import { Icon } from '../../graphics/Icon/Icon.tsx';
 import { OverflowTester } from '../../../util/storybook/OverflowTester.tsx';
 
 
diff --git a/src/components/overlays/Tooltip/TooltipProvider.tsx b/src/components/overlays/Tooltip/TooltipProvider.tsx
index caf22f0..188d160 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.tsx
@@ -20,11 +20,11 @@ export type TooltipProviderProps = Omit<TooltipProps, 'children'> & {
   children?: ((getReferenceProps: GetReferenceProps) => React.ReactNode) | React.ReactNode,
   
   /**
-   * The tooltip message. If nullish, the tooltip will not be shown at all. This is useful in case the tooltip should
+   * The tooltip message. If `null`, the tooltip will not be shown at all. This is useful in case the tooltip should
    * be shown conditionally.
    */
-  tooltip?: null | React.ReactNode,
-
+  tooltip: null | React.ReactNode,
+  
   /** Where to show the tooltip relative to the anchor. */
   // here we are not using Placement as exposed from Popover because Tooltip only supports a subset of Popover's default placements.
   placement?: undefined | 'top' | 'bottom' | 'left' | 'right',
@@ -125,6 +125,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     return (
       <Tooltip
         {...floatingProps}
+        {...tooltipProps}
         ref={mergeRefs<HTMLDivElement>(refs.setFloating, tooltipProps.ref)}
         className={cx(
           floatingProps.className as ClassNameArgument,
diff --git a/src/styling/global/accessibility.scss b/src/styling/global/accessibility.scss
index cd8d2a0..4982218 100644
--- a/src/styling/global/accessibility.scss
+++ b/src/styling/global/accessibility.scss
@@ -30,6 +30,19 @@
   }
 }
 
+@mixin sr-only {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
 @mixin styles {
   :root {
     --bk-focus-outline-width: 2px;
diff --git a/src/styling/lib/reset.css b/src/styling/lib/reset.css
index cbfd26b..6f47420 100644
--- a/src/styling/lib/reset.css
+++ b/src/styling/lib/reset.css
@@ -9,107 +9,107 @@
     - The "symbol *" part is to solve Firefox SVG sprite bug
     - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
  */
- *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
-  all: unset;
-  display: revert;
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
 }
 
 /* Preferred box-sizing value */
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 /* Fix mobile Safari increase font-size on landscape mode */
 html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
 }
 
 /* Reapply the pointer cursor for anchor tags */
 a, button {
-  cursor: revert;
+    cursor: revert;
 }
 
 /* Remove list styles (bullets/numbers) */
 ol, ul, menu, summary {
-  list-style: none;
+    list-style: none;
 }
 
 /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
 ol {
-  counter-reset: revert;
+    counter-reset: revert;
 }
 
 /* For images to not be able to exceed their container */
 img {
-  max-inline-size: 100%;
-  max-block-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 100%;
 }
 
 /* removes spacing between cells in tables */
 table {
-  border-collapse: collapse;
+    border-collapse: collapse;
 }
 
 /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
 input, textarea {
-  -webkit-user-select: auto;
+    -webkit-user-select: auto;
 }
 
 /* revert the 'white-space' property for textarea elements on Safari */
 textarea {
-  white-space: revert;
+    white-space: revert;
 }
 
 /* minimum style to allow to style meter element */
 meter {
-  -webkit-appearance: revert;
-  appearance: revert;
+    -webkit-appearance: revert;
+    appearance: revert;
 }
 
 /* preformatted text - use only for this feature */
 :where(pre) {
-  all: revert;
-  box-sizing: border-box;
+    all: revert;
+    box-sizing: border-box;
 }
 
 /* reset default text opacity of input placeholder */
 ::placeholder {
-  color: unset;
+    color: unset;
 }
 
 /* fix the feature of 'hidden' attribute.
- display:revert; revert to element instead of attribute */
+   display:revert; revert to element instead of attribute */
 :where([hidden]) {
-  display: none;
+    display: none;
 }
 
 /* revert for bug in Chromium browsers
- - fix for the content editable attribute will work properly.
- - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
 :where([contenteditable]:not([contenteditable="false"])) {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-  overflow-wrap: break-word;
-  -webkit-line-break: after-white-space;
-  -webkit-user-select: auto;
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
 }
 
 /* apply back the draggable feature - exist only in Chromium and Safari */
 :where([draggable="true"]) {
-  -webkit-user-drag: element;
+    -webkit-user-drag: element;
 }
 
 /* Revert Modal native behavior */
 :where(dialog:modal) {
-  all: revert;
-  box-sizing: border-box;
+    all: revert;
+    box-sizing: border-box;
 }
 
 /* Remove details summary webkit styles */
 ::-webkit-details-marker {
-  display: none;
+    display: none;
 }
diff --git a/src/typography/BodyText/BodyText.mixins.scss b/src/typography/BodyText/BodyText.mixins.scss
index ce930a2..70bd4c2 100644
--- a/src/typography/BodyText/BodyText.mixins.scss
+++ b/src/typography/BodyText/BodyText.mixins.scss
@@ -225,25 +225,30 @@
 }
 
 @mixin styles {
-  /* Use a separate layer for body-text so that we can `revert-layer` */
+  // Use a separate layer for body-text so that we can `revert-layer`
   @layer baklava.body-text {
-    /*
-    XXX `@scope` does not yet have browser support
-    @scope (.bk-body-text) to (.bk, .isolate) { /* Do not leak .bk-body-text styling into components * /
+    // Do not leak .bk-body-text styling into components
+    // FIXME: browser support for `@scope` is not quite there yet (but we can't do `@supports at-rule()` yet either)
+    @scope (.bk-body-text) to (.isolate, .bk:not(.bk-body-text)) {
       :scope {
         @include bk.component-base(bk-body-text);
-        @mixin bk-body-text;
+        @include body-text;
       }
     }
-    */
+    
+    /*
+    // Note: without @scope we can only achieve shallow donut selectors, not arbitrary nesting
+    // See: https://css-tricks.com/solved-by-css-donuts-scopes
     
     .bk-body-text {
       @include bk.component-base(bk-body-text);
       @include body-text;
     }
     
-    .bk-body-text .bk {
+    // Note: need the `#specificity#hack` to make sure we override everything in this layer
+    :is(.bk:not(.bk-body-text) *, #specificity#hack) {
       all: revert-layer;
     }
+    */
   }
 }
diff --git a/src/typography/BodyText/BodyText.stories.tsx b/src/typography/BodyText/BodyText.stories.tsx
index 0df2594..729d120 100644
--- a/src/typography/BodyText/BodyText.stories.tsx
+++ b/src/typography/BodyText/BodyText.stories.tsx
@@ -7,6 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '../../components/actions/Button/Button.tsx';
 import { Panel } from '../../components/containers/Panel/Panel.tsx';
+import { SegmentedControl } from '../../components/forms/controls/SegmentedControl/SegmentedControl.tsx';
 
 import { BodyText } from './BodyText.tsx';
 
@@ -35,7 +36,7 @@ const SampleBodyText = () => {
       <h1>Example of body text</h1>
       <h2>Example of body text</h2>
       <p>
-        Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor. Cras ac suscipit nibh. Fusce tincidunt iaculis dapibus. Vivamus sit amet neque eu velit tincidunt semper. Donec at magna aliquam mi consectetur imperdiet. Donec pretium placerat quam, in sodales purus porta vitae. Phasellus nisl justo, luctus vel mi vel, sollicitudin euismod neque.
+        Lorem ipsum dolor sit amet, <a href="/" onClick={event => { event.preventDefault(); }}>consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor. Cras ac suscipit nibh. Fusce tincidunt iaculis dapibus. Vivamus sit amet neque eu velit tincidunt semper. Donec at magna aliquam mi consectetur imperdiet. Donec pretium placerat quam, in sodales purus porta vitae. Phasellus nisl justo, luctus vel mi vel, sollicitudin euismod neque.
       </p>
       <p>
         Duis mollis, justo vel pretium luctus, risus sem eleifend lectus, ac convallis dolor nibh id sapien. Donec vestibulum tellus non rutrum convallis. Aenean venenatis enim in egestas lobortis. Donec mollis elit in turpis imperdiet congue vel at magna. Vestibulum bibendum, ipsum quis lobortis lobortis, lorem libero mollis sapien, sed tempus lacus nibh a nunc. Vivamus sed sem eleifend, rutrum erat eget, ultricies neque. Morbi condimentum dolor vel ipsum consectetur iaculis. Donec ornare diam at orci luctus, sed placerat quam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum molestie augue. Ut vel nisl a augue ornare volutpat. Phasellus et enim in mi maximus ultricies. Integer dignissim ipsum mauris, id bibendum eros euismod et.
@@ -103,6 +104,11 @@ export const WithComponents: Story = {
             <p><strong><u>This is body text embedded within a component.</u></strong></p>
           </div>
         </Panel>
+        
+        <SegmentedControl
+          options={['Test 1', 'Test 2']}
+          defaultValue="Test 1"
+        />
       </>
     ),
   },
diff --git a/src/util/reactDomUtil.ts b/src/util/reactDomUtil.ts
new file mode 100644
index 0000000..b395900
--- /dev/null
+++ b/src/util/reactDomUtil.ts
@@ -0,0 +1,14 @@
+
+import { flushSync } from 'react-dom';
+
+
+// Ref: https://malcolmkee.com/blog/view-transition-api-in-react-app
+export const startViewTransition = (transition: () => void) => {
+  if (document.startViewTransition) {
+    document.startViewTransition(() => {
+      flushSync(transition);
+    });
+  } else {
+    transition();
+  }
+};
diff --git a/src/util/reactUtil.ts b/src/util/reactUtil.ts
index 4387ba9..5fbeff1 100644
--- a/src/util/reactUtil.ts
+++ b/src/util/reactUtil.ts
@@ -33,8 +33,16 @@ export const mergeRefs = <T>(
       if (typeof inputRef === 'function') {
         inputRef(ref);
       } else if (inputRef) {
-        (inputRef as React.MutableRefObject<T | null>).current = ref;
+        inputRef.current = ref;
       }
     });
   };
 };
+
+/**
+ * Utility function that takes a React ID (as returned by `useId()`), and converts it to a CSS custom
+ * identifier. React IDs by default contain colons, which makes them unsuitable for use as CSS identifiers.
+ */
+export const idToCssIdent = (id: string) => {
+  return `--${id.replaceAll(':', '')}`;
+};
diff --git a/src/util/storybook/LoremIpsum.tsx b/src/util/storybook/LoremIpsum.tsx
index 67f6ba2..498add4 100644
--- a/src/util/storybook/LoremIpsum.tsx
+++ b/src/util/storybook/LoremIpsum.tsx
@@ -20,26 +20,39 @@ export const loremIpsum = (params: { short?: boolean } = {}): string => {
 };
 
 export type LoremIpsumProps = ComponentProps<'article'> & {
+  unstyled?: undefined | boolean,
   short?: undefined | boolean,
   paragraphs?: undefined | number,
 };
 export const LoremIpsum = (props: LoremIpsumProps) => {
-  const { short = false, paragraphs = 1, ...propsRest } = props;
+  const { unstyled, short = false, paragraphs = 1, ...propsRest } = props;
   
   if (!Number.isSafeInteger(paragraphs) || paragraphs < 1) {
     throw new Error(`Invalid amount of paragraphs: ${paragraphs}`);
   }
   
+  const renderParagraphs = () => {
+    return (
+      <>
+        {short
+          ? <p>{loremIpsum({ short: true })}</p>
+          // biome-ignore lint/suspicious/noArrayIndexKey: No other key available.
+          : Array.from({ length: paragraphs }).map((_, index) => <p key={index}>{loremIpsum()}</p>)
+        }
+      </>
+    );
+  };
+  
+  if (unstyled) {
+    return <>{renderParagraphs()}</>;
+  }
+  
   return (
     <article
       {...propsRest}
       className={cx('bk-body-text', propsRest.className)}
     >
-      {short
-        ? <p>{loremIpsum({ short: true })}</p>
-        // biome-ignore lint/suspicious/noArrayIndexKey: No other key available.
-        : Array.from({ length: paragraphs }).map((_, index) => <p key={index}>{loremIpsum()}</p>)
-      }
+      {renderParagraphs()}
     </article>
   );
 };