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

package/dist/mdx/15.0-VISUAL-CHANGES.mdx

@@ -0,0 +1,151 @@
+import { Graphic } from '@workday/canvas-kit-react/icon';
+
+import primaryButtonImage from './images/v15/buttons/v15-primary-button.png';
+import secondaryButtonImage from './images/v15/buttons/v15-secondary-button.png';
+import tertiaryButtonImage from './images/v15/buttons/v15-tertiary-button.png';
+import deleteButtonImage from './images/v15/buttons/v15-delete-button.png';
+import segmentedControlImage from './images/v15/buttons/v15-segmented-control.png';
+
+import checkboxImage from './images/v15/inputs/v15-checkbox.png';
+import radioImage from './images/v15/inputs/v15-radio.png';
+import textInputImage from './images/v15/inputs/v15-text-input.png';
+import textAreaImage from './images/v15/inputs/v15-text-area.png';
+import selectImage from './images/v15/inputs/v15-select.png';
+import multiSelectImage from './images/v15/inputs/v15-multiselect.png';
+
+import avatarImage from './images/v15/indicators/v15-avatar.png';
+import badgeImage from './images/v15/indicators/v15-badge.png';
+import informationHighlightImage from './images/v15/indicators/v15-information-highlight.png';
+import loadingDotsImage from './images/v15/indicators/v15-loading-dots.png';
+import pillImage from './images/v15/indicators/v15-pill.png';
+import skeletonImage from './images/v15/indicators/v15-skeleton.png'
+import statusIndicatorImage from './images/v15/indicators/v15-status-indicator.png';
+
+import cardImage from './images/v15/containers/v15-card.png';
+import expandableImage from './images/v15/containers/v15-expandable.png';
+import tabsImage from './images/v15/containers/v15-tabs.png';
+
+import breadcrumbsImage from './images/v15/navigation/v15-breadcrumbs.png';
+import paginationImage from './images/v15/navigation/v15-pagination.png';
+
+
+# Canvas Kit 15.0 Visual Changes
+
+This guide contains an overview of the changes in Canvas Kit v15. If you have any issues, feel free
+to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of
+the changes in v15, please view our
+[v15 Upgrade Guide](/help/upgrade-guides/canvas-v15-upgrade-guide/).
+
+## Table of Contents
+
+- [Buttons](#buttons)
+  - [Primary Button](#primary-button)
+  - [Secondary Button](#secondary-button)
+  - [Tertiary Button](#tertiary-button)
+  - [Delete Button](#delete-button)
+  - [Segmented Control](#segmented-control)
+- [Inputs](#inputs)
+  - [Checkbox](#checkbox)
+  - [Radio (Preview)](#radio-preview)
+  - [Text Input](#text-input)
+  - [Text Area](#text-area)
+  - [Select](#select)
+  - [Multi Select](#multi-select)
+- [Indicators](#indicators)
+  - [Avatar](#avatar)
+  - [Badge](#badge)
+  - [Information Highlight](#information-highlight)
+  - [Loading Dots](#loading-dots)
+  - [Pill](#pill)
+  - [Skeleton](#skeleton)
+  - [Status Indicator (Preview)](#status-indicator-preview)
+- [Containers](#containers)
+  - [Card](#card)
+  - [Expandable](#expandable)
+  - [Tabs](#tabs)
+- [Navigation](#navigation)
+  - [Breadcrumbs](#breadcrumbs)
+  - [Pagination](#pagination)
+
+> **NOTE: The `v14` components are using `v3` tokens and the `v15` components are using `v4` tokens.**
+
+## Buttons
+
+### Primary Button
+<Graphic src={{url: primaryButtonImage}} />
+
+### Secondary Button
+<Graphic src={{url: secondaryButtonImage}} />
+
+### Tertiary Button
+<Graphic src={{url: tertiaryButtonImage}} />
+
+### Delete Button
+<Graphic src={{url: deleteButtonImage}} />
+
+### Segmented Control
+<Graphic src={{url: segmentedControlImage}} />
+
+## Inputs
+
+### Checkbox
+<Graphic src={{url: checkboxImage}} />
+
+### Radio (Preview)
+<Graphic src={{url: radioImage}} />
+
+### Text Input
+<Graphic src={{url: textInputImage}} />
+
+### Text Area
+<Graphic src={{url: textAreaImage}} />
+
+### Select
+<Graphic src={{url: selectImage}} />
+
+### Multi Select
+<Graphic src={{url: multiSelectImage}} />
+
+## Indicators
+
+### Avatar
+<Graphic src={{url: avatarImage}} />
+
+### Badge
+<Graphic src={{url: badgeImage}} />
+
+### Information Highlight
+<Graphic src={{url: informationHighlightImage}} />
+
+### Loading Dots
+<Graphic src={{url: loadingDotsImage}} />
+
+### Pill
+<Graphic src={{url: pillImage}} />
+
+### Skeleton
+<Graphic src={{url: skeletonImage}}/>
+
+### Status Indicator (Preview)
+<Graphic src={{url: statusIndicatorImage}} />
+
+
+
+## Containers
+
+### Card
+<Graphic src={{url: cardImage}} />
+
+### Expandable
+<Graphic src={{url: expandableImage}} />
+
+### Tabs
+<Graphic src={{url: tabsImage}} />
+
+## Navigation
+
+### Breadcrumbs
+<Graphic src={{url: breadcrumbsImage}} />
+
+### Pagination
+<Graphic src={{url: paginationImage}} />

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/DOCUMENTATION_GUIDELINES.mdx

@@ -130,7 +130,7 @@ folder).
 
 ## Specifications
 
-<Specifications file="[Component].spec.ts" name="[Component]" />
+<Specifications file="./cypress/component/[Component].spec.tsx" name="[Component]" />
 ````
 
 > **Note:** Refer to [Tabs](/components/containers/tabs/) and [Modal](/components/popups/modal/) for
@@ -235,7 +235,7 @@ file.
 
 ## Specifications
 
-<Specifications file="[ComponentFamily].spec.ts" name="[ComponentFamily]" />
+<Specifications file="./cypress/component/[ComponentFamily].spec.tsx" name="[ComponentFamily]" />
 ````
 
 > **Note:** Refer to [Button](/components/buttons/button/) for an example of how to write

package/dist/mdx/GETTING_STARTED.mdx

@@ -1,5 +1,4 @@
 import Readme from '../../../README.md';
-import Markdown from '../../../utils/storybook/Markdown.tsx';
 
 
-<Markdown content={Readme} />
+<Readme />

package/dist/mdx/accessibility/AriaLiveRegions.mdx

@@ -3,7 +3,7 @@ import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import FilterListWithLiveStatus from './examples/AriaLiveRegions/FilterListWithLiveStatus';
 import VisibleLiveRegion from './examples/AriaLiveRegions/VisibleLiveRegion';
 import HiddenLiveRegion from './examples/AriaLiveRegions/HiddenLiveRegion';
-import TextInputWithLiveError from './examples/AriaLiveRegions/TextInputWithLiveError';
+import CommentBoxWithCharLimit from './examples/AriaLiveRegions/CommentBoxWithCharLimit';
 
 
 # ARIA Live Regions
@@ -60,21 +60,20 @@ describe how many items in the list are shown.
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
-## Text input with live inline error
+## Debouncing an `AriaLiveRegion`: `TextArea` with character limit
 
-In this example, a live region is applied to the inline error message that will appear below the
-text input. Listen for the screen reader to automatically describe the error message as you leave
-the input field blank.
+Using a live region to announce the character count of a text area can help screen reader users
+track their progress. However, announcing on every keystroke would be extremely disruptive—imagine
+hearing "5 of 200 characters... 6 of 200 characters... 7 of 200 characters" for each letter typed!
+In this example, we've implemented debouncing to wait 2 seconds after the user stops typing before
+announcing the count.
 
-**Note:** Use this example with discretion. Using live regions for automatically announcing form
-errors to screen reader users can be a nice experience for simple forms with a very limited number
-of error conditions. As forms increase in complexity, live regions on each error message can become
-increasingly distracting and disruptive to the experience, especially if users are trying to first
-understand the information that is required of them to complete the task.
+**Note:** Turn on a screen reader for this experience.
 
-**Note:** The `<AriaLiveRegion>` component is used inside of the `Hint` to ensure the live region
-remains in the browser DOM at all times. The `Hint` is only rendered in the DOM when it contains
-content, so it will not work reliably as a live region for screen readers using the
-`as={AriaLiveRegion}` prop.
+- Used the `as={AccessibleHide}` prop to hide the live region from view with CSS
+- The live region will only update when a 2 second timer expires after the last keystroke
+- If users have reached the maximum number of characters, the live region will update immediately to
+  inform users that they have reached the limit
+- The live region will be cleared on blur events when users leave the field
 
-<ExampleCodeBlock code={TextInputWithLiveError} />
+<ExampleCodeBlock code={CommentBoxWithCharLimit} />

package/dist/mdx/accessibility/InlinePortals.mdx

@@ -0,0 +1,20 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import InlinePortalPopup from './examples/Popups/InlinePortalPopup';
+
+
+## Inline portal with `PopupStack`
+
+This example builds on the patterns described in
+[Guides > Accessibility > Inline Popups](?path=/docs/guides-accessibility-inline-popups--docs).
+It does **not** use a focus trap. For modal dialogs with overlay and focus trap, use the
+[**Modal**](?path=/docs/components-popups-modal--docs) component instead.
+
+Keep using a portal (default stacking and positioning) but mount the portal **into a sentinel
+element** placed right after the trigger. Call `PopupStack.pushStackContext(sentinelElement)` while
+the popup is open so new stack items append to that sentinel instead of `body`. **Tradeoff:** You
+still get **ancestor overflow** clipping—the portaled content is a descendant of the sentinel, not
+`document.body`. You must also handle **`PopupStack` context** (push/pop on open/close), which is
+more moving parts than `portal={false}` alone. Use **`useInitialFocus`** so opening the popup is
+announced when focus enters the dialog.
+
+<ExampleCodeBlock code={InlinePortalPopup} />

package/dist/mdx/accessibility/PageStructure.mdx

@@ -1,6 +1,7 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import LandmarkRegaions from './examples/PageStructure/LandmarkRegions';
+
 import FullPageDemo from './examples/PageStructure/FullPageDemo';
+import LandmarkRegions from './examples/PageStructure/LandmarkRegions';
 
 
 ## Making Webpages Easy to Use for Everyone
@@ -33,7 +34,7 @@ navigation sections, make sure to give them different names so a screen reader c
 For example, a global navigation region should be distinguishable from a bread crumb navigation
 region.
 
-<ExampleCodeBlock code={LandmarkRegaions} />
+<ExampleCodeBlock code={LandmarkRegions} />
 
 ### Using Headings to Outline Your Content
 

package/dist/mdx/accessibility/Popups.mdx

@@ -0,0 +1,71 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import InlinePopupNoPortal from './examples/Popups/InlinePopupNoPortal';
+import PopupAriaOwns from './examples/Popups/PopupAriaOwns';
+
+
+# How screen readers read Popups
+
+A **screen reader** is software that reads the page out loud and lets people navigate with the
+keyboard (and sometimes a braille display). It does not “see” the layout the way sighted users do.
+It walks through the page in a sequence that usually matches the **order of elements in the
+DOM**—roughly, the order nodes appear in the HTML tree.
+
+That matters for popups: if the popup’s markup is **far away** from the control that opened it in
+the DOM, the screen reader may read a lot of other page content **before** it reaches the popup. The
+user might not realize the popup is there, or they might hear unrelated content mixed in with the
+popup experience.
+
+**Moving keyboard focus** into the popup when it opens helps people continue interacting, but it
+does **not** change that underlying reading sequence. So focus management and reading order are
+related problems; you often need to address both.
+
+**None of these examples use focus traps.** For modal dialogs with an overlay and focus trap, use
+the [**Modal**](?path=/docs/components-popups-modal--docs) component instead.
+
+**`useInitialFocus`:** When the popup opens, each example moves focus into the popup (often to a
+Close control or another safe first stop). That matters because **many screen readers only announce
+new content when focus moves**. If focus stays on the trigger, the user may get **no cue** that a
+popup appeared. When choosing not to use `useInitialFocus`, consider the following:
+
+- Use `aria-expanded={true | false}` on `Popup.Target` so assistive tech can report whether the
+  popup is open or closed.
+- Use `aria-haspopup="dialog"` on `Popup.Target` as a hint that the control opens a dialog.
+  **Caveat:** some older screen readers do not understand the `"dialog"` value. They may treat it
+  like a generic popup and **announce “menu”** even when you built a dialog. For that reason, we
+  **strongly recommend** testing with your supported browsers and screen reader combinations during
+  development.
+
+## 1. Inline popup with `portal={false}`
+
+Set `portal={false}` on `Popup.Popper` so the popup renders in the DOM next to its target. Reading
+order follows document order. Use **`useInitialFocus`**, **`useReturnFocus`**, and the usual close
+hooks. **Tradeoff:** the popup is constrained by ancestor `overflow` and positioning context.
+
+<ExampleCodeBlock code={InlinePopupNoPortal} />
+
+For the same reading-order goal using a **portaled** popup mounted into a sentinel next to the
+trigger (with `PopupStack.pushStackContext`), see
+[**Testing > Inline Portals**](?path=/docs/guides-accessibility-testing-inline-portals--docs).
+
+## 2. Reading order with `aria-owns`
+
+You can keep the default portal (content at the bottom of `body`) and still try to **re-parent** the
+popup in the **accessibility tree**: add a sibling element after `Popup.Target` and set
+**`aria-owns`** to the id of the portaled `Popup.Card`. Some assistive technologies will then treat
+that card as “owned” by the trigger for browsing and announcements.
+
+**Tradeoffs:**
+
+- **Support for `aria-owns` varies.** Do not assume every combination of browser and screen reader
+  will honor it the same way.
+- **Tab order still follows the real DOM.** `aria-owns` does not move focus targets. You may still
+  need helpers like **`useFocusRedirect`** so keyboard users can reach the popup predictably.
+- Combine with **`useInitialFocus`** so opening the popup still moves focus and gives a clear
+  announcement where supported.
+
+The Canvas Kit [**Dialog**](?path=/docs/components-popups-dialog--docs) builds this pattern in.
+
+Another `aria-owns` example:
+[Advanced Tables > Table With Filterable Column Headers](?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers).
+
+<ExampleCodeBlock code={PopupAriaOwns} />

package/dist/mdx/accessibility/WindowsHighContrastThemes.mdx

@@ -1,12 +1,13 @@
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import iconBefore from './assets/icons-before-whcm.png';
-import iconAfter from './assets/icons-after-whcm.png';
-import checkMark from './assets/checkmarks.png';
-import checkMarkWhcm from './assets/checkmarks-whcm.png';
+
 import borderOutline from './assets/border-outline-dialog-tooltip-3.png';
 import buttonFocus from './assets/button-focus-2.png';
+import checkMarkWhcm from './assets/checkmarks-whcm.png';
+import checkMark from './assets/checkmarks.png';
+import iconAfter from './assets/icons-after-whcm.png';
+import iconBefore from './assets/icons-before-whcm.png';
 import menuFocus from './assets/menu-focus.png';
 
 
@@ -32,7 +33,7 @@ focusable components inside popup containers like the `<Menu>` component to ensu
 indicator isn’t clipped off the edge. (For example:
 [MenuItem](https://github.com/Workday/canvas-kit/blob/master/modules/react/menu/lib/MenuItem.tsx).)
 
-<Flex justifyContent="space-evenly" paddingBottom={system.space.x4}>
+<Flex cs={{justifyContent: 'space-evenly', paddingBottom: system.padding.md}}>
   <img src={buttonFocus} alt="Primary button with outline offset 2 pixels" />
   <img src={menuFocus} alt="Menu item with outline offset -2 pixels" />
 </Flex>
@@ -46,8 +47,8 @@ draw boundaries in components that don't have any focus state like
 and
 [TooltipContainer](https://github.com/Workday/canvas-kit/blob/master/modules/react/tooltip/lib/TooltipContainer.tsx).
 
-<Flex justifyContent="center">
-  <figure margin="0">
+<Flex cs={{justifyContent: 'space-evenly'}}>
+  <figure style={{margin: '0'}}>
     <img src={borderOutline} alt="" />
     <figcaption style={{width: px2rem(300)}}>
       CSS outlines appear in high contrast mode around dialog containers and tooltips
@@ -62,7 +63,7 @@ If you use a meaningful image with a transparent background, it could become dif
 against some background colors. Be careful when using such images for conveying information to
 users.
 
-<Flex justifyContent="space-evenly" paddingBottom={system.space.x4}>
+<Flex cs={{justifyContent: 'space-evenly', paddingBottom: system.padding.md}}>
   <img src={checkMark} alt="Check mark images highly visible on white background" />
   <img src={checkMarkWhcm} alt="Check mark images have poor contrast on dark background" />
 </Flex>
@@ -84,13 +85,13 @@ contrast theme.
 },
 ```
 
-<Flex justifyContent='space-evenly'>
-<figure margin='0'>
+<Flex cs={{justifyContent: 'space-evenly'}}>
+<figure style={{margin: '0'}}>
   <img src={iconBefore} alt="" />
   <figcaption style={{width: px2rem(370)}}>Before: The mail icon color has poor contrast on dark backgrounds</figcaption>
 </figure>
 
-<figure margin='0'>
+<figure style={{margin: '0'}}>
   <img src={iconAfter} alt="" />
   <figcaption style={{width: px2rem(370)}}>After: The mail icon inherits the theme's current color for best contrast</figcaption>
 </figure>

package/dist/mdx/changelog.mdx

@@ -1,5 +1,4 @@
 import Changelog from '../../../CHANGELOG.md';
-import Markdown from '../../../utils/storybook/Markdown.tsx';
 
 
-<Markdown content={Changelog} />
+<Changelog />

package/dist/mdx/labs-react/ai-ingress-button/examples/Inverse.tsx

@@ -5,8 +5,8 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const darkBackground = createStyles({
-  background: system.color.bg.contrast.strong,
-  padding: system.space.x8,
+  background: system.color.surface.contrast.strong,
+  padding: system.padding.xxl,
 });
 
 export default () => {