@workday/canvas-kit-docs 14.2.1 → 14.2.3

package/dist/es6/lib/docs.js

@@ -67558,7 +67558,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "SegmentedControl",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/segmented-control/lib/SegmentedControl.tsx",
-    "description": "`SegmentedControl` is a container component that is responsible for creating a\n{@link SegmentedControlModel } and sharing it with its subcomponents using React context. It does\nnot represent a real element.\n\n```tsx\n<SegmentedControl items={[]}>{Child components}</SegmentedControl>\n```\n\nAlternatively, you may pass in a model using the [hoisted model\npattern](/getting-started/for-developers/resources/compound-components/#configuring-a-model).\n\n```tsx\nconst model = useSegmentedControlModel({\n  items: [],\n});\n\n<SegmentedControl model={model}>{Child components}</SegmentedControl>;\n```",
+    "description": "`SegmentedControl` is a container component that is responsible for creating a\n{@link SegmentedControlModel } and sharing it with its subcomponents using React context. It does\nnot represent a real element.\n\n```tsx\n<SegmentedControl items={[]}>{Child components}</SegmentedControl>\n```\n\nAlternatively, you may pass in a model using the [hoisted model\npattern](/get-started/for-developers/documentation/compound-components/#configuring-a-model).\n\n```tsx\nconst model = useSegmentedControlModel({\n  items: [],\n});\n\n<SegmentedControl model={model}>{Child components}</SegmentedControl>;\n```",
     "declarations": [
       {
         "name": "SegmentedControl",
@@ -223090,7 +223090,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/avatar/lib/Avatar.tsx"
             }
           ],
-          "tags": {}
+          "tags": {},
+          "defaultValue": {
+            "kind": "boolean",
+            "value": true
+          }
         },
         {
           "kind": "property",
@@ -371341,7 +371345,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "Tabs",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/Tabs.tsx",
-    "description": "`Tabs` is a container component that is responsible for creating a {@link TabsModel } and sharing\nit with its subcomponents using React context. It does not represent a real element.\n\n```tsx\n<Tabs onSelect={data => console.log('Selected tab', data.id)}>\n  {child components}\n</Tabs>\n```\n\nAlternatively, you may pass in a model using the hoisted model pattern.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Activated Tab', data.id);\n  },\n});\n\n<Tabs model={model}>{child components}</Tabs>\n```\n\nSee [Configuring a\nModel](/getting-started/for-developers/resources/compound-components/#configuring-a-model) for\nmore information on model configuration.",
+    "description": "`Tabs` is a container component that is responsible for creating a {@link TabsModel } and sharing\nit with its subcomponents using React context. It does not represent a real element.\n\n```tsx\n<Tabs onSelect={data => console.log('Selected tab', data.id)}>\n  {child components}\n</Tabs>\n```\n\nAlternatively, you may pass in a model using the hoisted model pattern.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Activated Tab', data.id);\n  },\n});\n\n<Tabs model={model}>{child components}</Tabs>\n```\n\nSee [Configuring a\nModel](/get-started/for-developers/documentation/compound-components/#configuring-a-model) for\nmore information on model configuration.",
     "declarations": [
       {
         "name": "Tabs",
@@ -384741,7 +384745,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "useTabsModel",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/useTabsModel.tsx",
-    "description": "The TabsModel extends the [Collection\nSystem](/getting-started/for-developers/resources/collection-api/). Tabs have tab items and\npanels. Tabs can be overflowed if there isn't enough room to render and will overflow to a\n{@link MenuModel } sub-model.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Selected Tab', data)\n  }\n})\n\n<Tabs model={model}>{Tabs child components}</Tabs>\n```",
+    "description": "The TabsModel extends the [Collection\nSystem](/get-started/for-developers/guides/collection-api/). Tabs have tab items and\npanels. Tabs can be overflowed if there isn't enough room to render and will overflow to a\n{@link MenuModel } sub-model.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Selected Tab', data)\n  }\n})\n\n<Tabs model={model}>{Tabs child components}</Tabs>\n```",
     "declarations": [
       {
         "name": "useTabsModel",
@@ -385273,7 +385277,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "TabsModel",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/useTabsModel.tsx",
-    "description": "The TabsModel extends the [Collection\nSystem](/getting-started/for-developers/resources/collection-api/). Tabs have tab items and\npanels. Tabs can be overflowed if there isn't enough room to render and will overflow to a\n{@link MenuModel } sub-model.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Selected Tab', data)\n  }\n})\n\n<Tabs model={model}>{Tabs child components}</Tabs>\n```",
+    "description": "The TabsModel extends the [Collection\nSystem](/get-started/for-developers/guides/collection-api/). Tabs have tab items and\npanels. Tabs can be overflowed if there isn't enough room to render and will overflow to a\n{@link MenuModel } sub-model.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Selected Tab', data)\n  }\n})\n\n<Tabs model={model}>{Tabs child components}</Tabs>\n```",
     "declarations": [
       {
         "name": "useTabsModel",
@@ -387627,7 +387631,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "TabsModelConfig",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/useTabsModel.tsx",
-    "description": "The TabsModel extends the [Collection\nSystem](/getting-started/for-developers/resources/collection-api/). Tabs have tab items and\npanels. Tabs can be overflowed if there isn't enough room to render and will overflow to a\n{@link MenuModel } sub-model.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Selected Tab', data)\n  }\n})\n\n<Tabs model={model}>{Tabs child components}</Tabs>\n```",
+    "description": "The TabsModel extends the [Collection\nSystem](/get-started/for-developers/guides/collection-api/). Tabs have tab items and\npanels. Tabs can be overflowed if there isn't enough room to render and will overflow to a\n{@link MenuModel } sub-model.\n\n```tsx\nconst model = useTabsModel({\n  onSelect(data) {\n    console.log('Selected Tab', data)\n  }\n})\n\n<Tabs model={model}>{Tabs child components}</Tabs>\n```",
     "declarations": [
       {
         "name": "useTabsModel",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.2.1",
-    "@workday/canvas-kit-preview-react": "14.2.1",
-    "@workday/canvas-kit-react": "14.2.1",
-    "@workday/canvas-kit-react-fonts": "^14.2.1",
-    "@workday/canvas-kit-styling": "14.2.1",
+    "@workday/canvas-kit-labs-react": "14.2.3",
+    "@workday/canvas-kit-preview-react": "14.2.3",
+    "@workday/canvas-kit-react": "14.2.3",
+    "@workday/canvas-kit-react-fonts": "^14.2.3",
+    "@workday/canvas-kit-styling": "14.2.3",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.2.1",
-    "@workday/canvas-kit-preview-react": "14.2.1",
-    "@workday/canvas-kit-react": "14.2.1",
-    "@workday/canvas-kit-react-fonts": "^14.2.1",
-    "@workday/canvas-kit-styling": "14.2.1",
+    "@workday/canvas-kit-labs-react": "14.2.3",
+    "@workday/canvas-kit-preview-react": "14.2.3",
+    "@workday/canvas-kit-react": "14.2.3",
+    "@workday/canvas-kit-react-fonts": "^14.2.3",
+    "@workday/canvas-kit-styling": "14.2.3",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/mdx/10.0-UPGRADE-GUIDE.mdx

@@ -255,7 +255,7 @@ the target and popup to `4px`.
 **PR:** [#2309](https://github.com/Workday/canvas-kit/pull/2309)
 
 We've converted `Select` into a
-[compound component](/getting-started/for-developers/resources/compound-components/) which provides
+[compound component](/get-started/for-developers/documentation/compound-components/) which provides
 a flexible API and access to its internals via its subcomponents.
 
 ```tsx

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -56,7 +56,7 @@ visual reference of what's changed.**
   - [Deprecated Buttons](#deprecated-buttons)
   - [Input Provider](#input-provider)
   - [Menu (Preview)](#menu-preview)
-  - [readyOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
+  - [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
   - [Text Area (Labs)](#text-area)
   - [Text Input (Labs)](#text-input)
 - [Troubleshooting](#troubleshooting)
@@ -333,7 +333,7 @@ specificity.
 
 ### useIsRTL
 
-**PR:** [#3480](https://github.com/Workday/canvas-kit/pull/3477)
+**PR:** [#3477](https://github.com/Workday/canvas-kit/pull/3477)
 
 The `useIsRTL` hook has been deprecated. Please use
 [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
@@ -630,7 +630,7 @@ provide a value for the `name` prop.
 The `Pill` component no longer supports `default` as a value for the `variant` prop. If the
 `variant` prop is not provided, the component will use its default styling.
 
-`readyOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
+`readOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
 instead.
 
 **Before in v13**
@@ -865,7 +865,7 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
 ### Combobox (Labs)
 
 The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated. Please
-migrate to the [Combobox](/get-started/for-developers/resources/combobox/) in
+migrate to the [Combobox](/get-started/for-developers/guides/combobox/) in
 `@workday/canvas-kit-react`.
 
 ### Radio (Main)
@@ -879,7 +879,7 @@ and API consistency.
 **PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
 
 The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated. Please migrate
-to the [Combobox](/get-started/for-developers/resources/combobox/) in `@workday/canvas-kit-react`.
+to the [Combobox](/get-started/for-developers/guides/combobox/) in `@workday/canvas-kit-react`.
 
 ### Segmented Control (Main)
 
@@ -908,7 +908,7 @@ replaced the removed component or utility.
 
 ### Deprecated Buttons
 
-**PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
+**PR:** [#3439](https://github.com/Workday/canvas-kit/pull/3439)
 
 Long overdue, but a sign of moving forward, we've removed our `DeprecatedButton`. Our design system
 supported this for quite some time, but with the advancement in theming, our components API and our
@@ -953,9 +953,9 @@ const buttonStyles = createStyles({
 We've removed `Menu` from `@workday/canvas-kit-preview-react`. Please use
 [Menu](/components/popups/menu/) from `@workday/canvas-kit-react` instead.
 
-### readyOnlyPillStencil and removeablePillStencil
+### readOnlyPillStencil and removeablePillStencil
 
-The `readyOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
+The `readOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
 package. Please use `pillStencil` instead.
 
 ### Text Area (Preview)
@@ -1011,7 +1011,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 **After in v14**
 
 ```tsx
-import {TextArea} from '@workday/canvas-kit-react/text-input';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 
 <FormField>

package/dist/mdx/5.0-UPGRADE-GUIDE.mdx

@@ -867,7 +867,7 @@ interface MyButtonProps extends ExtractProps<> {
 
 ### Card
 
-Card is now a [compound component](/getting-started/for-developers/resources/compound-components/)
+Card is now a [compound component](/get-started/for-developers/documentation/compound-components/)
 composed of a `Card.Body` and an optional `Card.Heading`. This allows direct access to the heading
 and body elements.
 
@@ -1058,7 +1058,7 @@ There is no codemod for this change.
 ### Popups
 
 Popup has transitioned to a
-[compound component](/getting-started/for-developers/resources/compound-components/), along with all
+[compound component](/get-started/for-developers/documentation/compound-components/), along with all
 Popup-based behavior hooks. What was a `Popup` in v4 is now a `Popup.Card` in v5. The target button
 and `Popper` components have also been converted to subcomponents of `Popup`.
 
@@ -1394,7 +1394,7 @@ const MyPopup = () => {
 ### Modal
 
 Modal has transitioned to a
-[compound component](/getting-started/for-developers/resources/compound-components/). What was
+[compound component](/get-started/for-developers/documentation/compound-components/). What was
 `Modal` in v4 is now `Modal.Card` in v5.
 
 #### v4

package/dist/mdx/7.0-UPGRADE-GUIDE.mdx

@@ -513,7 +513,7 @@ creating `ActionBar.List` subcomponent and replacing all `ActionBar` children to
 
 ### Banner
 
-Banner is now a [compound component](/getting-started/for-developers/resources/compound-components/)
+Banner is now a [compound component](/get-started/for-developers/documentation/compound-components/)
 composed of `Banner.Icon`, `Banner.Label`, and `Banner.ActionText`. This allows direct access to the
 icon, label, and text elements.
 
@@ -532,7 +532,7 @@ icon, label, and text elements.
 🤖 The codemod will rewrite your JSX to match the new API.
 
 Like all compound components, `Banner` is written using the
-[createComponent](/getting-started/for-developers/resources/creating-compound-components/#disclosurecontent-component)
+[createComponent](/get-started/for-developers/documentation/creating-compound-components/#disclosurecontent-component)
 utility from our
 [common](https://github.com/Workday/canvas-kit/blob/ff77c5bd83e41c3ab2b9c55e41a8b7c1fde33a1b/modules/react/common/lib/utils/components.ts#L167)
 module; it supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) and using the
@@ -741,7 +741,7 @@ buttons or other buttons that aren't supported by our standard button components
 
 We've updated `AccentIcon`, `AppletIcon`, `Graphic`, `Icon`, `Svg`, `SystemIcon`, and
 `SystemIconCircle` to use the
-[createComponent](/getting-started/for-developers/resources/creating-compound-components/#disclosurecontent-component)
+[createComponent](/get-started/for-developers/documentation/creating-compound-components/#disclosurecontent-component)
 utility from our
 [common](https://github.com/Workday/canvas-kit/blob/ff77c5bd83e41c3ab2b9c55e41a8b7c1fde33a1b/modules/react/common/lib/utils/components.ts#L167)
 module; they now support [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) and using
@@ -915,7 +915,7 @@ codemod.
 ### Segmented Control
 
 `SegmentedControl` is now a
-[compound component](/getting-started/for-developers/resources/compound-components/).
+[compound component](/get-started/for-developers/documentation/compound-components/).
 
 Given the [removal of `IconButton`](#removal-of-icon-button) in v7, you'll now need to use
 `SegmentedControl.Button` instead.

package/dist/mdx/8.0-UPGRADE-GUIDE.mdx

@@ -191,7 +191,7 @@ const Example = styled('div')(
 ### Responsive Styles
 
 We've added a set of
-[responsive utilities](/getting-started/for-developers/resources/responsive-styling/) to facilitate
+[responsive utilities](/get-started/for-developers/guides/responsive-styling/) to facilitate
 container-based and viewport-based responsive styling:
 
 - **useResponsiveContainerStyles**: A hook that allows developers to create container-based
@@ -253,7 +253,7 @@ return (
 We've added a new `@workday/canvas-kit-react/testing` slash import to house our testing utilities
 and components. You may find them useful for testing the different visual states of your components.
 
-View the [Testing](/utilities/testing/) documentation for more information. The example below
+View the [Testing](/get-started/for-developers/documentation/testing#visual-tests) documentation for more information. The example below
 creates a visual states table of our `DeleteButton`. Each row renders a different size of
 `DeleteButton` with each column representing different combinations of the `disabled`, `hover`, and
 `active` states.
@@ -365,7 +365,7 @@ text with built-in support for our Canvas type tokens.
 We've added a new version of
 [`SegmentedControl`](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control-react--basic)
 which has been redesigned as a
-[compound component](/getting-started/for-developers/resources/compound-components/) to the Preview
+[compound component](/get-started/for-developers/documentation/compound-components/) to the Preview
 package. `SegmentedControl` represents a linear group of multiple buttons allowing the selection of
 a specific value and is best used for switching between different views of the same content.
 
@@ -417,7 +417,7 @@ You may still use `SegmentedControl` in the Main package, but note that it will
 We've added a new version of
 [`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator-react--basic)
 which has been redesigned as a
-[compound component](/getting-started/for-developers/resources/compound-components/) to the Preview
+[compound component](/get-started/for-developers/documentation/compound-components/) to the Preview
 package. `StatusIndicator` is best used for helping the user quickly identify the status of a task,
 action, or page element.
 
@@ -671,7 +671,7 @@ const StyledBox = styled(Box)({
 ### Breadcrumbs
 
 `Breadcrumbs` has been promoted to the Main package. It now uses the list system from our
-[Collection API](/getting-started/for-developers/resources/collection-api/) which provides new
+[Collection API](/get-started/for-developers/guides/collection-api/) which provides new
 overflow behavior based on container width.
 
 The following code-moddable changes have been made to the `Breadcrumbs` API (see below for

package/dist/mdx/9.0-UPGRADE-GUIDE.mdx

@@ -98,7 +98,7 @@ finished.
 ### Table
 
 We've introduced a new `Table`
-[compound component](/getting-started/for-developers/resources/compound-components/) to the Preview
+[compound component](/get-started/for-developers/documentation/compound-components/) to the Preview
 package. `Table` is a compound component that is used to present information in a two-dimensional
 [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) comprised of rows and
 columns of cells containing data.
@@ -374,7 +374,7 @@ previously in [Main](#main) (for reference, see
 [`Toast`](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-popups-toast--error) in
 [Main](#main) from v8).
 
-`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 which provides a flexible API and access to its internals via its subcomponents. It supports a new
 `mode` prop which applies the proper accessibility features to the component based on the desired
 mode: `status`, `alert`, or `dialog`.

package/dist/mdx/CODEMODS.mdx

@@ -16,7 +16,7 @@ things you'll want to keep in mind.
   dependencies on your own.
   - We recommend upgrading dependencies before running the codemod.
   - Always review your `package.json` files to make sure your dependency versions look correct.
-- The codemod will not handle every breaking change in v13. You will likely need to make some manual
+- The codemod will not handle every breaking change in this upgrade. You will likely need to make some manual
   changes to be compatible. Use our Upgrade Guide as a checklist.
 - Codemods are not bulletproof.
   - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
@@ -48,7 +48,7 @@ finished.
 
 ```sh
 yarn add @workday/canvas-kit-codemod --dev
-yarn canvas-kit-codemod v${canvasKitMajorVersion} [path]
+yarn canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
 yarn remove @workday/canvas-kit-codemod
 ```
 

package/dist/mdx/CONTRIBUTING.mdx

@@ -148,7 +148,7 @@ dependencies, then it's required.
 Canvas Kit uses [Jest](https://jestjs.io/) and
 [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to unit test
 our React components. For more information about our testing strategy and how we write unit tests,
-visit our [Testing Readme](/getting-started/for-developers/resources/testing/).
+visit our [Testing Readme](/get-started/for-developers/documentation/testing/).
 
 Canvas Kit uses [Cypress](https://cypress.io) for UI tests. For info on why we chose Cypress, visit
 [Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md) For more
@@ -188,9 +188,9 @@ Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your
 
 If creating a React module, a new compound component will be created. To find out more about
 Compound Components, refer to
-[Compound Components](/getting-started/for-developers/resources/compound-components/). To find out
+[Compound Components](/get-started/for-developers/documentation/compound-components/). To find out
 more about creating Compound Components, refer to
-[Creating Compound Components](/getting-started/for-developers/resources/creating-compound-components/).
+[Creating Compound Components](/get-started/for-developers/documentation/creating-compound-components/).
 
 ### Exporting a Module
 
@@ -214,7 +214,7 @@ This will start the unit tests.
 ### Code Style Guide
 
 Refer to the
-[API & Pattern Guidelines](/getting-started/for-developers/resources/api-pattern-guidelines/).
+[API & Pattern Guidelines](/get-started/for-developers/documentation/api-pattern-guidelines/).
 
 Rules are enforced using [ESLint](https://eslint.org) and code formatting is provided through
 [Prettier](https://prettier.io).

package/dist/mdx/CREATING_COMPOUND_COMPONENTS.mdx

@@ -1,7 +1,7 @@
 # Building a Compound Component
 
 Refer to the
-[Compound Component documentation](/getting-started/for-developers/resources/compound-components/)
+[Compound Component documentation](/get-started/for-developers/documentation/compound-components/)
 document to learn about what a compound component is.
 
 This document will go through building a simplified Disclosure component to help solidify the

package/dist/mdx/preview-react/multi-select/MultiSelect.mdx

@@ -30,11 +30,11 @@ yarn add @workday/canvas-kit-preview-react
 ### Basic Example
 
 `MultiSelect` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where you
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you
 pass an array of items via the `items` prop and provide a render function to display the items. The
 items may be provided as an
-[array of strings](/getting-started/for-developers/resources/collection-api/#array-of-strings) or an
-[array of objects](/getting-started/for-developers/resources/collection-api/#array-of-objects).
+[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an
+[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).
 
 `MultiSelect` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
 `MultiSelect` wraps the `FormField` element and the `FormField` element wraps the children of

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -12,7 +12,7 @@ import Dynamic from './examples/Dynamic';
 # Canvas Kit Segmented Control
 
 Segmented Control is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that represents
+[compound component](/get-started/for-developers/documentation/compound-components/) that represents
 a linear group of multiple buttons allowing the selection of a specific value.
 
 [> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
@@ -124,7 +124,7 @@ Set the `disabled` prop of `SegmentedControl` to disable the entire component in
 ### Dynamic Items
 
 `SegmentedControl` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where instead
 of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
 the `model` state and provide a render function to display the items.
 

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -51,7 +51,7 @@ We **strongly** discourage using text in a `StatusIndicator` which will cause it
 maximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we
 suggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the
 overflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`
-of `StatusIndicator` via [style props](/getting-started/for-developers/resources/style-props/).
+of `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).
 
 <ExampleCodeBlock code={Overflow} />
 

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -7,7 +7,7 @@ import OverflowActionBarCustomButtonCount from './examples/OverflowActionBarCust
 
 # Canvas Kit Action Bar
 
-Action Bar is a [compound component](/getting-started/for-developers/resources/compound-components/)
+Action Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that contains primary and secondary actions related to a page or task.
 
 [> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)
@@ -75,9 +75,9 @@ Grouping the actions into an HTML `<section>` element with an `aria-label` strin
 This can be useful for helping screen reader users quickly jump down to the actions at the bottom of
 a page.
 
-Refer to [Button](?path=/docs/components-buttons--docs#accessibility) and
-[Menus](?path=/docs/components-popups-menu--docs#accessibility) for more information about
-accessibiliy of these components in the Action Bar.
+Refer to [Button](/components/buttons/button/#accessibility) and
+[Menus](/components/popups/menu/#accessibility) for more information about accessibiliy of these
+components in the Action Bar.
 
 ## Component API
 

package/dist/mdx/react/banner/Banner.mdx

@@ -13,7 +13,7 @@ import StickyRTL from './examples/StickyRTL';
 
 # Canvas Kit Banner
 
-`Banner` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Banner` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 used surface important information and feedback to the user about a task, action, or state.
 
 [> Workday Design Reference](https://design.workday.com/components/indicators/banners)

package/dist/mdx/react/breadcrumbs/Breadcrumbs.mdx

@@ -8,7 +8,7 @@ import LinkTruncation from './examples/LinkTruncation';
 # Canvas Kit Breadcrumbs
 
 Breadcrumbs is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+[compound component](/get-started/for-developers/documentation/compound-components/) that allows
 users to keep track and maintain awareness of their location as they navigate through pages,
 folders, files, etc.
 

package/dist/mdx/react/button/button/Button.mdx

@@ -115,13 +115,13 @@ Enter and Space keys for keyboard interactions.
 [Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
 
 - An `aria-label` is only necessary for icon-only buttons in most cases. Using
-  [Canvas Kit's tooltip component](?path=/docs/components-popups-tooltip--docs) will handle this for
-  you, and all users will be able to see the label for the button.
+  [Canvas Kit's tooltip component](/components/popups/tooltip/) will handle this for you, and all
+  users will be able to see the label for the button.
 - When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required
   for screen reader support. For example, see Canvas Kit's
-  [Segmented Control component](?path=/docs/preview-segmented-control--docs).
-- When buttons have an attached menu, an `aria-haspopup=”true”` property is required. Using
-  [Canvas Kit's Menu component](?path=/docs/components-menus-menu--docs) will handle this for you.
+  [Segmented Control component](/components/buttons/segmented-control/).
+- When buttons have an attached menu, an `aria-haspopup="true"` property is required. Using
+  [Canvas Kit's Menu component](/components/popups/menu/) will handle this for you.
 - The icons used in text buttons are decorative in most cases and include ARIA `role="presentation"`
   and `focusable="false"`. In some special cases where an icon does add meaning, you may be required
   to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.
@@ -136,8 +136,7 @@ Enter and Space keys for keyboard interactions.
 - Button text content is announced along with the button role (e.g., "Primary, button").
 - Icon-only buttons announce the `aria-label` value along with the button role.
 - Toggle buttons announce their pressed/unpressed state (e.g., "Activity Stream, toggle button,
-  pressed" and check out the
-  [Segmented Control component](?path=/docs/preview-segmented-control--docs)).
+  pressed" and check out the [Segmented Control component](/components/buttons/segmented-control/)).
 
 ### Touch Target Size
 

package/dist/mdx/react/card/card.mdx

@@ -9,7 +9,7 @@ import WithStencils from './examples/Stencils';
 # Canvas Kit Card
 
 A Card is a preview that serves as an entry point to more detailed information. Card is a
-presentational [compound component](/getting-started/for-developers/resources/compound-components/)
+presentational [compound component](/get-started/for-developers/documentation/compound-components/)
 used as a building block for other components such as [Popup](/components/popups/popup/) and
 [Modal](/components/popups/modal/).
 

package/dist/mdx/react/common/mdx/CompoundComponentUtilities.mdx

@@ -10,7 +10,7 @@ import CreateComponent from './examples/CreateComponent';
 # Compound Component Utilities
 
 The following utilities are used to create and compose
-[compound components](/getting-started/for-developers/resources/compound-components/).
+[compound components](/get-started/for-developers/documentation/compound-components/).
 
 ## Installation
 

package/dist/mdx/react/expandable/Expandable.mdx

@@ -48,6 +48,11 @@ to `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before
 
 <ExampleCodeBlock code={Avatar} />
 
+> **Accessibility Note:** In this situation, the Avatar is decorative and should not be announced to
+> screen readers. The `<Expandable.Avatar>` component has `isDecorative` set to `true` by default to
+> hide it from screen readers, as avatars in expandable headers are typically decorative when paired
+> with adjacent text.
+
 ### Right to Left (RTL)
 
 Expandable container has bidirectional support and should function as expected with RTL languages as
@@ -72,11 +77,53 @@ You can also have direct access to the model if
 
 ### Hoisted Model
 
-If you you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In
-the example below, we're hoisting the models to expand and collapse all three containers at once.
+If you need direct access to the model, you can hoist it with the `useExpandableModel` hook. In the
+example below, we're hoisting the models to expand and collapse all three containers at once.
 
 <ExampleCodeBlock code={HoistedModel} />
 
+> **Accessibility Note:** When using multiple Expandable Containers on a page, use the `as` prop to
+> render the `<Expandable.Content>` sub-component as an HTML `<section>` element. Then, use
+> `aria-labelledby` to reference the unique `id` of the `<Expandable.Title>` element. This practice
+> can be useful to screen reader users when multiple Expandable Containers are opened at one time
+> for uniquely describing the boundaries of the expandable content.
+
+## Accessibility
+
+Our Expandable component renders a semantic HTML `<button>` element to the DOM, with an optional
+parent heading element as defined by the `headingLevel` prop. The `aria-expanded` property is
+included on the button to indicate the state of the content to screen readers.
+
+[Accordion Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
+
+- Use the `headingLevel` prop to assign an appropriate heading level based on the context of the
+  page content.
+- When using Expandable Container for navigation elements, then we don't recommend using the
+  `headingLevel` prop. This will render only expandable buttons to the DOM, reserving headings for
+  organizing content in the main body of the page.
+- The `as` prop may also be used on `<Expandable.Content>` to render an HTML `<ul>` element for
+  displaying a list of items. For example, check out
+  [Side Panel with Navigation](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-side-panel-navigation--docs).
+
+### Navigation
+
+- **Tab key**: Moves focus to the next expandable button or focusable element
+- **Shift + Tab**: Moves focus to the previous focusable element
+- **Enter or Space**: Toggles the expanded/collapsed state
+
+### Screen Reader Experience
+
+- The expandable button will be announced with its title text followed by the button role
+- The current state will be announced as either "collapsed" or "expanded" (For example: "Usage
+  Guidance, button, collapsed" or "Usage Guidance, button, expanded")
+- **State Changes:** When activating the button to expand content, screen readers will announce the
+  new "expanded" state and vice versa when collapsing content.
+- **Content Regions:** Screen reader users can use landmark navigation to jump between sections and
+  each section will be announced with its associated title (For example: "Usage Guidance, landmark
+  region")
+- **Heading Structure:** Using heading levels with expandable buttons allows screen reader users to
+  navigate by headings, making the document structure and hierarchy easier to understand.
+
 ## Component API
 
 <SymbolDoc name="Expandable" fileName="/react/" />

package/dist/mdx/react/expandable/examples/HoistedModel.tsx

@@ -3,12 +3,27 @@ import React from 'react';
 import {Expandable, useExpandableModel} from '@workday/canvas-kit-react/expandable';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const listStyles = createStyles({
+  flexDirection: 'column',
+  gap: system.space.x2,
+  padding: system.space.zero,
+  marginX: system.space.x4,
+  marginY: system.space.zero,
+});
 
 export default () => {
   const modelOne = useExpandableModel();
   const modelTwo = useExpandableModel();
   const modelThree = useExpandableModel();
 
+  const idOne = useUniqueId();
+  const idTwo = useUniqueId();
+  const idThree = useUniqueId();
+
   const handleExpandAll = () => {
     modelOne.events.show();
     modelTwo.events.show();
@@ -22,19 +37,19 @@ export default () => {
   };
 
   return (
-    <Flex gap="m" flexDirection="column">
-      <Flex gap="s">
+    <Flex gap={system.space.x6} flexDirection="column">
+      <Flex gap={system.space.x4}>
         <SecondaryButton onClick={handleExpandAll}>Expand All</SecondaryButton>
         <SecondaryButton onClick={handleCollapseAll}>Collapse All</SecondaryButton>
       </Flex>
       <Flex flexDirection="column">
         <Expandable model={modelOne}>
           <Expandable.Target headingLevel="h4">
-            <Expandable.Title>Usage Guidance</Expandable.Title>
+            <Expandable.Title id={idOne}>Usage Guidance</Expandable.Title>
             <Expandable.Icon iconPosition="end" />
           </Expandable.Target>
 
-          <Expandable.Content>
+          <Expandable.Content as="section" aria-labelledby={idOne}>
             This component highlights the most important details of a section and reveals more when
             a user taps or clicks on the header part of the container. Enabling users to hide and
             show information ensures the design remains focused and relevant to their expectations.
@@ -44,20 +59,12 @@ export default () => {
         </Expandable>
         <Expandable model={modelTwo}>
           <Expandable.Target headingLevel="h4">
-            <Expandable.Title>Accessibility Guidelines</Expandable.Title>
+            <Expandable.Title id={idTwo}>Accessibility Guidelines</Expandable.Title>
             <Expandable.Icon iconPosition="end" />
           </Expandable.Target>
 
-          <Expandable.Content>
-            <Flex
-              flexDirection="column"
-              as="ul"
-              gap="xxs"
-              maxWidth="60ch"
-              padding="zero"
-              marginX="s"
-              marginY="zero"
-            >
+          <Expandable.Content as="section" aria-labelledby={idTwo}>
+            <Flex as="ul" cs={listStyles}>
               <li>
                 The state of a component being open or closed must be conveyed to assistive
                 technologies.
@@ -92,10 +99,10 @@ export default () => {
         </Expandable>
         <Expandable model={modelThree}>
           <Expandable.Target headingLevel="h4">
-            <Expandable.Title>Content Guidelines</Expandable.Title>
+            <Expandable.Title id={idThree}>Content Guidelines</Expandable.Title>
             <Expandable.Icon iconPosition="end" />
           </Expandable.Target>
-          <Expandable.Content>
+          <Expandable.Content as="section" aria-labelledby={idThree}>
             Titles should be short and concise, yet long enough to explain what the user would
             expect to see when the content is expanded. If titles must be long, make sure it doesn't
             wrap more than two lines.

package/dist/mdx/react/layout/Box.mdx

@@ -31,18 +31,18 @@ supports all `BoxProps` such as `padding`, it also supports semantic anchor elem
 
 ### Style Props
 
-`Box` exposes [style props](/getting-started/for-developers/resources/style-props/) that allow you
+`Box` exposes [style props](/get-started/for-developers/documentation/style-props/) that allow you
 to modify styles in an ergonomic way across components. To learn more about individual sets of `Box`
 style props, consult the lists below.
 
-- [Background Style Props](/getting-started/for-developers/resources/style-props/#background)
-- [Border Style Props](/getting-started/for-developers/resources/style-props/#border)
-- [Color Style Props](/getting-started/for-developers/resources/style-props/#color)
-- [Depth Style Props](/getting-started/for-developers/resources/style-props/#depth)
-- [Flex Item Style Props](/getting-started/for-developers/resources/style-props/#flex-item)
-- [Grid Item Style Props](/getting-started/for-developers/resources/style-props/#grid-item)
-- [Layout Style Props](/getting-started/for-developers/resources/style-props/#layout)
-- [Other Style Props](/getting-started/for-developers/resources/style-props/#other)
-- [Position Style Props](/getting-started/for-developers/resources/style-props/#position)
-- [Space Style Props](/getting-started/for-developers/resources/style-props/#space)
-- [Text Style Props](/getting-started/for-developers/resources/style-props/#text)
+- [Background Style Props](/get-started/for-developers/documentation/style-props/#background)
+- [Border Style Props](/get-started/for-developers/documentation/style-props/#border)
+- [Color Style Props](/get-started/for-developers/documentation/style-props/#color)
+- [Depth Style Props](/get-started/for-developers/documentation/style-props/#depth)
+- [Flex Item Style Props](/get-started/for-developers/documentation/style-props/#flex-item)
+- [Grid Item Style Props](/get-started/for-developers/documentation/style-props/#grid-item)
+- [Layout Style Props](/get-started/for-developers/documentation/style-props/#layout)
+- [Other Style Props](/get-started/for-developers/documentation/style-props/#other)
+- [Position Style Props](/get-started/for-developers/documentation/style-props/#position)
+- [Space Style Props](/get-started/for-developers/documentation/style-props/#space)
+- [Text Style Props](/get-started/for-developers/documentation/style-props/#text)

package/dist/mdx/react/layout/Flex.mdx

@@ -52,13 +52,13 @@ building layouts.
 #### Props
 
 `Flex` exposes
-[flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
+[flex container style props](/get-started/for-developers/documentation/style-props/#flex) and `Box`
 style props.
 
 ### Flex.Item
 
 `Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map
+[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) that map
 to CSS Flexbox Item properties. This provides greater control over how child components render in
 your layout.
 
@@ -73,5 +73,5 @@ your layout.
 #### Props
 
 `Flex.Item` exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
+[flex item style props](/get-started/for-developers/documentation/style-props/#flex-item) and `Box`
 style props.

package/dist/mdx/react/layout/Grid.mdx

@@ -9,7 +9,7 @@ import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
 two-dimensional layouts (rows and columns) with
 [CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).
 
-Please refer to our [layout examples](/examples/layout/) for more examples of how to implement
+Please refer to our [layout examples](/examples-layouts--docs) for more examples of how to implement
 different layouts using `Grid`.
 
 ## Installation
@@ -96,13 +96,13 @@ layouts.
 #### Props
 
 `Grid` exposes
-[grid container style props](/getting-started/for-developers/resources/style-props/#grid) and `Box`
+[grid container style props](/get-started/for-developers/documentation/style-props/#grid) and `Box`
 style props.
 
 ### Grid.Item
 
 `Grid.Item` is a subcomponent of `Grid`. It is a `Box` component under the hood and exposes
-[grid item style props](/getting-started/for-developers/resources/style-props/#grid) that map to CSS
+[grid item style props](/get-started/for-developers/documentation/style-props/#grid) that map to CSS
 Grid Item properties. This provides greater control over how child components render in your layout.
 
 ```tsx

package/dist/mdx/react/menu/Menu.mdx

@@ -32,23 +32,18 @@ yarn add @workday/canvas-kit-react
 `Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
 model which composes a list model and a popup model and sets up accessibility features for you.
 
-`Menu` follows the
-[Actions Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)
-using roving tabindex. Below is table of supported keyboard shortcuts and associated actions.
-
-| Key                | Action                                                                                                       |
-| ------------------ | ------------------------------------------------------------------------------------------------------------ |
-| `Enter` or `Space` | Activates the menu item and then closes the menu                                                             |
-| `Escape`           | Closes the menu                                                                                              |
-| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
-| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item     |
-| `Home`             | Moves focus to the first menu item                                                                           |
-| `End`              | Moves focus to the last menu item                                                                            |
-
 ### Context Menu
 
 <ExampleCodeBlock code={ContextMenu} />
 
+> **Accessibility Note**: This variation relies on the `contextmenu` browser event, which has
+> varying levels of support across different operating systems. On Windows, this feature is better
+> supported and users can typically trigger context menus using the **Shift + F10** keyboard
+> shortcut or the dedicated **Context Menu** key (if available on their keyboard). However, on
+> macOS, context menu support is limited and may require users to enable specific accessibility
+> settings in their system preferences to function properly. Consider providing alternative access
+> methods for critical functionality.
+
 ### Icons
 
 Menu supports more complex children, including icons, but the text of the item will no longer be
@@ -60,18 +55,10 @@ about the text of the item.
 
 <ExampleCodeBlock code={Icons} />
 
-### Selectable Menu
-
-The `Menu.Item` renders a `role=menuitem` element which does not have `aria-selected` and thus no
-selected state. If you wish your menu to have selectable menu items, use `Menu.Option` instead of
-`Menu.Item`. The `Menu.Option` is meant to be used when the `Menu.Card` has a role of `listbox` and
-is controlled via `aria-activedescendant`. This example uses `Menu.Option` to should what the
-checkmark looks like, but the example is not keyboard or screen reader accessible. There are many
-other behaviors that need to be composed into the `Menu.Target` and `Menu.List` components and the
-behaviors depend on many other things. To see a full example of all these behaviors, look at the
-`<Combobox>` and `<Select>` component source code as examples.
-
-<ExampleCodeBlock code={SelectableMenu} />
+> **Accessibility Note**: Icons in menu items do not inherently provide text alternatives to
+> assistive technologies. However, in most cases, icons are used decoratively alongside text labels,
+> and additional text alternatives are not necessary since the menu item text itself provides the
+> accessible name.
 
 ### Grouping
 
@@ -84,6 +71,14 @@ and are not selectable with the keyboard or mouse.
 
 <ExampleCodeBlock code={Grouping} />
 
+> **Accessibility Note**: Menu groups use `role="group"` with appropriate labeling to provide
+> semantic structure for assistive technologies. When navigating through grouped menu items, screen
+> readers will announce the group label when users enter a new group, providing important context
+> about the organization of the menu. Group headers are not part of the keyboard navigation
+> sequence, allowing users to efficiently move between actionable menu items. This semantic grouping
+> helps all users, including those using assistive technologies, understand the hierarchy and
+> categorization of menu options.
+
 ### Nested
 
 Menus support nesting. If you only have a few items and not very many nesting levels, the menu can
@@ -94,6 +89,10 @@ indicate this dual role.
 
 <ExampleCodeBlock code={Nested} />
 
+> **Accessibility Note**: When a menu item has an attached submenu, the `<Menu.Submenu.TargetItem>`
+> includes `aria-haspopup="true"` and `aria-expanded={true | false}` properties. These properties
+> will alert screen reader users to the available submenu systems.
+
 ### Nested Dynamic Items
 
 Menu nesting is simpler with the dynamic API. In this example, a `renderItem` function is defined to
@@ -106,7 +105,45 @@ submenus.
 
 ## Accessibility
 
-This content is coming soon!
+Our Menu component is based on the Menu Button pattern on the ARIA Authoring Practices Guide from
+the W3C and relies on the roving tabindex technique for managing focus within the opened menu. This
+means that the minimum requirements for screen reader support and keyboard navigation are included
+in the component.
+
+[Menu Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)
+
+- The `<Menu.Target>` sub-component uses `aria-haspopup="true"` and `aria-expanded={true | false}`
+  properties. This benefits screen reader users by indicating when a button element has an attached
+  menu.
+- The `<Menu.List>` sub-component uses `role="menu"` and `<Menu.Item>` uses `role="menuitem"` ARIA
+  roles. These roles allow screen readers to pass through arrow key events to the web application.
+- The `<Menu.List>` sub-component includes an `aria-labelledby` ID reference to the `<Menu.Target>`
+  sub-component. This assigns a label to the menu for context.
+
+### Navigation
+
+- **Enter or Space**: When focused on the menu button, opens the menu and moves focus to the first
+  menu item. When focused on a menu item, activates the item and closes the menu
+- **Escape**: Closes the menu and returns focus to the menu button
+- **Up & Down Arrow**: Moves focus up and down the menu items
+- **Home & End**: Moves focus to the first or last menu item
+- **Right & Left Arrow**: When focused on a menu item with a submenu, opens the submenu and moves
+  focus to the first item in the submenu or closes the submenu and returns focus to the parent menu
+  item
+
+### Screen Reader Experience
+
+- The menu button will be announced with its label text followed by the button role, a notification
+  that it has a popup menu, and the current state of the menu (For example: "Actions, button, menu
+  popup, collapsed")
+- **Opening the Menu:** When the menu button is activated, screen readers will announce the menu
+  opening, the number of menu items available, and the currently focused item (For example:
+  "Actions, menu, First Action, menu item, 1 of 4.")
+- **Navigating Menu Items:** As focus moves between menu items, screen readers will announce the
+  item name and its position in the list (For example: "Second Action, menu item, 2 of 4.")
+- **Menu Items with Submenus:** When focused on a menu item that has a submenu, screen readers will
+  announce that it has a submenu and provide the expanded/collapsed state (For example: "More
+  Actions, menu item, has submenu, collapsed, 3 of 4.")
 
 ## Component API
 

package/dist/mdx/react/menu/examples/SelectableMenu.tsx

@@ -3,14 +3,25 @@ import React from 'react';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
+/**
+ * The `Menu.Item` renders a `role=menuitem` element, and `aria-selected` is not a valid attribute for
+ * the `menuitem` role, so it cannot have a selected state. If you wish your menu to have selectable
+ * menu items, use `Menu.Option` instead of `Menu.Item`. This is meant to be used when overriding the
+ * default role of the `Menu.List` to `listbox`. This example uses `Menu.Option` to show what the
+ * checkmark looks like, but the example is not keyboard or screen reader accessible. There are many
+ * other behaviors that need to be composed into the `Menu.Target` and `Menu.List` components and the
+ * behaviors depend on many other things. To see a full example of all these behaviors, look at the
+ * `<Combobox>` and `<Select>` component source code as examples.
+ */
+
 export default () => {
   const [selected, setSelected] = React.useState('');
   return (
     <Menu onSelect={data => setSelected(data.id)}>
       <Menu.Target>Open Menu</Menu.Target>
       <Menu.Popper>
-        <Menu.Card role="listbox">
-          <Menu.List as="ul">
+        <Menu.Card>
+          <Menu.List role="listbox">
             <Menu.Option>First Item</Menu.Option>
             <Menu.Option>Second Item</Menu.Option>
             <Menu.Divider />

package/dist/mdx/react/pagination/pagination.mdx

@@ -10,7 +10,7 @@ import RTL from './examples/RTL';
 # Canvas Kit Pagination
 
 `Pagination` is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+[compound component](/get-started/for-developers/documentation/compound-components/) that allows
 users to navigate between pages in a range.
 
 [> Workday Design Reference](https://design.workday.com/components/navigation/pagination)
@@ -46,7 +46,7 @@ readers.
 By default, `Pagination` will create and use its own [model](#model) internally. Alternatively, you
 may configure your own model with `usePaginationModel` and pass it to `Pagination` via the `model`
 prop. This pattern is referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Pagination` component.
 
 In this example, we set up external observation of the model state and create an external button to
@@ -94,7 +94,7 @@ You can use `useResizeObserver` to accomplish this as in the example below.
 ## Model
 
 If `Pagination` was stripped of all its markup, attributes, and styling, what would remain is the
-[model](/getting-started/for-developers/resources/compound-components/#models). The model is an
+[model](/get-started/for-developers/documentation/compound-components/#models). The model is an
 object composed of two parts: `state` which describes the current snapshot in time of the component
 and `events` which describes events that can be sent to the model.
 
@@ -135,7 +135,7 @@ export const CustomPagination = () => {
 Alternatively, if you need direct access to the model's `state` and `events` outside of the
 `Pagination` component, you may configure your own model with `usePaginationModel` and pass it to
 `Pagination` via a pattern called
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model).
 
 ```tsx
 const model = usePaginationModel({

package/dist/mdx/react/popup/Popup.mdx

@@ -44,7 +44,7 @@ yarn add @workday/canvas-kit-react
 ## Usage
 
 The `Popup` component is a generic
-[Compound Component](/getting-started/for-developers/resources/compound-components/) that is used to
+[Compound Component](/get-started/for-developers/documentation/compound-components/) that is used to
 build popup UIs that are not already covered by Canvas Kit.
 
 ### Basic Example

package/dist/mdx/react/select/Select.mdx

@@ -40,11 +40,11 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Select` supports a
-[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where you
+[dynamic API](/get-started/for-developers/guides/collection-api/#dynamic-items) where you
 pass an array of items via the `items` prop and provide a render function to display the items. The
 items may be provided as an
-[array of strings](/getting-started/for-developers/resources/collection-api/#array-of-strings) or an
-[array of objects](/getting-started/for-developers/resources/collection-api/#array-of-objects).
+[array of strings](/get-started/for-developers/guides/collection-api/#array-of-strings) or an
+[array of objects](/get-started/for-developers/guides/collection-api/#array-of-objects).
 
 `Select` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
 `Select` wraps the `FormField` element and the `FormField` element wraps the children of `Select` to
@@ -74,7 +74,7 @@ value of the `Select`.
 By default, `Select` will create and use its own model internally. Alternatively, you may configure
 your own model with `useSelectModel` and pass it to `Select` via the `model` prop. This pattern is
 referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Select` component.
 
 In this example, we set up external observation of the model state and create an external button to

package/dist/mdx/react/tabs/Tabs.mdx

@@ -12,7 +12,7 @@ import DynamicTabs from './examples/DynamicTabs';
 
 # Canvas Kit Tabs
 
-`Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Tabs` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that allows users to navigate between related views of content while remaining in context of the
 page.
 
@@ -57,7 +57,7 @@ should render.
 By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
 configure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This
 pattern is referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Tabs` component.
 
 In this example, we set up external observation of the model state and create an external button to

package/dist/mdx/react/text/Text.mdx

@@ -19,7 +19,7 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 `Text` is built on top of [`Box`](/components/layout/box/) and supports a multitude of
-[style props](/getting-started/for-developers/resources/style-props/) including spacing props such
+[style props](/get-started/for-developers/documentation/style-props/) including spacing props such
 as `margin` and `padding`, as well as text styling props such as `fontSize` and `fontWeight`.
 
 `Text` renders a `<span>` element by default. You may override the rendered element using the `as`

package/dist/mdx/react/toast/toast.mdx

@@ -9,7 +9,7 @@ import RTL from './examples/RTL';
 
 # Canvas Kit Toast
 
-`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that contains updates or messages about the status of an application's process.
 
 ## Installation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.2.1",
+  "version": "14.2.3",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.2.1",
-    "@workday/canvas-kit-preview-react": "^14.2.1",
-    "@workday/canvas-kit-react": "^14.2.1",
-    "@workday/canvas-kit-styling": "^14.2.1",
+    "@workday/canvas-kit-labs-react": "^14.2.3",
+    "@workday/canvas-kit-preview-react": "^14.2.3",
+    "@workday/canvas-kit-react": "^14.2.3",
+    "@workday/canvas-kit-styling": "^14.2.3",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "6589a979c0a56ef57b3fefb0057eaf89c22c4ca7"
+  "gitHead": "f397e48d3a320c73932e9d5d8dec6c0256c6ed8b"
 }