@workday/canvas-kit-mcp 16.1.1 → 16.1.3

package/dist/cli.js

@@ -18,7 +18,7 @@ import { z as z2 } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "16.1.1",
+  version: "16.1.3",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -1661,8 +1661,8 @@ var stories_config_default = {
       title: "Components/Containers/Expandable",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-containers-expandable--docs",
       mdxPath: "modules/react/expandable/stories/Expandable.mdx",
-      mdxProse: '# Canvas Kit Expandable\n\n`Expandable` is a compound component that creates a header to expand or collapse related content.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Start Icon\n\nFor a basic expandable container with a chevron icon before the title, place`Expandable.Icon` before\n`Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to\n`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon when\ncollapsed and a down chevron icon when expanded.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\nexport const StartIcon = () => (\n  <Expandable>\n    <Expandable.Target headingLevel="h4">\n      <Expandable.Icon iconPosition="start" />\n      <Expandable.Title>Title</Expandable.Title>\n    </Expandable.Target>\n\n    <Expandable.Content>Content</Expandable.Content>\n  </Expandable>\n);\n```\n\n### End Icon\n\nFor an expandable container with a chevron icon after the title, place `Expandable.Title` before\n`Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to\n`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon when\ncollapsed and an up chevron icon when expanded.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\nexport const EndIcon = () => (\n  <Expandable>\n    <Expandable.Target headingLevel="h4">\n      <Expandable.Title>\n        This is a really long title that should wrap to multiple lines\n      </Expandable.Title>\n      <Expandable.Icon iconPosition="end" />\n    </Expandable.Target>\n\n    <Expandable.Content>Content</Expandable.Content>\n  </Expandable>\n);\n```\n\n### With Avatar\n\nTo include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and\n`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be passed\nto `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after\n`Expandable.Title`.\n\n**Note:** If using an avatar image, do not also include an Icon component in addition to the Expandable.Icon.\nThis component is meant to have either an avatar image or an icon in addition to the Expandable.Icon, or neither\nan avatar image nor an extra icon.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\n// @ts-ignore: Cannot find module error\nimport testAvatar from \'./test-avatar.png\';\n\nexport const Avatar = () => (\n  <div>\n    <Expandable>\n      <Expandable.Target headingLevel="h4">\n        <Expandable.Icon iconPosition="start" />\n        <Expandable.Avatar name="Avatar" url={testAvatar} />\n        <Expandable.Title>Title</Expandable.Title>\n      </Expandable.Target>\n\n      <Expandable.Content>Content</Expandable.Content>\n    </Expandable>\n    <Expandable>\n      <Expandable.Target headingLevel="h4">\n        <Expandable.Avatar name="Avatar" url={testAvatar} />\n        <Expandable.Title>Title</Expandable.Title>\n        <Expandable.Icon iconPosition="end" />\n      </Expandable.Target>\n\n      <Expandable.Content>Content</Expandable.Content>\n    </Expandable>\n  </div>\n);\n```\n\n> **Accessibility Note:** In this situation, the Avatar is decorative and should not be announced to\n> screen readers. The `<Expandable.Avatar>` component has `isDecorative` set to `true` by default to\n> hide it from screen readers, as avatars in expandable headers are typically decorative when paired\n> with adjacent text.\n\n### Right to Left (RTL)\n\nExpandable container has bidirectional support and should function as expected with RTL languages as\nlong as the content direction is set in your Canvas theme.\n```tsx\nimport {CanvasProvider} from \'@workday/canvas-kit-react/common\';\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\nexport const RTL = () => {\n  return (\n    <CanvasProvider dir="rtl">\n      <Expandable>\n        <Expandable.Target headingLevel="h4">\n          <Expandable.Icon iconPosition="start" />\n          <Expandable.Avatar name="Avatar" />\n          <Expandable.Title>Title</Expandable.Title>\n        </Expandable.Target>\n\n        <Expandable.Content>Content</Expandable.Content>\n      </Expandable>\n      <Expandable>\n        <Expandable.Target headingLevel="h4">\n          <Expandable.Avatar name="Avatar" />\n          <Expandable.Title>Title</Expandable.Title>\n          <Expandable.Icon iconPosition="end" />\n        </Expandable.Target>\n\n        <Expandable.Content>Content</Expandable.Content>\n      </Expandable>\n    </CanvasProvider>\n  );\n};\n```\n\n### Depth\n\nThe `depth` prop passed to `Expandable` allows you to adjust the visual elevation of a component\nusing our depth tokens.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst expandableStyles = createStyles({\n  boxShadow: system.depth[3],\n  borderRadius: system.shape.lg,\n  padding: system.padding.xs,\n  margin: system.gap.xs,\n});\n\nexport const Depth = () => {\n  return (\n    <Expandable cs={expandableStyles}>\n      <Expandable.Target headingLevel="h4">\n        <Expandable.Title>Additional Information</Expandable.Title>\n        <Expandable.Icon iconPosition="end" />\n      </Expandable.Target>\n\n      <Expandable.Content>This Expandable Container has a depth of 3.</Expandable.Content>\n    </Expandable>\n  );\n};\n```\n\n### Title Wrap\n\nLong titles will wrap to the next line and increase the height of the container.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\n// @ts-ignore: Cannot find module error\nimport testAvatar from \'./test-avatar.png\';\n\nexport const LongTitle = () => (\n  <Expandable>\n    <Expandable.Target headingLevel="h4">\n      <Expandable.Icon iconPosition="start" />\n      <Expandable.Avatar name="Avatar" url={testAvatar} />\n      <Expandable.Title>\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\n        onions, and oregano.\n      </Expandable.Title>\n    </Expandable.Target>\n\n    <Expandable.Content>Content</Expandable.Content>\n  </Expandable>\n);\n```\n\nYou can also have direct access to the model if\n\n### Hoisted Model\n\nIf you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In the\nexample below, we\'re hoisting the models to expand and collapse all three containers at once.\n```tsx\nimport {SecondaryButton} from \'@workday/canvas-kit-react/button\';\nimport {useUniqueId} from \'@workday/canvas-kit-react/common\';\nimport {Expandable, useExpandableModel} from \'@workday/canvas-kit-react/expandable\';\nimport {Flex} from \'@workday/canvas-kit-react/layout\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst listStyles = createStyles({\n  flexDirection: \'column\',\n  gap: system.gap.sm,\n  padding: \'0\',\n  marginInline: system.padding.md,\n  marginBlock: \'0\',\n});\n\nexport const HoistedModel = () => {\n  const modelOne = useExpandableModel();\n  const modelTwo = useExpandableModel();\n  const modelThree = useExpandableModel();\n\n  const idOne = useUniqueId();\n  const idTwo = useUniqueId();\n  const idThree = useUniqueId();\n\n  const handleExpandAll = () => {\n    modelOne.events.show();\n    modelTwo.events.show();\n    modelThree.events.show();\n  };\n\n  const handleCollapseAll = () => {\n    modelOne.events.hide();\n    modelTwo.events.hide();\n    modelThree.events.hide();\n  };\n\n  return (\n    <Flex cs={{gap: system.gap.lg, flexDirection: \'column\'}}>\n      <Flex cs={{gap: system.gap.md}}>\n        <SecondaryButton onClick={handleExpandAll}>Expand All</SecondaryButton>\n        <SecondaryButton onClick={handleCollapseAll}>Collapse All</SecondaryButton>\n      </Flex>\n      <Flex cs={{flexDirection: \'column\'}}>\n        <Expandable model={modelOne}>\n          <Expandable.Target headingLevel="h4">\n            <Expandable.Title id={idOne}>Usage Guidance</Expandable.Title>\n            <Expandable.Icon iconPosition="end" />\n          </Expandable.Target>\n\n          <Expandable.Content as="section" aria-labelledby={idOne}>\n            This component highlights the most important details of a section and reveals more when\n            a user taps or clicks on the header part of the container. Enabling users to hide and\n            show information ensures the design remains focused and relevant to their expectations.\n            Scanning through the most critical information first makes processing more efficient\n            without compromising the ability to access additional information.\n          </Expandable.Content>\n        </Expandable>\n        <Expandable model={modelTwo}>\n          <Expandable.Target headingLevel="h4">\n            <Expandable.Title id={idTwo}>Accessibility Guidelines</Expandable.Title>\n            <Expandable.Icon iconPosition="end" />\n          </Expandable.Target>\n\n          <Expandable.Content as="section" aria-labelledby={idTwo}>\n            <Flex as="ul" cs={listStyles}>\n              <li>\n                The state of a component being open or closed must be conveyed to assistive\n                technologies.\n              </li>\n              <li>A Button must be used as the control to toggle the display of any content.</li>\n              <li>\n                If there are multiple toggle Buttons on the same page, provide additional\n                information in their labels to make them uniquely distinguishable to a screen\n                reader.\n              </li>\n              <li>\n                Do not change the toggle Button label to convey state. An exception to this would be\n                a scenario where a visual hint text is decoupled from both the state and the label\n                for a control so the hint text is not announced by assistive technologies.\n              </li>\n              <li>\n                Avoid keyboard traps when adding components to the accordion panel. For example, the\n                user expands an accordion, but is unable to tab to the next focusable element.\n              </li>\n              <li>\n                Hidden content must be hidden correctly from keyboard, screen reader, and touch\n                interaction.\n              </li>\n              <li>\n                Changing the label of something to indicate its state will not always be accounted\n                for in live time for a screen reader user. For example, a play button should have a\n                non-changing, persistent label and the state (pressed or unpressed) is conveyed\n                visually as well as to assistive technology once the state is changed.\n              </li>\n            </Flex>\n          </Expandable.Content>\n        </Expandable>\n        <Expandable model={modelThree}>\n          <Expandable.Target headingLevel="h4">\n            <Expandable.Title id={idThree}>Content Guidelines</Expandable.Title>\n            <Expandable.Icon iconPosition="end" />\n          </Expandable.Target>\n          <Expandable.Content as="section" aria-labelledby={idThree}>\n            Titles should be short and concise, yet long enough to explain what the user would\n            expect to see when the content is expanded. If titles must be long, make sure it doesn\'t\n            wrap more than two lines.\n          </Expandable.Content>\n        </Expandable>\n      </Flex>\n    </Flex>\n  );\n};\n```\n\n> **Accessibility Note:** When using multiple Expandable Containers on a page, use the `as` prop to\n> render the `<Expandable.Content>` sub-component as an HTML `<section>` element. Then, use\n> `aria-labelledby` to reference the unique `id` of the `<Expandable.Title>` element. This practice\n> can be useful to screen reader users when multiple Expandable Containers are opened at one time\n> for uniquely describing the boundaries of the expandable content.\n\n## Accessibility\n\nOur Expandable component renders a semantic HTML `<button>` element to the DOM, with an optional\nparent heading element as defined by the `headingLevel` prop. The `aria-expanded` property is\nincluded on the button to indicate the state of the content to screen readers.\n\n[Accordion Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)\n\n- Use the `headingLevel` prop to assign an appropriate heading level based on the context of the\n  page content.\n- When using Expandable Container for navigation elements, then we don\'t recommend using the\n  `headingLevel` prop. This will render only expandable buttons to the DOM, reserving headings for\n  organizing content in the main body of the page.\n- The `as` prop may also be used on `<Expandable.Content>` to render an HTML `<ul>` element for\n  displaying a list of items. For example, check out\n  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).\n\n### Navigation\n\n- **Tab key**: Moves focus to the next expandable button or focusable element\n- **Shift + Tab**: Moves focus to the previous focusable element\n- **Enter or Space**: Toggles the expanded/collapsed state\n\n### Screen Reader Experience\n\n- The expandable button will be announced with its title text followed by the button role\n- The current state will be announced as either "collapsed" or "expanded" (For example: "Usage\n  Guidance, button, collapsed" or "Usage Guidance, button, expanded")\n- **State Changes:** When activating the button to expand content, screen readers will announce the\n  new "expanded" state and vice versa when collapsing content.\n- **Content Regions:** Screen reader users can use landmark navigation to jump between sections and\n  each section will be announced with its associated title (For example: "Usage Guidance, landmark\n  region")\n- **Heading Structure:** Using heading levels with expandable buttons allows screen reader users to\n  navigate by headings, making the document structure and hierarchy easier to understand.\n\n## Component API\n\n',
-      accessibilityProse: '## Accessibility\n\nOur Expandable component renders a semantic HTML `<button>` element to the DOM, with an optional\nparent heading element as defined by the `headingLevel` prop. The `aria-expanded` property is\nincluded on the button to indicate the state of the content to screen readers.\n\n[Accordion Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)\n\n- Use the `headingLevel` prop to assign an appropriate heading level based on the context of the\n  page content.\n- When using Expandable Container for navigation elements, then we don\'t recommend using the\n  `headingLevel` prop. This will render only expandable buttons to the DOM, reserving headings for\n  organizing content in the main body of the page.\n- The `as` prop may also be used on `<Expandable.Content>` to render an HTML `<ul>` element for\n  displaying a list of items. For example, check out\n  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).\n\n### Navigation\n\n- **Tab key**: Moves focus to the next expandable button or focusable element\n- **Shift + Tab**: Moves focus to the previous focusable element\n- **Enter or Space**: Toggles the expanded/collapsed state\n\n### Screen Reader Experience\n\n- The expandable button will be announced with its title text followed by the button role\n- The current state will be announced as either "collapsed" or "expanded" (For example: "Usage\n  Guidance, button, collapsed" or "Usage Guidance, button, expanded")\n- **State Changes:** When activating the button to expand content, screen readers will announce the\n  new "expanded" state and vice versa when collapsing content.\n- **Content Regions:** Screen reader users can use landmark navigation to jump between sections and\n  each section will be announced with its associated title (For example: "Usage Guidance, landmark\n  region")\n- **Heading Structure:** Using heading levels with expandable buttons allows screen reader users to\n  navigate by headings, making the document structure and hierarchy easier to understand.'
+      mdxProse: '# Canvas Kit Expandable\n\n`Expandable` is a compound component that creates a header to expand or collapse related content.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Start Icon\n\nFor a basic expandable container with a chevron icon before the title, place `Expandable.Icon`\nbefore `Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to\n`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon when\ncollapsed and a down chevron icon when expanded.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\nexport const StartIcon = () => (\n  <Expandable>\n    <Expandable.Target headingLevel="h4">\n      <Expandable.Icon iconPosition="start" />\n      <Expandable.Title>Title</Expandable.Title>\n    </Expandable.Target>\n\n    <Expandable.Content>Content</Expandable.Content>\n  </Expandable>\n);\n```\n\n### End Icon\n\nFor an expandable container with a chevron icon after the title, place `Expandable.Title` before\n`Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to\n`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon when\ncollapsed and an up chevron icon when expanded.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\nexport const EndIcon = () => (\n  <Expandable>\n    <Expandable.Target headingLevel="h4">\n      <Expandable.Title>\n        This is a really long title that should wrap to multiple lines\n      </Expandable.Title>\n      <Expandable.Icon iconPosition="end" />\n    </Expandable.Target>\n\n    <Expandable.Content>Content</Expandable.Content>\n  </Expandable>\n);\n```\n\n### With Avatar\n\nTo include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and\n`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be passed\nto `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after\n`Expandable.Title`.\n\n**Note:** If using an avatar image, do not also include an Icon component in addition to the\nExpandable.Icon. This component is meant to have either an avatar image or an icon in addition to\nthe Expandable.Icon, or neither an avatar image nor an extra icon.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\n// @ts-ignore: Cannot find module error\nimport testAvatar from \'./test-avatar.png\';\n\nexport const Avatar = () => (\n  <div>\n    <Expandable>\n      <Expandable.Target headingLevel="h4">\n        <Expandable.Icon iconPosition="start" />\n        <Expandable.Avatar name="Avatar" url={testAvatar} />\n        <Expandable.Title>Title</Expandable.Title>\n      </Expandable.Target>\n\n      <Expandable.Content>Content</Expandable.Content>\n    </Expandable>\n    <Expandable>\n      <Expandable.Target headingLevel="h4">\n        <Expandable.Avatar name="Avatar" url={testAvatar} />\n        <Expandable.Title>Title</Expandable.Title>\n        <Expandable.Icon iconPosition="end" />\n      </Expandable.Target>\n\n      <Expandable.Content>Content</Expandable.Content>\n    </Expandable>\n  </div>\n);\n```\n\n### Right to Left (RTL)\n\nExpandable container has bidirectional support and should function as expected with RTL languages as\nlong as the content direction is set in your Canvas theme.\n```tsx\nimport {CanvasProvider} from \'@workday/canvas-kit-react/common\';\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\nexport const RTL = () => {\n  return (\n    <CanvasProvider dir="rtl">\n      <Expandable>\n        <Expandable.Target headingLevel="h4">\n          <Expandable.Icon iconPosition="start" />\n          <Expandable.Avatar name="Avatar" />\n          <Expandable.Title>Title</Expandable.Title>\n        </Expandable.Target>\n\n        <Expandable.Content>Content</Expandable.Content>\n      </Expandable>\n      <Expandable>\n        <Expandable.Target headingLevel="h4">\n          <Expandable.Avatar name="Avatar" />\n          <Expandable.Title>Title</Expandable.Title>\n          <Expandable.Icon iconPosition="end" />\n        </Expandable.Target>\n\n        <Expandable.Content>Content</Expandable.Content>\n      </Expandable>\n    </CanvasProvider>\n  );\n};\n```\n\n### Depth\n\nThe `depth` prop passed to `Expandable` allows you to adjust the visual elevation of a component\nusing our depth tokens.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst expandableStyles = createStyles({\n  boxShadow: system.depth[3],\n  borderRadius: system.shape.lg,\n  padding: system.padding.xs,\n  margin: system.gap.xs,\n});\n\nexport const Depth = () => {\n  return (\n    <Expandable cs={expandableStyles}>\n      <Expandable.Target headingLevel="h4">\n        <Expandable.Title>Additional Information</Expandable.Title>\n        <Expandable.Icon iconPosition="end" />\n      </Expandable.Target>\n\n      <Expandable.Content>This Expandable Container has a depth of 3.</Expandable.Content>\n    </Expandable>\n  );\n};\n```\n\n### Title Wrap\n\nLong titles will wrap to the next line and increase the height of the container.\n```tsx\nimport {Expandable} from \'@workday/canvas-kit-react/expandable\';\n\n// @ts-ignore: Cannot find module error\nimport testAvatar from \'./test-avatar.png\';\n\nexport const LongTitle = () => (\n  <Expandable>\n    <Expandable.Target headingLevel="h4">\n      <Expandable.Icon iconPosition="start" />\n      <Expandable.Avatar name="Avatar" url={testAvatar} />\n      <Expandable.Title>\n        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,\n        onions, and oregano.\n      </Expandable.Title>\n    </Expandable.Target>\n\n    <Expandable.Content>Content</Expandable.Content>\n  </Expandable>\n);\n```\n\n### Hoisted Model\n\nIf you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In the\nexample below, we\'re hoisting the models to expand and collapse all three containers at once.\n```tsx\nimport {SecondaryButton} from \'@workday/canvas-kit-react/button\';\nimport {useUniqueId} from \'@workday/canvas-kit-react/common\';\nimport {Expandable, useExpandableModel} from \'@workday/canvas-kit-react/expandable\';\nimport {Flex} from \'@workday/canvas-kit-react/layout\';\nimport {createStyles} from \'@workday/canvas-kit-styling\';\nimport {system} from \'@workday/canvas-tokens-web\';\n\nconst listStyles = createStyles({\n  flexDirection: \'column\',\n  gap: system.gap.sm,\n  padding: \'0\',\n  marginInline: system.padding.md,\n  marginBlock: \'0\',\n});\n\nexport const HoistedModel = () => {\n  const modelOne = useExpandableModel();\n  const modelTwo = useExpandableModel();\n  const modelThree = useExpandableModel();\n\n  const idOne = useUniqueId();\n  const idTwo = useUniqueId();\n  const idThree = useUniqueId();\n\n  const handleExpandAll = () => {\n    modelOne.events.show();\n    modelTwo.events.show();\n    modelThree.events.show();\n  };\n\n  const handleCollapseAll = () => {\n    modelOne.events.hide();\n    modelTwo.events.hide();\n    modelThree.events.hide();\n  };\n\n  return (\n    <Flex cs={{gap: system.gap.lg, flexDirection: \'column\'}}>\n      <Flex cs={{gap: system.gap.md}}>\n        <SecondaryButton onClick={handleExpandAll}>Expand All</SecondaryButton>\n        <SecondaryButton onClick={handleCollapseAll}>Collapse All</SecondaryButton>\n      </Flex>\n      <Flex cs={{flexDirection: \'column\'}}>\n        <Expandable model={modelOne}>\n          <Expandable.Target headingLevel="h4">\n            <Expandable.Title id={idOne}>Usage Guidance</Expandable.Title>\n            <Expandable.Icon iconPosition="end" />\n          </Expandable.Target>\n\n          <Expandable.Content as="section" aria-labelledby={idOne}>\n            This component highlights the most important details of a section and reveals more when\n            a user taps or clicks on the header part of the container. Enabling users to hide and\n            show information ensures the design remains focused and relevant to their expectations.\n            Scanning through the most critical information first makes processing more efficient\n            without compromising the ability to access additional information.\n          </Expandable.Content>\n        </Expandable>\n        <Expandable model={modelTwo}>\n          <Expandable.Target headingLevel="h4">\n            <Expandable.Title id={idTwo}>Accessibility Guidelines</Expandable.Title>\n            <Expandable.Icon iconPosition="end" />\n          </Expandable.Target>\n\n          <Expandable.Content as="section" aria-labelledby={idTwo}>\n            <Flex as="ul" cs={listStyles}>\n              <li>\n                The state of a component being open or closed must be conveyed to assistive\n                technologies.\n              </li>\n              <li>A Button must be used as the control to toggle the display of any content.</li>\n              <li>\n                If there are multiple toggle Buttons on the same page, provide additional\n                information in their labels to make them uniquely distinguishable to a screen\n                reader.\n              </li>\n              <li>\n                Do not change the toggle Button label to convey state. An exception to this would be\n                a scenario where a visual hint text is decoupled from both the state and the label\n                for a control so the hint text is not announced by assistive technologies.\n              </li>\n              <li>\n                Avoid keyboard traps when adding components to the accordion panel. For example, the\n                user expands an accordion, but is unable to tab to the next focusable element.\n              </li>\n              <li>\n                Hidden content must be hidden correctly from keyboard, screen reader, and touch\n                interaction.\n              </li>\n              <li>\n                Changing the label of something to indicate its state will not always be accounted\n                for in live time for a screen reader user. For example, a play button should have a\n                non-changing, persistent label and the state (pressed or unpressed) is conveyed\n                visually as well as to assistive technology once the state is changed.\n              </li>\n            </Flex>\n          </Expandable.Content>\n        </Expandable>\n        <Expandable model={modelThree}>\n          <Expandable.Target headingLevel="h4">\n            <Expandable.Title id={idThree}>Content Guidelines</Expandable.Title>\n            <Expandable.Icon iconPosition="end" />\n          </Expandable.Target>\n          <Expandable.Content as="section" aria-labelledby={idThree}>\n            Titles should be short and concise, yet long enough to explain what the user would\n            expect to see when the content is expanded. If titles must be long, make sure it doesn\'t\n            wrap more than two lines.\n          </Expandable.Content>\n        </Expandable>\n      </Flex>\n    </Flex>\n  );\n};\n```\n\nFor the accordion composition (named regions on each panel), see\n[Accessibility Requirements](#accessibility-requirements).\n\n## Accessibility\n\nEnsure users of assistive technology can find the control, understand whether related content is\nshown or hidden, and reveal or hide that content from the keyboard. **`Expandable`** is an inline\n[disclosure (show/hide)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) widget: a button\ntoggles content that stays in the document flow.\n\nUse **`Expandable`** for show/hide sections in the page. Compose multiple instances to build an\n[accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) \u2014 see\n[Hoisted Model](#hoisted-model). For a navigation accordion, see\n[Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).\n\n### Minimum Accessible Structure\n\nThe following matches the [Start Icon](#start-icon) example layout: **`Expandable.Icon`** before\n**`Expandable.Title`** inside **`Expandable.Target`**, then **`Expandable.Content`**.\n**`headingLevel`** is omitted here on purpose \u2014 add it only after asking which level matches the\npage outline (see **Accessibility Requirements**). The Basic Example code uses `headingLevel="h4"`\nas a sample, not a default.\n\n```tsx\n\n<Expandable>\n  <Expandable.Target>\n    <Expandable.Icon iconPosition="start" />\n    <Expandable.Title>Title</Expandable.Title>\n  </Expandable.Target>\n  <Expandable.Content>Content</Expandable.Content>\n</Expandable>;\n```\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically via `useExpandableModel` (a `DisclosureModel`) and Expandable\nsubcomponents. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by hooks/subcomponents_):\n\n- **`Expandable.Target`**: native `<button>` with `aria-expanded` (`true` when\n  `visibility !== \'hidden\'`) and `aria-controls` set to the disclosure `id`. `onClick` toggles\n  `events.show()` / `events.hide()`.\n- **`headingLevel`**: when set (`\'h1\'`\u2013`\'h6\'`), wraps the button in **`Heading`** rendered as that\n  heading element. When omitted, the button is not wrapped in a heading.\n- **`Expandable.Content`**: `id` set to the same disclosure `id`. Collapsed content stays in the DOM\n  with `display: none` (not unmounted). Default element is a `<div>`.\n- **`Expandable.Title`**: styled `<div>` for the visible name. It does **not** receive an `id` from\n  the model.\n- **`Expandable.Icon`**: decorative chevron that rotates from `visibility`. Expanded/collapsed state\n  for assistive technology comes from `aria-expanded`, not from the icon.\n- **`Expandable.Avatar`**: `isDecorative={true}` by default so the image is hidden from assistive\n  technology when paired with **`Expandable.Title`**.\n- Disclosure `id`: generated with `useUniqueId` unless you pass `id` to **`useExpandableModel`**.\n  Default `initialVisibility` is `\'hidden\'`.\n\n**Keyboard** (_native button behavior_):\n\n**`Expandable.Target`** uses native `<button>` keyboard behavior (tab order, <kbd>Enter</kbd> /\n\n<kbd>Space</kbd> to toggle). Collapsed content is not in the tab order (`display: none`). Focus\nstays on the button; Canvas Kit does not move focus into **`Expandable.Content`**.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the title text, the button role, and expanded/collapsed\n  state from `aria-expanded` (for example, "Title, button, collapsed")\n- Activating the button announces the updated expanded/collapsed state from `aria-expanded`\n- While collapsed, content is removed from the accessibility tree (`display: none`)\n- While expanded, content follows the button in reading order\n- When **`headingLevel`** is set, heading navigation includes the heading that wraps the button\n- When **`Expandable.Content as="section"`** is used with `aria-labelledby` pointing at\n  **`Expandable.Title`**, region/landmark navigation can name each open section\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Expandable. Hoist **`useExpandableModel`** when you\nneed programmatic show/hide (for example, expand all) or a stable disclosure `id`. Rows marked\n_(conditional)_ apply only when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use the **single disclosure** composition\n([Basic Example](#basic-example)). If the spec is several related headers, use the **accordion**\ncomposition. Omit **`Expandable.Avatar`**, **`initialVisibility`**, and a custom **`id`**.\n\n**Choose a composition** (pick one; **`Expandable.Content as="section"`** and **`as="ul"`** are\nmutually exclusive):\n\n- **Single disclosure** \u2014 one show/hide section. [Basic Example](#basic-example) /\n  [Minimum Accessible Structure](#minimum-accessible-structure). Default Content is a `<div>`.\n- **Accordion** \u2014 several related headers. [Hoisted Model](#hoisted-model): unique `id` on\n  **`Expandable.Title`**, **`Expandable.Content as="section"`** with `aria-labelledby`.\n- **Navigation list** \u2014 disclosed links.\n  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs):\n  **`as="ul"`**, omit **`headingLevel`**.\n\n**Heading level:** Ask which heading (`h1`\u2013`h6`) belongs in the document outline before setting\n**`headingLevel`**. Omit **`headingLevel`** for navigation. Do not generate **`headingLevel`** by\ndefault \u2014 the Basic Example code uses `h4` only as a sample.\n\n| Requirement                                     | How to satisfy                                                                                                                                                                                     |\n| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Accessible name                                 | Non-empty **`Expandable.Title`** inside **`Expandable.Target`**.                                                                                                                                   |\n| Keyboard-operable toggle                        | **`Expandable.Target`** (native `<button>`).                                                                                                                                                       |\n| Visual expanded/collapsed indicator             | **`Expandable.Icon`** with `iconPosition` matching layout (`start` or `end`).                                                                                                                      |\n| Heading in the document outline _(conditional)_ | **`headingLevel`** on **`Expandable.Target`** when the control titles body content (single disclosure or accordion). Omit **`headingLevel`** for the navigation-list composition. Ask which level. |\n| Accordion named regions _(conditional)_         | Accordion composition: **`Expandable.Content as="section"`** plus `aria-labelledby` referencing a unique `id` on **`Expandable.Title`**.                                                           |\n| List markup _(conditional)_                     | Navigation-list composition: **`Expandable.Content as="ul"`** (and list items as children).                                                                                                        |\n| Decorative avatar _(conditional)_               | **`Expandable.Avatar`** when the design includes an avatar. Keep **`isDecorative`** at the default `true`.                                                                                         |\n| Start expanded _(conditional)_                  | `initialVisibility: \'visible\'` on **`useExpandableModel`** (or the equivalent model config).                                                                                                       |\n| Programmatic expand/collapse _(conditional)_    | Hoist **`useExpandableModel`** and call `model.events.show()` / `model.events.hide()`.                                                                                                             |\n\n**Summary for code generation:**\n\n- **REQUIRED:** **`Expandable.Target`**, non-empty **`Expandable.Title`**, **`Expandable.Content`**,\n  **`Expandable.Icon`**\n- **CONDITIONAL:** composition (single disclosure vs accordion vs navigation list),\n  **`headingLevel`** (ask which; omit for navigation), accordion **`as="section"`** +\n  `aria-labelledby`, navigation **`as="ul"`**, **`Expandable.Avatar`**, hoisted\n  **`useExpandableModel`**, **`initialVisibility`**\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `aria-expanded`, `aria-controls`, or the disclosure `id` on **`Expandable.Target`**\n  or **`Expandable.Content`** \u2014 `useExpandableTarget` and `useExpandableContent` wire these\n- Rely on **`Expandable.Icon`** or **`Expandable.Avatar`** for the accessible name \u2014 use\n  **`Expandable.Title`**\n- Override **`Expandable.Target`** with a custom **`as`** \u2014 **`Expandable.Target`** already renders\n  a native `<button>`\n- Set `id` on **`Expandable`** to identify the outer wrapper \u2014 `id` is model config **and** is\n  forwarded to the container element, while **`Expandable.Content`** also uses `state.id`, which can\n  produce duplicate IDs. For a stable content `id`, hoist **`useExpandableModel({id: \'\u2026\'})`**.\n  **`Expandable.Title`** still needs its own `id` when you set `aria-labelledby` on\n  **`Expandable.Content`**\n- Wrap **`Expandable.Target`** in your own heading \u2014 use **`headingLevel`** instead\n- Default **`headingLevel`** to `h4` (or any level) without asking, or set **`headingLevel`** on\n  navigation disclosures\n- Generate several Basic Example disclosures with default `div` Content when the spec is an\n  accordion \u2014 use the **accordion** composition (see **Choose a composition**)\n- Set **`as="section"`** and **`as="ul"`** on the same **`Expandable.Content`** \u2014 pick one\n  composition\n- Change **`Expandable.Title`** to encode state (for example "Collapsed" / "Expanded" or "Show" /\n  "Hide") \u2014 `aria-expanded` already exposes state\n- Unmount **`Expandable.Content`** when collapsed, or add `aria-hidden` on it \u2014 the library uses\n  `display: none`\n- Set **`isDecorative={false}`** on **`Expandable.Avatar`** by default, or pair an avatar with an\n  extra non-chevron icon\n- Use **`open`**, **`expanded`**, or **`onToggle`** props on **`Expandable`** \u2014 visibility is\n  `initialVisibility` plus **`useExpandableModel`** events\n- Assume default **`Expandable.Content`** is a landmark region \u2014 that is only true with\n  **`as="section"`**\n\n## Component API\n\n',
+      accessibilityProse: '## Accessibility\n\nEnsure users of assistive technology can find the control, understand whether related content is\nshown or hidden, and reveal or hide that content from the keyboard. **`Expandable`** is an inline\n[disclosure (show/hide)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) widget: a button\ntoggles content that stays in the document flow.\n\nUse **`Expandable`** for show/hide sections in the page. Compose multiple instances to build an\n[accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) \u2014 see\n[Hoisted Model](#hoisted-model). For a navigation accordion, see\n[Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).\n\n### Minimum Accessible Structure\n\nThe following matches the [Start Icon](#start-icon) example layout: **`Expandable.Icon`** before\n**`Expandable.Title`** inside **`Expandable.Target`**, then **`Expandable.Content`**.\n**`headingLevel`** is omitted here on purpose \u2014 add it only after asking which level matches the\npage outline (see **Accessibility Requirements**). The Basic Example code uses `headingLevel="h4"`\nas a sample, not a default.\n\n```tsx\n\n<Expandable>\n  <Expandable.Target>\n    <Expandable.Icon iconPosition="start" />\n    <Expandable.Title>Title</Expandable.Title>\n  </Expandable.Target>\n  <Expandable.Content>Content</Expandable.Content>\n</Expandable>;\n```\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically via `useExpandableModel` (a `DisclosureModel`) and Expandable\nsubcomponents. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by hooks/subcomponents_):\n\n- **`Expandable.Target`**: native `<button>` with `aria-expanded` (`true` when\n  `visibility !== \'hidden\'`) and `aria-controls` set to the disclosure `id`. `onClick` toggles\n  `events.show()` / `events.hide()`.\n- **`headingLevel`**: when set (`\'h1\'`\u2013`\'h6\'`), wraps the button in **`Heading`** rendered as that\n  heading element. When omitted, the button is not wrapped in a heading.\n- **`Expandable.Content`**: `id` set to the same disclosure `id`. Collapsed content stays in the DOM\n  with `display: none` (not unmounted). Default element is a `<div>`.\n- **`Expandable.Title`**: styled `<div>` for the visible name. It does **not** receive an `id` from\n  the model.\n- **`Expandable.Icon`**: decorative chevron that rotates from `visibility`. Expanded/collapsed state\n  for assistive technology comes from `aria-expanded`, not from the icon.\n- **`Expandable.Avatar`**: `isDecorative={true}` by default so the image is hidden from assistive\n  technology when paired with **`Expandable.Title`**.\n- Disclosure `id`: generated with `useUniqueId` unless you pass `id` to **`useExpandableModel`**.\n  Default `initialVisibility` is `\'hidden\'`.\n\n**Keyboard** (_native button behavior_):\n\n**`Expandable.Target`** uses native `<button>` keyboard behavior (tab order, <kbd>Enter</kbd> /\n\n<kbd>Space</kbd> to toggle). Collapsed content is not in the tab order (`display: none`). Focus\nstays on the button; Canvas Kit does not move focus into **`Expandable.Content`**.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the title text, the button role, and expanded/collapsed\n  state from `aria-expanded` (for example, "Title, button, collapsed")\n- Activating the button announces the updated expanded/collapsed state from `aria-expanded`\n- While collapsed, content is removed from the accessibility tree (`display: none`)\n- While expanded, content follows the button in reading order\n- When **`headingLevel`** is set, heading navigation includes the heading that wraps the button\n- When **`Expandable.Content as="section"`** is used with `aria-labelledby` pointing at\n  **`Expandable.Title`**, region/landmark navigation can name each open section\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Expandable. Hoist **`useExpandableModel`** when you\nneed programmatic show/hide (for example, expand all) or a stable disclosure `id`. Rows marked\n_(conditional)_ apply only when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use the **single disclosure** composition\n([Basic Example](#basic-example)). If the spec is several related headers, use the **accordion**\ncomposition. Omit **`Expandable.Avatar`**, **`initialVisibility`**, and a custom **`id`**.\n\n**Choose a composition** (pick one; **`Expandable.Content as="section"`** and **`as="ul"`** are\nmutually exclusive):\n\n- **Single disclosure** \u2014 one show/hide section. [Basic Example](#basic-example) /\n  [Minimum Accessible Structure](#minimum-accessible-structure). Default Content is a `<div>`.\n- **Accordion** \u2014 several related headers. [Hoisted Model](#hoisted-model): unique `id` on\n  **`Expandable.Title`**, **`Expandable.Content as="section"`** with `aria-labelledby`.\n- **Navigation list** \u2014 disclosed links.\n  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs):\n  **`as="ul"`**, omit **`headingLevel`**.\n\n**Heading level:** Ask which heading (`h1`\u2013`h6`) belongs in the document outline before setting\n**`headingLevel`**. Omit **`headingLevel`** for navigation. Do not generate **`headingLevel`** by\ndefault \u2014 the Basic Example code uses `h4` only as a sample.\n\n| Requirement                                     | How to satisfy                                                                                                                                                                                     |\n| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Accessible name                                 | Non-empty **`Expandable.Title`** inside **`Expandable.Target`**.                                                                                                                                   |\n| Keyboard-operable toggle                        | **`Expandable.Target`** (native `<button>`).                                                                                                                                                       |\n| Visual expanded/collapsed indicator             | **`Expandable.Icon`** with `iconPosition` matching layout (`start` or `end`).                                                                                                                      |\n| Heading in the document outline _(conditional)_ | **`headingLevel`** on **`Expandable.Target`** when the control titles body content (single disclosure or accordion). Omit **`headingLevel`** for the navigation-list composition. Ask which level. |\n| Accordion named regions _(conditional)_         | Accordion composition: **`Expandable.Content as="section"`** plus `aria-labelledby` referencing a unique `id` on **`Expandable.Title`**.                                                           |\n| List markup _(conditional)_                     | Navigation-list composition: **`Expandable.Content as="ul"`** (and list items as children).                                                                                                        |\n| Decorative avatar _(conditional)_               | **`Expandable.Avatar`** when the design includes an avatar. Keep **`isDecorative`** at the default `true`.                                                                                         |\n| Start expanded _(conditional)_                  | `initialVisibility: \'visible\'` on **`useExpandableModel`** (or the equivalent model config).                                                                                                       |\n| Programmatic expand/collapse _(conditional)_    | Hoist **`useExpandableModel`** and call `model.events.show()` / `model.events.hide()`.                                                                                                             |\n\n**Summary for code generation:**\n\n- **REQUIRED:** **`Expandable.Target`**, non-empty **`Expandable.Title`**, **`Expandable.Content`**,\n  **`Expandable.Icon`**\n- **CONDITIONAL:** composition (single disclosure vs accordion vs navigation list),\n  **`headingLevel`** (ask which; omit for navigation), accordion **`as="section"`** +\n  `aria-labelledby`, navigation **`as="ul"`**, **`Expandable.Avatar`**, hoisted\n  **`useExpandableModel`**, **`initialVisibility`**\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `aria-expanded`, `aria-controls`, or the disclosure `id` on **`Expandable.Target`**\n  or **`Expandable.Content`** \u2014 `useExpandableTarget` and `useExpandableContent` wire these\n- Rely on **`Expandable.Icon`** or **`Expandable.Avatar`** for the accessible name \u2014 use\n  **`Expandable.Title`**\n- Override **`Expandable.Target`** with a custom **`as`** \u2014 **`Expandable.Target`** already renders\n  a native `<button>`\n- Set `id` on **`Expandable`** to identify the outer wrapper \u2014 `id` is model config **and** is\n  forwarded to the container element, while **`Expandable.Content`** also uses `state.id`, which can\n  produce duplicate IDs. For a stable content `id`, hoist **`useExpandableModel({id: \'\u2026\'})`**.\n  **`Expandable.Title`** still needs its own `id` when you set `aria-labelledby` on\n  **`Expandable.Content`**\n- Wrap **`Expandable.Target`** in your own heading \u2014 use **`headingLevel`** instead\n- Default **`headingLevel`** to `h4` (or any level) without asking, or set **`headingLevel`** on\n  navigation disclosures\n- Generate several Basic Example disclosures with default `div` Content when the spec is an\n  accordion \u2014 use the **accordion** composition (see **Choose a composition**)\n- Set **`as="section"`** and **`as="ul"`** on the same **`Expandable.Content`** \u2014 pick one\n  composition\n- Change **`Expandable.Title`** to encode state (for example "Collapsed" / "Expanded" or "Show" /\n  "Hide") \u2014 `aria-expanded` already exposes state\n- Unmount **`Expandable.Content`** when collapsed, or add `aria-hidden` on it \u2014 the library uses\n  `display: none`\n- Set **`isDecorative={false}`** on **`Expandable.Avatar`** by default, or pair an avatar with an\n  extra non-chevron icon\n- Use **`open`**, **`expanded`**, or **`onToggle`** props on **`Expandable`** \u2014 visibility is\n  `initialVisibility` plus **`useExpandableModel`** events\n- Assume default **`Expandable.Content`** is a landmark region \u2014 that is only true with\n  **`as="section"`**'
     },
     dialog: {
       title: "Components/Popups/Dialog",