@workday/canvas-kit-docs 16.0.0-alpha.0478-next.0 → 16.0.0-alpha.0483-next.0

package/dist/es6/lib/docs.js

@@ -127743,22 +127743,50 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone"
+                "value": "secondary"
+              }
+            ]
+          },
+          "description": "Sets color styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this\n  variant on dark backgrounds.\n- `secondary`: sets the color to a dark gray (keeps the underline by default). Use this\n  variant on colored backgrounds.",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "linkType",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inline"
               },
               {
                 "kind": "string",
-                "value": "standaloneInverse"
+                "value": "standalone"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "Sets underline behavior for Hyperlink\n- `inline` (default): keeps the underline. Use when the hyperlink appears in body text.\n- `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.",
           "declarations": [
             {
-              "name": "variant",
+              "name": "linkType",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "'inline'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "inline"
+          }
         },
         {
           "kind": "property",
@@ -148805,7 +148833,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "ExternalHyperlink",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/ExternalHyperlink.tsx",
-    "description": "`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the\nlink on a dark or colorful background such as `system.color.accent.info`.",
+    "description": "`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the\nlink on a dark background such as `system.color.accent.info`.",
     "declarations": [
       {
         "name": "ExternalHyperlink",
@@ -148848,22 +148876,50 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone"
+                "value": "secondary"
+              }
+            ]
+          },
+          "description": "Sets color styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this\n  variant on dark backgrounds.\n- `secondary`: sets the color to a dark gray (keeps the underline by default). Use this\n  variant on colored backgrounds.",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "linkType",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inline"
               },
               {
                 "kind": "string",
-                "value": "standaloneInverse"
+                "value": "standalone"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "Sets underline behavior for Hyperlink\n- `inline` (default): keeps the underline. Use when the hyperlink appears in body text.\n- `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.",
           "declarations": [
             {
-              "name": "variant",
+              "name": "linkType",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "'inline'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "inline"
+          }
         },
         {
           "kind": "property",
@@ -148873,7 +148929,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "attribute for the hyperlink URL",
+          "description": "Attribute for the hyperlink URL",
           "declarations": [
             {
               "name": "href",
@@ -149716,22 +149772,50 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone"
+                "value": "secondary"
+              }
+            ]
+          },
+          "description": "Sets color styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this\n  variant on dark backgrounds.\n- `secondary`: sets the color to a dark gray (keeps the underline by default). Use this\n  variant on colored backgrounds.",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "linkType",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inline"
               },
               {
                 "kind": "string",
-                "value": "standaloneInverse"
+                "value": "standalone"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "Sets underline behavior for Hyperlink\n- `inline` (default): keeps the underline. Use when the hyperlink appears in body text.\n- `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.",
           "declarations": [
             {
-              "name": "variant",
+              "name": "linkType",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "'inline'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "inline"
+          }
         },
         {
           "kind": "property",
@@ -149741,7 +149825,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "attribute for the hyperlink URL",
+          "description": "Attribute for the hyperlink URL",
           "declarations": [
             {
               "name": "href",
@@ -266088,22 +266172,50 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone"
+                "value": "secondary"
+              }
+            ]
+          },
+          "description": "Sets color styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this\n  variant on dark backgrounds.\n- `secondary`: sets the color to a dark gray (keeps the underline by default). Use this\n  variant on colored backgrounds.",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "linkType",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inline"
               },
               {
                 "kind": "string",
-                "value": "standaloneInverse"
+                "value": "standalone"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "Sets underline behavior for Hyperlink\n- `inline` (default): keeps the underline. Use when the hyperlink appears in body text.\n- `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.",
           "declarations": [
             {
-              "name": "variant",
+              "name": "linkType",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "'inline'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "inline"
+          }
         },
         {
           "kind": "property",
@@ -266113,7 +266225,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "attribute for the hyperlink URL",
+          "description": "Attribute for the hyperlink URL",
           "declarations": [
             {
               "name": "href",
@@ -455697,22 +455809,50 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "standalone"
+                "value": "secondary"
+              }
+            ]
+          },
+          "description": "Sets color styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes. Use this\n  variant on dark backgrounds.\n- `secondary`: sets the color to a dark gray (keeps the underline by default). Use this\n  variant on colored backgrounds.",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "linkType",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inline"
               },
               {
                 "kind": "string",
-                "value": "standaloneInverse"
+                "value": "standalone"
               }
             ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standaloneInverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
+          "description": "Sets underline behavior for Hyperlink\n- `inline` (default): keeps the underline. Use when the hyperlink appears in body text.\n- `standalone`: removes the underline. Use when a hyperlink is outside paragraph or body text.",
           "declarations": [
             {
-              "name": "variant",
+              "name": "linkType",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/Hyperlink.tsx"
             }
           ],
-          "tags": {}
+          "tags": {
+            "default": "'inline'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "inline"
+          }
         },
         {
           "kind": "property",
@@ -455722,7 +455862,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "string"
           },
-          "description": "attribute for the hyperlink URL",
+          "description": "Attribute for the hyperlink URL",
           "declarations": [
             {
               "name": "href",

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": "15.1.3",
-    "@workday/canvas-kit-preview-react": "15.1.3",
-    "@workday/canvas-kit-react": "15.1.3",
-    "@workday/canvas-kit-react-fonts": "^15.1.3",
-    "@workday/canvas-kit-styling": "15.1.3",
+    "@workday/canvas-kit-labs-react": "15.1.4",
+    "@workday/canvas-kit-preview-react": "15.1.4",
+    "@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": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

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": "15.1.3",
-    "@workday/canvas-kit-preview-react": "15.1.3",
-    "@workday/canvas-kit-react": "15.1.3",
-    "@workday/canvas-kit-react-fonts": "^15.1.3",
-    "@workday/canvas-kit-styling": "15.1.3",
+    "@workday/canvas-kit-labs-react": "15.1.4",
+    "@workday/canvas-kit-preview-react": "15.1.4",
+    "@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": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

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

@@ -37,10 +37,14 @@ Soon to be...
     - [MultiSelect](#multiselect)
   - [Menu](#menu)
   - [Modal](#modal)
+  - [Navigation Components](#navigation-components)
+    - [Hyperlink](#hyperlink)
+    - [Breadcrumbs](#breadcrumbs)
+    - [Pagination](#pagination)
   - [Popup](#popup)
   - [Segmented Control](#segmented-control)
-	- [Toast](#toast)
-	- [Tooltip](#tooltip)
+  - [Toast](#toast)
+  - [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Deprecations](#deprecations)
@@ -409,50 +413,6 @@ 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.
 
-### 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.
-
-### Modal
-
-#### 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]`.
-
 ### Menu
 
 **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)
@@ -511,35 +471,127 @@ selectable menus, see the
 
 ##### Menu.Item
 
-| State                           | v15                                                      | v16                                                                              |
-| ------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| Active/pressed                  | Not styled                                               | `surface.overlay.pressed` background                                             |
-| Focus                           | Solid blue fill (`brand.accent.primary`) and white text  | Inset outline using `brand.border.primary`                                       |
+| State                                     | v15                                                                     | v16                                                                                                                               |
+| ----------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| Active/pressed                            | Not styled                                                              | `surface.overlay.pressed` background                                                                                              |
+| Focus                                     | Solid blue fill (`brand.accent.primary`) and white text                 | Inset outline using `brand.border.primary`                                                                                        |
 | 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`)  |
+| 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
 
 Used in `Select`, `Combobox`, and other listbox menus. Selected states apply when
 `aria-selected="true"`.
 
-| State                             | v15                                                                          | v16                                                                                  |
-| --------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
-| Active/pressed                    | Not styled                                                                   | `surface.overlay.pressed` background                                                 |
-| Focus                             | Solid blue fill (`brand.accent.primary`) and white text                      | Inset outline using `brand.border.primary`                                           |
-| Selected (`aria-selected="true"`) | Solid blue fill and white text (`brand.surface.primary.strong` / `brand.fg.primary.strong`) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) |
-| Selected + Focus                  | Solid blue fill and white text                                               | Inset outline with selected background preserved                                     |
-| 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                            |
+| State                                     | v15                                                                                         | v16                                                                                                                               |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| Active/pressed                            | Not styled                                                                                  | `surface.overlay.pressed` background                                                                                              |
+| Focus                                     | Solid blue fill (`brand.accent.primary`) and white text                                     | Inset outline using `brand.border.primary`                                                                                        |
+| Selected (`aria-selected="true"`)         | Solid blue fill and white text (`brand.surface.primary.strong` / `brand.fg.primary.strong`) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`)                                              |
+| Selected + Focus                          | Solid blue fill and white text                                                              | Inset outline with selected background preserved                                                                                  |
+| 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
+
+#### Visual Updates
+
+- `Modal.Card` box-shadow updated from `system.depth[5]` to `system.depth[6]`.
+
+### Navigation Components
+
+#### Hyperlink
+
+##### Visual Updates
+
+- Default link color uses new link tokens (`system.color.fg.link.default` / `.hover`). Hover and
+  active text is now the darker link-hover blue.
+- Hover and active backgrounds use surface overlay tokens instead of `surface.alt`.
+
+##### New Secondary Variant and `linkType` Prop
+
+A new "secondary" variant and `linkType` prop have been added to `Hyperlink` and
+`ExternalHyperlink`. Color and underline are now controlled by separate props:
+
+| Need                       | API                                           |
+| -------------------------- | --------------------------------------------- |
+| Blue, underlined (default) | _(no props)_                                  |
+| Blue, no underline         | `linkType="standalone"`                       |
+| Inverse, underlined        | `variant="inverse"`                           |
+| Inverse, no underline      | `variant="inverse"` `linkType="standalone"`   |
+| Dark gray, underlined      | `variant="secondary"`                         |
+| Dark gray, no underline    | `variant="secondary"` `linkType="standalone"` |
+
+`variant` is now either 'inverse' or 'secondary'. Underline is controlled by `linkType` which is
+either 'inline' or 'standalone', defaulting to 'inline'. The compound variants `standalone` and
+`standaloneInverse` are **removed**.
+
+```tsx
+import {ExternalHyperlink, Hyperlink} from '@workday/canvas-kit-react/button';
+
+<Hyperlink variant="secondary" href="#secondary-hyperlink">
+  Secondary Hyperlink
+</Hyperlink>
+<Hyperlink linkType="standalone" href="#standalone-hyperlink">
+  Standalone Hyperlink
+</Hyperlink>
+<ExternalHyperlink
+  variant="secondary"
+  linkType="standalone"
+  href="#secondary-standalone-external-hyperlink"
+  iconLabel="Opens new window"
+>
+  Secondary Standalone External Hyperlink
+</ExternalHyperlink>
+```
+
+###### Breaking Change Migration
+
+Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically:
+
+| Before                        | After                                       |
+| ----------------------------- | ------------------------------------------- |
+| `variant="standalone"`        | `linkType="standalone"`                     |
+| `variant="standaloneInverse"` | `variant="inverse"` `linkType="standalone"` |
+
+#### Breadcrumbs
+
+##### Visual Updates
+
+- Trail links (`Breadcrumbs.Link`) use Hyperlink `variant="secondary"` and `linkType="standalone"`.
+  Trail text uses `system.color.fg.default`; hover and active states use surface overlay tokens with
+  underline on hover.
+- The current item (`Breadcrumbs.CurrentItem`) uses `system.color.fg.muted.default`.
+- Overflow and separator chevrons use muted/strong foreground colors with
+  `component.legacy.systemIcon.size.md`.
+
+#### Pagination
+
+##### Visual Updates
+
+- Page buttons use overlay hover/pressed backgrounds and a focus ring (aligned with the
+  TertiaryButton pattern). The current page uses `system.color.brand.accent.primary` with inverse
+  label text.
+- Control chevrons (previous/next and jump controls) are sized to 16px via
+  `component.legacy.systemIcon.size.xs`.
+- GoTo label uses `size="large"` (14px). GoTo input text is centered; border radius inherits from
+  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)
 
-
 #### Visual Updates
 
-- Container background changed from `surface.alt.strong` to `surface.alt.default` (a lighter background color).
+- Container background changed from `surface.alt.strong` to `surface.alt.default` (a lighter
+  background color).
 - Border radius changed to `shape.full` (full rounded corners) on the container.
 - Grid gap reduced from `gap.sm` (8px) to `gap.xs` (4px).
 - Selected/pressed item now uses boxShadow: system.depth[2] instead of a visible border.
@@ -547,10 +599,43 @@ Used in `Select`, `Combobox`, and other listbox menus. Selected states apply whe
 - Medium size now uses semi-bold font weight.
 - Size adjustments: large height shrunk to size.sm (32px) (was size.md (40px));
 - Medium size is now 28px in height (was 32px).
-- Hover and pressed states now use `surface.overlay.hover.default` and `surface.overlay.pressed.default` respectively for the item.
+- Hover and pressed states now use `surface.overlay.hover.default` and
+  `surface.overlay.pressed.default` respectively for the item.
 - Container padding changed to `padding.md` (16px) including for mobile devices.
 - On mobile devices, the container padding remains `padding.md` (16px).
 
+### 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

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -6,6 +6,7 @@ import ExternalLinkRTL from './examples/ExternalHyperlinkRTL';
 import Link from './examples/Hyperlink';
 import InBodyText from './examples/HyperlinkInBodyText';
 import LinkInverse from './examples/HyperlinkInverse';
+import SecondaryLink from './examples/SecondaryHyperlink';
 import StandaloneLink from './examples/StandaloneHyperlink';
 
 
@@ -33,31 +34,44 @@ the current page. By default, `Hyperlink`s have an underline for accessibility.
 #### Inverse
 
 `Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink`
-on a dark or colorful background.
+on a dark background.
 
 <ExampleCodeBlock code={LinkInverse} />
 
-#### Standalone
+#### Secondary
+
+`Hyperlink`s also have a `secondary` variant. This is a dark gray alternate to the default blue
+hyperlink. Use this variant when you need to place a `Hyperlink` on a colored background.
 
-`Hyperlink`s also have a `standalone` variant. Use this variant when you need to place a `Hyperlink`
-outside of a paragraph or body text. This will remove the underline.
+<ExampleCodeBlock code={SecondaryLink} />
 
-This variant can also be used with the `ExternalHyperlink` component.
+#### Standalone
+
+Use `linkType="standalone"` when you need to place a `Hyperlink` outside of paragraph or body text,
+such as in a button group or navigation list. This removes the underline. By default, `linkType` is
+`"inline"` and links are underlined.
 
 <ExampleCodeBlock code={StandaloneLink} />
 
+> **Accessibility Note:** Only use `linkType="standalone"` when something other than color already
+> shows it's a link — for example, it's set apart from surrounding content, like in a button or
+> navigation list. Never use `linkType="standalone"` for links embedded in body copy; a hover-only
+> underline is not enough for inline links to meet
+> [WCAG v2.2 success criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html).
+
 #### In Body Text
 
-In most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence where you need to
-link to another page or part of the document. By default they will wrap to a new line.
+In most cases use `Hyperlink` and `ExternalHyperlink` with the default `linkType="inline"` in body
+text of a sentence where you need to link to another page or part of the document. By default they
+will wrap to a new line.
 
 <ExampleCodeBlock code={InBodyText} />
 
 > **Accessibility Note:** Underlining links is not required in most cases. However, the example
 > above is one such exception. When hyperlinked text appears inline with static text, a text
-> decoration is required to avoid failing WCAG v2.2 success criterion 1.4.1 Use of Color.
->
-> [Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73)
+> decoration is required to avoid
+> [failing WCAG v2.2 success criterion 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73).
+> Do not use `linkType="standalone"` here, as removing the underline would fail this criterion.
 
 ### Accessibility
 
@@ -98,7 +112,7 @@ users know about the behavior by adding an icon, `externalLinkIcon`.
 <ExampleCodeBlock code={ExternalLink} />
 
 `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
-link on a dark or colorful background.
+link on a dark background.
 
 <ExampleCodeBlock code={ExternalLinkInverse} />
 

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -23,7 +23,8 @@ export default () => (
     </ExternalHyperlink>
     <ExternalHyperlink
       href="https://workday.com"
-      variant="standaloneInverse"
+      variant="inverse"
+      linkType="standalone"
       iconLabel="Opens new window"
     >
       Hyperlink

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -17,7 +17,7 @@ export default () => (
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>
-    <Hyperlink href="#hyperlink" variant="standaloneInverse">
+    <Hyperlink href="#hyperlink" variant="inverse" linkType="standalone">
       Hyperlink
     </Hyperlink>
   </Box>

package/dist/mdx/react/button/button/examples/SecondaryHyperlink.tsx

@@ -0,0 +1,18 @@
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  backgroundColor: system.legacy.color.surface.info.default,
+  padding: system.padding.md,
+  display: 'inline-flex',
+  gap: system.gap.md,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Hyperlink variant="secondary" href="#secondary-hyperlink">
+      Hyperlink
+    </Hyperlink>
+  </div>
+);

package/dist/mdx/react/button/button/examples/StandaloneHyperlink.tsx

@@ -9,15 +9,8 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Hyperlink variant="standalone" href="#standalone-hyperlink">
-      Standalone Hyperlink
+    <Hyperlink linkType="standalone" href="#standalone-hyperlink">
+      Hyperlink
     </Hyperlink>
-    <ExternalHyperlink
-      variant="standalone"
-      href="#standalone-external-hyperlink"
-      iconLabel="Opens new window"
-    >
-      Standalone External Hyperlink
-    </ExternalHyperlink>
   </div>
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.0-alpha.0478-next.0",
+  "version": "16.0.0-alpha.0483-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,12 +47,12 @@
     "@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.0-alpha.0478-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0478-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0478-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0478-next.0",
+    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0483-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0483-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0483-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0483-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.6",
+    "@workday/canvas-tokens-web": "4.4.0-beta.7",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "d84620c64bada313ccd29fa9672193473f9b5633"
+  "gitHead": "d78aaca7a4894a345fbf05f88ba6e84b41b8028b"
 }