@workday/canvas-kit-docs 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0074-next.0

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.0",
-    "@workday/canvas-kit-preview-react": "14.2.0",
-    "@workday/canvas-kit-react": "14.2.0",
-    "@workday/canvas-kit-react-fonts": "^14.2.0",
-    "@workday/canvas-kit-styling": "14.2.0",
+    "@workday/canvas-kit-labs-react": "14.2.2",
+    "@workday/canvas-kit-preview-react": "14.2.2",
+    "@workday/canvas-kit-react": "14.2.2",
+    "@workday/canvas-kit-react-fonts": "^14.2.2",
+    "@workday/canvas-kit-styling": "14.2.2",
     "@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.0",
-    "@workday/canvas-kit-preview-react": "14.2.0",
-    "@workday/canvas-kit-react": "14.2.0",
-    "@workday/canvas-kit-react-fonts": "^14.2.0",
-    "@workday/canvas-kit-styling": "14.2.0",
+    "@workday/canvas-kit-labs-react": "14.2.2",
+    "@workday/canvas-kit-preview-react": "14.2.2",
+    "@workday/canvas-kit-react": "14.2.2",
+    "@workday/canvas-kit-react-fonts": "^14.2.2",
+    "@workday/canvas-kit-styling": "14.2.2",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

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

@@ -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)
@@ -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

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

@@ -18,15 +18,27 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Promotions](#component-promotions)
-  - [Segmented Control](#segmented-control-)
-  - [Information Highlight](#information-highlight-)
+  - [Segmented Control ⚡️](#segmented-control-️)
+    - [API Differences](#api-differences)
+      - [Structure Changes](#structure-changes)
+      - [Prop Changes](#prop-changes)
+      - [Code Migration](#code-migration)
+      - [New Features](#new-features)
+  - [Information Highlight ⚡️](#information-highlight-️)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
 - [Removals](#removals)
   - [Segmented Control (Deprecated)](#segmented-control-deprecated)
+  - [Search Form (Labs)](#search-form-labs)
+  - [Combobox (Labs)](#combobox-labs)
 - [Glossary](#glossary)
   - [Main](#main)
   - [Preview](#preview)
+- [Codemod Reference](#codemod-reference)
+  - [What is a Codemod?](#what-is-a-codemod)
+  - [Running a Codemod](#running-a-codemod)
+    - [Instructions](#instructions-1)
+  - [Codemod Transformations for v15](#codemod-transformations-for-v15)
 
 ## Codemod
 
@@ -231,6 +243,31 @@ Please migrate to the new `SegmentedControl` component (promoted from Preview) w
 component pattern with `SegmentedControl.List` and `SegmentedControl.Item`. See the
 [API Differences](#api-differences) section above for migration guidance.
 
+### Search Form (Labs)
+
+The deprecated `SearchForm` component has been removed from `@workday/canvas-kit-labs-react`.
+
+The following exports are no longer available:
+- `SearchForm`
+- `SearchFormProps`
+- `SearchFormState`
+- `SearchTheme`
+- `SearchThemeAttributes`
+
+Please migrate to the [Combobox](/get-started/for-developers/guides/combobox/) in `@workday/canvas-kit-react`.
+
+### Combobox (Labs)
+
+The deprecated `Combobox` component has been removed from `@workday/canvas-kit-labs-react`.
+
+The following exports are no longer available:
+- `Combobox`
+- `ComboboxProps`
+- `AutocompleteList`
+- `Status`
+
+Please migrate to the [Combobox](/get-started/for-developers/guides/combobox/) in `@workday/canvas-kit-react`.
+
 ## Glossary
 
 For an overview of the different packages we provide, please view our docs

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/react/action-bar/ActionBar.mdx

@@ -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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0064-next.0",
+  "version": "15.0.0-alpha.0074-next.0",
   "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": "^15.0.0-alpha.0064-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0064-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0064-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0064-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0074-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0074-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0074-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0074-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "74d356998c8a3fe27e6a54ef1db7128320b4b2ed"
+  "gitHead": "3fbdd82f3f92e4c6aaebd87c84fcdcd6b39f87cc"
 }

package/dist/mdx/labs-react/combobox/Combobox.mdx

@@ -1,68 +0,0 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
-import Basic from './examples/Basic';
-import DisabledItem from './examples/DisabledItem';
-import GroupOfResult from './examples/GroupOfResult';
-import Grow from './examples/Grow';
-import NoClearButton from './examples/NoClearButton';
-import RTL from './examples/RTL';
-
-
-# Combobox <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Combobox` in Labs has been deprecated and will be removed in a future major version. Please
-    use `Combobox` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs">
-    Combobox Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-The term "Combobox" is based on the
-[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
-Authoring Practices Guide (APG):
-
-> A [combobox](https://w3c.github.io/aria/#combobox) is an input widget with an associated popup
-> that enables users to select a value for the combobox from a collection of possible values.
-
-Examples of a "combobox" would be date pickers, autocomplete, and select components.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-### Autocomplete
-
-<ExampleCodeBlock code={Basic} />
-
-### Grow
-
-<ExampleCodeBlock code={Grow} />
-
-### No Clear Button
-
-<ExampleCodeBlock code={NoClearButton} />
-
-### Group Of Result
-
-<ExampleCodeBlock code={GroupOfResult} />
-
-### Disabled Item
-
-<ExampleCodeBlock code={DisabledItem} />
-
-### RTL
-
-<ExampleCodeBlock code={RTL} />