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

package/dist/mdx/react/loading-dots/examples/CustomColorAndAnimation.tsx

@@ -1,19 +1,21 @@
-import React from 'react';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-import {system} from '@workday/canvas-tokens-web';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainer: createStyles({
     display: 'flex',
-    gap: system.space.x4,
+    gap: system.gap.md,
   }),
 };
 
 export default () => {
   return (
     <div className={styleOverrides.parentContainer}>
-      <LoadingDots loadingDotColor={system.color.fg.primary.default} animationDurationMs="60ms" />
+      <LoadingDots
+        loadingDotColor={system.color.brand.fg.primary.default}
+        animationDurationMs="60ms"
+      />
     </div>
   );
 };

package/dist/mdx/react/loading-dots/examples/CustomShape.tsx

@@ -1,20 +1,20 @@
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-import {system} from '@workday/canvas-tokens-web';
-import {createStyles, createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainer: createStyles({
     display: 'flex',
-    gap: system.space.x4,
+    gap: system.gap.md,
   }),
 };
 
 const loadingStencil = createStencil({
   base: {
-    borderRadius: system.shape.round,
-    backgroundColor: system.color.bg.contrast.strong,
-    height: 80,
-    width: 80,
+    borderRadius: system.shape.full,
+    backgroundColor: system.color.surface.contrast.strong,
+    height: base.size1000,
+    width: base.size1000,
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',

package/dist/mdx/react/loading-dots/examples/Inverse.tsx

@@ -1,11 +1,11 @@
+import {Graphic} from '@workday/canvas-kit-react/icon';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Graphic} from '@workday/canvas-kit-react/icon';
 
 const loadingStencil = createStencil({
   base: {
-    background: system.color.bg.overlay,
+    background: system.color.surface.overlay.scrim,
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',

package/dist/mdx/react/loading-dots/examples/RTL.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
+
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <LoadingDots />
     </CanvasProvider>
   );

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

@@ -1,11 +1,12 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
-import Icons from './examples/Icons';
-import SelectableMenu from './examples/SelectableMenu';
 import Grouping from './examples/Grouping';
+import Icons from './examples/Icons';
 import Nested from './examples/Nested';
 import NestedDynamic from './examples/NestedDynamic';
+import SelectableMenu from './examples/SelectableMenu';
 
 
 # Canvas Kit Menu
@@ -32,23 +33,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 +56,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 +72,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 +90,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 +106,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
 
@@ -114,4 +152,4 @@ This content is coming soon!
 
 ## Specifications
 
-<Specifications file="Menu.spec.ts" name="Menu" />
+<Specifications file="./cypress/component/Menu.spec.tsx" name="Menu" />

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

@@ -1,12 +1,13 @@
 import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
 import {
-  setupIcon,
-  uploadCloudIcon,
+  bookUserIcon,
+  cloudArrowUpIcon,
+  configureIcon,
   userIcon,
-  taskContactIcon,
 } from '@workday/canvas-system-icons-web';
-import {Menu} from '@workday/canvas-kit-react/menu';
-import {BodyText} from '@workday/canvas-kit-react/text';
 
 export default () => {
   const [selected, setSelected] = React.useState('');
@@ -17,17 +18,17 @@ export default () => {
         <Menu.Card>
           <Menu.List>
             <Menu.Item data-text="First Item">
-              <Menu.Item.Icon icon={uploadCloudIcon} />
+              <Menu.Item.Icon icon={cloudArrowUpIcon} />
               <Menu.Item.Text>First Item</Menu.Item.Text>
             </Menu.Item>
             <Menu.Item data-text="Second Item (with a really really really long label)">
-              <Menu.Item.Icon icon={setupIcon} />
+              <Menu.Item.Icon icon={configureIcon} />
               <Menu.Item.Text>Second Item (with a really really really long label)</Menu.Item.Text>
             </Menu.Item>
             <Menu.Item aria-disabled data-text="Third Item">
-              <Menu.Item.Icon icon={uploadCloudIcon} />
+              <Menu.Item.Icon icon={cloudArrowUpIcon} />
               <Menu.Item.Text>Third Item</Menu.Item.Text>
-              <Menu.Item.Icon icon={taskContactIcon} />
+              <Menu.Item.Icon icon={bookUserIcon} />
             </Menu.Item>
             <Menu.Item data-text="User">
               <Menu.Item.Icon icon={userIcon} />
@@ -35,7 +36,7 @@ export default () => {
             </Menu.Item>
             <Menu.Divider />
             <Menu.Item data-text="Fifth Item (with divider)">
-              <Menu.Item.Icon icon={taskContactIcon} />
+              <Menu.Item.Icon icon={bookUserIcon} />
               <Menu.Item.Text>Fifth Item (with divider)</Menu.Item.Text>
             </Menu.Item>
           </Menu.List>

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

@@ -1,9 +1,11 @@
 import React from 'react';
-import {PopperController} from '../../../../../utils/storybook';
-import {Placement} from '@workday/canvas-kit-react/popup';
+
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {Menu} from '@workday/canvas-kit-react/menu';
+import {Placement} from '@workday/canvas-kit-react/popup';
 import {BodyText} from '@workday/canvas-kit-react/text';
-import {Flex} from '@workday/canvas-kit-react/layout';
+
+import {PopperController} from '../../../../../utils/storybook';
 
 export default () => {
   const [placement, setPlacement] = React.useState<Placement>('top');

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';

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

@@ -97,7 +97,7 @@ export default () => {
           <Menu.List>{renderItem}</Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" cs={{marginBlockStart: system.space.x4}}>
+      <BodyText size="small" cs={{marginTop: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

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/modal/Modal.mdx

@@ -1,21 +1,25 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import WithoutCloseIcon from './examples/WithoutCloseIcon';
+import BodyOverflow from './examples/BodyOverflow';
 import CustomFocus from './examples/CustomFocus';
-import ReturnFocus from './examples/ReturnFocus';
 import CustomTarget from './examples/CustomTarget';
-import BodyOverflow from './examples/BodyOverflow';
-import FullOverflow from './examples/FullOverflow';
 import FormModal from './examples/FormModal';
+import FullOverflow from './examples/FullOverflow';
+import ReturnFocus from './examples/ReturnFocus';
+import WithoutCloseIcon from './examples/WithoutCloseIcon';
+
 
 # Canvas Kit Modal
 
 A Modal component is a type of Dialog that renders a translucent overlay that prevents user
 interaction with the rest of the page. A Modal will render the rest of the page inert until the
-Modal is dismissed. A Modal should be used when the user needs to presented with important
+Modal is dismissed. A Modal should be used when the user needs to be presented with important
 information that must be interacted with before continuing interaction with the rest of the page.
 
+For tasks that do not require blocking the rest of the page, consider the non-modal
+[**Dialog**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs)
+component instead.
+
 ## Installation
 
 ```sh
@@ -34,7 +38,7 @@ dialog.
 ### Without Close Icon
 
 If you wish to remove the close icon button, you can simply omit the `Modal.CloseButton`
-subcomponent. If you have a modal dialog that requires the user to accept instead of dismiss though
+subcomponent. If you have a modal dialog that requires the user to accept instead of dismiss through
 an escape key or clicking outside the modal, you must create a new `PopupModel` without those
 behaviors and hand that model to the Modal dialog component.
 
@@ -52,18 +56,29 @@ element receives focus when the modal opens.
 
 <ExampleCodeBlock code={CustomFocus} />
 
+> **Accessibility Note**: When initial focus lands on a control **below** the heading (for example,
+> a text field instead of the close button), give supplementary copy a unique `id` and pass
+> **`aria-describedby`** on **`Modal.Card`** so screen readers can announce both the dialog name and
+> that text. For more examples of custom focus techniques, see
+> [Popup > Initial Focus](https://workday.github.io/canvas-kit/?path=/docs/components-popups-popup--docs#initial-focus).
+
 ### Return Focus
 
-By default, the Modal will return focus to the `Modal.Target` element, but it is possible the Modal
-was triggered by an element that won't exist when the modal is closed. An example might be a Modal
-that was opened from an Menu item and the act of opening the Modal also closes the Menu, meaning the
-Menu item can no longer receive focus. The also probably means the `Modal.Target` component might
-not suite your needs. The `Modal.Target` adds both a `ref` and an `onClick`. If you provide a
-`returnFocusRef`, you only need to worry about the `onClick`. If you're using a menu, you might need
-to use a different callback. Calling `model.events.show()` will show the Modal.
+By default, the Modal will return focus to the `Modal.Target` element. When you open the modal with
+`model.events.show()` (without `Modal.Target`), set **`returnFocusRef`** on the model to the element
+that should receive focus when the modal closes—for example the button that opened it. That covers
+cancel, Escape, and the close icon: focus returns to the control the user activated.
+
+If confirming an action **removes** that control from the document (such as deleting the row that
+held the delete button), `returnFocusRef` alone cannot land on a **new** target. The example below
+uses **`useLayoutEffect`** after the list updates to move focus to another row’s delete control, or
+to empty-state text when no files remain.
 
 <ExampleCodeBlock code={ReturnFocus} />
 
+> **Accessibility Note**: After an item is deleted, focus is returned to the next item in the list
+> or to the empty state text when no items remain.
+
 ### Custom Target
 
 It is common to have a custom target for your modal. Use the `as` prop to use your custom component.
@@ -79,6 +94,12 @@ requires a `label` prop.
 
 <ExampleCodeBlock code={CustomTarget} />
 
+> **Accessibility Note**: Custom targets must be keyboard focusable, otherwise users will not be
+> able to access the modal. Bear in mind that click handlers only work with the keyboard when
+> applied to HTML `<button>` elements and it is **strongly recommended** to base your custom target
+> on a `<button>` element. Otherwise, you will be required to build in your own custom keyboard
+> event handlers for invoking the modal.
+
 ### Body Content Overflow
 
 The Modal automatically handles overflowing content inside the `Modal.Body` element. If contents are
@@ -87,6 +108,11 @@ need to restrict the height of your browser to observe the overflow.
 
 <ExampleCodeBlock code={BodyOverflow} />
 
+> **Accessibility Note**: When body content overflows, ensure users can scroll that region **using
+> only the keyboard**. Mouse users can drag scrollbars, but keyboard users need another path. In
+> this example, **`tabIndex={0}`** is set on **`Modal.Body`** so the scrollable area can receive
+> focus; once focused, **arrow keys** move the viewport within the overflowing content.
+
 ### Full overlay scrolling
 
 If content is large, scrolling the entire overlay container is an option. Use the
@@ -105,10 +131,62 @@ hoisted to allow for form validation and allow you to control when the modal clo
 
 <ExampleCodeBlock code={FormModal} />
 
+## Accessibility
+
+`Modal` uses the default modal model (`useModalModel`), which composes **`useInitialFocus`**,
+**`useReturnFocus`**, **`useCloseOnOverlayClick`**, **`useCloseOnEscape`**, **`useFocusTrap`**,
+**`useAssistiveHideSiblings`**, and **`useDisableBodyScroll`**.
+
+**`Modal.Card`** exposes **`role="dialog"`** and **`aria-labelledby`** referencing the `id` on
+**`Modal.Heading`**, so the dialog has an accessible name that matches the visible heading. If you
+do not use **`Modal.Heading`**, add an **`aria-label`** on **`Modal.Card`** instead.
+
+**`aria-modal`:** The card sets **`aria-modal="false"`**. When **`aria-modal`** is `true`, some
+assistive technologies hide everything outside the dialog—including portaled UI owned by the dialog
+(such as a Select menu rendered as a sibling of the modal). Canvas Kit keeps
+**`aria-modal="false"`** for a better VoiceOver experience while **`useAssistiveHideSiblings`**
+applies **`aria-hidden`** to siblings of the modal stack so background content stays hidden from
+assistive technology while the modal is open.
+
+Unlike [**Dialog**](/components/popups/dialog/), Modal does **not** add the sibling **`aria-owns`**
+pattern used to remap reading order for portaled non-modal dialogs. Focus moves into the modal when
+it opens, and sibling hiding reduces exposure to content behind the overlay. For portals, reading
+order, and related tradeoffs, see
+[Guides > Accessibility > Inline Popups](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-inline-popups--docs).
+
+[Modal Dialog Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
+
+- Prefer **`Modal.Heading`** so the dialog is properly labelled; avoid leaving a dialog without an
+  accessible name.
+- Ensure icon-only controls such as **`Modal.CloseIcon`** include an accessible name. Prefer the
+  `Tooltip` component to provide a visible label, or a translated `aria-label` string is acceptable.
+
+### Navigation
+
+- **Enter** / **Space**: Open the modal (standard button behavior on the trigger). When it opens,
+  focus moves to the **first focusable element** inside the modal in DOM order—often the close
+  control—or to the element referenced by **`initialFocusRef`** on the model when set.
+- **Tab** / **Shift + Tab**: Move through focusable elements inside the modal; focus **stays**
+  within the modal (**focus trap**).
+- **Escape**: Closes the modal and returns focus to **`Modal.Target`** (or the configured return
+  target, such as **`returnFocusRef`**).
+
+### Screen Reader Experience
+
+- **When the modal opens:** Screen readers should announce the first focused control (often the
+  close button), the dialog's name (**`Modal.Heading`**) and role.
+- **Background content:** Sibling elements of the modal stack receive **`aria-hidden="true"`** while
+  the modal is visible, which hides the rest of the page from many assistive technologies. Mouse
+  users are blocked by the overlay and inert interaction expectations; always verify behavior in
+  your supported browser and screen reader combinations.
+- **Focus trap limits:** Trapping **keyboard** focus does not stop mouse users from interacting
+  outside the dialog card, and some screen reader users can move a virtual cursor outside the
+  trapped region. Treat the trap as the primary keyboard affordance, not a hard security boundary.
+
 ## Component API
 
 <SymbolDoc name="Modal" fileName="/react/" />
 
 ## Specifications
 
-<Specifications file="Modal.spec.ts" name="Modal" />
+<Specifications file="./cypress/component/Modal.spec.tsx" name="Modal" />

package/dist/mdx/react/modal/examples/Basic.tsx

@@ -1,6 +1,7 @@
-import {Modal} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const handleAcknowledge = () => {
@@ -19,12 +20,12 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>MIT License</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginY="zero">
+            <Box as="p" cs={{marginBlock: '0'}}>
               Permission is hereby granted, free of charge, to any person obtaining a copy of this
               software and associated documentation files (the "Software").
             </Box>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/BodyOverflow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {Modal} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal} from '@workday/canvas-kit-react/modal';
 
 export default () => {
   const handleAcknowledge = () => {

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const longDescID = useUniqueId();

package/dist/mdx/react/modal/examples/FormModal.tsx

@@ -1,11 +1,21 @@
 import React from 'react';
 
-import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {Select} from '@workday/canvas-kit-react/select';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {plusIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const FAVORITE_COLOR_OPTIONS = ['Blue', 'Yellow'];
+
+const flexStyles = createStyles({
+  gap: system.gap.md,
+  padding: system.padding.xs,
+});
 
 export default () => {
   const model = useModalModel();
@@ -18,6 +28,8 @@ export default () => {
     console.log('form data', {
       first: (event.currentTarget.elements.namedItem('first') as HTMLInputElement).value,
       last: (event.currentTarget.elements.namedItem('last') as HTMLInputElement).value,
+      favoriteColor: (event.currentTarget.elements.namedItem('favoriteColor') as HTMLInputElement)
+        .value,
     });
 
     // if it looks good, submit to the server and close the modal
@@ -40,8 +52,21 @@ export default () => {
               <FormField.Label>Last Name</FormField.Label>
               <FormField.Input as={TextInput} name="last" />
             </FormField>
+            <FormField>
+              <FormField.Label>Favorite Color</FormField.Label>
+              <FormField.Field>
+                <Select items={FAVORITE_COLOR_OPTIONS}>
+                  <FormField.Input as={Select.Input} name="favoriteColor" />
+                  <Select.Popper>
+                    <Select.Card>
+                      <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+                    </Select.Card>
+                  </Select.Popper>
+                </Select>
+              </FormField.Field>
+            </FormField>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={flexStyles}>
             <Modal.CloseButton>Cancel</Modal.CloseButton>
             <PrimaryButton type="submit">Submit</PrimaryButton>
           </Flex>

package/dist/mdx/react/modal/examples/FullOverflow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {Modal} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal} from '@workday/canvas-kit-react/modal';
 
 export default () => {
   const handleAcknowledge = () => {

package/dist/mdx/react/modal/examples/IframeTest.tsx

@@ -1,6 +1,6 @@
-import {Modal} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal} from '@workday/canvas-kit-react/modal';
 
 export default () => {
   return (