@workday/canvas-kit-docs 16.0.0-alpha.0493-next.0 → 16.0.0-alpha.0499-next.0

package/dist/es6/lib/docs.js

@@ -392762,7 +392762,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           {
             "kind": "string",
-            "value": "alternate"
+            "value": "alternative"
+          },
+          {
+            "kind": "string",
+            "value": "overlay"
           }
         ]
       }
@@ -393578,7 +393582,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "SidePanelVariant",
             "value": "SidePanelVariant"
           },
-          "description": "The style variant of the side panel. 'standard' uses a lighter gray background (`system.color.bg.alt.softer`), no depth. 'alternate' uses a white background with depth (`system.color.bg.default` and level 3 depth).",
+          "description": "The style variant of the side panel.\n- `'standard'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.\n- `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.\n- `'overlay'`: default surface background (`system.legacy.color.surface.default`) with level 6 depth, for panels that need to look lifted off the page. This is a visual treatment only — it adds no dialog semantics, focus trapping, or backdrop.",
           "declarations": [
             {
               "name": "variant",
@@ -393732,7 +393736,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "name": "ToggleButton",
           "symbol": "SidePanelToggleButton",
-          "description": "`SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.\nIt must be used within the `SidePanel` component as a child. For accessibility purposes,\nit should be the first focusable element in the panel.\n\nThe button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`\nattributes from the model.",
+          "description": "`SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.\nIt must be used within the `SidePanel` component as a child. For accessibility purposes,\nit should be the first focusable element in the panel.\n\nThe button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`\nwhen the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.\nProvide a static `aria-label` for the button's accessible name — `aria-pressed` already\nconveys the state, so the label should not change between states.",
           "declarations": [
             {
               "name": "ToggleButton",
@@ -395515,7 +395519,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "useSidePanelToggleButton",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/side-panel/lib/SidePanelToggleButton.tsx",
-    "description": "",
+    "description": "Adds the necessary ARIA attributes to the SidePanel's toggle button.\nThis includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed\nstate, and `aria-describedby` pointing at the panel's heading.",
     "declarations": [
       {
         "name": "useSidePanelToggleButton",
@@ -395829,7 +395833,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "string"
           },
           "required": false,
-          "description": "The unique ID for the panel's label element. If not provided, a unique ID will be generated.\nThis ID is used for the `aria-labelledby` attribute on both the panel and toggle button.",
+          "description": "The unique ID for the panel's label element. If not provided, a unique ID will be generated.\nThis ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`\nattribute on the toggle button.",
           "declarations": [
             {
               "name": "labelId",
@@ -395925,7 +395929,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The unique ID for the panel's label element. Used for `aria-labelledby` on the panel\nand toggle button to provide an accessible name.",
+          "description": "The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to\nprovide its accessible name, and for `aria-describedby` on the toggle button.",
           "declarations": [
             {
               "name": "labelId",
@@ -396270,7 +396274,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "string"
           },
           "required": false,
-          "description": "The unique ID for the panel's label element. If not provided, a unique ID will be generated.\nThis ID is used for the `aria-labelledby` attribute on both the panel and toggle button.",
+          "description": "The unique ID for the panel's label element. If not provided, a unique ID will be generated.\nThis ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`\nattribute on the toggle button.",
           "declarations": [
             {
               "name": "labelId",
@@ -396701,7 +396705,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "The unique ID for the panel's label element. Used for `aria-labelledby` on the panel\nand toggle button to provide an accessible name.",
+          "description": "The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to\nprovide its accessible name, and for `aria-describedby` on the toggle button.",
           "declarations": [
             {
               "name": "labelId",
@@ -477144,34 +477148,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "tags": {
             "default": "'accent'"
           }
-        },
-        {
-          "kind": "property",
-          "name": "surfaceType",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "string",
-                "value": "default"
-              },
-              {
-                "kind": "string",
-                "value": "inverse"
-              }
-            ]
-          },
-          "description": "A string that will determine which surface overlay variant to use.",
-          "declarations": [
-            {
-              "name": "surfaceType",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
-            }
-          ],
-          "tags": {
-            "default": "'default'"
-          }
         }
       ]
     }

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

@@ -23,7 +23,7 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-react": "15.1.4",
     "@workday/canvas-kit-react-fonts": "^15.1.4",
     "@workday/canvas-kit-styling": "15.1.4",
-    "@workday/canvas-system-icons-web": "5.0.1",
+    "@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

@@ -24,7 +24,7 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-react": "15.1.4",
     "@workday/canvas-kit-react-fonts": "^15.1.4",
     "@workday/canvas-kit-styling": "15.1.4",
-    "@workday/canvas-system-icons-web": "5.0.1",
+    "@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

@@ -12,18 +12,22 @@ Soon to be...
 
 - [Codemod](#codemod)
   - [Instructions](#instructions)
+  - [Codemod Transformations for Icons](#codemod-transformations-for-icons)
 - [New Components](#new-components)
   - [KBD](#kbd)
   - [Tabs](#tabs)
 - [Component Updates](#component-updates)
   - [Action Bar](#action-bar)
-  - [Avatar](#avatar)
   - [Buttons](#buttons)
     - [Delete Button Outline Variant](#delete-button-outline-variant)
-	- [Container Components](#container-components)
-	  - [Card](#card)
+    - [Secondary Button](#secondary-button)
+  - [Container Components](#container-components)
+    - [Card](#card)
     - [Expandable](#expandable)
+    - [Side Panel](#side-panel)
+    - [Table](#table)
   - [Indicators](#indicators)
+    - [Avatar](#avatar)
     - [Banner](#banner)
     - [Count Badge](#count-badge)
     - [Information Highlight](#information-highlight)
@@ -42,17 +46,17 @@ Soon to be...
     - [Text Input](#text-input)
     - [Select](#select)
     - [MultiSelect](#multiselect)
-  - [Menu](#menu)
-  - [Modal](#modal)
+  - [Popups](#popups)
+    - [Menu](#menu)
+    - [Modal](#modal)
+    - [Popup](#popup)
+    - [Toast](#toast)
+    - [Tooltip](#tooltip)
   - [Navigation Components](#navigation-components)
     - [Hyperlink](#hyperlink)
     - [Breadcrumbs](#breadcrumbs)
     - [Pagination](#pagination)
-  - [Popup](#popup)
   - [Segmented Control](#segmented-control)
-  - [Table](#table)
-  - [Toast](#toast)
-  - [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Fonts](#fonts)
@@ -122,6 +126,60 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
+## Codemod Transformations for v16
+
+The following automated transformations are available for upgrading to v16:
+
+- **Update Hyperlink Props**: updateHyperlinkProps
+
+Run the codemod with: `npx @workday/canvas-kit-codemod v16 [path]`
+
+### Codemod Transformations for Icons
+
+#### Icon Migration Codemod
+
+For v16, there is a **separate codemod** called `icon-migration` that updates
+`@workday/canvas-system-icons-web` usage across your codebase. Upgrade the icon package to v5 before
+you run it so deprecation and fallback mappings match what the transform expects.
+
+```sh
+yarn add @workday/canvas-system-icons-web@^5
+```
+
+The codemod reads `system.deprecated.metadata.json` from the installed icon package and rewrites
+each deprecated export to its fallback icon. This codemod will:
+
+- Update **named imports** and their references (for example, `uploadIcon` to `arrowUpToLineIcon`).
+- Preserve **import aliases** and point them at the fallback export.
+- Update **namespace imports** member access (for example, `systemIcons.uploadIcon` to
+  `systemIcons.arrowUpToLineIcon`).
+- Resolve **chained fallbacks** when a fallback icon is itself deprecated.
+- Remove **duplicate imports** when the fallback is already imported in the same declaration.
+
+Because it applies every mapping in the metadata file, a single run covers both the v4 naming
+convention migrations and the v5 Sana Canvas Assets renames and deprecations. Icons that are not
+deprecated are left unchanged.
+
+To run the codemod:
+
+```sh
+npx @workday/canvas-kit-codemod icon-migration [path]
+```
+
+> **Tip:** Provide the specific directory or directories you want to update as `[path]` to speed up
+> migration.
+>
+> This codemod only touches `@workday/canvas-system-icons-web`. For accent, applet, and expressive
+> icons, use the `v15-icons` transform covered in the
+> [v15 upgrade guide](/docs/guides-upgrade-guides-v15-0-overview--docs#codemod-transformations-for-icons).
+> For details on what changed in v5 and the full list of deprecated icons, see the
+> [Sana Canvas Assets overview](/docs/guides-icon-migration-sana-canvas-assets-overview--docs) and
+> the [Icon Migration codemod guide](/docs/guides-icon-migration-codemod--docs).
+
+> **Note:** 🤖 The `icon-migration` codemod automates the majority of system icon migration work,
+> but _always_ review the PR for any remaining icons the codemod could not address, especially
+> dynamic icon selection, non-code assets, and heavily customized usages.
+
 ## New Components
 
 ### KBD
@@ -186,39 +244,6 @@ import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
 
 - `ActionBar` padding has been updated to `padding.md` (16px).
 
-### Avatar
-
-**PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
-
-We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
-the component API is unchanged except for two new `variant` options.
-
-#### Updated Variants
-
-Existing variants use darker background colors and updated foreground colors for improved contrast:
-
-| Variant  | Change                                                                                       |
-| -------- | -------------------------------------------------------------------------------------------- |
-| `blue`   | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse`      |
-| `amber`  | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
-| `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse`  |
-
-The `teal` variant is unchanged.
-
-#### New Variants
-
-Two new color variants are available:
-
-- `magenta` — `magenta600` background with `system.color.fg.inverse` text
-- `green` — `green600` background with `system.color.fg.inverse` text
-
-```tsx
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-
-<Avatar name="Mary Jane" variant="magenta" />
-<Avatar name="Green Arrow" variant="green" />
-```
-
 ### Buttons
 
 **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
@@ -255,13 +280,19 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
 <DeleteButton variant="outline">Delete</DeleteButton>;
 ```
 
+#### Secondary Button
+
+`SecondaryButton` now has a `transparent` `backgroundColor` and will not show on interactive states.
+The interactive states will now show on the `border`.
+
 ### Container Components
 
 **PR:** [#4088](https://github.com/Workday/canvas-kit/pull/4088)
 
 #### Alt Variant Support
 
-Several container components now support an `alt` variant that provides an elevated surface appearance:
+Several container components now support an `alt` variant that provides an elevated surface
+appearance:
 
 - `Menu.Card` - Can use `variant="alt"` for elevated menu styling
 - `Dialog.Card` - Can use `variant="alt"` for elevated dialog styling
@@ -269,7 +300,8 @@ Several container components now support an `alt` variant that provides an eleva
 - `Toast` - Can use `variant="alt"` for elevated toast styling
 - `Tooltip` - Can use `variant="alt"` for elevated tooltip styling
 
-The `alt` variant uses `system.sana.color.surface.elevated` background with inverse borders, providing visual hierarchy and depth to these components when placed on an alt background.
+The `alt` variant uses `system.sana.color.surface.elevated` background with inverse borders,
+providing visual hierarchy and depth to these components when placed on an alt background.
 
 ```tsx
 // Examples of using the alt variant
@@ -291,17 +323,20 @@ The `alt` variant uses `system.sana.color.surface.elevated` background with inve
 
 #### Card
 
-**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014), [#4088](https://github.com/Workday/canvas-kit/pull/4088)
+**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014),
+[#4088](https://github.com/Workday/canvas-kit/pull/4088)
 
 ##### Variant Changes
 
 The `Card` component's variants have been updated:
+
 - **Removed:** The `borderless` variant has been removed and replaced with `alt`
 - **New:** The `alt` variant provides an elevated surface with inverse borders
 - **Updated:** The default variant now has a visible border
 - The `tonal` variant now uses a `system.legacy.color.surface.alt.strong` background.
 
-**Note:** If you were previously using `variant="borderless"`, you should use `variant="alt"` instead. While the styles are different, both where intended to be used on an `alt` background.
+**Note:** If you were previously using `variant="borderless"`, you should use `variant="alt"`
+instead. While the styles are different, both where intended to be used on an `alt` background.
 
 🤖 The codemod will automatically update `variant="borderless"` to `variant="alt"`.
 
@@ -326,7 +361,8 @@ The `Card` component's variants have been updated:
 - Card's border radius is now managed via the new `cornerShapeStencil` (see
   [New Utilities](#new-utilities)).
 - The default variant now includes a visible border (`system.color.border.default`).
-- The `alt` variant uses an elevated surface color (`system.sana.color.surface.elevated`) with inverse borders.
+- The `alt` variant uses an elevated surface color (`system.sana.color.surface.elevated`) with
+  inverse borders.
 
 #### Expandable
 
@@ -339,8 +375,112 @@ The `Card` component's variants have been updated:
 - `Expandable.Content` padding is now uniform `padding.xs` (8px) on all sides (previously
   `padding.md` top / `padding.xs` sides and bottom).
 
+#### Side Panel
+
+**PR:** [#4107](https://github.com/Workday/canvas-kit/pull/4107)
+
+##### Breaking Changes
+
+The `variant` prop on `SidePanel` no longer accepts `alternate`. It has been renamed to `overlay` to
+describe what the variant is for — a panel that floats above page content — because a second
+non-overlay variant now occupies the "alternative surface" role.
+
+```tsx
+import {SidePanel} from '@workday/canvas-kit-react/side-panel';
+
+// Before
+<SidePanel variant="alternate">{/* ... */}</SidePanel>
+
+// After
+<SidePanel variant="overlay">{/* ... */}</SidePanel>
+```
+
+> 🤖 The `v16` codemod will rename `variant="alternate"` to `variant="overlay"` as shown above. It
+> only transforms `SidePanel` imported from `@workday/canvas-kit-react`; the deprecated `SidePanel`
+> in `@workday/canvas-kit-preview-react` is left alone.
+
+If you were using `alternate` for a panel that sits inline with page content rather than over it,
+switch to the new `alternative` variant instead of `overlay` to avoid picking up the elevation
+shadow.
+
+##### New API
+
+- `variant="alternative"` — uses a raised surface (`system.legacy.color.surface.raised`) with no
+  depth. Use it for panels that need to stand out from the page background while remaining part of
+  the page layout.
+
+The full set of variants is now:
+
+| Variant       | Surface                                  | Depth |
+| ------------- | ---------------------------------------- | ----- |
+| `standard`    | `system.legacy.color.surface.navigation` | None  |
+| `alternative` | `system.legacy.color.surface.raised`     | None  |
+| `overlay`     | `system.legacy.color.surface.default`    | 6     |
+
+##### Visual Updates
+
+- The `overlay` variant's box-shadow updated from `system.depth[3]` to `system.depth[6]`.
+- `SidePanel.ToggleButton`'s default icon changed from `extendIcon` to `sidebarLeftIcon`. The icon
+  no longer rotates as the panel expands and collapses: it keeps a single orientation in LTR and is
+  mirrored horizontally in RTL.
+- `SidePanel.ToggleButton`'s width changed from `gap.lg` (24px) to `size.md` (40px), and its top
+  offset changed from `gap.lg` (24px) to `12px`.
+- `SidePanel.Heading` padding changed from a symmetric `padding.xs` (8px) to `padding.sm` (12px)
+  with a `paddingInlineStart` of `padding.md` (16px), and it now has a `minHeight` of `size.xxl`
+  (64px) so the heading lines up with the toggle button and the collapsed panel width.
+- `SidePanel.Heading` now lays out its children with flexbox and centers them vertically, so an icon
+  passed alongside the heading text aligns without extra styling.
+
+#### Table
+
+##### Visual Updates
+
+- `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
+  `system.legacy.color.border.default`.
+- `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
+  `system.legacy.color.border.default`.
+- Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
+  `cornerShapeStencil` (see [New Utilities](#new-utilities)).
+- `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
+  sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
+- Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
+  from the table container).
+
 ### Indicators
 
+#### Avatar
+
+**PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
+
+We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
+the component API is unchanged except for two new `variant` options.
+
+##### Updated Variants
+
+Existing variants use darker background colors and updated foreground colors for improved contrast:
+
+| Variant  | Change                                                                                       |
+| -------- | -------------------------------------------------------------------------------------------- |
+| `blue`   | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse`      |
+| `amber`  | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
+| `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse`  |
+
+The `teal` variant is unchanged.
+
+##### New Variants
+
+Two new color variants are available:
+
+- `magenta` — `magenta600` background with `system.color.fg.inverse` text
+- `green` — `green600` background with `system.color.fg.inverse` text
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+<Avatar name="Mary Jane" variant="magenta" />
+<Avatar name="Green Arrow" variant="green" />
+```
+
 #### Banner
 
 **PR:** [#4087](https://github.com/Workday/canvas-kit/pull/4087)
@@ -624,11 +764,13 @@ No API changes. No migration is required unless you render a custom dropdown ind
 No API changes. No migration is required unless you render a custom dropdown indicator or override
 `multiSelectInputStencil` styles.
 
-### Menu
+### Popups
+
+#### Menu
 
 **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)
 
-#### Visual Updates
+##### Visual Updates
 
 **Menu.Card**
 
@@ -654,7 +796,7 @@ No API changes. No migration is required unless you render a custom dropdown ind
 - Text color updated from `system.color.fg.default` to `system.color.fg.strong`.
 - Icon size updated to `md` (20px / 1.25rem).
 
-#### Menu icon sizing
+##### Menu icon sizing
 
 Menu icons are now smaller to align with Sana Canvas specs. In v15, `Menu.Item.Icon` did not set a
 `size` prop and fell back to the `SystemIcon` default of `lg` (24px / 1.5rem). In v16, all icons
@@ -673,14 +815,14 @@ custom chevron or checkmark icons inside of menu items, update them to `size="md
 
 - Padding updated to use `paddingBlock: padding.xs` with `paddingInline: padding.sm` / `padding.md`.
 
-#### State Style Updates
+##### State Style Updates
 
 `Menu.Item` and `Menu.Option` share the same underlying item styles via `menuItemStencil`. For
 guidance on when to use `Menu.Item` vs `Menu.Option`, including accessibility requirements for
 selectable menus, see the
 [Menu accessibility documentation](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs#accessibility).
 
-##### Menu.Item
+###### Menu.Item
 
 | State                                     | v15                                                                     | v16                                                                                                                               |
 | ----------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
@@ -689,7 +831,7 @@ selectable menus, see the
 | Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
 | Expanded submenu parent + Focus           | Same blue fill and white text focus style as other focused items        | Focus ring removed; ancestor-trail styling shown instead (`Submenu.TargetItem`)                                                   |
 
-##### Menu.Option
+###### Menu.Option
 
 Used in `Select`, `Combobox`, and other listbox menus. Selected states apply when
 `aria-selected="true"`.
@@ -703,12 +845,50 @@ Used in `Select`, `Combobox`, and other listbox menus. Selected states apply whe
 | Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style)                     | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
 | Disabled + Selected                       | Solid blue fill and white text with disabled opacity                                        | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity                        |
 
-### Modal
+#### Modal
 
-#### Visual Updates
+##### Visual Updates
 
 - `Modal.Card` box-shadow updated from `system.depth[5]` to `system.depth[6]`.
 
+#### Popup
+
+##### Visual Updates
+
+- `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
+
+#### Toast
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+##### Visual Updates
+
+- Padding is now applied to the `Toast` container itself instead of being distributed across
+  `Toast.Body` and `Toast.Icon`.
+- Gap between the icon, body, and close icon is now `base.size150` (12px).
+- Shape uses `system.shape.xl`.
+- Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
+- `Toast.Body` no longer has a gap between text and link.
+- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
+  LTR).
+- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
+
+#### Tooltip
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+##### Visual Updates
+
+- The default tooltip has been restyled from a dark surface to a light surface.
+- A visible border (`system.color.border.default`) is now applied to the container, replacing the
+  previous transparent outline.
+- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
+  Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
+- Shape is now fully rounded using `system.shape.full`.
+- Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
+- Type level is now `subtext.lg` (previously `subtext.md`).
+- Padding and spacing have been adjusted to accommodate the new styling.
+
 ### Navigation Components
 
 #### Hyperlink
@@ -789,12 +969,6 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
   TextInput `shape.lg` (12px).
 - GoToForm spacing uses `marginInlineStart: gap.xs` alongside Controls `gap.xs`.
 
-### Popup
-
-#### Visual Updates
-
-- `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
-
 ### Segmented Control
 
 **PR:** [#4048](https://github.com/Workday/canvas-kit/pull/4048)
@@ -815,53 +989,6 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
 - Container padding changed to `padding.md` (16px) including for mobile devices.
 - On mobile devices, the container padding remains `padding.md` (16px).
 
-### Table
-
-#### Visual Updates
-
-- `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
-  `system.legacy.color.border.default`.
-- `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
-  `system.legacy.color.border.default`.
-- Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
-  `cornerShapeStencil` (see [New Utilities](#new-utilities)).
-- `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
-  sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
-- Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
-  from the table container).
-
-### Toast
-
-**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
-
-#### Visual Updates
-
-- Padding is now applied to the `Toast` container itself instead of being distributed across
-  `Toast.Body` and `Toast.Icon`.
-- Gap between the icon, body, and close icon is now `base.size150` (12px).
-- Shape uses `system.shape.xl`.
-- Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
-- `Toast.Body` no longer has a gap between text and link.
-- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
-  LTR).
-- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
-
-### Tooltip
-
-**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
-
-#### Visual Updates
-
-- The default tooltip has been restyled from a dark surface to a light surface.
-- A visible border (`system.color.border.default`) is now applied to the container, replacing the
-  previous transparent outline.
-- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
-  Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
-- Shape is now fully rounded using `system.shape.full`.
-- Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
-- Type level is now `subtext.lg` (previously `subtext.md`).
-- Padding and spacing have been adjusted to accommodate the new styling.
-
 ## New Utilities
 
 ### cornerShapeStencil
@@ -891,13 +1018,6 @@ export const myStencil = createStencil({
 `Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`),
 `MultiSelect`, and `Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
 
-## Fonts
-
-Sana Canvas is a new theme available in v16, enabled by setting `data-theme="sana-canvas"` on
-`<html>` (or a scoped ancestor element). See our
-[Fonts guide](https://workday.github.io/canvas-kit/?path=/docs/guides-fonts--docs) for instructions
-on setting up the Sana Sans font required by this theme.
-
 ## Deprecations
 
 We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove