@workday/canvas-kit-docs 14.0.0-alpha.1181-next.0 → 14.0.0-alpha.1188-next.0

package/dist/es6/lib/docs.js

@@ -252794,6 +252794,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "`40ms`"
           }
         },
+        {
+          "kind": "property",
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "string",
+            "value": "inverse"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",

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": "13.2.7",
-    "@workday/canvas-kit-preview-react": "13.2.7",
-    "@workday/canvas-kit-react": "13.2.7",
-    "@workday/canvas-kit-react-fonts": "^13.2.7",
-    "@workday/canvas-kit-styling": "13.2.7",
+    "@workday/canvas-kit-labs-react": "13.2.11",
+    "@workday/canvas-kit-preview-react": "13.2.11",
+    "@workday/canvas-kit-react": "13.2.11",
+    "@workday/canvas-kit-react-fonts": "^13.2.11",
+    "@workday/canvas-kit-styling": "13.2.11",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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": "13.2.7",
-    "@workday/canvas-kit-preview-react": "13.2.7",
-    "@workday/canvas-kit-react": "13.2.7",
-    "@workday/canvas-kit-react-fonts": "^13.2.7",
-    "@workday/canvas-kit-styling": "13.2.7",
+    "@workday/canvas-kit-labs-react": "13.2.11",
+    "@workday/canvas-kit-preview-react": "13.2.11",
+    "@workday/canvas-kit-react": "13.2.11",
+    "@workday/canvas-kit-react-fonts": "^13.2.11",
+    "@workday/canvas-kit-styling": "13.2.11",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -9,10 +9,11 @@ any questions.
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
-  - [Styling Changes](#styling-changes)
+  - [Branding Changes](#branding-changes)
   - [Card](#card)
   - [Expandable](#expandable)
   - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
+  - [Loading Dots](#loading-dots)
   - [SearchForm](#search-form)
 - [Removals](#removals)
   - [Menu (preview)](#menu-preview)
@@ -85,19 +86,16 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Updates
 
-### Styling Changes 💅
+### Branding Changes 💅
 
-Several components have been refactored to use our Canvas tokens and styling API. The React
-interface has not changed, but Canvas Tokens are now used for dynamic properties.
-
-> **Note:** These components also support our cs prop for styling. Learn more about styling with cs
-> in our documentation.
+Several components have been refactored to reflect our new brand direction. Most of these changes revolve around the use of our new bran colors.
 
 The following components have been updated:
 
 - `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
-- `ColorPicker` (main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
+- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
+- `LoadingDots` (Main) [#3393](https://github.com/Workday/canvas-kit/pull/3393)
 - `Pagination` (Preview) [#3300](https://github.com/Workday/canvas-kit/pull/3300)
 - `SearchForm` (Labs) [#3303](https://github.com/Workday/canvas-kit/pull/3303)
 - `SegmentedControl` (Main) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
@@ -220,6 +218,17 @@ These changes are only **visual** and should not affect the functionality of the
 
 > **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
 
+### Loading Dots
+
+**PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
+
+- We've updated the colors to match brand refresh. The default color changes from `system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
+- `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark background or image.
+
+```tsx
+<LoadingDots variant="inverse" />
+```
+
 ### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)

package/dist/mdx/react/_examples/mdx/AccessibilityOverview.mdx

@@ -0,0 +1,18 @@
+## Accessibility Overview Coming Soon!
+
+Canvas Kit is built with accessibility in mind. We continuously strive to provide a robust set of
+accessible components that are easy to customize for your specific needs.
+
+## What you can expect
+
+- Introduction to the accessibility tree
+- Introduction to the accessible name and description calculation
+- Supporting Windows 11 high contrast desktop themes
+- Responsiveness and reflow
+- Introduction to ARIA live regions
+
+### Bigger and better examples
+
+- Page layouts with landmark regions and structured content headings
+- Cards, clickable cards, and lists of cards
+- Forms and error handling

package/dist/mdx/react/_examples/mdx/AriaLiveRegions.mdx

@@ -72,9 +72,9 @@ of error conditions. As forms increase in complexity, live regions on each error
 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:** 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
+**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.
 
 <ExampleCodeBlock code={TextInputWithLiveError} />

package/dist/mdx/react/_examples/mdx/Headers.mdx

@@ -4,23 +4,22 @@ import {Basic as PageHeaderBasic} from './examples/PageHeader';
 import {Basic as GlobalHeaderBasic} from './examples/GlobalHeader';
 
 
-# Canvas Kit Examples
-
 ## Global Header
 
 Developers building internal Workday applications will likely not need to create this component.
 However, if you're building components to be used outside of Workday, this is a helpful reference
 for building a global navigation header that looks like our internal `GlobalHeader`.
 
-## Tooltip usage
+### Tooltip usage
 
-- The `default` variant Tooltip is used on all of the icon buttons, which will automatically set the
-  Tooltip's text to the accessible name. (`aria-label`)
-- The `describe` variant Tooltip is used instead on the "MENU" button because this is a text button.
-  The Tooltip's text "Global Navigation" will instead be assigned to the accessible description to
-  ensure that the visible button text "MENU" is not overriden.
+- The `default` variant `<Tooltip>` is used on all of the icon buttons, which will automatically set
+  the `aria-label` of the child component to the `title` prop string.
+- The `describe` variant `<Tooltip>` is used instead on the "MENU" button because this is a text
+  button. This variant will instead set `aria-describedby` to the child component referencing the
+  the tooltip's text "Global Navigation" to ensure that the visible button text "MENU" is not
+  overriden by an `aria-label`.
 
-## Count badge usage
+### Count badge usage
 
 When `<CountBadge>` is used as a sibling component for button, the `aria-describedby` property is
 set on the button referencing the `id` value of the `<CountBadge>`. This practice helps support
@@ -38,8 +37,4 @@ enhancements to support live, real-time announcements for screen readers:
 - When the `<CountBadge>` is updated, then screen readers can automatically describe (in real-time)
   the name of the live region, "Notifications" and the text updated inside of it, "1 new".
 
-<ExampleCodeBlock code={GlobalHeaderBasic} />
-
-## Page Header
-
-<ExampleCodeBlock code={PageHeaderBasic} />
+<ExampleCodeBlock code={GlobalHeaderBasic} />

package/dist/mdx/react/_examples/mdx/SidePanel.mdx

@@ -3,8 +3,6 @@ import WithNavigation from './examples/SidePanelWithNavigation';
 import WithOverlay from './examples/SidePanelWithOverlay';
 
 
-# Canvas Kit Examples
-
 ## Side Panel As Navigation
 
 This example demonstrates SidePanel as a navigation system that can be reduced into a "compact view"

package/dist/mdx/react/_examples/mdx/TablesAdvanced.mdx

@@ -3,17 +3,19 @@ import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import SelectableRows from './examples/Table/WithSelectableRows';
 import ExpandableRows from './examples/Table/WithExpandableRows';
 import SortableColumnHeaders from './examples/Table/WithSortableColumnHeaders';
+import FilterableColumnHeaders from './examples/Table/WithColumnHeaderFilters';
 
 
 ## Advanced Table Examples
 
-Out of the box, `Table` is a lightweight component with a high degree of flexibility, but not much
-functionality outside of providing a basic table layout. This leaves a gap for developers to
+Out of the box, `Table` is a lightweight compound component with a high degree of flexibility, but
+not much functionality outside of providing a basic table layout. This flexibility lets developers
 implement common features, such as selecting rows and sorting columns, on top of `Table` to meet
-their specific application needs. During the development process, it's often unclear how to
-implement these features in an accessible way. In an effort to reduce that gap and increase clarity,
-we've documented several advanced examples below to communicate the accessibility nuances alongside
-tangible code snippets.
+their specific application needs.
+
+The Workday Accessibility Team has researched and developed the following examples below to
+demonstrate how to build these accessible table patterns. We've listed the specific considerations
+and decisions we've made for each of the examples.
 
 ### Expandable Rows
 
@@ -21,32 +23,32 @@ Expandable Rows combines the likes of an accordion with tabular data tables. Col
 buttons with 2 states, a collapsed and expanded state. A new row that spans the entire width of the
 table is added to the table just after the expanded row.
 
-- The `aria-expanded` property is added to the button to communicate this state to screen reader
-  users.
+- The `aria-expanded` property is added to the chevron button to communicate this state to screen
+  reader users.
 - A Canvas accessible `Tooltip` component is used to assign names to each icon button based on the
-  most useful value in the row. In this example, we combined the car make and model together. This
-  allows everyone to view the name of the checkboxes by hovering the mouse or focusing with the
-  keyboard.
+  most useful value in the row. In this example, we combined the car make (in column 1) and model
+  (in column 2) together. This allows everyone to view the name of the icon buttons by hovering the
+  mouse or focusing with the keyboard.
 - The expanded row uses `colspan` to span the entire width of the table and support screen readers.
   This space provides flexibility to show headings, lists, and other structured content for the
   table row above.
-- There is no explicit relationship between a row of cells, and the spanned content below it. The
+- There is no explicit relationship between a row of cells and the spanned content below it. The
   spanned content is assumed to belong to the row of cells above it, based on established accordion
   patterns and logical reading order of content rendered to the screen.
-- Outlining hierarchy in a data table is not supported for screen readers in this example.
+- Outlining hierarchy with additional nested rows in the table is not supported for screen readers
+  in this example.
 
 <ExampleCodeBlock code={ExpandableRows} />
 
 ### Selectable Rows
 
-Developed by the Workday accessibility team, using a `Checkbox` labeled "Select All" inside of a
-table column header can be a confusing experience for screen reader users. Screen readers will
-automatically announce the "Select All" column header each time users are reading any cell in
-column 1. For instance, the `Checkbox` in row 4 is decidedly not going to select all of the rows.
-Here is what we did about it:
+Using a `Checkbox` labeled "Select All" inside of a column header can be a confusing experience for
+screen reader users. Screen readers will automatically announce the "Select All" label in the column
+header each time users are reading any of the Check boxes in the first column. For instance, the
+`Checkbox` in row 4 is definitely not going to select all of the rows. Here is what we did about it:
 
 - We intentionally rendered row 1, column 1 as a standard `<td>` element so screen readers won't
-  automatically announce "Select All" while reading cells in column 1.
+  automatically announce the "Select All" label while reading cells in column 1.
 - Our research found that VoiceOver (MacOS v12.7, Safari v17.1) persistently announce "Select All"
   despite using the `<td>` element because of the optional `<thead>` element in the table. We
   omitted the optional `<thead>` and `<tbody>` elements from this example for that reason.
@@ -60,25 +62,54 @@ Here is what we did about it:
 
 <ExampleCodeBlock code={SelectableRows} />
 
+### Filterable Column Headers
+
+In this example, we demonstrate using the `Popup` component in each column header allowing users to
+search and filter the data on the table. The `Popup` component relies on React Portals to render the
+popup elements at the bottom of the browser's DOM presenting 2 key challenges for accessibility:
+
+1. Keyboard focus order of the elements in the popup,
+2. Screen readers' reading order of the content rendered in the browser.
+
+Here's what we did about it:
+
+- Canvas Kit includes a `usePopupModel` hook, with quite a few additional hooks developers can add
+  to their models. In particular, the `useFocusRedirect` hook manages keyboard focus between the
+  `<Popup.Target>` button and the popup content.
+- The `useInitialFocus` hook allows developers to specify which element receives keyboard focus when
+  the popup appears. In this example, we auto-focused the search input field.
+- To address the reading order of content, we set the `aria-owns` property onto the parent
+  `<Table.Header>` component (`<th>` DOM element) with 2 unique `id` values. The first `id` refers
+  to the `<Popup.Target>` button and the second refers to the `<Popup.Card>` container element. This
+  manually reassigns the column header's `<Popup.Target>` button and the `Popup` contents as
+  siblings in the browser's accessibility tree hierarchy. Screen readers **should** read the column
+  header buttons and the popup content in sequential order even though they are not siblings in the
+  DOM.
+- The `type='description'` variant of the Canvas `Tooltip` is used to communicate the filtered state
+  of the column header, and assigned to the accessible description of the column header
+  `<TertiaryButton>` component.
+- The Canvas `AriaLiveRegion` component is used to render the "X of Y items" status inside the table
+  caption. This enables screen readers to automatically describe the filter state changes of the
+  table content to users in real time. We recommend validating whether this use of a live region is
+  well supported for your screen reader and browser combinations first.
+
+<ExampleCodeBlock code={FilterableColumnHeaders} />
+
 ### Sortable Column Headers
 
-The challenge in this example is, how will we clearly communicate the complexity of the column
-headers to screen readers and keep the tabular data easy to understand? The column headers must
-describe the column name, the current sort state of the column, they are interactive (a button), and
-instructions about how the column will be sorted next. When screen reader users are focused on the
-tabular data cells, instructions about how the column will be sorted next is probably not relevant,
-distracting, and makes it harder to understand the data.
-
-- The `aria-sort` property has been initialized to `none` on each of the `<th>` elements; this value
-  is updated to `ascending` or `descending` to reflect the current state.
-- A `<button>` element describing the column name is used inside of the `<th>` column header.
-- The `describe` variant of the Canvas `Tooltip` component is applied to the button in the column
-  header. This is used to describe how the column will be sorted after interaction and applied to
-  the accessible description of the button with the `aria-describedby` property. This way screen
-  readers won't read the longer description of the column headers automatically while focusing on
-  the tabular data below.
-- The `aria-sort` property may not reliably provide the current sort state of the column to users
-  focused on the tabular data in the table. It may be more reliable to use an `aria-label` string on
-  the button that describes the column name and sort state together.
+The challenge in this example is to provide all of the necessary information about the interactive
+column headers, the sort state of the column, and instructions about how the table will be sorted
+without giving too much information to users while reading the data cells below.
+
+- The `aria-sort` property has been added to each of the `<Table.Header>` components (`<th>` DOM
+  element) and updated to `ascending` or `descending` to reflect the current sort state. We
+  recommend validating whether this property is well supported for your screen reader and browser
+  combinations first.
+- A `<TertiaryButton>` describing the column name is used inside of the `<Table.Header>` component.
+- The `description` variant of the Canvas `Tooltip` component is applied to the button in the column
+  header and applied to the accessible description of the button with the `aria-description`
+  property. This is used to describe how the column will be sorted when pressed and screen readers
+  will only read this description while focusing on the column headers, not while reading the data
+  cells below.
 
 <ExampleCodeBlock code={SortableColumnHeaders} />

package/dist/mdx/react/_examples/mdx/examples/Table/WithColumnHeaderFilters.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+
+import {AriaLiveRegion, createComponent, useUniqueId} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {
+  Popup,
+  usePopupModel,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  useInitialFocus,
+  useReturnFocus,
+  useFocusRedirect,
+} from '@workday/canvas-kit-react/popup';
+import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Table} from '@workday/canvas-kit-react/table';
+import {Text} from '@workday/canvas-kit-react/text';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {filterIcon, searchIcon} from '@workday/canvas-system-icons-web';
+
+interface CountryData {
+  country: string;
+  capital: string;
+  population: string;
+}
+
+const countryData: CountryData[] = [
+  {country: 'Australia', capital: 'Canberra', population: 25690000},
+  {country: 'Bahamas', capital: 'Nassau', population: 407906},
+  {country: 'Canada', capital: 'Ottawa', population: 38250000},
+  {country: 'Fiji', capital: 'Suva', population: 924610},
+  {country: 'Ghana', capital: 'Accra', population: 32830000},
+  {country: 'Hong Kong', capital: 'City of Victoria', population: 7413000},
+  {country: 'India', capital: 'New Delhi', population: 1408000000},
+  {country: 'Ireland', capital: 'Dublin', population: 5033000},
+  {country: 'Jamaica', capital: 'Kingston', population: 2828000},
+  {country: 'Kenya', capital: 'Nairobi', population: 53010000},
+  {country: 'Micronesia', capital: 'Palikir', population: 113131},
+  {country: 'New Zealand', capital: 'Wellington', population: 5123000},
+  {country: 'Philippines', capital: 'Manila', population: 113900000},
+  {country: 'Puerto Rico', capital: 'San Juan', population: 3264000},
+  {country: 'Samoa', capital: 'Apia', population: 218764},
+  {country: 'Singapore', capital: 'Singapore', population: 5454000},
+  {country: 'Tanzania', capital: 'Dodoma', population: 63590000},
+  {country: 'United Kingdom', capital: 'London', population: 67330000},
+  {country: 'United States', capital: 'Washington, D.C.', population: 331900000},
+  {country: 'Zimbabwe', capital: 'Harare', population: 15990000},
+];
+
+const textStyles = createStyles({
+  paddingInlineStart: system.space.x3,
+});
+
+interface FilterableColumnHeaderProps {
+  label: string;
+  onFilter: (filterObject: {filterText: string; column: string}) => void;
+}
+
+const FilterableColumnHeader = createComponent('th')({
+  displayName: 'FilterableColumnHeader',
+  Component: ({label, onFilter}: FilterableColumnHeaderProps, ref) => {
+    const [inputVal, setInputVal] = React.useState('');
+    const targetId = useUniqueId();
+    const popupId = useUniqueId();
+    const initialFocusRef = React.useRef(null);
+    const filterPopupModel = usePopupModel({
+      initialFocusRef,
+    });
+
+    useCloseOnOutsideClick(filterPopupModel);
+    useCloseOnEscape(filterPopupModel);
+    useInitialFocus(filterPopupModel);
+    useFocusRedirect(filterPopupModel);
+    useReturnFocus(filterPopupModel);
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+      const newVal = e.target.value;
+      setInputVal(newVal);
+      onFilter({filterText: newVal, column: label.toLowerCase()});
+    }
+
+    return (
+      <Table.Header scope="col" aria-owns={targetId + ' ' + popupId}>
+        <Popup model={filterPopupModel}>
+          <Tooltip title={`Filter${inputVal !== '' ? `ed: "${inputVal}"` : ''}`} type="description">
+            <Popup.Target
+              as={TertiaryButton}
+              id={targetId}
+              icon={inputVal === '' ? searchIcon : filterIcon}
+              iconPosition="end"
+            >
+              {label}
+            </Popup.Target>
+          </Tooltip>
+          <Popup.Popper>
+            <Popup.Card id={popupId}>
+              <Popup.Heading>Filter</Popup.Heading>
+              <Popup.Body>
+                <FormField>
+                  <FormField.Label>{label}</FormField.Label>
+                  <FormField.Input as={InputGroup}>
+                    <InputGroup.InnerStart>
+                      <SystemIcon icon={searchIcon} />
+                    </InputGroup.InnerStart>
+                    <InputGroup.Input
+                      as={TextInput}
+                      type="search"
+                      ref={initialFocusRef}
+                      onChange={handleChange}
+                      value={inputVal}
+                    />
+                  </FormField.Input>
+                </FormField>
+              </Popup.Body>
+              <Flex>
+                <Popup.CloseButton as={PrimaryButton}>Done</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+      </Table.Header>
+    );
+  },
+});
+
+function filterTableData(data: CountryData[], filters: CountryData) {
+  return data.filter(item => {
+    for (const key in filters) {
+      if (filters.hasOwnProperty(key) && filters[key]) {
+        const filterText = filters[key].toLowerCase();
+        const itemValue = String(item[key]).toLowerCase();
+        if (!itemValue.includes(filterText)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+}
+
+export default () => {
+  const [filteredData, setFilteredData] = React.useState(countryData);
+  const [colFilters, setColFilters] = React.useState<CountryData>({
+    country: '',
+    capital: '',
+    population: '',
+  });
+
+  React.useEffect(() => {
+    setFilteredData(filterTableData(countryData, colFilters));
+  }, [colFilters]);
+
+  let typingDelay: NodeJS.Timeout;
+  function handleColFilters({filterText, column}) {
+    clearTimeout(typingDelay);
+    typingDelay = setTimeout(() => {
+      setColFilters(prev => {
+        const newState = {...prev, [column]: filterText};
+        return newState;
+      });
+    }, 400);
+  }
+
+  return (
+    <Table maxHeight="40rem">
+      <Table.Caption>
+        Population Listed by Country (2021)
+        <AriaLiveRegion cs={textStyles}>
+          {filteredData.length} of {countryData.length} items
+        </AriaLiveRegion>
+      </Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <FilterableColumnHeader label="Country" onFilter={handleColFilters} />
+          <FilterableColumnHeader label="Capital" onFilter={handleColFilters} />
+          <FilterableColumnHeader label="Population" onFilter={handleColFilters} />
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {filteredData.map(item => {
+          return (
+            <Table.Row key={item.country}>
+              <Table.Header scope="row">
+                <Text cs={textStyles}>{item.country}</Text>
+              </Table.Header>
+              <Table.Cell>
+                <Text cs={textStyles}>{item.capital}</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Text cs={textStyles}>{item.population.toLocaleString()}</Text>
+              </Table.Cell>
+            </Table.Row>
+          );
+        })}
+      </Table.Body>
+    </Table>
+  );
+};

package/dist/mdx/react/_examples/mdx/examples/Table/WithSelectableRows.tsx

@@ -45,9 +45,9 @@ const SelectableRow = createComponent('tr')({
             <Checkbox checked={rowData.checked} onChange={onSelect} />
           </Tooltip>
         </Table.Cell>
-        <Table.Cell as="th" cs={tableCellStyles} scope="row">
+        <Table.Header cs={tableCellStyles} scope="row">
           {rowData.name}
-        </Table.Cell>
+        </Table.Header>
         <Table.Cell cs={tableCellStyles}>{rowData.amount}</Table.Cell>
       </Table.Row>
     );

package/dist/mdx/react/_examples/mdx/examples/Table/WithSortableColumnHeaders.tsx

@@ -124,7 +124,7 @@ const getSortIcon = (sortOrder?: SortOrder) => {
   }
 };
 
-export default createComponent('th')({
+const SortableColumnHeader = createComponent('th')({
   displayName: 'SortableColumnHeader',
   Component: (
     {label, sortOrder, onSortAction, children, ...elemProps}: SortableColumnHeaderProps,
@@ -132,7 +132,7 @@ export default createComponent('th')({
   ) => {
     return (
       <Table.Header ref={ref} scope="col" aria-sort={sortOrder} {...elemProps}>
-        <Tooltip type="describe" title={`Sort ${getNextSortOrder(sortOrder)}`}>
+        <Tooltip type="description" title={`Sort ${getNextSortOrder(sortOrder)}`}>
           <TertiaryButton
             icon={getSortIcon(sortOrder)}
             iconPosition="end"

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

@@ -4,6 +4,8 @@ import {
 	SymbolDoc,
 	SymbolDescription,
 } from '@workday/canvas-kit-docs';
+import { Pill } from '@workday/canvas-kit-preview-react/pill';
+import { accessibilityIcon } from '@workday/canvas-system-icons-web';
 
 import Primary from './examples/Primary';
 import PrimaryInverse from './examples/PrimaryInverse';
@@ -94,7 +96,7 @@ or view the example below.
 
 ### Theme Overrides
 
-The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`. 
+The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
 
 > **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
 
@@ -102,6 +104,13 @@ The most common way to theme our buttons is to pass a `theme` object at the root
 
 <ExampleCodeBlock code={ThemeOverrides} />
 
+ ## Accessibility
+
+ <Pill className='sb-unstyled'>
+	<Pill.Icon icon={accessibilityIcon} />
+	<Pill.Label>WAI-ARIA Reference</Pill.Label>
+ </Pill>
+
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
@@ -109,6 +118,10 @@ semantic element - usually an `<a>`, or a `<button>`. This should be done with c
 best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
 should be used for navigation.
 
+### Role
+
+By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form, the role should be set to type `submit`.
+
 ## Component API
 
 <SymbolDoc name="PrimaryButton" fileName="/react/" />

package/dist/mdx/react/loading-dots/LoadingDots.mdx

@@ -4,6 +4,7 @@ import RTL from './examples/RTL';
 import Accessible from './examples/Accessible';
 import CustomShape from './examples/CustomShape';
 import CustomColorAndAnimation from './examples/CustomColorAndAnimation';
+import Inverse from './examples/Inverse';
 
 # Canvas Kit Loading Dots
 
@@ -22,8 +23,16 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
+Use Loading Dots to identify when a specific area of the page is loading (i.e. the content within a card).
+
 <ExampleCodeBlock code={Basic} />
 
+### Inverse Variant
+
+Use the `variant="inverse"` prop when the loading dots are on a dark background or image.
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Right-to-Left (RTL)
 
 <ExampleCodeBlock code={RTL} />
@@ -39,11 +48,11 @@ yarn add @workday/canvas-kit-react
 ### Custom Styles
 
 Loading Dots supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 Custom styling is also supported through the [Loading Dots documented props below](#props).
 
-### Adding screen reader support to loading animations
+### Accessibility
 
 Sometimes, letting users know when content has finished loading is just as important as asking users
 to "please wait" while content is loading. The disappearance of an animation is information that

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

@@ -40,7 +40,12 @@ export default () => {
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots
+            cs={styleOverrides.loadingStyles}
+            role="img"
+            variant="inverse"
+            aria-label="Please wait..."
+          />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import {LoadingDots, loadingDotsStencil} from '@workday/canvas-kit-react/loading-dots';
+import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {system} from '@workday/canvas-tokens-web';
 import {createStyles, createStencil} from '@workday/canvas-kit-styling';
 
@@ -13,20 +12,19 @@ const styleOverrides = {
 const loadingStencil = createStencil({
   base: {
     borderRadius: system.shape.round,
-    backgroundColor: system.color.bg.overlay,
+    backgroundColor: system.color.bg.contrast.strong,
     height: 80,
     width: 80,
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',
-    [loadingDotsStencil.vars.loadingDotColor]: system.color.icon.inverse,
   },
 });
 
 export default () => {
   return (
     <div className={styleOverrides.parentContainer}>
-      <LoadingDots cs={loadingStencil()} />
+      <LoadingDots variant="inverse" cs={loadingStencil()} />
     </div>
   );
 };

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

@@ -0,0 +1,41 @@
+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,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+const containerStyles = createStyles({
+  position: 'relative',
+  width: px2rem(200),
+  height: px2rem(200),
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <LoadingDots variant="inverse" cs={loadingStencil()} />
+      <Graphic
+        alt="A magnifying glass"
+        width={200}
+        src={{
+          url: 'https://picsum.photos/200',
+        }}
+        srcset="https://picsum.photos/200 200w, https://picsum.photos/200 200w, https://picsum.photos/800 800w, https://picsum.photos/1200 1200w"
+      />
+    </div>
+  );
+};

package/dist/mdx/tokens/TokenMigrationCodemod.mdx

@@ -34,15 +34,15 @@ The codemod requires the following packages to be installed:
 You can run the codemod using npx:
 
 ```sh
-npx @workday/canvas-tokens-codemod v2 [path]
+npx @workday/canvas-kit-codemod v13.2 [path]
 ```
 
 Or install the package and run it directly. But remember to uninstall the package after you have
 completed the upgrade.
 
 ```sh
-yarn add @workday/canvas-tokens-codemod
-canvas-tokens-codemod v2 [path]
+yarn add @workday/canvas-kit-codemod
+canvas-kit-codemod v13.2 [path]
 ```
 
 > Note: These codemods only work on .js, .jsx, .ts, and .tsx extensions. You may need to make some

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1181-next.0",
+  "version": "14.0.0-alpha.1188-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": "^14.0.0-alpha.1181-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1181-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1181-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1181-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1188-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1188-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1188-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1188-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.10",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "9c514e387c2e6862acf6c77ba2ff9ad257b9e78e"
+  "gitHead": "01e7a4006fd0b21919589e074f091f9c3b353e39"
 }