@ds-mo/ui 0.1.0

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Primitives/Toggle',
+  component: Toggle,
+  args: {
+    checked: false,
+    inactive: false,
+    'aria-label': 'Toggle',
+  },
+  argTypes: {
+    checked: { control: 'boolean' },
+    inactive: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+const Controlled = (props: React.ComponentProps<typeof Toggle>) => {
+  const [checked, setChecked] = useState(props.checked ?? false);
+  return <Toggle {...props} checked={checked} onChange={setChecked} />;
+};
+
+export const Playground: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+// ─── Matrix ───────────────────────────────────────────────────────────────────
+
+const row: React.CSSProperties = { display: 'flex', gap: 16, alignItems: 'center' };
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 12 };
+const labelStyle: React.CSSProperties = { fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 80, flexShrink: 0 };
+
+export const Matrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ ...col, fontFamily: 'sans-serif' }}>
+      <div style={row}>
+        <span style={labelStyle}></span>
+        <span style={{ ...labelStyle, textAlign: 'center' }}>off</span>
+        <span style={{ ...labelStyle, textAlign: 'center' }}>on</span>
+      </div>
+      <div style={row}>
+        <span style={labelStyle}>enabled</span>
+        <div style={{ minWidth: 80, display: 'flex', justifyContent: 'center' }}>
+          <Controlled aria-label="Toggle" checked={false} />
+        </div>
+        <div style={{ minWidth: 80, display: 'flex', justifyContent: 'center' }}>
+          <Controlled aria-label="Toggle" checked={true} />
+        </div>
+      </div>
+      <div style={row}>
+        <span style={labelStyle}>Inactive</span>
+        <div style={{ minWidth: 80, display: 'flex', justifyContent: 'center' }}>
+          <Toggle aria-label="Toggle" checked={false} inactive onChange={() => {}} />
+        </div>
+        <div style={{ minWidth: 80, display: 'flex', justifyContent: 'center' }}>
+          <Toggle aria-label="Toggle" checked={true} inactive onChange={() => {}} />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ─── Individual stories ───────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: () => <Controlled aria-label="Toggle" />,
+};
+
+export const Checked: Story = {
+  render: () => <Controlled aria-label="Toggle" checked />,
+};
+
+export const Inactive: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      <Toggle aria-label="Off disabled" checked={false} inactive onChange={() => {}} />
+      <Toggle aria-label="On disabled" checked={true} inactive onChange={() => {}} />
+    </div>
+  ),
+};

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, useState } from 'react';
+import { cn } from '@/utils/cn';
+import styles from './Toggle.module.css';
+
+export interface ToggleProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  inactive?: boolean;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ checked = false, onChange, inactive = false, className, 'aria-label': ariaLabel }, ref) => {
+    const [isPressed, setIsPressed] = useState(false);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+      if (inactive) return;
+      e.preventDefault();
+      setIsPressed(true);
+    };
+
+    const handleMouseUp = () => {
+      if (inactive || !isPressed) return;
+      setIsPressed(false);
+      onChange?.(!checked);
+    };
+
+    const handleMouseLeave = () => {
+      if (isPressed) setIsPressed(false);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={ariaLabel}
+        disabled={inactive}
+        className={cn(styles.toggle, checked && styles.checked, inactive && styles.inactive, className)}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+      >
+        <span className={styles.thumb} />
+      </button>
+    );
+  }
+);
+
+Toggle.displayName = 'Toggle';

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';

package/src/components/ToggleButton/ToggleButton.module.css

@@ -0,0 +1,172 @@
+/* ==========================================================================
+   ToggleButton — hover/pressed via direct background-color + color-mix().
+   No pseudo-element overlays.
+   Elevation controls the chrome level:
+     elevated — bg-primary + shadow  (default)
+     flat     — border only
+     none     — ghost (transparent, no border, no shadow)
+     floating — bg-primary + FAB-strength shadow
+   ========================================================================== */
+
+.toggleButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--dimension-radius-050);
+  cursor: pointer;
+  position: relative;
+  transition: transform var(--effect-motion-short-2);
+  height: var(--dimension-size-400);
+  font-family: inherit;
+  background: transparent;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* Interaction — ghost defaults */
+  --_hover-bg: var(--color-interaction-hover);
+  --_pressed-bg: var(--color-interaction-pressed);
+  --_border: var(--color-border-tertiary);
+}
+
+.toggleButton:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: var(--dimension-space-025);
+}
+
+.toggleButton:hover:not(.inactive) {
+  background-color: var(--_hover-bg);
+}
+
+.toggleButton:active:not(.inactive) {
+  background-color: var(--_pressed-bg);
+  transform: scale(var(--dimension-scale-subtle));
+}
+
+/* ==========================================================================
+   Background context — parent surface awareness
+   ========================================================================== */
+
+.onMedium {
+  --_hover-bg: var(--color-interaction-on-medium-background-hover);
+  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);
+  --_border: var(--color-border-on-medium-background-tertiary);
+}
+
+.onBold {
+  --_hover-bg: var(--color-interaction-on-bold-background-hover);
+  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);
+  --_border: var(--color-border-on-bold-background-tertiary);
+}
+
+.onStrong {
+  --_hover-bg: var(--color-interaction-on-strong-background-hover);
+  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);
+  --_border: var(--color-border-on-strong-background-tertiary);
+}
+
+.onAlwaysDark {
+  --_hover-bg: var(--color-always-dark-interaction-hover);
+  --_pressed-bg: var(--color-always-dark-interaction-pressed);
+  --_border: var(--color-always-dark-border-tertiary);
+}
+
+/* ==========================================================================
+   Elevation levels
+   ========================================================================== */
+
+/* ── Elevated (default): bg-primary + shadow ───────────────────────────── */
+
+.elevationElevated {
+  background-color: var(--color-background-primary);
+  box-shadow: var(--effect-elevation-elevated-sm);
+  color: var(--color-foreground-secondary);
+  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
+}
+
+/* ── Flat: border only, transparent bg ─────────────────────────────────── */
+
+.elevationFlat {
+  box-shadow: inset 0 0 0 1px var(--_border);
+  color: var(--color-foreground-secondary);
+}
+
+/* ── None: ghost — transparent, no border, no shadow ───────────────────── */
+
+.elevationNone {
+  color: var(--color-foreground-secondary);
+}
+
+/* ── Floating: bg-primary + FAB-strength shadow ─────────────────────────── */
+
+.elevationFloating {
+  background-color: var(--color-background-primary);
+  box-shadow: var(--effect-elevation-elevated-floating);
+  color: var(--color-foreground-secondary);
+  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
+  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
+}
+
+/* ── Fg on bold / strong surface ────────────────────────────────────────── */
+
+.onBold.elevationNone, .onBold.elevationFlat,
+.onStrong.elevationNone, .onStrong.elevationFlat {
+  color: var(--color-foreground-on-bold-background-secondary);
+}
+
+/* ── Fg on always-dark surface ─────────────────────────────────────────── */
+
+.onAlwaysDark.elevationNone, .onAlwaysDark.elevationFlat {
+  color: var(--color-always-dark-foreground-secondary);
+}
+
+/* ==========================================================================
+   Pressed state — shared across all elevation levels
+   ========================================================================== */
+
+.pressed {
+  background-color: var(--color-background-faint-brand);
+  color: var(--color-foreground-bold-brand);
+}
+
+/* ==========================================================================
+   Layout
+   ========================================================================== */
+
+.iconOnly    { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }
+.labelOnly   { padding: 0 var(--dimension-space-100); }
+.iconAndLabel{ padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }
+
+/* ==========================================================================
+   Sizes
+   ========================================================================== */
+
+.sizeSM { height: var(--dimension-size-300); }
+.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }
+.sizeSM.labelOnly   { padding: 0 var(--dimension-space-075); }
+.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 0; }
+
+.sizeXS { height: var(--dimension-size-200); }
+.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }
+.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }
+
+/* ==========================================================================
+   Rounded (pill shape)
+   ========================================================================== */
+
+.rounded { border-radius: var(--dimension-radius-half); }
+.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }
+.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }
+.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }
+.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }
+.rounded.iconOnly { width: var(--dimension-size-400); min-width: var(--dimension-size-400); padding: 0; }
+.rounded.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }
+.rounded.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }
+
+/* ==========================================================================
+   Disabled
+   ========================================================================== */
+
+.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+import { ToggleButton } from './ToggleButton';
+import { Surface } from '@/components/Surface';
+import type { ToggleButtonElevation, ToggleButtonSize, ToggleButtonBackground } from './ToggleButton';
+import type { IconComponent } from '@/types/icons';
+
+const PlaceholderIcon: IconComponent = ({ size = 20 }) => (
+  <svg width={size} height={size} viewBox="0 0 20 20" fill="currentColor">
+    <circle cx="10" cy="10" r="6" />
+  </svg>
+);
+
+const meta: Meta<typeof ToggleButton> = {
+  title: 'Primitives (Reviewed)/ToggleButton',
+  component: ToggleButton,
+  args: {
+    label:     'Toggle',
+    elevation: 'elevated',
+    size:      'md',
+    rounded:   false,
+    pressed:   false,
+    inactive:  false,
+  },
+  argTypes: {
+    elevation: { control: 'select', options: ['elevated', 'flat', 'none', 'floating'] },
+    size:      { control: 'select', options: ['md', 'sm', 'xs'] },
+    label:     { control: 'text' },
+    rounded:   { control: 'boolean' },
+    pressed:   { control: 'boolean' },
+    inactive:  { control: 'boolean' },
+    icon: {
+      control: 'boolean',
+      mapping: { true: PlaceholderIcon, false: undefined },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleButton>;
+
+const Controlled = (props: Omit<React.ComponentProps<typeof ToggleButton>, 'pressed' | 'onPressedChange'> & { pressed?: boolean }) => {
+  const [pressed, setPressed] = useState(props.pressed ?? false);
+  return <ToggleButton {...props} pressed={pressed} onPressedChange={setPressed} />;
+};
+
+export const Playground: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+// ─── Matrix ───────────────────────────────────────────────────────────────────
+
+const ELEVATIONS: ToggleButtonElevation[] = ['elevated', 'flat', 'none', 'floating'];
+const SIZES: ToggleButtonSize[] = ['md', 'sm', 'xs'];
+
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' };
+const row: React.CSSProperties = { display: 'flex', gap: 8, alignItems: 'center' };
+const lbl = (): React.CSSProperties => ({ fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 100, flexShrink: 0 });
+const cell = (w = 110): React.CSSProperties => ({ minWidth: w, display: 'flex', justifyContent: 'center' });
+const section = (text: string) => (
+  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555', marginTop: 8 }}>
+    {text}
+  </div>
+);
+const divider = <hr style={{ border: 'none', borderTop: '1px solid #e0e0e0', margin: '16px 0' }} />;
+
+export const Matrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, fontFamily: 'sans-serif' }}>
+
+      {/* ── Elevation levels × States ── */}
+      {section('Elevation × States')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={lbl()}></span>
+          {ELEVATIONS.map(e => (
+            <span key={e} style={{ ...lbl(), textAlign: 'center' }}>{e}</span>
+          ))}
+        </div>
+        {(['unpressed', 'pressed'] as const).map(state => (
+          <div key={state} style={row}>
+            <span style={lbl()}>{state}</span>
+            {ELEVATIONS.map(e => (
+              <div key={e} style={cell()}>
+                <Controlled elevation={e} label="Label" pressed={state === 'pressed'} />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {divider}
+
+      {/* ── Sizes × Elevations ── */}
+      {section('Sizes × Elevations')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={lbl()}></span>
+          {ELEVATIONS.map(e => (
+            <span key={e} style={{ ...lbl(), textAlign: 'center' }}>{e}</span>
+          ))}
+        </div>
+        {SIZES.flatMap(size => ([
+          { key: `${size} label`,      size, hasIcon: false, hasLabel: true  },
+          { key: `${size} icon`,       size, hasIcon: true,  hasLabel: false },
+          { key: `${size} icon+label`, size, hasIcon: true,  hasLabel: true  },
+        ])).map(({ key, size, hasIcon, hasLabel }) => (
+          <div key={key} style={row}>
+            <span style={lbl()}>{key}</span>
+            {ELEVATIONS.map(e => (
+              <div key={e} style={cell()}>
+                <Controlled
+                  elevation={e}
+                  size={size}
+                  label={hasLabel ? 'Label' : undefined}
+                  icon={hasIcon ? PlaceholderIcon : undefined}
+                  aria-label="toggle"
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {divider}
+
+      {/* ── Rounded ── */}
+      {section('Rounded')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={lbl()}></span>
+          {ELEVATIONS.map(e => (
+            <span key={e} style={{ ...lbl(), textAlign: 'center' }}>{e}</span>
+          ))}
+        </div>
+        {([
+          { key: 'label',      hasIcon: false, hasLabel: true  },
+          { key: 'icon',       hasIcon: true,  hasLabel: false },
+          { key: 'icon+label', hasIcon: true,  hasLabel: true  },
+        ] as const).map(({ key, hasIcon, hasLabel }) => (
+          <div key={key} style={row}>
+            <span style={lbl()}>{key}</span>
+            {ELEVATIONS.map(e => (
+              <div key={e} style={cell()}>
+                <Controlled
+                  elevation={e}
+                  rounded
+                  label={hasLabel ? 'Label' : undefined}
+                  icon={hasIcon ? PlaceholderIcon : undefined}
+                  aria-label="toggle"
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {divider}
+
+      {/* ── States ── */}
+      {section('States')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={lbl()}></span>
+          {ELEVATIONS.map(e => (
+            <span key={e} style={{ ...lbl(), textAlign: 'center' }}>{e}</span>
+          ))}
+        </div>
+        {([
+          { key: 'default',           pressed: false, inactive: false },
+          { key: 'pressed',           pressed: true,  inactive: false },
+          { key: 'Inactive',          pressed: false, inactive: true  },
+          { key: 'Inactive+pressed',  pressed: true,  inactive: true  },
+        ] as const).map(({ key, pressed, inactive }) => (
+          <div key={key} style={row}>
+            <span style={lbl()}>{key}</span>
+            {ELEVATIONS.map(e => (
+              <div key={e} style={cell()}>
+                <Controlled elevation={e} label="Label" pressed={pressed} inactive={inactive} />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+    </div>
+  ),
+};
+
+// ─── Individual stories ───────────────────────────────────────────────────────
+
+export const ElevationLevels: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Controlled elevation="elevated" label="Elevated" />
+      <Controlled elevation="flat"     label="Flat" />
+      <Controlled elevation="none"     label="Ghost" />
+      <Controlled elevation="floating" label="Floating" />
+    </div>
+  ),
+};
+
+export const Pressed: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Controlled elevation="elevated" label="Elevated" pressed />
+      <Controlled elevation="flat"     label="Flat"     pressed />
+      <Controlled elevation="none"     label="Ghost"    pressed />
+      <Controlled elevation="floating" label="Floating" pressed />
+    </div>
+  ),
+};
+
+export const Rounded: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Controlled elevation="elevated" label="Label" rounded />
+      <Controlled elevation="flat"     label="Label" rounded />
+      <Controlled elevation="none"     label="Label" rounded />
+      <Controlled elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Toggle" />
+      <Controlled elevation="flat"     icon={PlaceholderIcon} rounded aria-label="Toggle" />
+      <Controlled elevation="none"     icon={PlaceholderIcon} rounded aria-label="Toggle" />
+    </div>
+  ),
+};
+
+export const IconOnly: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Controlled elevation="elevated" icon={PlaceholderIcon} aria-label="Toggle" />
+      <Controlled elevation="flat"     icon={PlaceholderIcon} aria-label="Toggle" />
+      <Controlled elevation="none"     icon={PlaceholderIcon} aria-label="Toggle" />
+      <Controlled elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Toggle" />
+      <Controlled elevation="none"     icon={PlaceholderIcon} rounded aria-label="Toggle" />
+    </div>
+  ),
+};
+
+export const Inactive: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Controlled elevation="elevated" label="Elevated" inactive />
+      <Controlled elevation="flat"     label="Flat"     inactive />
+      <Controlled elevation="none"     label="Ghost"    inactive />
+      <Controlled elevation="elevated" label="Pressed"  inactive pressed />
+      <Controlled elevation="none"     label="Pressed"  inactive pressed />
+    </div>
+  ),
+};
+
+export const FAB: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Controlled elevation="floating" icon={PlaceholderIcon} rounded aria-label="FAB" />
+      <Controlled elevation="floating" icon={PlaceholderIcon} rounded aria-label="FAB" pressed />
+    </div>
+  ),
+};
+
+// ─── Background Context ──────────────────────────────────────────────────────
+
+const TB_BG_CONTEXTS: { bg: ToggleButtonBackground; contrast: 'faint' | 'medium' | 'bold' | 'strong' }[] = [
+  { bg: 'faint',  contrast: 'faint'  },
+  { bg: 'medium', contrast: 'medium' },
+  { bg: 'bold',   contrast: 'bold'   },
+  { bg: 'strong', contrast: 'strong' },
+];
+
+export const BackgroundContext: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {TB_BG_CONTEXTS.map(({ bg, contrast }) => (
+        <Surface key={bg} intent="brand" contrast={contrast} radius="md" style={{ padding: 20 }}>
+          <span style={{ fontSize: 10, fontFamily: 'monospace', opacity: 0.7, display: 'block', marginBottom: 12 }}>
+            background="{bg}" — hover to test interaction
+          </span>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <Controlled elevation="none" label="Ghost" background={bg} />
+            <Controlled elevation="flat" label="Flat" background={bg} />
+            <Controlled elevation="none" icon={PlaceholderIcon} aria-label="Toggle" background={bg} />
+            <Controlled elevation="flat" icon={PlaceholderIcon} label="Icon+Label" background={bg} />
+          </div>
+        </Surface>
+      ))}
+      <div style={{ background: '#1a1a2e', borderRadius: 8, padding: 20 }}>
+        <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'rgba(255,255,255,0.5)', display: 'block', marginBottom: 12 }}>
+          background="always-dark"
+        </span>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <Controlled elevation="none" label="Ghost" background="always-dark" />
+          <Controlled elevation="flat" label="Flat" background="always-dark" />
+          <Controlled elevation="none" icon={PlaceholderIcon} aria-label="Toggle" background="always-dark" />
+        </div>
+      </div>
+    </div>
+  ),
+};