@ds-mo/ui 0.2.4 → 0.4.0

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

@@ -1,85 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,172 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,299 +0,0 @@
-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>
-  ),
-};