{
  "title": "Human and agent selector",
  "path": "/components/view-selector",
  "url": "https://design.werklist.com/components/view-selector",
  "text": "https://design.werklist.com/agent/components/view-selector",
  "summary": "The control at the bottom of the window that switches a page between its designed view and a plain text view.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Human and agent selector",
  "purpose": "A floating radio group of two that switches a page between its designed view and a plain text view.",
  "use": [
    "On every page, fixed at the bottom center of the window."
  ],
  "avoid": [
    "In print.",
    "A third option, the theme included.",
    "Hiding it while the page scrolls."
  ],
  "anatomy": [
    {
      "part": "Capsule",
      "measure": "fixed 16 px above the bottom safe area, centered in the window, 48 px high, inner padding 4 px, 2 px between options, full radius, no border",
      "token": "--surface-1, --elevation-2, --radius-full, --space-1, --layer-selector"
    },
    {
      "part": "Option",
      "measure": "40 px high, 16 px at each side, full radius",
      "token": "--type-nav, --space-4"
    },
    {
      "part": "Chosen fill",
      "measure": "Werklist blue with a white label. The fill changes color in 150 ms, it does not slide",
      "token": "--brand-true, --on-brand, --duration-fast, --ease-standard"
    }
  ],
  "states": [
    {
      "name": "Rest",
      "change": "Muted ink",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Hover",
      "change": "Control fill and full ink on the option not chosen",
      "tokens": [
        "--surface-control",
        "--text"
      ]
    },
    {
      "name": "Chosen",
      "change": "Werklist blue fill, white label, aria-checked true",
      "tokens": [
        "--brand-true",
        "--on-brand"
      ]
    },
    {
      "name": "Focus",
      "change": "2 px ring, 2 px offset",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "Reduced motion",
      "change": "The color changes at once"
    },
    {
      "name": "Forced colors",
      "change": "The capsule is outlined, and the chosen option keeps a 1 px outline"
    },
    {
      "name": "At the footer",
      "change": "Stays at the foot of the window, over the footer too, to the end of the page"
    },
    {
      "name": "Hidden",
      "change": "In print, and while a dialog or the menu is open"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Reaches the chosen option"
    },
    {
      "key": "ArrowLeft, ArrowRight, ArrowUp, ArrowDown",
      "action": "Move to the other option and choose it"
    },
    {
      "key": "Home, End",
      "action": "Choose the first or the last option"
    },
    {
      "key": "Space",
      "action": "Chooses the focused option"
    }
  ],
  "accessibility": [
    "A radio group named View, with two radio options.",
    "It comes right after the skip link, before the header.",
    "Focus stays on the selector after a switch.",
    "Muted ink and the white label on blue meet 4.5 to 1 in both themes."
  ],
  "content": [
    "Option labels: Human, Agent.",
    "Group name: View."
  ],
  "rules": [
    "The page keeps its scroll position after a switch.",
    "Leave free room at the end of each page, so the selector never covers the last line."
  ],
  "tokens": [
    "--surface-1",
    "--elevation-2",
    "--radius-full",
    "--space-1",
    "--space-4",
    "--type-nav",
    "--text",
    "--text-muted",
    "--surface-control",
    "--brand-true",
    "--on-brand",
    "--focus-ring",
    "--layer-selector",
    "--duration-fast",
    "--ease-standard"
  ]
}