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

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
-import { BodyText, Heading } from '@workday/canvas-kit-react/text';
-import { Flex } from '@workday/canvas-kit-react/layout';
 import { FormField } from '@workday/canvas-kit-react/form-field';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { BodyText, Heading } from '@workday/canvas-kit-react/text';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
-import { system } from '@workday/canvas-tokens-web';
 import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 const fruits = [
     'Apples',
     'Oranges',
@@ -18,19 +18,19 @@ const fruits = [
     'Blackberries',
 ];
 const liveRegionStyle = createStyles({
-    border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
-    backgroundColor: system.color.bg.caution.softer,
-    padding: system.space.x2,
+    border: `${px2rem(1)} solid ${system.color.brand.focus.caution.outer}`,
+    backgroundColor: system.color.brand.surface.caution.strong,
+    padding: system.padding.xs,
 });
 const listStyles = createStyles({
-    paddingLeft: system.space.zero,
+    paddingLeft: '0',
 });
 const listItemStyles = createStyles({
     listStyle: 'none',
-    paddingLeft: system.space.zero,
+    paddingLeft: '0',
 });
 const flexStyles = createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
 });
 let filteredFruits = fruits;
 export const FilterListWithLiveStatus = () => {

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/HiddenLiveRegion.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { AccessibleHide, AriaLiveRegion } from '@workday/canvas-kit-react/common';
 import { PrimaryButton } from '@workday/canvas-kit-react/button';
+import { AccessibleHide, AriaLiveRegion } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { Text } from '@workday/canvas-kit-react/text';
@@ -10,7 +10,7 @@ import { createStyles } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 let liveRegionStr = '';
 const flexStyles = createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
     alignItems: 'center',
 });
 export const HiddenLiveRegion = () => {

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButtonsWithLiveBadges.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx"],"names":[],"mappings":"AA0EA,eAAO,MAAM,yBAAyB,+CAuBrC,CAAC"}
+{"version":3,"file":"IconButtonsWithLiveBadges.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx"],"names":[],"mappings":"AA2EA,eAAO,MAAM,yBAAyB,+CAuBrC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { AccessibleHide, AriaLiveRegion, useUniqueId } from '@workday/canvas-kit-react/common';
-import { notificationsIcon, inboxIcon, assistantIcon } from '@workday/canvas-system-icons-web';
-import { space } from '@workday/canvas-kit-react/tokens';
+import { CountBadge } from '@workday/canvas-kit-react/badge';
 import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
+import { AccessibleHide, AriaLiveRegion, useUniqueId } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { CountBadge } from '@workday/canvas-kit-react/badge';
+import { assistantIcon, inboxIcon, notificationsIcon } from '@workday/canvas-system-icons-web';
 const MyTasksLiveBadge = ({ cnt }) => {
     // use tooltip to assign name,
     // use AriaLiveRegion inside button,

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputWithLiveError.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB,+CAoBlC,CAAC"}
+{"version":3,"file":"TextInputWithLiveError.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,sBAAsB,+CAoBlC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/TextInputWithLiveError.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
+import { PrimaryButton } from '@workday/canvas-kit-react/button';
 import { AriaLiveRegion, changeFocus } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
-import { PrimaryButton } from '@workday/canvas-kit-react/button';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
-import { system } from '@workday/canvas-tokens-web';
 import { createStyles } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 const hintStyles = createStyles({
-    height: system.space.x6,
+    height: system.size.xs,
 });
 export const TextInputWithLiveError = () => {
     const errMsg = 'Error: First name is required.';

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisibleLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,iBAAiB,+CAgC7B,CAAC"}
+{"version":3,"file":"VisibleLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,iBAAiB,+CAgC7B,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/VisibleLiveRegion.js

@@ -1,24 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
 import { PrimaryButton } from '@workday/canvas-kit-react/button';
+import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { Text } from '@workday/canvas-kit-react/text';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
+import { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-import { createStyles, px2rem, calc } from '@workday/canvas-kit-styling';
 const liveRegionStyle = createStyles({
-    border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
-    backgroundColor: system.color.bg.caution.softer,
-    padding: system.space.x4,
+    border: `${px2rem(1)} solid ${system.color.brand.focus.caution.outer}`,
+    backgroundColor: system.color.brand.surface.caution.strong,
+    padding: system.padding.md,
     display: 'block',
-    marginBlockStart: system.space.x4,
-    marginBlockEnd: system.space.x4,
-    width: calc.multiply(system.space.x16, 7),
+    marginBlock: system.gap.md,
+    width: calc.multiply(system.size.xxl, 7),
 });
 const flexGapStyles = createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
     alignItems: 'center',
 });
 let liveRegionStr = 'This is an ARIA Live Region!';

package/dist/es6/mdx/accessibility/examples/GlobalHeader.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { AccessibleHide, AriaLiveRegion, composeHooks, createComponent, createElemPropsHook, createSubcomponent, useUniqueId, } from '@workday/canvas-kit-react/common';
-import { 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 { Avatar } from '@workday/canvas-kit-react/avatar';
+import { CountBadge } from '@workday/canvas-kit-react/badge';
 import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
-import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
+import { Combobox, useComboboxInput, useComboboxLoader, useComboboxModel, } from '@workday/canvas-kit-react/combobox';
+import { AccessibleHide, AriaLiveRegion, composeHooks, createComponent, createElemPropsHook, createSubcomponent, useUniqueId, } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { Flex } from '@workday/canvas-kit-react/layout';
-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';
+import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { assistantIcon, hamburgerIcon, inboxIcon, notificationsIcon, searchIcon, } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
 const tasks = ['Request Time Off', 'Create Expense Report', 'Change Benefits'];
 const styleOverrides = {
     headerWrapper: createStyles({
@@ -20,26 +20,26 @@ const styleOverrides = {
         alignItems: 'center',
         justifyContent: 'space-between',
         boxSizing: 'border-box',
-        ...system.type.subtext.large,
+        ...system.type.subtext.lg,
         WebkitFontSmoothing: 'antialiased',
         MozOsxFontSmoothing: 'grayscale',
         backgroundColor: system.color.bg.default,
-        padding: system.space.x1,
+        padding: system.padding.xxs,
     }),
     flexItems: createStyles({
-        gap: system.space.x4,
+        gap: system.gap.md,
         alignItems: 'center',
-        marginX: system.space.x3,
+        marginInline: px2rem(12),
     }),
     inputGroupInner: createStyles({
-        marginLeft: '1rem',
+        marginInline: system.gap.md,
         width: px2rem(20),
         transition: 'opacity 100ms ease',
     }),
     comboboxContainer: createStyles({
         margin: 'auto',
         width: '100%',
-        maxWidth: calc.multiply(system.space.x20, 6),
+        maxWidth: calc.multiply(px2rem(80), 6),
     }),
     comboboxInput: createStyles({
         borderRadius: px2rem(1000),
@@ -59,12 +59,12 @@ const styleOverrides = {
     countBadgeStyles: createStyles({
         boxSizing: 'border-box',
         position: 'absolute',
-        top: calc.negate(system.space.x1),
-        insetInlineEnd: calc.negate(system.space.x1),
+        top: calc.negate(system.gap.xs),
+        insetInlineEnd: calc.negate(system.gap.xs),
     }),
     actionButtonStyles: createStyles({
-        gap: system.space.x4,
-        margin: system.space.x4,
+        gap: system.gap.md,
+        margin: system.gap.md,
     }),
 };
 const useAutocompleteInput = composeHooks(createElemPropsHook(useComboboxModel)(model => {
@@ -92,7 +92,7 @@ export const Basic = () => {
 };
 export const GlobalHeader = createComponent('div')({
     displayName: 'GlobalHeader',
-    Component: ({ notifications, ...props }) => (_jsxs("div", { className: styleOverrides.headerWrapper, children: [_jsxs(Flex, { cs: styleOverrides.flexItems, children: [_jsx(Tooltip, { title: "Global Navigation", type: "describe", children: _jsx(TertiaryButton, { icon: justifyIcon, cs: styleOverrides.menuButtonStyles, children: "MENU" }) }), _jsx(Tooltip, { title: "Workday Home", children: _jsx(TertiaryButton, { children: _jsx("img", { src: "https://design.workday.com/images/ck-dub-logo-blue.svg", alt: "" }) }) })] }), _jsx(Flex, { cs: styleOverrides.flexItems, children: _jsx(Autocomplete, { "aria-label": "Search Workday" }) }), _jsxs(Flex, { cs: styleOverrides.flexItems, children: [_jsx(Tooltip, { title: "Assistant", children: _jsx(TertiaryButton, { icon: assistantIcon }) }), _jsx(NotificationLiveBadge, { cnt: notifications }), _jsx(Tooltip, { title: "My Tasks", children: _jsx(TertiaryButton, { icon: inboxIcon }) }), _jsx(Tooltip, { title: "Profile", children: _jsx(Avatar, { name: "Logan McNeil", isDecorative: true }) })] })] })),
+    Component: ({ notifications }) => (_jsxs("div", { className: styleOverrides.headerWrapper, children: [_jsxs(Flex, { cs: styleOverrides.flexItems, children: [_jsx(Tooltip, { title: "Global Navigation", type: "describe", children: _jsx(TertiaryButton, { icon: hamburgerIcon, cs: styleOverrides.menuButtonStyles, children: "MENU" }) }), _jsx(Tooltip, { title: "Workday Home", children: _jsx(TertiaryButton, { children: _jsx("img", { src: "https://design.workday.com/images/ck-dub-logo-blue.svg", alt: "" }) }) })] }), _jsx(Flex, { cs: styleOverrides.flexItems, children: _jsx(Autocomplete, { "aria-label": "Search Workday" }) }), _jsxs(Flex, { cs: styleOverrides.flexItems, children: [_jsx(Tooltip, { title: "Assistant", children: _jsx(TertiaryButton, { icon: assistantIcon }) }), _jsx(NotificationLiveBadge, { cnt: notifications }), _jsx(Tooltip, { title: "My Tasks", children: _jsx(TertiaryButton, { icon: inboxIcon }) }), _jsx(Tooltip, { title: "Profile", children: _jsx(Avatar, { name: "Logan McNeil", isDecorative: true }) })] })] })),
 });
 const Autocomplete = createComponent('div')({
     displayName: 'Autocomplete',

package/dist/es6/mdx/accessibility/examples/PageStructure/BreadcrumbNavRegion.js

@@ -4,8 +4,8 @@ import { createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const regionStyles = createStyles({
     border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
-    borderRadius: system.shape.x2,
-    paddingLeft: system.space.x4,
+    borderRadius: system.shape.md,
+    paddingInlineStart: system.padding.md,
 });
 export const BreadcrumbNavRegion = () => {
     return (_jsx(Breadcrumbs, { className: regionStyles, "aria-label": "Breadcrumbs", children: _jsxs(Breadcrumbs.List, { children: [_jsx(Breadcrumbs.Item, { children: _jsx(Breadcrumbs.Link, { href: "#", children: "Home" }) }), _jsx(Breadcrumbs.Item, { children: _jsx(Breadcrumbs.Link, { href: "#", children: "Menus" }) }), _jsx(Breadcrumbs.CurrentItem, { children: "Dinner" })] }) }));

package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullPageDemo.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/FullPageDemo.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,YAAY,+CA8CxB,CAAC"}
+{"version":3,"file":"FullPageDemo.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/FullPageDemo.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,YAAY,+CA8CxB,CAAC"}

package/dist/es6/mdx/accessibility/examples/PageStructure/FullPageDemo.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
 import { Flex, Grid } from '@workday/canvas-kit-react/layout';
 import { Heading } from '@workday/canvas-kit-react/text';
-import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { GlobalHeader } from '../GlobalHeader';
 import { SideBarContent } from '../SidePanelWithNavigation';
@@ -12,21 +12,27 @@ const gridLayoutStyles = createStyles({
     gridTemplateAreas: `'Header Header Header Header'
     'SideBar BodyContent BodyContent BodyContent'
     'Footer Footer Footer Footer'`,
-    gridGap: system.space.x4,
+    gridGap: system.gap.md,
     gridTemplateColumns: '1fr 9fr',
     gridTemplateRows: `auto ${px2rem(800)} auto`,
 });
-const regionStyles = createStyles({
-    border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
-    borderRadius: system.shape.x2,
-    padding: system.space.x4,
+const regionStencil = createStencil({
+    vars: {
+        gridArea: '',
+    },
+    base: ({ gridArea }) => ({
+        border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
+        borderRadius: system.shape.md,
+        padding: system.padding.md,
+        gridArea,
+    }),
 });
 const verticalFlexStyles = createStyles({
     flexDirection: 'column',
-    gap: system.space.x4,
+    gap: system.gap.md,
 });
 const headingStyles = createStyles({
-    margin: system.space.zero,
+    margin: '0',
 });
 export const FullPageDemo = () => {
     const [notifications, setNotifications] = React.useState(0);
@@ -36,5 +42,5 @@ export const FullPageDemo = () => {
     function handleClear() {
         setNotifications(0);
     }
-    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", gridArea: "Header", cs: regionStyles, children: _jsx(GlobalHeader, { notifications: notifications }) }), _jsx(Grid, { as: "nav", gridArea: "SideBar", cs: regionStyles, children: _jsx(Flex, { cs: verticalFlexStyles, children: _jsx(SideBarContent, {}) }) }), _jsx(Grid, { as: "main", gridArea: "BodyContent", cs: regionStyles, children: _jsxs(Flex, { cs: verticalFlexStyles, children: [_jsx(BreadcrumbNavRegion, {}), _jsxs(Flex, { gap: system.space.x4, children: [_jsx(SecondaryButton, { onClick: handleAdd, children: "Add notification" }), _jsx(TertiaryButton, { onClick: handleClear, children: "Clear" })] }), _jsx(Heading, { as: "h1", size: "large", cs: headingStyles, children: "Heading Level 1" }), _jsx(Heading, { size: "medium", cs: headingStyles, children: "Heading Level 2" }), _jsx(Heading, { as: "h3", size: "small", cs: headingStyles, children: "Heading Level 3" })] }) }), _jsx(Grid, { as: "footer", gridArea: "Footer", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
+    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", cs: regionStencil({ gridArea: 'Header' }), children: _jsx(GlobalHeader, { notifications: notifications }) }), _jsx(Grid, { as: "nav", cs: regionStencil({ gridArea: 'SideBar' }), children: _jsx(Flex, { cs: verticalFlexStyles, children: _jsx(SideBarContent, {}) }) }), _jsx(Grid, { as: "main", cs: regionStencil({ gridArea: 'BodyContent' }), children: _jsxs(Flex, { cs: verticalFlexStyles, children: [_jsx(BreadcrumbNavRegion, {}), _jsxs(Flex, { cs: { gap: system.gap.md }, children: [_jsx(SecondaryButton, { onClick: handleAdd, children: "Add notification" }), _jsx(TertiaryButton, { onClick: handleClear, children: "Clear" })] }), _jsx(Heading, { as: "h1", size: "large", cs: headingStyles, children: "Heading Level 1" }), _jsx(Heading, { size: "medium", cs: headingStyles, children: "Heading Level 2" }), _jsx(Heading, { as: "h3", size: "small", cs: headingStyles, children: "Heading Level 3" })] }) }), _jsx(Grid, { as: "footer", cs: regionStencil({ gridArea: 'Footer' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
 };

package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.d.ts

@@ -1,2 +1,2 @@
-export declare const LandmarkRegaions: () => import("react/jsx-runtime").JSX.Element;
+export declare const LandmarkRegions: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LandmarkRegions.d.ts.map

package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LandmarkRegions.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/LandmarkRegions.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,gBAAgB,+CAyB5B,CAAC"}
+{"version":3,"file":"LandmarkRegions.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/PageStructure/LandmarkRegions.tsx"],"names":[],"mappings":"AA6BA,eAAO,MAAM,eAAe,+CAyB3B,CAAC"}

package/dist/es6/mdx/accessibility/examples/PageStructure/LandmarkRegions.js

@@ -1,22 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid } from '@workday/canvas-kit-react/layout';
 import { Heading } from '@workday/canvas-kit-react/text';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const gridLayoutStyles = createStyles({
     gridTemplateAreas: "'Header Header Header Header' 'SideBar BodyContent BodyContent BodyContent' 'Footer Footer Footer Footer'",
-    gridGap: system.space.x4,
+    gridGap: system.gap.md,
     gridTemplateColumns: '3fr 9fr',
     gridTemplateRows: `auto ${px2rem(300)} auto`,
 });
-const regionStyles = createStyles({
-    border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
-    borderRadius: system.shape.x2,
-    padding: system.space.x4,
+const regionStencil = createStencil({
+    vars: {
+        gridArea: '',
+    },
+    base: ({ gridArea }) => ({
+        border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
+        borderRadius: system.shape.md,
+        padding: system.padding.md,
+        gridArea,
+    }),
 });
 const headingStyles = createStyles({
-    margin: system.space.zero,
+    margin: '0',
 });
-export const LandmarkRegaions = () => {
-    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", gridArea: "Header", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Header" }) }), _jsx(Grid, { as: "nav", gridArea: "SideBar", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Navigation" }) }), _jsx(Grid, { as: "main", gridArea: "BodyContent", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Main Content" }) }), _jsx(Grid, { as: "footer", gridArea: "Footer", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
+export const LandmarkRegions = () => {
+    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", cs: regionStencil({ gridArea: 'Header' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Header" }) }), _jsx(Grid, { as: "nav", cs: regionStencil({ gridArea: 'SideBar' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Navigation" }) }), _jsx(Grid, { as: "main", cs: regionStencil({ gridArea: 'BodyContent' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Main Content" }) }), _jsx(Grid, { as: "footer", cs: regionStencil({ gridArea: 'Footer' }), children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
 };

package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.d.ts

@@ -0,0 +1,2 @@
+export declare const InlinePopupNoPortal: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InlinePopupNoPortal.d.ts.map

package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePopupNoPortal.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Popups/InlinePopupNoPortal.tsx"],"names":[],"mappings":"AA2GA,eAAO,MAAM,mBAAmB,+CAsB/B,CAAC"}

package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { DeleteButton } from '@workday/canvas-kit-react/button';
+import { useUniqueId } from '@workday/canvas-kit-react/common';
+import { Box, Flex } from '@workday/canvas-kit-react/layout';
+import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
+import { Heading } from '@workday/canvas-kit-react/text';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const headingStyles = createStyles({
+    marginTop: '0',
+});
+const cardStyles = createStyles({
+    width: px2rem(320),
+});
+const flexStyles = createStyles({
+    gap: system.gap.md,
+    padding: system.padding.xs,
+});
+const bodyStyles = createStyles({
+    marginBlock: '0',
+});
+const clipContainerStyles = createStyles({
+    padding: system.padding.md,
+    border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+    height: px2rem(200),
+    position: 'relative',
+    overflow: 'clip',
+});
+const visibleContainerStyles = createStyles({
+    padding: system.padding.md,
+    border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+    height: px2rem(200),
+    position: 'relative',
+    overflow: 'visible',
+});
+const scrollContainerStyles = createStyles({
+    padding: system.padding.md,
+    border: `${px2rem(2)} dashed ${system.color.border.info.default}`,
+    height: px2rem(200),
+    position: 'relative',
+    overflow: 'scroll',
+});
+const comparisonLayoutStyles = createStyles({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    gap: system.gap.lg,
+    marginBottom: system.gap.md,
+});
+function SingleInlinePopup({ overflowLabel, containerStyles, }) {
+    const messageId = useUniqueId();
+    const initialFocusRef = useRef(null);
+    const model = usePopupModel({ initialFocusRef });
+    useCloseOnOutsideClick(model);
+    useCloseOnEscape(model);
+    useInitialFocus(model);
+    useReturnFocus(model);
+    return (_jsxs(Box, { cs: containerStyles, children: [_jsx(Heading, { size: "small", as: "h4", cs: headingStyles, children: overflowLabel }), _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx(Popup.Popper, { placement: "top", portal: false, children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" }), _jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" })] })] }) })] })] }));
+}
+export const InlinePopupNoPortal = () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { cs: comparisonLayoutStyles, children: [_jsx(SingleInlinePopup, { overflowLabel: "overflow: visible", containerStyles: visibleContainerStyles }), _jsx(SingleInlinePopup, { overflowLabel: "overflow: clip", containerStyles: clipContainerStyles }), _jsx(SingleInlinePopup, { overflowLabel: "overflow: scroll", containerStyles: scrollContainerStyles })] }), _jsxs("p", { children: ["With ", _jsx("code", { children: "overflow: visible" }), ", the popup can extend past the dashed border. With", ' ', _jsx("code", { children: "overflow: scroll" }), " (or ", _jsx("code", { children: "hidden" }), " / ", _jsx("code", { children: "clip" }), "), the popup is constrained and any overflow is clipped. The container uses ", _jsx("code", { children: "position: relative" }), ' ', "so it establishes a containing block for the positioned popup."] })] }));
+};

package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Portals popup content into a sentinel div after the trigger (via PopupStack.pushStackContext)
+ * so DOM reading order matches page context. Uses a two-phase open so pushStackContext runs
+ * before Popper mounts and registers with the stack.
+ */
+export declare const InlinePortalPopup: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InlinePortalPopup.d.ts.map

package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePortalPopup.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Popups/InlinePortalPopup.tsx"],"names":[],"mappings":"AAmCA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,+CAsE7B,CAAC"}

package/dist/es6/mdx/accessibility/examples/Popups/InlinePortalPopup.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PopupStack } from '@workday/canvas-kit-popup-stack';
+import { DeleteButton } from '@workday/canvas-kit-react/button';
+import { changeFocus, useUniqueId } from '@workday/canvas-kit-react/common';
+import { Box, Flex } from '@workday/canvas-kit-react/layout';
+import { Popup, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const cardStyles = createStyles({
+    width: px2rem(320),
+});
+const flexStyles = createStyles({
+    gap: system.gap.md,
+    padding: system.padding.xs,
+});
+const layoutStyles = createStyles({
+    gap: system.gap.md,
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+});
+const bodyStyles = createStyles({
+    marginBlock: '0',
+});
+/**
+ * Portals popup content into a sentinel div after the trigger (via PopupStack.pushStackContext)
+ * so DOM reading order matches page context. Uses a two-phase open so pushStackContext runs
+ * before Popper mounts and registers with the stack.
+ */
+export const InlinePortalPopup = () => {
+    const messageId = useUniqueId();
+    const sentinelRef = React.useRef(null);
+    const initialFocusRef = React.useRef(null);
+    const model = usePopupModel({ initialFocusRef });
+    const visible = model.state.visibility !== 'hidden';
+    const [portalReady, setPortalReady] = React.useState(false);
+    useCloseOnOutsideClick(model);
+    useCloseOnEscape(model);
+    useReturnFocus(model);
+    // Defer initial focus until Popper content is mounted. useInitialFocus runs when visible while
+    // stackRef can still point at an empty sentinel (second open) and throws.
+    React.useEffect(() => {
+        if (!visible || !portalReady) {
+            return;
+        }
+        const el = initialFocusRef.current;
+        if (!el) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            changeFocus(el);
+        });
+    }, [visible, portalReady]);
+    React.useLayoutEffect(() => {
+        if (visible && sentinelRef.current && !portalReady) {
+            PopupStack.pushStackContext(sentinelRef.current);
+            setPortalReady(true);
+        }
+        if (!visible && portalReady) {
+            PopupStack.popStackContext(sentinelRef.current);
+            setPortalReady(false);
+        }
+    }, [visible, portalReady]);
+    return (_jsxs(Flex, { cs: layoutStyles, children: [_jsx(Flex, { children: _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx("div", { ref: sentinelRef }), visible && portalReady ? (_jsx(Popup.Popper, { placement: "top", children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" }), _jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" })] })] }) })) : null] }) }), _jsx("p", { children: "This content should come after the popup in the reading order. When someone uses a screen reader or moves through the page with tabbing, they will read or reach this content only after the popup content is shown. This helps keep the page easy to follow and makes sure that the popup is announced before any information that comes next." })] }));
+};

package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Default portal to body; sibling div with aria-owns references the portaled stack container
+ * so screen readers that support aria-owns can present content in logical order.
+ * useInitialFocus announces the popup in screen readers; useFocusRedirect manages Tab in/out.
+ */
+export declare const PopupAriaOwns: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PopupAriaOwns.d.ts.map

package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupAriaOwns.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Popups/PopupAriaOwns.tsx"],"names":[],"mappings":"AAoCA;;;;GAIG;AACH,eAAO,MAAM,aAAa,+CAkDzB,CAAC"}

package/dist/es6/mdx/accessibility/examples/Popups/PopupAriaOwns.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { DeleteButton } from '@workday/canvas-kit-react/button';
+import { useUniqueId } from '@workday/canvas-kit-react/common';
+import { Box, Flex } from '@workday/canvas-kit-react/layout';
+import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useFocusRedirect, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+const cardStyles = createStyles({
+    width: px2rem(400),
+});
+const bodyStyles = createStyles({
+    marginBlock: '0',
+});
+const flexStyles = createStyles({
+    gap: system.gap.md,
+    padding: system.padding.xs,
+});
+const layoutStyles = createStyles({
+    gap: system.gap.md,
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+});
+/**
+ * Default portal to body; sibling div with aria-owns references the portaled stack container
+ * so screen readers that support aria-owns can present content in logical order.
+ * useInitialFocus announces the popup in screen readers; useFocusRedirect manages Tab in/out.
+ */
+export const PopupAriaOwns = () => {
+    const initialFocusRef = React.useRef(null);
+    const model = usePopupModel({ initialFocusRef });
+    useCloseOnOutsideClick(model);
+    useCloseOnEscape(model);
+    useInitialFocus(model);
+    useReturnFocus(model);
+    useFocusRedirect(model);
+    const messageId = useUniqueId();
+    const popupId = useUniqueId();
+    const visible = model.state.visibility !== 'hidden';
+    React.useLayoutEffect(() => {
+        if (visible && model.state.stackRef.current) {
+            model.state.stackRef.current.setAttribute('id', popupId);
+        }
+    }, [model.state.stackRef, visible, popupId]);
+    return (_jsxs(Flex, { cs: layoutStyles, children: [_jsx(Flex, { children: _jsxs(Popup, { model: model, children: [_jsx(Popup.Target, { as: DeleteButton, children: "Delete Item" }), _jsx("div", { "aria-owns": popupId, style: { position: 'absolute' } }), _jsx(Popup.Popper, { children: _jsxs(Popup.Card, { cs: cardStyles, "aria-describedby": messageId, children: [_jsx(Popup.CloseIcon, { "aria-label": "Close" }), _jsx(Popup.Heading, { children: "Delete Item" }), _jsx(Popup.Body, { children: _jsx(Box, { as: "p", id: messageId, cs: bodyStyles, children: "Are you sure you'd like to delete the item titled 'My Item'?" }) }), _jsxs(Flex, { cs: flexStyles, children: [_jsx(Popup.CloseButton, { as: DeleteButton, children: "Delete" }), _jsx(Popup.CloseButton, { ref: initialFocusRef, children: "Cancel" })] })] }) })] }) }), _jsx("p", { children: "This content should come after the popup in the reading order. When someone uses a screen reader or moves through the page with tabbing, they will read or reach this content only after the popup content is shown. This helps keep the page easy to follow and makes sure that the popup is announced before any information that comes next." })] }));
+};

package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelWithNavigation.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/SidePanelWithNavigation.tsx"],"names":[],"mappings":"AA6KA,eAAO,MAAM,cAAc,+CAiB1B,CAAC;AAEF,eAAO,MAAM,cAAc,+CAM1B,CAAC"}
+{"version":3,"file":"SidePanelWithNavigation.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/SidePanelWithNavigation.tsx"],"names":[],"mappings":"AAkLA,eAAO,MAAM,cAAc,+CAiB1B,CAAC;AAEF,eAAO,MAAM,cAAc,+CAM1B,CAAC"}