@workday/canvas-kit-react 16.0.0-alpha.0492-next.0 → 16.0.0-alpha.0494-next.0

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -24,7 +24,7 @@ export declare const useSidePanelContainer: import("@workday/canvas-kit-react/co
     readonly 'aria-labelledby': string;
     readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
 }>;
-export type SidePanelVariant = 'standard' | 'alternate';
+export type SidePanelVariant = 'standard' | 'alternative' | 'overlay';
 export interface SidePanelProps extends CSProps {
     /**
      * The width of the component (in `px` if it's a `number`) when it is collapsed.
@@ -39,7 +39,10 @@ export interface SidePanelProps extends CSProps {
      */
     expandedWidth?: number | string;
     /**
-     * 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).
+     * The style variant of the side panel.
+     * - `'standard'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.
+     * - `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.
+     * - `'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.
      *
      * @default 'standard'
      */
@@ -48,9 +51,12 @@ export interface SidePanelProps extends CSProps {
 }
 export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
     variant: {
-        alternate: {
+        overlay: {
             backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
-            boxShadow: "--cnvs-sys-depth-3";
+            boxShadow: "--cnvs-sys-depth-6";
+        };
+        alternative: {
+            backgroundColor: "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))";
         };
         standard: {
             backgroundColor: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
@@ -183,8 +189,10 @@ export declare const SidePanel: import("@workday/canvas-kit-react/common").Eleme
      * It must be used within the `SidePanel` component as a child. For accessibility purposes,
      * it should be the first focusable element in the panel.
      *
-     * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
-     * attributes from the model.
+     * The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
+     * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
+     * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
+     * conveys the state, so the label should not change between states.
      */
     ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
         state: {

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAOzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAOzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4CvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;;;OASG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -24,20 +24,21 @@ exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "3xkmej", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    base: { name: "266imo", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
     modifiers: {
         variant: {
-            alternate: { name: "qm016", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-3);" },
-            standard: { name: "49u57x", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
+            overlay: { name: "3jhjbz", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-6);" },
+            alternative: { name: "zloh7", styles: "background-color:var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));" },
+            standard: { name: "1ujtij", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
         },
         expanded: {
-            expanded: { name: "10sdoy", styles: "width:var(--expandedWidth-panel-4d5fea);max-width:var(--expandedWidth-panel-4d5fea);" },
-            collapsed: { name: "4a8knn", styles: "width:var(--collapsedWidth-panel-4d5fea);max-width:var(--collapsedWidth-panel-4d5fea);" },
-            expanding: { name: "4fjnf5", styles: "width:var(--expandedWidth-panel-4d5fea);max-width:var(--expandedWidth-panel-4d5fea);" },
-            collapsing: { name: "2aexv1", styles: "width:var(--collapsedWidth-panel-4d5fea);max-width:var(--collapsedWidth-panel-4d5fea);" }
+            expanded: { name: "2ii7mh", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
+            collapsed: { name: "31yo9a", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" },
+            expanding: { name: "3i6sk2", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
+            collapsing: { name: "fh1bz", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" }
         }
     }
-}, "panel-4d5fea");
+}, "panel-bd0abc");
 exports.SidePanel = (0, common_1.createContainer)('section')({
     displayName: 'SidePanel',
     modelHook: useSidePanelModel_1.useSidePanelModel,
@@ -48,8 +49,10 @@ exports.SidePanel = (0, common_1.createContainer)('section')({
          * It must be used within the `SidePanel` component as a child. For accessibility purposes,
          * it should be the first focusable element in the panel.
          *
-         * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
-         * attributes from the model.
+         * The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
+         * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
+         * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
+         * conveys the state, so the label should not change between states.
          */
         ToggleButton: SidePanelToggleButton_1.SidePanelToggleButton,
         /**

package/dist/commonjs/side-panel/lib/SidePanelHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAalC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAa3B,CAAC"}
+{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAsBlC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAa3B,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanelHeading.js

@@ -9,11 +9,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useSidePanelModel_1 = require("./useSidePanelModel");
 exports.sidePanelHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.headingStencil,
-    base: { name: "29j364", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" },
+    base: { name: "1ywp21", styles: "box-sizing:border-box;display:flex;align-items:center;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));margin:0;&:where([hidden]){display:none;}" },
     modifiers: {
         origin: {
-            end: { name: "1gqhu9", styles: "padding-inline-start:4.25rem;" },
-            start: { name: "3nytm5", styles: "" }
+            end: { name: "397xkx", styles: "padding-inline-start:4.25rem;" },
+            start: { name: "y9ngj", styles: "" }
         }
     }
 }, "side-panel-heading-9d38c2");

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts

@@ -22,43 +22,31 @@ export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-s
     state: {
         collapsing: {
             margin: number;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
         collapsed: {
             margin: string;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
         expanded: {
             margin: number;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
         expanding: {
             margin: number;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
     };
     origin: {
-        start: {};
+        start: {
+            insetInlineEnd: "var(--cnvs-base-size-150, 0.75rem)";
+        };
         end: {
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
+            insetInlineStart: "var(--cnvs-base-size-150, 0.75rem)";
         };
     };
 }, {}, {}, never, never>;
+/**
+ * Adds the necessary ARIA attributes to the SidePanel's toggle button.
+ * This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
+ * state, and `aria-describedby` pointing at the panel's heading.
+ */
 export declare const useSidePanelToggleButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         panelId: string;

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6FvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA+CjC,CAAC"}
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;wBAiCvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EAkDjC,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -10,38 +10,25 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useSidePanelModel_1 = require("./useSidePanelModel");
 exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "m5gs4", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
+    base: { name: "1tc2s5", styles: "box-sizing:border-box;position:absolute;top:0.75rem;width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));:dir(rtl){transform:scaleX(-1);}" },
     modifiers: {
         state: {
-            collapsing: { name: "3rq73c", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "18lqej", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "3v226x", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "23t2q", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "188d5g", styles: "margin:0;" },
+            collapsed: { name: "32hqvm", styles: "margin:auto;" },
+            expanded: { name: "1k9rz5", styles: "margin:0;" },
+            expanding: { name: "2joyzc", styles: "margin:0;" }
         },
         origin: {
-            start: { name: "hupej", styles: "" },
-            end: { name: "1tkgl8", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+            start: { name: "2j8xn2", styles: "inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
+            end: { name: "1pjclt", styles: "inset-inline-start:var(--cnvs-base-size-150, 0.75rem);" }
         }
-    },
-    compound: [
-        {
-            modifiers: { state: 'collapsed', origin: 'end' },
-            styles: { name: "34caxq", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
-        },
-        {
-            modifiers: { state: 'collapsing', origin: 'end' },
-            styles: { name: "1xw2ag", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
-        },
-        {
-            modifiers: { state: 'expanded', origin: 'end' },
-            styles: { name: "jlmhn", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
-        },
-        {
-            modifiers: { state: 'expanding', origin: 'end' },
-            styles: { name: "385gh9", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
-        }
-    ]
-}, "side-panel-toggle-button-e78d70");
+    }
+}, "side-panel-toggle-button-61b45f");
+/**
+ * Adds the necessary ARIA attributes to the SidePanel's toggle button.
+ * This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
+ * state, and `aria-describedby` pointing at the panel's heading.
+ */
 exports.useSidePanelToggleButton = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
     return {
         'aria-controls': state.panelId,
@@ -53,9 +40,10 @@ exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
     displayName: 'SidePanel.ToggleButton',
     modelHook: useSidePanelModel_1.useSidePanelModel,
     elemPropsHook: exports.useSidePanelToggleButton,
-})(({ variant = undefined, icon = canvas_system_icons_web_1.extendIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+})(({ variant = undefined, icon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+    const sidePanelIcon = icon || (model.state.origin === 'start' ? canvas_system_icons_web_1.sidebarLeftIcon : canvas_system_icons_web_1.sidebarRightIcon);
     return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
-            (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, "aria-label": tooltipText, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
+            (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: sidePanelIcon, as: Element, variant: variant, "aria-label": tooltipText, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
                 state: model.state.transitionState,
                 origin: model.state.origin,
             })), onClick: (event) => {

package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts

@@ -27,7 +27,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
     panelId: string;
     /**
      * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+     * attribute on the toggle button.
      */
     labelId: string;
     /**
@@ -43,8 +44,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -77,8 +78,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -111,8 +112,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -145,8 +146,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -180,8 +181,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -214,8 +215,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -248,8 +249,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -282,8 +283,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -317,8 +318,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -388,7 +389,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
     panelId: string;
     /**
      * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+     * attribute on the toggle button.
      */
     labelId: string;
     /**
@@ -403,8 +405,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
      */
     panelId: string;
     /**
-     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-     * and toggle button to provide an accessible name.
+     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+     * provide its accessible name, and for `aria-describedby` on the toggle button.
      */
     labelId: string;
     /**
@@ -459,8 +461,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**

package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;;IArGH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;IAsBlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IA7DH;;;OAGG;;IAEH;;;;;OAKG;;IAYH;;;;OAIG;6BACsB,yBAAyB;;IAuClD;;;OAGG;;IAKH;;;OAGG;;IAKH;;;;OAIG;8BACuB,qBAAqB,CAAC,cAAc,CAAC;IAW/D;;;OAGG;;;;QApDH;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;EAYL,CAAC"}
+{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;;IAtGH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;IAsBlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IA9DH;;;OAGG;;IAEH;;;;;OAKG;;IAaH;;;;OAIG;6BACsB,yBAAyB;;IAuClD;;;OAGG;;IAKH;;;OAGG;;IAKH;;;;OAIG;8BACuB,qBAAqB,CAAC,cAAc,CAAC;IAW/D;;;OAGG;;;;QApDH;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;EAYL,CAAC"}

package/dist/commonjs/side-panel/lib/useSidePanelModel.js

@@ -47,7 +47,8 @@ exports.useSidePanelModel = (0, common_1.createModelHook)({
         panelId: '',
         /**
          * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-         * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+         * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+         * attribute on the toggle button.
          */
         labelId: '',
         /**
@@ -75,8 +76,8 @@ exports.useSidePanelModel = (0, common_1.createModelHook)({
          */
         panelId,
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId,
         /**

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -24,7 +24,7 @@ export declare const useSidePanelContainer: import("@workday/canvas-kit-react/co
     readonly 'aria-labelledby': string;
     readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
 }>;
-export type SidePanelVariant = 'standard' | 'alternate';
+export type SidePanelVariant = 'standard' | 'alternative' | 'overlay';
 export interface SidePanelProps extends CSProps {
     /**
      * The width of the component (in `px` if it's a `number`) when it is collapsed.
@@ -39,7 +39,10 @@ export interface SidePanelProps extends CSProps {
      */
     expandedWidth?: number | string;
     /**
-     * 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).
+     * The style variant of the side panel.
+     * - `'standard'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.
+     * - `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.
+     * - `'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.
      *
      * @default 'standard'
      */
@@ -48,9 +51,12 @@ export interface SidePanelProps extends CSProps {
 }
 export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
     variant: {
-        alternate: {
+        overlay: {
             backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
-            boxShadow: "--cnvs-sys-depth-3";
+            boxShadow: "--cnvs-sys-depth-6";
+        };
+        alternative: {
+            backgroundColor: "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))";
         };
         standard: {
             backgroundColor: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
@@ -183,8 +189,10 @@ export declare const SidePanel: import("@workday/canvas-kit-react/common").Eleme
      * It must be used within the `SidePanel` component as a child. For accessibility purposes,
      * it should be the first focusable element in the panel.
      *
-     * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
-     * attributes from the model.
+     * The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
+     * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
+     * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
+     * conveys the state, so the label should not change between states.
      */
     ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
         state: {

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAOzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAOzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4CvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;;;OASG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -21,20 +21,21 @@ export const panelStencil = createStencil({
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "3xkmej", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    base: { name: "266imo", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
     modifiers: {
         variant: {
-            alternate: { name: "qm016", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-3);" },
-            standard: { name: "49u57x", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
+            overlay: { name: "3jhjbz", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-6);" },
+            alternative: { name: "zloh7", styles: "background-color:var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));" },
+            standard: { name: "1ujtij", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
         },
         expanded: {
-            expanded: { name: "10sdoy", styles: "width:var(--expandedWidth-panel-4d5fea);max-width:var(--expandedWidth-panel-4d5fea);" },
-            collapsed: { name: "4a8knn", styles: "width:var(--collapsedWidth-panel-4d5fea);max-width:var(--collapsedWidth-panel-4d5fea);" },
-            expanding: { name: "4fjnf5", styles: "width:var(--expandedWidth-panel-4d5fea);max-width:var(--expandedWidth-panel-4d5fea);" },
-            collapsing: { name: "2aexv1", styles: "width:var(--collapsedWidth-panel-4d5fea);max-width:var(--collapsedWidth-panel-4d5fea);" }
+            expanded: { name: "2ii7mh", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
+            collapsed: { name: "31yo9a", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" },
+            expanding: { name: "3i6sk2", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
+            collapsing: { name: "fh1bz", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" }
         }
     }
-}, "panel-4d5fea");
+}, "panel-bd0abc");
 export const SidePanel = createContainer('section')({
     displayName: 'SidePanel',
     modelHook: useSidePanelModel,
@@ -45,8 +46,10 @@ export const SidePanel = createContainer('section')({
          * It must be used within the `SidePanel` component as a child. For accessibility purposes,
          * it should be the first focusable element in the panel.
          *
-         * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
-         * attributes from the model.
+         * The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
+         * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
+         * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
+         * conveys the state, so the label should not change between states.
          */
         ToggleButton: SidePanelToggleButton,
         /**

package/dist/es6/side-panel/lib/SidePanelHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAalC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAa3B,CAAC"}
+{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAsBlC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAa3B,CAAC"}

package/dist/es6/side-panel/lib/SidePanelHeading.js

@@ -6,11 +6,11 @@ import { system } from '@workday/canvas-tokens-web';
 import { useSidePanelModel } from './useSidePanelModel';
 export const sidePanelHeadingStencil = createStencil({
     extends: headingStencil,
-    base: { name: "29j364", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" },
+    base: { name: "1ywp21", styles: "box-sizing:border-box;display:flex;align-items:center;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));margin:0;&:where([hidden]){display:none;}" },
     modifiers: {
         origin: {
-            end: { name: "1gqhu9", styles: "padding-inline-start:4.25rem;" },
-            start: { name: "3nytm5", styles: "" }
+            end: { name: "397xkx", styles: "padding-inline-start:4.25rem;" },
+            start: { name: "y9ngj", styles: "" }
         }
     }
 }, "side-panel-heading-9d38c2");

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts

@@ -22,43 +22,31 @@ export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-s
     state: {
         collapsing: {
             margin: number;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
         collapsed: {
             margin: string;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
         expanded: {
             margin: number;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
         expanding: {
             margin: number;
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
         };
     };
     origin: {
-        start: {};
+        start: {
+            insetInlineEnd: "var(--cnvs-base-size-150, 0.75rem)";
+        };
         end: {
-            transform: string;
-            ':dir(rtl)': {
-                transform: string;
-            };
+            insetInlineStart: "var(--cnvs-base-size-150, 0.75rem)";
         };
     };
 }, {}, {}, never, never>;
+/**
+ * Adds the necessary ARIA attributes to the SidePanel's toggle button.
+ * This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
+ * state, and `aria-describedby` pointing at the panel's heading.
+ */
 export declare const useSidePanelToggleButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         panelId: string;

package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6FvC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA+CjC,CAAC"}
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;wBAiCvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EAkDjC,CAAC"}

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -2,43 +2,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { extendIcon } from '@workday/canvas-system-icons-web';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { sidebarLeftIcon, sidebarRightIcon } from '@workday/canvas-system-icons-web';
 import { base, system } from '@workday/canvas-tokens-web';
 import { useSidePanelModel } from './useSidePanelModel';
 export const sidePanelToggleButtonStencil = createStencil({
-    base: { name: "m5gs4", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
+    base: { name: "1tc2s5", styles: "box-sizing:border-box;position:absolute;top:0.75rem;width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));:dir(rtl){transform:scaleX(-1);}" },
     modifiers: {
         state: {
-            collapsing: { name: "3rq73c", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "18lqej", styles: "margin:auto;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "3v226x", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "23t2q", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "188d5g", styles: "margin:0;" },
+            collapsed: { name: "32hqvm", styles: "margin:auto;" },
+            expanded: { name: "1k9rz5", styles: "margin:0;" },
+            expanding: { name: "2joyzc", styles: "margin:0;" }
         },
         origin: {
-            start: { name: "hupej", styles: "" },
-            end: { name: "1tkgl8", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
+            start: { name: "2j8xn2", styles: "inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
+            end: { name: "1pjclt", styles: "inset-inline-start:var(--cnvs-base-size-150, 0.75rem);" }
         }
-    },
-    compound: [
-        {
-            modifiers: { state: 'collapsed', origin: 'end' },
-            styles: { name: "34caxq", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
-        },
-        {
-            modifiers: { state: 'collapsing', origin: 'end' },
-            styles: { name: "1xw2ag", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
-        },
-        {
-            modifiers: { state: 'expanded', origin: 'end' },
-            styles: { name: "jlmhn", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
-        },
-        {
-            modifiers: { state: 'expanding', origin: 'end' },
-            styles: { name: "385gh9", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
-        }
-    ]
-}, "side-panel-toggle-button-e78d70");
+    }
+}, "side-panel-toggle-button-61b45f");
+/**
+ * Adds the necessary ARIA attributes to the SidePanel's toggle button.
+ * This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
+ * state, and `aria-describedby` pointing at the panel's heading.
+ */
 export const useSidePanelToggleButton = createElemPropsHook(useSidePanelModel)(({ state }) => {
     return {
         'aria-controls': state.panelId,
@@ -50,9 +37,10 @@ export const SidePanelToggleButton = createSubcomponent('button')({
     displayName: 'SidePanel.ToggleButton',
     modelHook: useSidePanelModel,
     elemPropsHook: useSidePanelToggleButton,
-})(({ variant = undefined, icon = extendIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+})(({ variant = undefined, icon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
+    const sidePanelIcon = icon || (model.state.origin === 'start' ? sidebarLeftIcon : sidebarRightIcon);
     return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
-            (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: _jsx(TertiaryButton, { icon: icon, as: Element, variant: variant, "aria-label": tooltipText, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
+            (model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: _jsx(TertiaryButton, { icon: sidePanelIcon, as: Element, variant: variant, "aria-label": tooltipText, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
                 state: model.state.transitionState,
                 origin: model.state.origin,
             })), onClick: (event) => {

package/dist/es6/side-panel/lib/useSidePanelModel.d.ts

@@ -27,7 +27,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
     panelId: string;
     /**
      * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+     * attribute on the toggle button.
      */
     labelId: string;
     /**
@@ -43,8 +44,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -77,8 +78,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -111,8 +112,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -145,8 +146,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -180,8 +181,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -214,8 +215,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -248,8 +249,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -282,8 +283,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -317,8 +318,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**
@@ -388,7 +389,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
     panelId: string;
     /**
      * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+     * attribute on the toggle button.
      */
     labelId: string;
     /**
@@ -403,8 +405,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
      */
     panelId: string;
     /**
-     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-     * and toggle button to provide an accessible name.
+     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+     * provide its accessible name, and for `aria-describedby` on the toggle button.
      */
     labelId: string;
     /**
@@ -459,8 +461,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
          */
         panelId: string;
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId: string;
         /**

package/dist/es6/side-panel/lib/useSidePanelModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;;IArGH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;IAsBlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IA7DH;;;OAGG;;IAEH;;;;;OAKG;;IAYH;;;;OAIG;6BACsB,yBAAyB;;IAuClD;;;OAGG;;IAKH;;;OAGG;;IAKH;;;;OAIG;8BACuB,qBAAqB,CAAC,cAAc,CAAC;IAW/D;;;OAGG;;;;QApDH;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA7DH;;;WAGG;;QAEH;;;;;WAKG;;QAYH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;EAYL,CAAC"}
+{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;;IAtGH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;IAsBlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IA9DH;;;OAGG;;IAEH;;;;;OAKG;;IAaH;;;;OAIG;6BACsB,yBAAyB;;IAuClD;;;OAGG;;IAKH;;;OAGG;;IAKH;;;;OAIG;8BACuB,qBAAqB,CAAC,cAAc,CAAC;IAW/D;;;OAGG;;;;QApDH;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;EAYL,CAAC"}

package/dist/es6/side-panel/lib/useSidePanelModel.js

@@ -21,7 +21,8 @@ export const useSidePanelModel = createModelHook({
         panelId: '',
         /**
          * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-         * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+         * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+         * attribute on the toggle button.
          */
         labelId: '',
         /**
@@ -49,8 +50,8 @@ export const useSidePanelModel = createModelHook({
          */
         panelId,
         /**
-         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-         * and toggle button to provide an accessible name.
+         * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+         * provide its accessible name, and for `aria-describedby` on the toggle button.
          */
         labelId,
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.0.0-alpha.0492-next.0",
+  "version": "16.0.0-alpha.0494-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,8 +53,8 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0492-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0492-next.0",
+    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0494-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0494-next.0",
     "@workday/canvas-system-icons-web": "5.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.13",
     "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "27691d763b93d270f78808ca298848d405c888e1"
+  "gitHead": "7bde57a5a6d4e41fd4a2e08f9f035c609ff4a8f0"
 }

package/side-panel/lib/SidePanel.tsx

@@ -20,7 +20,7 @@ export const useSidePanelContainer = createElemPropsHook(useSidePanelModel)(({st
   };
 });
 
-export type SidePanelVariant = 'standard' | 'alternate';
+export type SidePanelVariant = 'standard' | 'alternative' | 'overlay';
 
 export interface SidePanelProps extends CSProps {
   /**
@@ -36,7 +36,10 @@ export interface SidePanelProps extends CSProps {
    */
   expandedWidth?: number | string;
   /**
-   * 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).
+   * The style variant of the side panel.
+   * - `'standard'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.
+   * - `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.
+   * - `'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.
    *
    * @default 'standard'
    */
@@ -58,9 +61,12 @@ export const panelStencil = createStencil({
   }),
   modifiers: {
     variant: {
-      alternate: {
+      overlay: {
         backgroundColor: system.legacy.color.surface.default,
-        boxShadow: system.depth[3],
+        boxShadow: system.depth[6],
+      },
+      alternative: {
+        backgroundColor: system.legacy.color.surface.raised,
       },
       standard: {
         backgroundColor: system.legacy.color.surface.navigation,
@@ -97,8 +103,10 @@ export const SidePanel = createContainer('section')({
      * It must be used within the `SidePanel` component as a child. For accessibility purposes,
      * it should be the first focusable element in the panel.
      *
-     * The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
-     * attributes from the model.
+     * The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
+     * when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
+     * Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
+     * conveys the state, so the label should not change between states.
      */
     ToggleButton: SidePanelToggleButton,
     /**

package/side-panel/lib/SidePanelHeading.tsx

@@ -23,7 +23,16 @@ export interface SidePanelHeadingProps extends Omit<ExtractProps<typeof Heading,
 export const sidePanelHeadingStencil = createStencil({
   extends: headingStencil,
   base: {
-    padding: system.legacy.padding.xs,
+    display: 'flex',
+    alignItems: 'center',
+    padding: system.legacy.padding.sm,
+    paddingInlineStart: system.legacy.padding.md,
+    minHeight: system.legacy.size.xxl,
+    margin: 0,
+    // `display` from this stencil outranks the user agent's `[hidden] {display: none}`
+    '&:where([hidden])': {
+      display: 'none',
+    },
   },
   modifiers: {
     origin: {

package/side-panel/lib/SidePanelToggleButton.tsx

@@ -7,8 +7,8 @@ import {
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {extendIcon} from '@workday/canvas-system-icons-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {sidebarLeftIcon, sidebarRightIcon} from '@workday/canvas-system-icons-web';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {useSidePanelModel} from './useSidePanelModel';
@@ -33,98 +33,43 @@ export interface SidePanelToggleButtonProps extends ExtractProps<typeof Tertiary
 export const sidePanelToggleButtonStencil = createStencil({
   base: {
     position: 'absolute',
-    top: system.legacy.gap.lg,
-    width: system.legacy.gap.lg,
-    insetInlineEnd: base.legacy.size150,
+    top: px2rem(12),
+    width: system.legacy.size.md,
+    ':dir(rtl)': {
+      transform: `scaleX(-1)`,
+    },
   },
   modifiers: {
     state: {
       collapsing: {
         margin: 0,
-        transform: `scaleX(1)`,
-        ':dir(rtl)': {
-          transform: `scaleX(-1)`,
-        },
       },
       collapsed: {
         margin: 'auto',
-        transform: `scaleX(1)`,
-        ':dir(rtl)': {
-          transform: `scaleX(-1)`,
-        },
       },
       expanded: {
         margin: 0,
-        transform: `scaleX(-1)`,
-        ':dir(rtl)': {
-          transform: `scaleX(1)`,
-        },
       },
       expanding: {
         margin: 0,
-        transform: `scaleX(-1)`,
-        ':dir(rtl)': {
-          transform: `scaleX(1)`,
-        },
       },
     },
     origin: {
-      start: {},
-      end: {
-        transform: `scaleX(1)`,
-        ':dir(rtl)': {
-          transform: `scaleX(-1)`,
-        },
-      },
-    },
-  },
-
-  compound: [
-    {
-      modifiers: {state: 'collapsed', origin: 'end'},
-      styles: {
-        transform: `scaleX(-1)`,
-        ':dir(rtl)': {
-          transform: `scaleX(1)`,
-        },
-      },
-    },
-    {
-      modifiers: {state: 'collapsing', origin: 'end'},
-      styles: {
-        transform: `scaleX(-1)`,
-        insetInlineStart: base.legacy.size150,
-        ':dir(rtl)': {
-          transform: `scaleX(1)`,
-          insetInlineEnd: base.legacy.size150,
-        },
-      },
-    },
-    {
-      modifiers: {state: 'expanded', origin: 'end'},
-      styles: {
-        transform: `scaleX(1)`,
-        insetInlineStart: base.legacy.size150,
-        ':dir(rtl)': {
-          transform: `scaleX(-1)`,
-          insetInlineEnd: base.legacy.size150,
-        },
+      start: {
+        insetInlineEnd: base.legacy.size150,
       },
-    },
-    {
-      modifiers: {state: 'expanding', origin: 'end'},
-      styles: {
-        transform: `scaleX(1)`,
+      end: {
         insetInlineStart: base.legacy.size150,
-        ':dir(rtl)': {
-          transform: `scaleX(-1)`,
-          insetInlineEnd: base.legacy.size150,
-        },
       },
     },
-  ],
+  },
 });
 
+/**
+ * Adds the necessary ARIA attributes to the SidePanel's toggle button.
+ * This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
+ * state, and `aria-describedby` pointing at the panel's heading.
+ */
 export const useSidePanelToggleButton = createElemPropsHook(useSidePanelModel)(({state}) => {
   return {
     'aria-controls': state.panelId,
@@ -141,7 +86,7 @@ export const SidePanelToggleButton = createSubcomponent('button')({
   (
     {
       variant = undefined,
-      icon = extendIcon,
+      icon,
       tooltipTextExpand = 'Expand View',
       tooltipTextCollapse = 'Collapse View',
       tooltipProps,
@@ -151,6 +96,9 @@ export const SidePanelToggleButton = createSubcomponent('button')({
     Element,
     model
   ) => {
+    const sidePanelIcon =
+      icon || (model.state.origin === 'start' ? sidebarLeftIcon : sidebarRightIcon);
+
     return (
       <Tooltip
         type="muted"
@@ -161,7 +109,7 @@ export const SidePanelToggleButton = createSubcomponent('button')({
         }
       >
         <TertiaryButton
-          icon={icon}
+          icon={sidePanelIcon}
           as={Element}
           variant={variant}
           aria-label={tooltipText}

package/side-panel/lib/useSidePanelModel.ts

@@ -32,7 +32,8 @@ export const useSidePanelModel = createModelHook({
     panelId: '',
     /**
      * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
-     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     * This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
+     * attribute on the toggle button.
      */
     labelId: '',
     /**
@@ -67,8 +68,8 @@ export const useSidePanelModel = createModelHook({
      */
     panelId,
     /**
-     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
-     * and toggle button to provide an accessible name.
+     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
+     * provide its accessible name, and for `aria-describedby` on the toggle button.
      */
     labelId,
     /**