@workday/canvas-kit-docs 16.1.0-0569-next.0 → 16.1.0-0572-next.0

package/dist/es6/lib/docs.js

@@ -228051,6 +228051,22 @@ 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",
@@ -230899,7 +230915,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\", string>>"
+                "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
               },
               {
                 "kind": "symbol",
@@ -232812,7 +232828,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`.",
+    "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.",
     "declarations": [
       {
         "name": "sanaCanvasNumericalTheme",
@@ -232829,7 +232845,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.",
+    "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.",
     "declarations": [
       {
         "name": "sanaCanvasProviderTheme",
@@ -232837,7 +232853,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> — required for popup parity\n<CanvasProvider theme={sanaCanvasProviderTheme}><App /></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> — pass both for full parity, including portaled popups\n<CanvasProvider theme={sanaCanvasProviderTheme} data-theme=\"sana-canvas\">\n  <App />\n</CanvasProvider>\n```"
     },
     "type": {
       "kind": "symbol",
@@ -233906,6 +233922,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                   {
                     "kind": "string",
                     "value": "A200"
+                  },
+                  {
+                    "kind": "string",
+                    "value": "A300"
                   }
                 ]
               },
@@ -233923,7 +233943,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`) that are not\nexported for primary/critical/caution/positive families.",
+    "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.",
     "declarations": [
       {
         "name": "CanvasNeutralBrandRamp",
@@ -233940,7 +233960,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\", string>>"
+            "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
           },
           {
             "kind": "symbol",
@@ -233965,6 +233985,42 @@ 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"
                       }
                     ]
                   },
@@ -234112,7 +234168,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\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", 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": [
@@ -234148,7 +234204,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\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", 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": [
@@ -234166,7 +234222,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\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", 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": [
@@ -234184,7 +234240,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\", string>>"
+                  "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", 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.12",
-    "@workday/canvas-kit-preview-react": "16.0.12",
-    "@workday/canvas-kit-react": "16.0.12",
-    "@workday/canvas-kit-react-fonts": "^16.0.12",
-    "@workday/canvas-kit-styling": "16.0.12",
+    "@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-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.12",
-    "@workday/canvas-kit-preview-react": "16.0.12",
-    "@workday/canvas-kit-react": "16.0.12",
-    "@workday/canvas-kit-react-fonts": "^16.0.12",
-    "@workday/canvas-kit-styling": "16.0.12",
+    "@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-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,6 +70,21 @@ 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/react/common/mdx/Theming.mdx

@@ -116,9 +116,11 @@ 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), 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):
+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';

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

@@ -1,9 +1,11 @@
 import React from 'react';
 
-import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {PrimaryButton} 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
@@ -16,17 +18,25 @@ export default () => {
   return (
     <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
       <Popup model={myModel}>
-        <Popup.Target as={SecondaryButton}>Open Menu</Popup.Target>
+        <Popup.Target as={PrimaryButton}>Open Menu</Popup.Target>
         <Popup.Popper>
           <Popup.Card>
             <Popup.Body>
-              <Menu>
-                <Menu.Item>Option 1</Menu.Item>
-                <Menu.Item>Option 2</Menu.Item>
-                <Menu.Item>Option 3</Menu.Item>
+              <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>
               <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.1.0-0569-next.0",
+  "version": "16.1.0-0572-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.1.0-0569-next.0",
-    "@workday/canvas-kit-preview-react": "^16.1.0-0569-next.0",
-    "@workday/canvas-kit-react": "^16.1.0-0569-next.0",
-    "@workday/canvas-kit-styling": "^16.1.0-0569-next.0",
+    "@workday/canvas-kit-labs-react": "^16.1.0-0572-next.0",
+    "@workday/canvas-kit-preview-react": "^16.1.0-0572-next.0",
+    "@workday/canvas-kit-react": "^16.1.0-0572-next.0",
+    "@workday/canvas-kit-styling": "^16.1.0-0572-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": "4d80bc82c0dbe6610aae4e41a2288b30f34ef4a6"
+  "gitHead": "35d59e03767fbedf7211435a15b19031b1b2f42a"
 }