@workday/canvas-kit-mcp 16.0.11 → 16.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/apps/status-indicator.html +183 -92
  2. package/dist/apps/tooltip.html +1 -1
  3. package/dist/cli.js +3 -3
  4. package/dist/cli.js.map +1 -1
  5. package/dist/index.js +3 -3
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -13,7 +13,7 @@ import { z } from "zod";
13
13
  // package.json
14
14
  var package_default = {
15
15
  name: "@workday/canvas-kit-mcp",
16
- version: "16.0.11",
16
+ version: "16.0.12",
17
17
  description: "MCP package for Canvas Kit",
18
18
  author: "Workday, Inc. (https://www.workday.com)",
19
19
  license: "Apache-2.0",
@@ -580,8 +580,8 @@ var stories_config_default = {
580
580
  title: "Preview/Status Indicator",
581
581
  storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs",
582
582
  mdxPath: "modules/preview-react/status-indicator/stories/StatusIndicator.mdx",
583
- mdxProse: "# Canvas Kit Status Indicator\n\nStatus Indicators help the user quickly identify the status of a task, action, or page element.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-preview-react\n```\n\n## Usage\n\n### Basic Example\n\n`StatusIndicator` includes a container `StatusIndicator` component and the following subcomponents\nwhich can be composed in a variety of ways: `StatusIndicator.Label` and `StatusIndicator.Icon`.\n\nA basic `StatusIndicator` with a `StatusIndicator.Label` will render text with a gray background and\nlow emphasis.\n```tsx\nimport React from 'react';\n\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\n\nexport const Basic = () => {\n return (\n <StatusIndicator>\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n </StatusIndicator>\n );\n};\n```\n\n### Emphasis\n\nSet the `emphasis` prop of `StatusIndicator` to adjust the contrast between the text and background\ncolor. Emphasis is typically used to convey more visual urgency.\n\n`emphasis` accepts `high` or `low`.\n```tsx\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n gap: system.gap.md,\n});\n\nexport const Emphasis = () => {\n return (\n <Flex cs={parentContainerStyles}>\n <StatusIndicator emphasis=\"high\">\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>\n </StatusIndicator>\n <StatusIndicator emphasis=\"low\">\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>Low Emphasis</StatusIndicator.Label>\n </StatusIndicator>\n </Flex>\n );\n};\n```\n\n### Icon\n\nUse `StatusIndicator.Icon` to add an icon to the `StatusIndicator` as a visual decorator. The\nposition of the icon may be adjusted depending on where you place it in the markup.\n```tsx\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n gap: system.gap.md,\n});\n\nexport const Icon = () => {\n return (\n <Flex cs={parentContainerStyles}>\n <StatusIndicator>\n <StatusIndicator.Icon aria-label=\"unpublished\" icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n </StatusIndicator>\n <StatusIndicator variant=\"positive\">\n <StatusIndicator.Label>published</StatusIndicator.Label>\n <StatusIndicator.Icon aria-label=\"published\" icon={cloudArrowUpIcon} />\n </StatusIndicator>\n </Flex>\n );\n};\n```\n\n### Overflow\n\nWe **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its\nmaximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we\nsuggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the\noverflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`\nof `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).\n```tsx\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';\nimport {base} from '@workday/canvas-tokens-web';\n\nconst statusIndicatorStyles = createStyles({\n maxWidth: base.size1200,\n});\n\nexport const Overflow = () => {\n return (\n <OverflowTooltip>\n <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>\n Your workbook is currently in process of saving\n </StatusIndicator.Label>\n </StatusIndicator>\n </OverflowTooltip>\n );\n};\n```\n\n### Variants\n\nSet the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the\nfollowing values:\n\n- `gray`\n- `orange`\n- `blue`\n- `green`\n- `red`\n- `transparent`\n\nThe background color dictated by the `variant` will be dark or light based on the `emphasis`.\n```tsx\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n parentContainerStyles: createStyles({\n gap: system.gap.md,\n flexDirection: 'column',\n }),\n innerContainerStyles: createStyles({\n gap: system.gap.md,\n }),\n};\n\nexport const Variants = () => {\n return (\n <Flex cs={styleOverrides.parentContainerStyles}>\n <Flex cs={styleOverrides.innerContainerStyles}>\n <StatusIndicator>\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant=\"caution\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant=\"info\">\n <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant=\"positive\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant=\"critical\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant=\"transparent\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n </Flex>\n <Flex cs={styleOverrides.innerContainerStyles}>\n <StatusIndicator emphasis=\"high\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis=\"high\" variant=\"caution\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis=\"high\" variant=\"info\">\n <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis=\"high\" variant=\"positive\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis=\"high\" variant=\"critical\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis=\"high\" variant=\"transparent\">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n </Flex>\n </Flex>\n );\n};\n```\n\n### Custom Example\n\nYou can customize both the icon and color of the `StatusIndicator` to create a custom variant.\n```tsx\nimport React from 'react';\n\nimport {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {documentSparkleIcon} from '@workday/canvas-system-icons-web';\nimport {base, system} from '@workday/canvas-tokens-web';\n\nconst customStyles = createStyles({\n background: base.blue900,\n [systemIconStencil.vars.color]: system.color.fg.inverse,\n color: system.color.fg.inverse,\n});\n\nexport const Custom = () => {\n return (\n <StatusIndicator cs={customStyles}>\n <StatusIndicator.Icon icon={documentSparkleIcon} size=\"xxs\" />\n <StatusIndicator.Label>AI Content</StatusIndicator.Label>\n </StatusIndicator>\n );\n};\n```\n\n### Custom Styles\n\nStatus Indicator and its subcomponents support custom styling via the `cs` prop. For more\ninformation, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Component API\n\n",
584
- accessibilityProse: ""
583
+ mdxProse: '# Canvas Kit Status Indicator\n\nStatus Indicators help the user quickly identify the status of a task, action, or page element.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-preview-react\n```\n\n## Usage\n\n### Basic Example\n\n`StatusIndicator` includes a container `StatusIndicator` component and the following subcomponents\nwhich can be composed in a variety of ways: `StatusIndicator.Label` and `StatusIndicator.Icon`.\n\nA basic `StatusIndicator` with a `StatusIndicator.Label` will render text with a gray background and\nlow emphasis.\n```tsx\nimport React from \'react\';\n\nimport {StatusIndicator} from \'@workday/canvas-kit-preview-react/status-indicator\';\n\nexport const Basic = () => {\n return (\n <StatusIndicator>\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n </StatusIndicator>\n );\n};\n```\n\n### Emphasis\n\nSet the `emphasis` prop of `StatusIndicator` to adjust the contrast between the text and background\ncolor. Emphasis is typically used to convey more visual urgency.\n\n`emphasis` accepts `high` or `low`.\n```tsx\nimport {StatusIndicator} from \'@workday/canvas-kit-preview-react/status-indicator\';\nimport {Flex} from \'@workday/canvas-kit-react/layout\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {cloudArrowUpIcon} from \'@workday/canvas-system-icons-web\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst parentContainerStyles = createStyles({\n gap: system.gap.md,\n});\n\nexport const Emphasis = () => {\n return (\n <Flex cs={parentContainerStyles}>\n <StatusIndicator emphasis="high">\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>\n </StatusIndicator>\n <StatusIndicator emphasis="low">\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>Low Emphasis</StatusIndicator.Label>\n </StatusIndicator>\n </Flex>\n );\n};\n```\n\n### Icon\n\nUse `StatusIndicator.Icon` to add an icon to the `StatusIndicator` as a visual decorator. The\nposition of the icon may be adjusted depending on where you place it in the markup.\n```tsx\nimport {StatusIndicator} from \'@workday/canvas-kit-preview-react/status-indicator\';\nimport {Flex} from \'@workday/canvas-kit-react/layout\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {cloudArrowUpIcon} from \'@workday/canvas-system-icons-web\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst parentContainerStyles = createStyles({\n gap: system.gap.md,\n});\n\nexport const Icon = () => {\n return (\n <Flex cs={parentContainerStyles}>\n <StatusIndicator>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n </StatusIndicator>\n <StatusIndicator variant="positive">\n <StatusIndicator.Label>published</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n </Flex>\n );\n};\n```\n\n> **Accessibility Note**: In this example, the icon is used as a decoration and is intentionally\n> hidden from screen readers. If you\'re using icons to convey additional information, add\n> `role="img"` and a translated `aria-label` string to `StatusIndicator.Icon`.\n\n### Overflow\n\nWe **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its\nmaximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we\nsuggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the\noverflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`\nof `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).\n```tsx\nimport {StatusIndicator} from \'@workday/canvas-kit-preview-react/status-indicator\';\nimport {OverflowTooltip} from \'@workday/canvas-kit-react/tooltip\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {cloudArrowUpIcon} from \'@workday/canvas-system-icons-web\';\nimport {base} from \'@workday/canvas-tokens-web\';\n\nconst statusIndicatorStyles = createStyles({\n maxWidth: base.size1200,\n});\n\nexport const Overflow = () => {\n return (\n <OverflowTooltip>\n <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>\n Your workbook is currently in process of saving\n </StatusIndicator.Label>\n </StatusIndicator>\n </OverflowTooltip>\n );\n};\n```\n\n### Variants\n\nSet the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the\nfollowing values:\n\n- `neutral` (default; `gray` is a deprecated alias)\n- `caution` (`orange` is a deprecated alias)\n- `info` (`blue` is a deprecated alias)\n- `positive` (`green` is a deprecated alias)\n- `critical` (`red` is a deprecated alias)\n- `transparent`\n\nThe background color dictated by the `variant` will be dark or light based on the `emphasis`.\n`variant` and `emphasis` change color only\u2014they do not change the accessible name. Put the status\nmeaning in **`StatusIndicator.Label`**.\n```tsx\nimport {StatusIndicator} from \'@workday/canvas-kit-preview-react/status-indicator\';\nimport {Flex} from \'@workday/canvas-kit-react/layout\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {cloudArrowUpIcon} from \'@workday/canvas-system-icons-web\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst styleOverrides = {\n parentContainerStyles: createStyles({\n gap: system.gap.md,\n flexDirection: \'column\',\n }),\n innerContainerStyles: createStyles({\n gap: system.gap.md,\n }),\n};\n\nexport const Variants = () => {\n return (\n <Flex cs={styleOverrides.parentContainerStyles}>\n <Flex cs={styleOverrides.innerContainerStyles}>\n <StatusIndicator>\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant="caution">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant="info">\n <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant="positive">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant="critical">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator variant="transparent">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n </Flex>\n <Flex cs={styleOverrides.innerContainerStyles}>\n <StatusIndicator emphasis="high">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis="high" variant="caution">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis="high" variant="info">\n <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis="high" variant="positive">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis="high" variant="critical">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n <StatusIndicator emphasis="high" variant="transparent">\n <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>\n <StatusIndicator.Icon icon={cloudArrowUpIcon} />\n </StatusIndicator>\n </Flex>\n </Flex>\n );\n};\n```\n\n### Custom Example\n\nYou can customize both the icon and color of the `StatusIndicator` to create a custom variant.\n```tsx\nimport React from \'react\';\n\nimport {StatusIndicator} from \'@workday/canvas-kit-preview-react/status-indicator\';\nimport {systemIconStencil} from \'@workday/canvas-kit-react/icon\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {documentSparkleIcon} from \'@workday/canvas-system-icons-web\';\nimport {base, system} from \'@workday/canvas-tokens-web\';\n\nconst customStyles = createStyles({\n background: base.blue900,\n [systemIconStencil.vars.color]: system.color.fg.inverse,\n color: system.color.fg.inverse,\n});\n\nexport const Custom = () => {\n return (\n <StatusIndicator cs={customStyles}>\n <StatusIndicator.Icon icon={documentSparkleIcon} size="xxs" />\n <StatusIndicator.Label>AI Content</StatusIndicator.Label>\n </StatusIndicator>\n );\n};\n```\n\n### Custom Styles\n\nStatus Indicator and its subcomponents support custom styling via the `cs` prop. For more\ninformation, check our\n["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Accessibility\n\n`StatusIndicator` is a compact, **non-interactive** status label. The accessibility goal is that\nassistive technology users get the same status meaning as sighted users from\n**`StatusIndicator.Label`** text\u2014not from color, emphasis, or a decorative icon.\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): a container and a visible label. Icon is\noptional.\n\n```tsx\n\n<StatusIndicator>\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n</StatusIndicator>;\n```\n\nAlways include **`StatusIndicator.Label`** with concise text that names the status. Do not rely on\n**`variant`**, **`emphasis`**, or **`StatusIndicator.Icon`** as the only indicator of meaning.\n\n### Built-in Behaviors\n\nCanvas Kit applies visual layout and color through `statusIndicatorStencil` when you compose\n**`StatusIndicator`**, **`StatusIndicator.Label`**, and optionally **`StatusIndicator.Icon`**. It\ndoes **not** apply `role="img"` or an accessible name on the icon. **Do not duplicate them** in\nconsuming code. Only add icon ARIA when the informative-icon requirement below applies.\n\n**ARIA and DOM** (_applied by subcomponents_):\n\n- **`StatusIndicator`**: renders a `div` (override with `as` if needed). Default `maxWidth` is\n `200px`. Default `variant` is `neutral`; default `emphasis` is `low`. No ARIA role is set.\n- **`StatusIndicator.Label`**: renders a `span` with bold subtext, `white-space: nowrap`,\n `overflow: hidden`, and `text-overflow: ellipsis`. Truncation is visual; the full text remains in\n the accessibility tree.\n- **`StatusIndicator.Icon`**: renders `SystemIcon` at size `20`. It does **not** set `role="img"` or\n `aria-label`. If `icon.type` is missing, the icon renders nothing.\n\n**Keyboard** (_not a control by default_):\n\n- **`StatusIndicator`** is not in the tab order. There is no built-in keyboard behavior.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- Assistive technology should announce the **`StatusIndicator.Label`** text as the content of the\n indicator\n- `variant` and `emphasis` are **not** announced\n- A decorative **`StatusIndicator.Icon`** (no `role="img"`) should not add a separate accessible\n name\n- [**OverflowTooltip**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs#tooltips-on-overflowing-content)\n uses `type="muted"` and does not set `aria-label` on the target\u2014the accessible name stays the\n element\'s text content\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Status Indicator. Rows marked _(conditional)_ apply\nonly when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** include a visible **`StatusIndicator.Label`**; keep the icon\ndecorative (omit `role="img"` and `aria-label`); omit `tabIndex` and **`OverflowTooltip`**. Prefer\nshort label text so truncation is unnecessary.\n\n| Requirement | How to satisfy |\n| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Visible status text | **`StatusIndicator.Label`** with translated text that names the status (for example, "Unpublished", not color alone) |\n| Color is not the only indicator | Use **`variant`** / **`emphasis`** only as visual reinforcement of the label. See [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81) |\n| Decorative icon _(conditional)_ | **`StatusIndicator.Icon`** with `icon={...}` and **no** `role="img"` when the icon only supports the label visually |\n| Informative icon _(conditional)_ | On **`StatusIndicator.Icon`**, set `role="img"` and a translated `aria-label` that adds meaning **beyond** the label text |\n| Overflowed label _(conditional)_ | Avoid exceeding the `200px` max width. If truncation cannot be avoided, wrap **`StatusIndicator`** in **`OverflowTooltip`** and set `tabIndex={0}` so keyboard and mouse users can reveal the full text. See the [Overflow example](#overflow) |\n\n**Informative icon** _(conditional)_:\n\n```tsx\n\n<StatusIndicator>\n <StatusIndicator.Icon role="img" aria-label="Waiting to sync" icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n</StatusIndicator>;\n```\n\n**Summary for code generation:**\n\n- **REQUIRED:** visible **`StatusIndicator.Label`** whose text conveys the status\n- **CONDITIONAL:** `role="img"` + translated `aria-label` on **`StatusIndicator.Icon`**,\n **`OverflowTooltip`** + `tabIndex={0}`\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Omit **`StatusIndicator.Label`** or use an empty label, relying on `variant`, `emphasis`, or an\n icon for meaning\n- Set `role="img"` on a decorative **`StatusIndicator.Icon`**, or set `role="img"` without a\n translated `aria-label`\u2014that can expose an unnamed image to assistive technology. See **Decorative\n icon** and **Informative icon** in **Accessibility Requirements**\n- Duplicate the label text as `aria-label` on the icon when the icon adds no extra meaning\n- Add `role="status"`, `aria-live`, or `aria-label` on **`StatusIndicator`** by default\u2014Canvas Kit\n does not wire these, and they change how assistive technology treats a static label. If a design\n requires announcing asynchronous updates, see\n [ARIA Live Regions](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs)\n- Truncate label text without **`OverflowTooltip`** and `tabIndex={0}` when keyboard users must read\n the overflow\n\n## Component API\n\n',
584
+ accessibilityProse: '## Accessibility\n\n`StatusIndicator` is a compact, **non-interactive** status label. The accessibility goal is that\nassistive technology users get the same status meaning as sighted users from\n**`StatusIndicator.Label`** text\u2014not from color, emphasis, or a decorative icon.\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): a container and a visible label. Icon is\noptional.\n\n```tsx\n\n<StatusIndicator>\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n</StatusIndicator>;\n```\n\nAlways include **`StatusIndicator.Label`** with concise text that names the status. Do not rely on\n**`variant`**, **`emphasis`**, or **`StatusIndicator.Icon`** as the only indicator of meaning.\n\n### Built-in Behaviors\n\nCanvas Kit applies visual layout and color through `statusIndicatorStencil` when you compose\n**`StatusIndicator`**, **`StatusIndicator.Label`**, and optionally **`StatusIndicator.Icon`**. It\ndoes **not** apply `role="img"` or an accessible name on the icon. **Do not duplicate them** in\nconsuming code. Only add icon ARIA when the informative-icon requirement below applies.\n\n**ARIA and DOM** (_applied by subcomponents_):\n\n- **`StatusIndicator`**: renders a `div` (override with `as` if needed). Default `maxWidth` is\n `200px`. Default `variant` is `neutral`; default `emphasis` is `low`. No ARIA role is set.\n- **`StatusIndicator.Label`**: renders a `span` with bold subtext, `white-space: nowrap`,\n `overflow: hidden`, and `text-overflow: ellipsis`. Truncation is visual; the full text remains in\n the accessibility tree.\n- **`StatusIndicator.Icon`**: renders `SystemIcon` at size `20`. It does **not** set `role="img"` or\n `aria-label`. If `icon.type` is missing, the icon renders nothing.\n\n**Keyboard** (_not a control by default_):\n\n- **`StatusIndicator`** is not in the tab order. There is no built-in keyboard behavior.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- Assistive technology should announce the **`StatusIndicator.Label`** text as the content of the\n indicator\n- `variant` and `emphasis` are **not** announced\n- A decorative **`StatusIndicator.Icon`** (no `role="img"`) should not add a separate accessible\n name\n- [**OverflowTooltip**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs#tooltips-on-overflowing-content)\n uses `type="muted"` and does not set `aria-label` on the target\u2014the accessible name stays the\n element\'s text content\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Status Indicator. Rows marked _(conditional)_ apply\nonly when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** include a visible **`StatusIndicator.Label`**; keep the icon\ndecorative (omit `role="img"` and `aria-label`); omit `tabIndex` and **`OverflowTooltip`**. Prefer\nshort label text so truncation is unnecessary.\n\n| Requirement | How to satisfy |\n| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Visible status text | **`StatusIndicator.Label`** with translated text that names the status (for example, "Unpublished", not color alone) |\n| Color is not the only indicator | Use **`variant`** / **`emphasis`** only as visual reinforcement of the label. See [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81) |\n| Decorative icon _(conditional)_ | **`StatusIndicator.Icon`** with `icon={...}` and **no** `role="img"` when the icon only supports the label visually |\n| Informative icon _(conditional)_ | On **`StatusIndicator.Icon`**, set `role="img"` and a translated `aria-label` that adds meaning **beyond** the label text |\n| Overflowed label _(conditional)_ | Avoid exceeding the `200px` max width. If truncation cannot be avoided, wrap **`StatusIndicator`** in **`OverflowTooltip`** and set `tabIndex={0}` so keyboard and mouse users can reveal the full text. See the [Overflow example](#overflow) |\n\n**Informative icon** _(conditional)_:\n\n```tsx\n\n<StatusIndicator>\n <StatusIndicator.Icon role="img" aria-label="Waiting to sync" icon={cloudArrowUpIcon} />\n <StatusIndicator.Label>Unpublished</StatusIndicator.Label>\n</StatusIndicator>;\n```\n\n**Summary for code generation:**\n\n- **REQUIRED:** visible **`StatusIndicator.Label`** whose text conveys the status\n- **CONDITIONAL:** `role="img"` + translated `aria-label` on **`StatusIndicator.Icon`**,\n **`OverflowTooltip`** + `tabIndex={0}`\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Omit **`StatusIndicator.Label`** or use an empty label, relying on `variant`, `emphasis`, or an\n icon for meaning\n- Set `role="img"` on a decorative **`StatusIndicator.Icon`**, or set `role="img"` without a\n translated `aria-label`\u2014that can expose an unnamed image to assistive technology. See **Decorative\n icon** and **Informative icon** in **Accessibility Requirements**\n- Duplicate the label text as `aria-label` on the icon when the icon adds no extra meaning\n- Add `role="status"`, `aria-live`, or `aria-label` on **`StatusIndicator`** by default\u2014Canvas Kit\n does not wire these, and they change how assistive technology treats a static label. If a design\n requires announcing asynchronous updates, see\n [ARIA Live Regions](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs)\n- Truncate label text without **`OverflowTooltip`** and `tabIndex={0}` when keyboard users must read\n the overflow'
585
585
  },
586
586
  radio: {
587
587
  title: "Preview/Inputs/Radio",