@workday/canvas-kit-docs 13.0.0-alpha.948-next.0 → 13.0.0-alpha.978-next.0

package/dist/es6/mdx/welcomePage.js

@@ -34,7 +34,7 @@ export const WelcomePage = () => {
                 React.createElement(Card.Heading, null, "Getting Started"),
                 React.createElement(Card.Body, null,
                     React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
-                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--page" },
+                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" },
                     ' ',
                     "Getting Started Guide")),
             React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },

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

@@ -48,7 +48,7 @@ If you're using Canvas Kit and not directly using this package, there is nothing
 end. The Canvas Kit packages are using the static compilation as part of the build process. If you
 want to use this package for your own styles, you don't need to do anything special to use in
 development; just reference our
-[documentation](https://workday.github.io/canvas-kit/?path=/story/features-styling-welcome--page) on
+[documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started--docs) on
 how to get started.
 
 For more information on why this package was introduced, please reference our

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

@@ -1,8 +1,8 @@
-import {Table} from '@workday/canvas-kit-react/table';
-import {base, brand, system} from '@workday/canvas-tokens-web';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {cssVar} from '@workday/canvas-kit-styling';
-import {Box} from '@workday/canvas-kit-react/layout';
+import { Table } from '@workday/canvas-kit-react/table';
+import { base, brand, system } from '@workday/canvas-tokens-web';
+import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
+import { cssVar } from '@workday/canvas-kit-styling';
+import { Box } from '@workday/canvas-kit-react/layout';
 
 
 # Canvas Kit 11.0 Upgrade Guide
@@ -850,7 +850,7 @@ previously in [Main](#main) (for reference, see
 in [Main](#main) from v9).
 
 `Table` is a
-[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page)
+[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--docs)
 which provides a flexible API and access to its internals via its subcomponents.
 
 > **Note**: `rowState` prop is no longer a part of the `Table` component.

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

@@ -1,8 +1,8 @@
-import {Table} from '@workday/canvas-kit-react/table';
-import {base, brand, system} from '@workday/canvas-tokens-web';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {cssVar} from '@workday/canvas-kit-styling';
-import {Box} from '@workday/canvas-kit-react/layout';
+import { Table } from '@workday/canvas-kit-react/table';
+import { base, brand, system } from '@workday/canvas-tokens-web';
+import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
+import { cssVar } from '@workday/canvas-kit-styling';
+import { Box } from '@workday/canvas-kit-react/layout';
 
 
 # Canvas Kit 12.0 Upgrade Guide
@@ -361,7 +361,7 @@ made to provide more flexibility and better explicit components when using input
 ##### Breaking API Change
 
 The newly promoted `FormField` is a
-[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page).
+[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--docs).
 Due to the different APIs of the component, this change is **not codemodable**. The following shows
 an example of how to **update** your code to match the new compound component API.
 

package/dist/mdx/CONTRIBUTING.mdx

@@ -155,7 +155,7 @@ Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your
 ### Releases
 
 - Releases are prepared by updating package versions with `lerna version`, and updating the
-  [changelog](/docs/changelog--page)
+  [changelog](/docs/changelog--docs)
 - A PR is created for the above updates
 - After the release PR is approved and merged, we create a release in GitHub with the contents of
   the changelog updates.

package/dist/mdx/CREATING_COMPOUND_COMPONENTS.mdx

@@ -7,12 +7,43 @@ document to learn about what a compound component is.
 This document will go through building a simplified Disclosure component to help solidify the
 concepts. We will cover:
 
+- [Non Coordinated Components](#non-coordinated-components)
 - [Models](#models)
 - [Container Components](#disclosure-component)
 - [Sub-components](#disclosuretarget-component)
 - [Model Composition](#model-composition)
 - [Behavior hooks](#behavior-hooks)
 
+## Non Coordinated Components
+
+In most cases you'll create compound components that have a model and share information across subcomponents. However, in the case where information doesn't need to be shared, you can create a non
+coordinated component. These components often represent some styled element with no associated role
+or behavior and don't rely on state and events such as a `Card`, `Flex` or `Button` components. Use
+`createComponent` factory function in these scenarios.
+
+### `createComponent`
+
+Use `createComponent` when you want to create a rendered element with _no behavior_. This is useful
+for elements that you want to use for styling purposes like container elements, or subcomponents
+that are simple rendered elements. This utility function will wrap your component in a
+`React.ForwardRef` and allow you to add subcomponents as well.
+
+```tsx
+export const Card = createComponent('div')({
+  displayName: 'Card',
+  subComponents: {
+    Heading: CardHeading, // this is also using createComponent
+  },
+  Component: ({children, ...elemProps}: CardProps, ref, Element) => {
+    return (
+      <Box as={Element} {...elemProps} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+});
+```
+
 ## Models
 
 A model is composed of state and events. The shape of the model used by components looks like this:

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
@@ -139,7 +139,7 @@ how to use `RadioGroup` with React Hook Form.
 
 Radio and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/preview-react/select/examples/Top Label/Alert.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField id="select-alert" error="error">
+    <FormField id="select-alert" error="alert">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}

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

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Emphasis from './examples/Emphasis';
@@ -75,7 +75,7 @@ The background color dictated by the `variant` will be dark or light based on th
 
 Status Indicator and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -0,0 +1,36 @@
+import Basic from './examples/GlobalHeader';
+
+
+# GlobalHeader Example
+
+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`.
+
+<ExampleCodeBlock code={Basic} />
+
+## 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.
+
+## 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
+users depending on screen readers to describe both the name of the button and the value of the
+`<CountBadge>`.
+
+When a web app dynamically updates count badges in real-time, consider the following accessibility
+enhancements to support live, real-time announcements for screen readers:
+
+- The `<CountBadge>` component is rendered as a child of the `<AriaLiveRegion>` container.
+- The `<AriaLiveRegion>` container is assigned a name by using `aria-labelledby` to reference the
+  name of the icon button `"Notifications"`.
+- The `<AccessibleHide>` component is used following the `<CountBadge>` to render a hidden word
+  "new" that only screen reader users can access.
+- 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".

package/dist/mdx/react/_examples/mdx/CompoundComponent.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock } from '@workday/canvas-kit-docs';
 
 import Template from './examples/compoundComponent/CustomCard';
 
@@ -11,6 +11,6 @@ Component component utilites are a great way to wrap and extend exisitng Canvas
 can dramatically simplify state handling and gives you easy access to things like ref forwarding.
 
 For more complex examples,
-[see the creating-compound-components guide](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--page).
+[see the creating-compound-components guide](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--docs).
 
 <ExampleCodeBlock code={Template} />

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

@@ -12,6 +12,32 @@ Developers building internal Workday applications will likely not need to create
 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
+
+- 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.
+
+## 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
+users depending on screen readers to describe both the name of the button and the value of the
+`<CountBadge>`.
+
+When a web app dynamically updates count badges in real-time, consider the following accessibility
+enhancements to support live, real-time announcements for screen readers:
+
+- The `<CountBadge>` component is rendered as a child of the `<AriaLiveRegion>` container.
+- The `<AriaLiveRegion>` container is assigned a name by using `aria-labelledby` to reference the
+  name of the icon button `"Notifications"`.
+- The `<AccessibleHide>` component is used following the `<CountBadge>` to render a hidden word
+  "new" that only screen reader users can access.
+- 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

package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx

@@ -1,65 +1,295 @@
 import * as React from 'react';
-import {styled, createComponent, dubLogoBlue} from '@workday/canvas-kit-react/common';
-import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
-
+import {
+  AccessibleHide,
+  AriaLiveRegion,
+  composeHooks,
+  createComponent,
+  createElemPropsHook,
+  createSubcomponent,
+  ExtractProps,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
+import {base, system} from '@workday/canvas-tokens-web';
+import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {
   notificationsIcon,
   inboxIcon,
   justifyIcon,
   assistantIcon,
+  searchIcon,
 } from '@workday/canvas-system-icons-web';
 
-import {TertiaryButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {LoadReturn} from '@workday/canvas-kit-react/collection';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {
+  Combobox,
+  useComboboxModel,
+  useComboboxInput,
+  useComboboxLoader,
+} from '@workday/canvas-kit-react/combobox';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
 
 interface HeaderItemProps extends FlexProps {}
+interface LiveCountBadgeProps extends FlexProps {
+  cnt: number;
+}
 
-export default () => (
-  <GlobalHeader>
-    <GlobalHeader.Item>
-      <TertiaryButton aria-label="menu" icon={justifyIcon} />
-      <Hyperlink>
-        <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
-      </Hyperlink>
-    </GlobalHeader.Item>
-    <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
-      <SearchForm onSubmit={() => 1} />
-    </GlobalHeader.Item>
-    <GlobalHeader.Item>
-      <TertiaryButton aria-label="messages" icon={assistantIcon} />
-      <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
-      <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-      <Avatar size="medium" variant="light" />
-    </GlobalHeader.Item>
-  </GlobalHeader>
+const tasks = ['Request Time Off', 'Create Expense Report', 'Change Benefits'];
+
+const styleOverrides = {
+  headerWrapper: createStyles({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    ...system.type.subtext.large,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    backgroundColor: system.color.bg.default,
+    padding: system.space.x1,
+  }),
+  inputGroupInner: createStyles({
+    marginLeft: '1rem',
+    width: px2rem(20),
+    transition: 'opacity 100ms ease',
+  }),
+  comboboxContainer: createStyles({
+    margin: 'auto',
+    width: '100%',
+    maxWidth: calc.multiply(system.space.x20, 6),
+  }),
+  comboboxInput: createStyles({
+    borderRadius: px2rem(1000),
+    width: '20rem',
+  }),
+  comboboxMenuList: createStyles({
+    maxHeight: px2rem(200),
+  }),
+  menuButtonStyles: createStyles({
+    textDecoration: 'none',
+    color: base.blackPepper500,
+  }),
+  notificationContainerStyles: createStyles({
+    boxSizing: 'border-box',
+    position: 'relative',
+  }),
+  countBadgeStyles: createStyles({
+    boxSizing: 'border-box',
+    position: 'absolute',
+    top: calc.negate(system.space.x1),
+    insetInlineEnd: calc.negate(system.space.x1),
+  }),
+  actionButtonStyles: createStyles({
+    gap: system.space.x4,
+    margin: system.space.x4,
+  }),
+};
+
+const useAutocompleteInput = composeHooks(
+  createElemPropsHook(useComboboxModel)(model => {
+    return {
+      onKeyPress(event: React.KeyboardEvent) {
+        model.events.show(event);
+      },
+    };
+  }),
+  useComboboxInput
 );
 
+const AutoCompleteInput = createSubcomponent(TextInput)({
+  modelHook: useComboboxModel,
+  elemPropsHook: useAutocompleteInput,
+})<ExtractProps<typeof Combobox.Input, never>>((elemProps, Element) => {
+  return <Combobox.Input as={Element} {...elemProps} />;
+});
+
+export default () => {
+  const [notifications, setNotifications] = React.useState(0);
+
+  function handleAdd() {
+    setNotifications(prev => prev + 1);
+  }
+
+  function handleClear() {
+    setNotifications(0);
+  }
+
+  return (
+    <>
+      <GlobalHeader>
+        <GlobalHeader.Item>
+          <Tooltip title="Global Navigation" type="describe">
+            <TertiaryButton icon={justifyIcon} cs={styleOverrides.menuButtonStyles}>
+              MENU
+            </TertiaryButton>
+          </Tooltip>
+          <Tooltip title="Workday Home">
+            <TertiaryButton>
+              <img src="https://design.workday.com/images/ck-dub-logo-blue.svg" alt="" />
+            </TertiaryButton>
+          </Tooltip>
+        </GlobalHeader.Item>
+        <GlobalHeader.Item cs={styleOverrides.comboboxContainer}>
+          <Autocomplete aria-label="Search Workday" />
+        </GlobalHeader.Item>
+        <GlobalHeader.Item>
+          <Tooltip title="Assistant">
+            <TertiaryButton icon={assistantIcon} />
+          </Tooltip>
+
+          <NotificationLiveBadge cnt={notifications} />
+
+          <Tooltip title="My Tasks">
+            <TertiaryButton icon={inboxIcon} />
+          </Tooltip>
+          <Tooltip title="Profile">
+            <Avatar />
+          </Tooltip>
+        </GlobalHeader.Item>
+      </GlobalHeader>
+      <Flex cs={styleOverrides.actionButtonStyles}>
+        <SecondaryButton onClick={handleAdd}>Add notification</SecondaryButton>
+        <TertiaryButton onClick={handleClear}>Clear</TertiaryButton>
+      </Flex>
+    </>
+  );
+};
+
 const GlobalHeaderItem = createComponent('div')({
   displayName: 'GlobalHeader.Item',
   Component: ({gap = 's', ...props}: HeaderItemProps, ref) => (
-    <Flex gap={gap} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+    <Flex gap={gap} alignItems="center" marginX={system.space.x3} ref={ref} {...props} />
   ),
 });
 
 const GlobalHeader = createComponent('header')({
   displayName: 'GlobalHeader',
-  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  Component: (props, ref) => (
+    <header className={styleOverrides.headerWrapper} ref={ref} {...props} />
+  ),
   subComponents: {Item: GlobalHeaderItem},
 });
 
-const HeaderWrapper = styled('header')({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  boxSizing: 'border-box',
-  ...type.levels.subtext.large,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  backgroundColor: colors.frenchVanilla100,
-  ...depth[1],
-  padding: space.xxs,
+const Autocomplete = createComponent('div')({
+  displayName: 'Autocomplete',
+  Component: props => {
+    const [searchText, setSearchText] = React.useState('');
+
+    function handleChange(e) {
+      setSearchText(e.target.value);
+    }
+
+    const {model, loader} = useComboboxLoader(
+      {
+        // You can start with any number that makes sense.
+        total: 0,
+
+        // Pick whatever number makes sense for your API
+        pageSize: 20,
+
+        // A load function that will be called by the loader. You must return a promise that returns
+        // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+        async load({pageNumber, pageSize, filter}) {
+          return new Promise<LoadReturn<string>>(resolve => {
+            // simulate a server response by resolving after a period of time
+            setTimeout(() => {
+              // simulate paging and filtering based on pre-computed items
+              const start = (pageNumber - 1) * pageSize;
+              const end = start + pageSize;
+              const filteredTasks = tasks.filter(i => {
+                if (searchText.trim() === '' || typeof searchText !== 'string') {
+                  return true;
+                }
+                return i.toLowerCase().includes(searchText.trim().toLowerCase());
+              });
+
+              const total = filteredTasks.length;
+              const items = filteredTasks.slice(start, end);
+
+              resolve({
+                items,
+                total,
+              });
+            }, 300);
+          });
+        },
+        onShow() {
+          // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+          // visible
+          loader.load();
+        },
+      },
+      useComboboxModel
+    );
+
+    return (
+      <Combobox model={model}>
+        <InputGroup>
+          <InputGroup.InnerStart cs={styleOverrides.inputGroupInner}>
+            <SystemIcon icon={searchIcon} />
+          </InputGroup.InnerStart>
+          <InputGroup.Input
+            as={AutoCompleteInput}
+            cs={styleOverrides.comboboxInput}
+            onChange={handleChange}
+            value={searchText}
+            {...props}
+          />
+        </InputGroup>
+        <Combobox.Menu.Popper>
+          <Combobox.Menu.Card>
+            {model.state.items.length === 0 ? (
+              <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+            ) : (
+              model.state.items.length > 0 && (
+                <Combobox.Menu.List maxHeight={px2rem(200)}>
+                  {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
+                </Combobox.Menu.List>
+              )
+            )}
+          </Combobox.Menu.Card>
+        </Combobox.Menu.Popper>
+      </Combobox>
+    );
+  },
 });
 
-const WorkdayLogo = styled('span')({lineHeight: 0});
+const NotificationLiveBadge = createComponent('span')({
+  displayName: 'NotificationLiveBadge',
+  Component: ({cnt = 0, ...props}: LiveCountBadgeProps) => {
+    const btnId = useUniqueId();
+    const badgeId = useUniqueId();
+
+    return (
+      <Flex cs={styleOverrides.notificationContainerStyles}>
+        <Tooltip title="Notifications">
+          <TertiaryButton
+            id={btnId}
+            icon={notificationsIcon}
+            aria-describedby={cnt > 0 ? badgeId : undefined}
+            {...props}
+          />
+        </Tooltip>
+        <AriaLiveRegion aria-labelledby={btnId}>
+          {cnt > 0 && (
+            <>
+              <CountBadge
+                id={badgeId}
+                count={cnt}
+                limit={100}
+                cs={styleOverrides.countBadgeStyles}
+              />
+              <AccessibleHide>New</AccessibleHide>
+            </>
+          )}
+        </AriaLiveRegion>
+      </Flex>
+    );
+  },
+});

package/dist/mdx/react/badge/CountBadge.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import CustomLimit from './examples/CustomLimit';
@@ -60,7 +60,7 @@ of another screen update, then this use of `AriaLiveRegion` is unnecessary and n
 ### Custom Styles
 
 Count Badge 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx

@@ -9,7 +9,7 @@ export interface Breadcrumb {
   text: string;
 }
 
-export default () => {
+export default ({width = '100%'}) => {
   const [items] = React.useState<Breadcrumb[]>([
     {id: '1', text: 'Home', link: '/'},
     {id: '2', text: 'Second Link', link: '#'},
@@ -21,11 +21,15 @@ export default () => {
   ]);
 
   const model = useBreadcrumbsModel({items});
-  const [containerWidth, setContainerWidth] = React.useState('350px');
-
+  const [containerWidth, setContainerWidth] = React.useState(width);
   return (
     <div>
       <Box width={containerWidth} marginBottom="xl">
+        <div style={{display: 'flex', flexDirection: 'column'}}>
+          <span>Current Container Width: {containerWidth}</span>
+          <span>Overflow visibility: {model.menu.state.visibility}</span>
+        </div>
+        <hr />
         <Breadcrumbs model={model} aria-label="Breadcrumbs">
           <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
             {item =>
@@ -51,7 +55,12 @@ export default () => {
       </Box>
       <hr />
       <h4>Change Breadcrumbs container size</h4>
-      <SegmentedControl onSelect={data => setContainerWidth(data.id)}>
+      <SegmentedControl
+        initialValue={width}
+        onSelect={data => {
+          setContainerWidth(data.id);
+        }}
+      >
         <SegmentedControl.List aria-label="container width control" marginBottom="m">
           <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="480px">480px</SegmentedControl.Item>

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

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  Specifications,
-  SymbolDoc,
-  SymbolDescription,
+	ExampleCodeBlock,
+	Specifications,
+	SymbolDoc,
+	SymbolDescription,
 } from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
@@ -86,7 +86,7 @@ the width of the button to the width of its container.
 ### Custom Styles
 
 All of our buttons support 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--page)
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
 or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />

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

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import WithCustomStyles from './examples/CustomStyles';
 import WithStencils from './examples/Stencils';
@@ -30,7 +30,7 @@ yarn add @workday/canvas-kit-react
 ### Custom Styles
 
 Card and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 <ExampleCodeBlock code={WithCustomStyles} />
 

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  SymbolDoc,
-  Specifications,
-  InformationHighlight,
+	ExampleCodeBlock,
+	SymbolDoc,
+	Specifications,
+	InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -104,7 +104,7 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
 ### Custom Styles
 
 Checkbox 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

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

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
 import Autocomplete from './examples/Autocomplete';
 
 # Combobox
@@ -72,7 +72,7 @@ An Autocomplete is an example of an arbitrary combobox.
 
 Combobox and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, Specifications, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
 import Error from './examples/Error';
@@ -202,7 +202,7 @@ You can theme your error rings by wrapping an input in a `CanvasProvider` and de
 
 Form Field and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

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

@@ -17,7 +17,10 @@ export default () => {
               <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
               <Modal.CloseButton>Cancel</Modal.CloseButton>
             </Flex>
-            <iframe srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button>iframe button 2</button></body></html>" />
+            <iframe
+              role="iframe"
+              srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button data-testid='button2'>iframe button 2</button></body></html>"
+            />
           </Modal.Body>
         </Modal.Card>
       </Modal.Overlay>

package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {PopperController} from '../../../../../utils/storybook';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {
   Popup,
@@ -8,14 +7,12 @@ import {
   useCloseOnOutsideClick,
   useInitialFocus,
   useReturnFocus,
-  Placement,
 } from '@workday/canvas-kit-react/popup';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {createStyles, calc} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
-  const [placement, setPlacement] = React.useState<Placement>('top');
-  const [marginLeftBtn, setMarginLeftBtn] = React.useState(0);
-  const [marginRightBtn, setMarginRightBtn] = React.useState(0);
   const model = usePopupModel();
 
   useCloseOnOutsideClick(model);
@@ -27,56 +24,108 @@ export default () => {
     console.log('Delete Item');
   };
 
-  const handlePlacement = (placement: Placement) => {
-    setPlacement(placement);
-  };
-
-  const handleMarginLeftBtn = (marginLeftBtn: number) => {
-    setMarginLeftBtn(marginLeftBtn);
-  };
+  const grid = createStyles({
+    gridTemplateAreas: "'topButton topButton''leftButton rightButton''bottomButton bottomButton'",
+    height: calc.subtract('100vh', system.space.x16),
+    width: calc.subtract('100vw', system.space.x20),
+  });
 
-  const handleMarginRightBtn = (marginLeftBtn: number) => {
-    setMarginRightBtn(marginLeftBtn);
-  };
+  const topButton = createStyles({
+    gridArea: 'topButton',
+    justifySelf: 'center',
+  });
+  const rightButton = createStyles({
+    gridArea: 'rightButton',
+    justifySelf: 'right',
+    alignSelf: 'center',
+  });
+  const bottomButton = createStyles({
+    gridArea: 'bottomButton',
+    justifySelf: 'center',
+    alignSelf: 'end',
+  });
+  const leftButton = createStyles({
+    gridArea: 'leftButton',
+    justifySelf: 'left',
+    alignSelf: 'center',
+  });
 
   return (
-    <div style={{height: 1200}} data-testid="scroll-area-fallback-placement">
-      <PopperController
-        marginLeftBtn={marginLeftBtn}
-        marginRightBtn={marginRightBtn}
-        placement={placement}
-        onSetPlacement={handlePlacement}
-        onSetMarginLeftBtn={handleMarginLeftBtn}
-        onSetMarginRightBtn={handleMarginRightBtn}
-      >
-        <Flex width="100%" marginTop={240} justifyContent="center" alignItems="start">
-          <Popup model={model}>
-            <Popup.Target
-              as={DeleteButton}
-              style={{marginLeft: marginLeftBtn, marginRight: marginRightBtn}}
-            >
-              Delete Item
-            </Popup.Target>
-            <Popup.Popper placement={placement}>
-              <Popup.Card width={400}>
-                <Popup.CloseIcon aria-label="Close" />
-                <Popup.Heading>Delete Item</Popup.Heading>
-                <Popup.Body>
-                  <Box as="p" marginY="zero">
-                    Are you sure you'd like to delete the item titled 'My Item'?
-                  </Box>
-                </Popup.Body>
-                <Flex gap="s" padding="xxs" marginTop="xxs">
-                  <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
-                    Delete
-                  </Popup.CloseButton>
-                  <Popup.CloseButton>Cancel</Popup.CloseButton>
-                </Flex>
-              </Popup.Card>
-            </Popup.Popper>
-          </Popup>
-        </Flex>
-      </PopperController>
+    <div data-testid="scroll-area-fallback-placement">
+      <Grid cs={grid}>
+        <Popup>
+          <Popup.Target cs={topButton} as={DeleteButton}>
+            Placement Top
+          </Popup.Target>
+          <Popup.Popper placement="top">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+        <Popup>
+          <Popup.Target cs={leftButton} as={DeleteButton}>
+            Placement Left
+          </Popup.Target>
+          <Popup.Popper placement="left">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+        <Popup>
+          <Popup.Target cs={rightButton} as={DeleteButton}>
+            Placement Right
+          </Popup.Target>
+          <Popup.Popper placement="right">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+        <Popup>
+          <Popup.Target cs={bottomButton} as={DeleteButton}>
+            Placement Bottom
+          </Popup.Target>
+          <Popup.Popper placement="bottom">
+            <Popup.Card width={400}>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
+              <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </Flex>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+      </Grid>
     </div>
   );
 };

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

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  InformationHighlight,
-  SymbolDoc,
-  Specifications,
+	ExampleCodeBlock,
+	InformationHighlight,
+	SymbolDoc,
+	Specifications,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -20,7 +20,7 @@ import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
 import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
+import InitialSelectedItem from './examples/InitialSelectedItem';import { Table } from '@workday/canvas-kit-react/table';
 
 
 # Canvas Kit Select
@@ -305,7 +305,7 @@ prop as well as the `value` DOM property and will update the model accordingly.
 
 Select and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/switch/Switch.mdx

@@ -1,8 +1,8 @@
 import {
-  ExampleCodeBlock,
-  SymbolDoc,
-  Specifications,
-  InformationHighlight,
+	ExampleCodeBlock,
+	SymbolDoc,
+	Specifications,
+	InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -73,7 +73,7 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
 ### Custom Styles
 
 Switch 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/table/Table.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import BasicWithHeading from './examples/BasicWithHeading';
 import FixedColumn from './examples/FixedColumn';
@@ -62,7 +62,7 @@ You can also find several advanced Table examples in our Storybook Examples sect
 
 Table and its subcomponents support 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/BodyText.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/BodyText/Basic';
 
 # Canvas Kit Body Text
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Body Text 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Heading.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
 
 
 # Canvas Kit Heading
@@ -29,7 +29,7 @@ according to the [Canvas type hierarchy](/tokens/type/#type-styles).
 ### Custom Styles
 
 Heading 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Subtext.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Subtext/Basic';
 
 # Canvas Kit Subtext
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Subtext 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

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

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Text/Basic';
 import TypeLevel from './examples/Text/TypeLevel';
 import Variant from './examples/Text/Variant';
@@ -44,7 +44,7 @@ understanding of the text being rendered.
 ### Custom Styles
 
 Text 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Title.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 import Basic from './examples/Title/Basic';
 
 # Canvas Kit Title
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Title 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--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/welcome.mdx

@@ -1,8 +1,8 @@
 import Readme from '../../../README.md';
 import Markdown from '../../../utils/storybook/Markdown.tsx';
-import {WelcomePage} from './welcomePage';
-import {InstallBlock} from './installBlock';
-import {version} from '../../../lerna.json';
+import { WelcomePage } from './welcomePage';
+import { InstallBlock } from './installBlock';
+import { version } from '../../../lerna.json';
 
 
 <WelcomePage />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.948-next.0",
+  "version": "13.0.0-alpha.978-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "build:docs": "node ./utils/build-docs.js",
     "build:rebuild": "npm-run-all clean build",
     "build:specs": "node ./utils/build-specifications.js",
-    "build": "npm-run-all --parallel build:es6 build:mdx --parallel build:specs build:docs",
+    "build": "npm-run-all build:es6 build:mdx build:specs build:docs",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
     "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.948-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.948-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.948-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.948-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.978-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.978-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.978-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.978-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "cbfbb06dd0be8cd5feca6ee2114cd2b039da66db"
+  "gitHead": "e9eabae8567dfb68fc849f0d966c67711bef438b"
 }