@workday/canvas-kit-docs 16.0.13 → 16.1.0-0564-next.0

package/dist/es6/lib/docs.js

@@ -44961,7 +44961,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "Divider",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx",
-    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)\n\nThe `space` prop will equally apply top and bottom margin styles.\nIn the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom",
+    "description": "# Divider\nA divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.\n\n[View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)\n\nThe `space` prop will equally apply margin styles to both ends of the `Divider`.\nIn the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom.",
     "declarations": [
       {
         "name": "Divider",
@@ -44969,7 +44969,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\nimport { Divider } from '@workday/canvas-kit-preview-react/divider';\n\n\n<Divider space={system.gap.xs} />\n\n```"
+      "example": "```tsx\nimport { Divider } from '@workday/canvas-kit-preview-react/divider';\n\n\n<Divider space={system.gap.xs} />\n\n// vertical\n<Divider orientation=\"vertical\" />\n\n```"
     },
     "type": {
       "kind": "enhancedComponent",
@@ -44984,7 +44984,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.\nE.g. `space=\"2rem\"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.",
+          "description": "Applies margin evenly to both ends of the `Divider`. It divides the provided value by two and applies half to each end.\nFor a `horizontal` `Divider` this is the top and bottom margin, and for a `vertical` `Divider` it is the left and right margin.\nE.g. `space=\"2rem\"` would apply `1rem` margin to each end.",
           "declarations": [
             {
               "name": "space",
@@ -45000,6 +45000,38 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "`system.gap.md` (1rem)"
           }
         },
+        {
+          "kind": "property",
+          "name": "orientation",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "horizontal"
+              },
+              {
+                "kind": "string",
+                "value": "vertical"
+              }
+            ]
+          },
+          "description": "Sets the orientation of the `Divider`.\n* `horizontal` - renders a horizontal rule to segment stacked content.\n* `vertical` - renders a vertical rule to segment content laid out in a row. The `Divider` stretches to fill\n  the height of its container, so it should be placed inside an element with a defined height (e.g. a flex or\n  grid container).",
+          "declarations": [
+            {
+              "name": "orientation",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/divider/lib/Divider.tsx"
+            }
+          ],
+          "tags": {
+            "default": "'horizontal'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "horizontal"
+          }
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -228019,22 +228051,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "properties": []
     }
   },
-  {
-    "name": "CanvasThemeAttributeContext",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx",
-    "description": "Context for providing the `data-theme` value to popup containers.\n\nToken stylesheets scope their variables to an attribute selector (e.g. Sana's\n`[data-theme=\"sana-canvas\"]` block defines ~300 variables — palette, shape, depth, type).\nPortaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they\nnever inherit a nested `data-theme` and none of those variables resolve. Forwarding the\nattribute itself lets the popup container match the same selector, so the whole theme applies\nthrough normal cascade — rather than trying to mirror every variable as an inline style.",
-    "declarations": [
-      {
-        "name": "CanvasThemeAttributeContext",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "object",
-      "properties": []
-    }
-  },
   {
     "name": "CanvasProviderProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx",
@@ -230883,7 +230899,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               {
                 "kind": "symbol",
                 "name": "CanvasBrandRamp",
-                "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
+                "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
               },
               {
                 "kind": "symbol",
@@ -232796,7 +232812,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "sanaCanvasNumericalTheme",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/sanaTheme.ts",
-    "description": "Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.\nValues are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.\n\nMirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of\n`primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a\nstronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana\noverrides. Every other key is intentionally omitted — Sana does not define a distinct value\nfor it, so writing it here would only reference the very variable being written (a `var()`\ncycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).\n\n`action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define\n`--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are\nderived downstream from the root theme. Forcing them here would pin values the root is meant\nto own.\n\nRamp values must reference `base.*` (the underlying palette), never `brand.*` of the same\nname — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS\nvariable, so referencing `brand.*` here would create that same self-reference cycle. The\n`system.color.brand.*` overrides are the exception: they target *different* CSS variables\n(`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.\n\nNote this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand\nsystem colors) comes from the stylesheet's `[data-theme=\"sana-canvas\"]` block — pass\n`data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups\nso the full theme applies there too.",
+    "description": "Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.\nValues are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.",
     "declarations": [
       {
         "name": "sanaCanvasNumericalTheme",
@@ -232813,7 +232829,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "sanaCanvasProviderTheme",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/sanaTheme.ts",
-    "description": "Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers\n(menus, selects, modals, tooltips).\n\n**When to use it**\n- **Required** when you cannot set `data-theme=\"sana-canvas\"` on `<html>` (embedded apps,\n  microfrontends, third-party shells). Popups portal to `document.body` and will not inherit\n  a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.\n- Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.\n\n**When you can skip it**\n- Prefer setting `data-theme=\"sana-canvas\"` on `<html>` with Sana CSS imported. Popups then\n  inherit brand variables from the document and no `theme` prop is needed.\n\nPass `data-theme=\"sana-canvas\"` alongside it. That attribute is forwarded to popup stack\ncontainers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to\nportaled content through the stylesheet's own `[data-theme=\"sana-canvas\"]` block — this preset\ncovers brand tokens, the attribute covers everything else.\n\n`action.*` and selected-state tokens are not set by this preset — Sana does not define them,\nand they resolve from the root theme.",
+    "description": "Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers\n(menus, selects, modals, tooltips).\n\n**When to use it**\n- **Required** when you cannot set `data-theme=\"sana-canvas\"` on `<html>` (embedded apps,\n  microfrontends, third-party shells). Popups portal to `document.body` and will not inherit\n  a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.\n- Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.\n\n**When you can skip it**\n- Prefer setting `data-theme=\"sana-canvas\"` on `<html>` with Sana CSS imported. Popups then\n  inherit brand variables from the document and no `theme` prop is needed.",
     "declarations": [
       {
         "name": "sanaCanvasProviderTheme",
@@ -232821,7 +232837,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "```tsx\n// Preferred — control <html>\nimport '@workday/canvas-tokens-web/css/sana/_variables.css';\n// <html data-theme=\"sana-canvas\">\n<CanvasProvider><App /></CanvasProvider>\n\n// No access to <html> — pass both for full parity, including portaled popups\n<CanvasProvider theme={sanaCanvasProviderTheme} data-theme=\"sana-canvas\">\n  <App />\n</CanvasProvider>\n```"
+      "example": "```tsx\n// Preferred — control <html>\nimport '@workday/canvas-tokens-web/css/sana/_variables.css';\n// <html data-theme=\"sana-canvas\">\n<CanvasProvider><App /></CanvasProvider>\n\n// No access to <html> — required for popup parity\n<CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>\n```"
     },
     "type": {
       "kind": "symbol",
@@ -233890,10 +233906,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                   {
                     "kind": "string",
                     "value": "A200"
-                  },
-                  {
-                    "kind": "string",
-                    "value": "A300"
                   }
                 ]
               },
@@ -233911,7 +233923,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "CanvasNeutralBrandRamp",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts",
-    "description": "Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150` / `A850`), plus the\nextended alpha steps (`A400`–`A975`) that only the neutral family exposes.",
+    "description": "Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not\nexported for primary/critical/caution/positive families.",
     "declarations": [
       {
         "name": "CanvasNeutralBrandRamp",
@@ -233928,7 +233940,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           {
             "kind": "symbol",
             "name": "CanvasBrandRamp",
-            "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
+            "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
           },
           {
             "kind": "symbol",
@@ -233953,42 +233965,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                       {
                         "kind": "string",
                         "value": "A150"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A400"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A500"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A600"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A700"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A800"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A850"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A900"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A950"
-                      },
-                      {
-                        "kind": "string",
-                        "value": "A975"
                       }
                     ]
                   },
@@ -234136,7 +234112,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "type": {
                   "kind": "symbol",
                   "name": "CanvasBrandRamp",
-                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
                 },
                 "description": "Primary brand ramp (`--cnvs-brand-primary-*`).\n\n**Shortcut (brand scope only):** when `'600'` is the only key under `primary`,\nalso sets:\n- `PrimaryButton` — `brand.action.base`, `accent.primary`, `accent.action`\n- Selected `Menu.Item` — `system.color.brand.fg.selected`, `surface.selected`\n\nDoes **not** set focus rings — use {@link CanvasNumericalBrandTheme.focus }\nor legacy `canvas.palette.common.focusOutline`.\n\n| Key | CSS variable | Typical consumers |\n|-----|--------------|-------------------|\n| `'600'` | `--cnvs-brand-primary-600` | PrimaryButton, brand links, accent.primary |\n| `'700'` | `--cnvs-brand-primary-700` | Strong primary fg, selected text |\n| `'500'` | `--cnvs-brand-primary-500` | Mid primary ramp only (not focus) |\n| `'A50'` | `--cnvs-brand-primary-A50` | Selected/hover surfaces |",
                 "declarations": [
@@ -234172,7 +234148,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "type": {
                   "kind": "symbol",
                   "name": "CanvasBrandRamp",
-                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
                 },
                 "description": "Critical/error ramp (`--cnvs-brand-critical-*`).\n\n| Key | Typical consumers |\n|-----|-------------------|\n| `'600'` | TextInput error, DeleteButton, critical fg |\n| `'500'` | Critical focus ring, error border |\n| `'A25'` / `'A50'` | Error surface tints |",
                 "declarations": [
@@ -234190,7 +234166,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "type": {
                   "kind": "symbol",
                   "name": "CanvasBrandRamp",
-                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
                 },
                 "description": "Caution/warning ramp (`--cnvs-brand-caution-*`).\n\n| Key | Typical consumers |\n|-----|-------------------|\n| `'400'` | Caution accent, TextInput caution |\n| `'500'` | Caution focus outer, caution border |\n| `'A25'` / `'A50'` | Caution surface tints |",
                 "declarations": [
@@ -234208,7 +234184,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "type": {
                   "kind": "symbol",
                   "name": "CanvasBrandRamp",
-                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
                 },
                 "description": "Positive/success ramp (`--cnvs-brand-positive-*`).\n\n| Key | Typical consumers |\n|-----|-------------------|\n| `'600'` | Checkbox/Radio checked, success fg |\n| `'A25'` / `'A50'` | Success surface tints |",
                 "declarations": [

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": "16.0.13",
-    "@workday/canvas-kit-preview-react": "16.0.13",
-    "@workday/canvas-kit-react": "16.0.13",
-    "@workday/canvas-kit-react-fonts": "^16.0.13",
-    "@workday/canvas-kit-styling": "16.0.13",
+    "@workday/canvas-kit-labs-react": "16.0.11",
+    "@workday/canvas-kit-preview-react": "16.0.11",
+    "@workday/canvas-kit-react": "16.0.11",
+    "@workday/canvas-kit-react-fonts": "^16.0.11",
+    "@workday/canvas-kit-styling": "16.0.11",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,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": "16.0.13",
-    "@workday/canvas-kit-preview-react": "16.0.13",
-    "@workday/canvas-kit-react": "16.0.13",
-    "@workday/canvas-kit-react-fonts": "^16.0.13",
-    "@workday/canvas-kit-styling": "16.0.13",
+    "@workday/canvas-kit-labs-react": "16.0.11",
+    "@workday/canvas-kit-preview-react": "16.0.11",
+    "@workday/canvas-kit-react": "16.0.11",
+    "@workday/canvas-kit-react-fonts": "^16.0.11",
+    "@workday/canvas-kit-styling": "16.0.11",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

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

@@ -70,21 +70,6 @@ parent component's DOM hierarchy, and only inherit theme from `<html>`, or from
 > `[data-theme="sana-canvas"]` overrides, so removing the attribute is how you get classic Canvas —
 > there's nothing to undo it with.
 
-**Scoped / no document-root control:** if you cannot set `data-theme` on `<html>` (embedded apps,
-microfrontends, third-party shells), pass both `data-theme="sana-canvas"` and
-`sanaCanvasProviderTheme` to `CanvasProvider`. The preset supplies Sana's brand variables, and
-Canvas Kit forwards the `data-theme` attribute onto the popup stack container — so portaled
-menus, modals, and dialogs match the same `[data-theme="sana-canvas"]` selector and pick up the
-rest of the theme (shape, depth, type, non-brand system colors) through normal cascade:
-
-```tsx
-import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';
-
-<CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
-  <App />
-</CanvasProvider>
-```
-
 ### What Changes When You Opt In
 
 Things that change are primary brand consumers and Sana's neutral color scale

package/dist/mdx/preview-react/divider/Divider.mdx

@@ -2,6 +2,7 @@ import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-d
 
 import * as Divider from './Divider.stories.ts';
 import Basic from './examples/Basic';
+import Vertical from './examples/Vertical';
 import CustomSpace from './examples/CustomSpace';
 
 
@@ -31,6 +32,10 @@ bottom margin.
 
 <ExampleCodeBlock code={Basic} />
 
+### Vertical Example
+
+<ExampleCodeBlock code={Vertical} />
+
 ### Custom Space
 
 You might also want to apply custom space to `Divider` where the top and bottom margin are not

package/dist/mdx/preview-react/divider/examples/Basic.tsx

@@ -28,40 +28,39 @@ const maintainerList = [
   {
     id: '44883293',
     name: 'Josh Bagwell',
-    bio: 'Software Development Engineer',
+    bio: 'Master of Cocktails and Fast Cars',
   },
   {
     id: '338257',
     name: 'Nicholas Boll',
-    bio: 'Principal Software Development Engineer',
+    bio: 'Principal Potato Engineer',
   },
   {
     id: '7966550',
     name: 'Manuel Carrera',
-    bio: 'Sr. Software Development Engineer',
+    bio: 'Sr. Rock Climber and Artist',
   },
   {
     id: '146020',
     name: 'James Fan',
-    bio: 'Sr. Software Development Engineer',
+    bio: 'Sr. Television Consultant',
   },
   {
     id: '48605821',
     name: 'Raisa Primerova',
-    bio: 'Software Development Engineer',
+    bio: 'Principal Borscht Connoisseur',
   },
   {
     id: '4818182',
     name: 'Alan Smith',
-    bio: 'Principal Software Development Engineer',
+    bio: 'Principal Pizza Tosser',
   },
 ];
 
 const profileCardStyles = createStyles({
-  display: 'grid',
-  gridGap: '0.5rem',
-  gridTemplateColumns: '5rem 1fr',
-  gridTemplateRows: '1fr 1fr',
+  display: 'flex',
+  gap: '0.5rem',
+  flexDirection: 'row',
 });
 
 const profileCardAvatarStyles = createStyles({
@@ -84,6 +83,12 @@ const profileCardBodyStyles = createStyles({
   margin: 0,
 });
 
+const profileCardContentStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.xs,
+});
+
 interface ProfileCardProps {
   id: string;
   name: string;
@@ -93,12 +98,14 @@ interface ProfileCardProps {
 const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
   <div className={profileCardStyles}>
     <Avatar
-      size="extraLarge"
+      size="large"
       url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
       name={`${name}'s avatar`}
       className={profileCardAvatarStyles}
     />
-    <h3 className={profileCardHeadingStyles}>{name}</h3>
-    <p className={profileCardBodyStyles}>{bio}</p>
+    <div className={profileCardContentStyles}>
+      <h3 className={profileCardHeadingStyles}>{name}</h3>
+      <p className={profileCardBodyStyles}>{bio}</p>
+    </div>
   </div>
 );

package/dist/mdx/preview-react/divider/examples/Vertical.tsx

@@ -0,0 +1,50 @@
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  height: system.size.xxl,
+});
+
+const statStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.none,
+});
+
+const labelStyles = createStyles({
+  ...system.type.subtext.medium,
+  color: system.color.fg.default,
+  margin: 0,
+});
+
+const valueStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  margin: 0,
+});
+
+export default () => {
+  const lastIndex = stats.length - 1;
+  return (
+    <div className={rowStyles}>
+      {stats.map((stat, index) => (
+        <>
+          <div className={statStyles}>
+            <p className={labelStyles}>{stat.label}</p>
+            <p className={valueStyles}>{stat.value}</p>
+          </div>
+          {index !== lastIndex && <Divider orientation="vertical" space={system.gap.md} />}
+        </>
+      ))}
+    </div>
+  );
+};
+
+const stats = [
+  {label: 'Components', value: '128'},
+  {label: 'Contributors', value: '64'},
+  {label: 'Releases', value: '512'},
+];

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 Custom from './examples/Custom';
@@ -46,10 +46,6 @@ position of the icon may be adjusted depending on where you place it in the mark
 
 <ExampleCodeBlock code={Icon} />
 
-> **Accessibility Note**: In this example, the icon is used as a decoration and is intentionally
-> hidden from screen readers. If you're using icons to convey additional information, add
-> `role="img"` and a translated `aria-label` string to `StatusIndicator.Icon`.
-
 ### Overflow
 
 We **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its
@@ -65,16 +61,14 @@ of `StatusIndicator` via [style props](/get-started/for-developers/documentation
 Set the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the
 following values:
 
-- `neutral` (default; `gray` is a deprecated alias)
-- `caution` (`orange` is a deprecated alias)
-- `info` (`blue` is a deprecated alias)
-- `positive` (`green` is a deprecated alias)
-- `critical` (`red` is a deprecated alias)
+- `gray`
+- `orange`
+- `blue`
+- `green`
+- `red`
 - `transparent`
 
 The background color dictated by the `variant` will be dark or light based on the `emphasis`.
-`variant` and `emphasis` change color only—they do not change the accessible name. Put the status
-meaning in **`StatusIndicator.Label`**.
 
 <ExampleCodeBlock code={Variants} />
 
@@ -90,113 +84,6 @@ Status Indicator and its subcomponents support custom styling via the `cs` prop.
 information, check our
 ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
-## Accessibility
-
-`StatusIndicator` is a compact, **non-interactive** status label. The accessibility goal is that
-assistive technology users get the same status meaning as sighted users from
-**`StatusIndicator.Label`** text—not from color, emphasis, or a decorative icon.
-
-### Minimum Accessible Structure
-
-The following matches the [Basic Example](#basic-example): a container and a visible label. Icon is
-optional.
-
-```tsx
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-
-<StatusIndicator>
-  <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
-</StatusIndicator>;
-```
-
-Always include **`StatusIndicator.Label`** with concise text that names the status. Do not rely on
-**`variant`**, **`emphasis`**, or **`StatusIndicator.Icon`** as the only indicator of meaning.
-
-### Built-in Behaviors
-
-Canvas Kit applies visual layout and color through `statusIndicatorStencil` when you compose
-**`StatusIndicator`**, **`StatusIndicator.Label`**, and optionally **`StatusIndicator.Icon`**. It
-does **not** apply `role="img"` or an accessible name on the icon. **Do not duplicate them** in
-consuming code. Only add icon ARIA when the informative-icon requirement below applies.
-
-**ARIA and DOM** (_applied by subcomponents_):
-
-- **`StatusIndicator`**: renders a `div` (override with `as` if needed). Default `maxWidth` is
-  `200px`. Default `variant` is `neutral`; default `emphasis` is `low`. No ARIA role is set.
-- **`StatusIndicator.Label`**: renders a `span` with bold subtext, `white-space: nowrap`,
-  `overflow: hidden`, and `text-overflow: ellipsis`. Truncation is visual; the full text remains in
-  the accessibility tree.
-- **`StatusIndicator.Icon`**: renders `SystemIcon` at size `20`. It does **not** set `role="img"` or
-  `aria-label`. If `icon.type` is missing, the icon renders nothing.
-
-**Keyboard** (_not a control by default_):
-
-- **`StatusIndicator`** is not in the tab order. There is no built-in keyboard behavior.
-
-**Screen reader expectations** (_when built-in behaviors are used as intended_):
-
-- Assistive technology should announce the **`StatusIndicator.Label`** text as the content of the
-  indicator
-- `variant` and `emphasis` are **not** announced
-- A decorative **`StatusIndicator.Icon`** (no `role="img"`) should not add a separate accessible
-  name
-- [**OverflowTooltip**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs#tooltips-on-overflowing-content)
-  uses `type="muted"` and does not set `aria-label` on the target—the accessible name stays the
-  element's text content
-
-### Accessibility Requirements
-
-Required in application code for an accessible Status Indicator. Rows marked _(conditional)_ apply
-only when the situation matches—otherwise omit.
-
-**If no design spec is provided:** include a visible **`StatusIndicator.Label`**; keep the icon
-decorative (omit `role="img"` and `aria-label`); omit `tabIndex` and **`OverflowTooltip`**. Prefer
-short label text so truncation is unnecessary.
-
-| Requirement                      | How to satisfy                                                                                                                                                                                                                                         |
-| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Visible status text              | **`StatusIndicator.Label`** with translated text that names the status (for example, "Unpublished", not color alone)                                                                                                                                   |
-| Color is not the only indicator  | Use **`variant`** / **`emphasis`** only as visual reinforcement of the label. See [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81) |
-| Decorative icon _(conditional)_  | **`StatusIndicator.Icon`** with `icon={...}` and **no** `role="img"` when the icon only supports the label visually                                                                                                                                    |
-| Informative icon _(conditional)_ | On **`StatusIndicator.Icon`**, set `role="img"` and a translated `aria-label` that adds meaning **beyond** the label text                                                                                                                              |
-| Overflowed label _(conditional)_ | Avoid exceeding the `200px` max width. If truncation cannot be avoided, wrap **`StatusIndicator`** in **`OverflowTooltip`** and set `tabIndex={0}` so keyboard and mouse users can reveal the full text. See the [Overflow example](#overflow)         |
-
-**Informative icon** _(conditional)_:
-
-```tsx
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
-
-<StatusIndicator>
-  <StatusIndicator.Icon role="img" aria-label="Waiting to sync" icon={cloudArrowUpIcon} />
-  <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
-</StatusIndicator>;
-```
-
-**Summary for code generation:**
-
-- **REQUIRED:** visible **`StatusIndicator.Label`** whose text conveys the status
-- **CONDITIONAL:** `role="img"` + translated `aria-label` on **`StatusIndicator.Icon`**,
-  **`OverflowTooltip`** + `tabIndex={0}`
-
-### Anti-Patterns
-
-Do **not** generate code that does the following (see **Accessibility Requirements** above for what
-to supply instead):
-
-- Omit **`StatusIndicator.Label`** or use an empty label, relying on `variant`, `emphasis`, or an
-  icon for meaning
-- Set `role="img"` on a decorative **`StatusIndicator.Icon`**, or set `role="img"` without a
-  translated `aria-label`—that can expose an unnamed image to assistive technology. See **Decorative
-  icon** and **Informative icon** in **Accessibility Requirements**
-- Duplicate the label text as `aria-label` on the icon when the icon adds no extra meaning
-- Add `role="status"`, `aria-live`, or `aria-label` on **`StatusIndicator`** by default—Canvas Kit
-  does not wire these, and they change how assistive technology treats a static label. If a design
-  requires announcing asynchronous updates, see
-  [ARIA Live Regions](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs)
-- Truncate label text without **`OverflowTooltip`** and `tabIndex={0}` when keyboard users must read
-  the overflow
-
 ## Component API
 
 <SymbolDoc name="StatusIndicator" fileName="/preview-react/" />

package/dist/mdx/preview-react/status-indicator/examples/Icon.tsx

@@ -12,12 +12,12 @@ export default () => {
   return (
     <Flex cs={parentContainerStyles}>
       <StatusIndicator>
-        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
+        <StatusIndicator.Icon aria-label="unpublished" icon={cloudArrowUpIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
       </StatusIndicator>
       <StatusIndicator variant="positive">
         <StatusIndicator.Label>published</StatusIndicator.Label>
-        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
+        <StatusIndicator.Icon aria-label="published" icon={cloudArrowUpIcon} />
       </StatusIndicator>
     </Flex>
   );

package/dist/mdx/react/common/mdx/Theming.mdx

@@ -116,11 +116,9 @@ import {CanvasProvider} from '@workday/canvas-kit-react/common';
 ```
 
 **Scoped / no document-root control:** if you cannot set `data-theme` on `<html>` (embedded apps,
-microfrontends, third-party shells), pass both `data-theme="sana-canvas"` and
-`sanaCanvasProviderTheme` to `CanvasProvider`. The preset supplies Sana's brand variables, and
-Canvas Kit forwards the `data-theme` attribute onto the popup stack container — so portaled
-menus, modals, and dialogs match the same `[data-theme="sana-canvas"]` selector and pick up the
-rest of the theme (shape, depth, type, non-brand system colors) through normal cascade:
+microfrontends, third-party shells), a nested `data-theme` alone does **not** reach portaled
+popups. Pass both `data-theme="sana-canvas"` (for in-tree UI) and `sanaCanvasProviderTheme` (so
+Canvas Kit forwards Sana brand variables onto the popup stack container):
 
 ```tsx
 import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';

package/dist/mdx/react/common/mdx/examples/SimplifiedSanaSetup.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 /**
  * Scoped Sana setup for popup parity: `data-theme` themes the in-tree UI, and
@@ -18,25 +16,17 @@ export default () => {
   return (
     <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
       <Popup model={myModel}>
-        <Popup.Target as={PrimaryButton}>Open Menu</Popup.Target>
+        <Popup.Target as={SecondaryButton}>Open Menu</Popup.Target>
         <Popup.Popper>
           <Popup.Card>
             <Popup.Body>
-              <Menu initialSelectedIds={['selected']}>
-                <Menu.List role="listbox">
-                  <Menu.Option data-id="selected">Option 1</Menu.Option>
-                  <Menu.Option>Option 2</Menu.Option>
-                  <Menu.Option>Option 3</Menu.Option>
-                </Menu.List>
+              <Menu>
+                <Menu.Item>Option 1</Menu.Item>
+                <Menu.Item>Option 2</Menu.Item>
+                <Menu.Item>Option 3</Menu.Item>
               </Menu>
               <PrimaryButton>Hello World</PrimaryButton>
             </Popup.Body>
-            <FormField>
-              <FormField.Label>Example text input</FormField.Label>
-              <FormField.Field>
-                <FormField.Input as={TextInput} />
-              </FormField.Field>
-            </FormField>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.13",
+  "version": "16.1.0-0564-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.0.13",
-    "@workday/canvas-kit-preview-react": "^16.0.13",
-    "@workday/canvas-kit-react": "^16.0.13",
-    "@workday/canvas-kit-styling": "^16.0.13",
+    "@workday/canvas-kit-labs-react": "^16.1.0-0564-next.0",
+    "@workday/canvas-kit-preview-react": "^16.1.0-0564-next.0",
+    "@workday/canvas-kit-react": "^16.1.0-0564-next.0",
+    "@workday/canvas-kit-styling": "^16.1.0-0564-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "e9dd2a5816799426ed59d7b4a3c8b6b56300aa68"
+  "gitHead": "1066b7766b37f856c8744b337753d2901da4ad36"
 }