npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.296 → 3.0.298 - Mend

@cloudscape-design/components-themeable 3.0.296 → 3.0.298

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "897f229628b2517a5191f70e3b465f4140d1a45a"
+  "commit": "8104f14f571588a2e471e211c309c20aa8c1ae2a"
 }

package/lib/internal/scss/app-layout/drawer/styles.scss CHANGED Viewed

@@ -65,36 +65,32 @@ $drawer-z-index-mobile: 1001;
 .trigger {
   .drawer-content > .drawer-triggers > & {
-    padding: constants.$drawers-padding;
-    margin: 1px constants.$drawers-padding-horizontal;
-    border-radius: 0;
+    background: awsui.$color-background-layout-toggle-default;
     border: 0;
+    border-radius: 0;
+    color: awsui.$color-text-layout-toggle;
+    padding: constants.$drawers-padding-vertical awsui.$space-s;
+    margin-top: 1px;
     &:not(:last-child) {
-      box-shadow: 0px 1px awsui.$color-shadow-layout-panel-trigger;
+      box-shadow: 0px 1px awsui.$color-shadow-layout-toggle;
     }
     &-drawer {
       &:hover:not(.selected) {
-        color: awsui.$color-text-layout-panel-trigger-hover;
+        color: awsui.$color-text-layout-toggle-hover;
         &:not(:last-child) {
-          box-shadow: 0px 1px awsui.$color-shadow-layout-panel-trigger;
+          box-shadow: 0px 1px awsui.$color-shadow-layout-toggle;
         }
       }
     }
     &.selected,
     &.selected:hover {
-      padding: constants.$drawers-padding-vertical awsui.$space-s;
-      margin: 0;
-      border-top: 1px solid awsui.$color-background-layout-panel-trigger-active;
-      border-bottom: 1px solid awsui.$color-background-layout-panel-trigger-active;
-      background-color: awsui.$color-background-layout-panel-trigger-active;
-      color: awsui.$color-text-layout-panel-trigger-active;
+      background-color: awsui.$color-background-layout-toggle-selected-default;
+      border-top: 1px solid awsui.$color-background-layout-toggle-selected-default;
       box-shadow: none;
-      &:hover {
-        cursor: default;
-      }
+      color: awsui.$color-text-layout-toggle-active;
+      margin: 0;
     }
   }
 }

package/lib/internal/scss/app-layout/visual-refresh/trigger-button.scss CHANGED Viewed

@@ -21,9 +21,8 @@ handleSplitPanelMaxWidth function in the context.
   cursor: pointer;
   height: awsui.$space-layout-toggle-diameter;
   padding: 0 awsui.$space-s;
-  width: awsui.$space-layout-toggle-diameter;
   pointer-events: auto;
+  width: awsui.$space-layout-toggle-diameter;
   @include focus-visible.when-visible {
     @include styles.focus-highlight(3px);

package/lib/internal/scss/flashbar/collapsible.scss CHANGED Viewed

@@ -199,13 +199,12 @@ the grid layout will be:
 .stack > .notification-bar {
   @include styles.text-wrapping;
-  background: awsui.$color-background-layout-toggle-default;
-  border-color: awsui.$color-background-layout-toggle-default;
+  background: awsui.$color-background-notification-stack-bar;
+  border-color: awsui.$color-border-notification-stack-bar;
   border-radius: awsui.$border-radius-button;
   border-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
-  color: awsui.$color-text-layout-toggle;
+  color: awsui.$color-text-notification-stack-bar;
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -226,7 +225,7 @@ the grid layout will be:
   > .status > .item-count,
   > .button {
     @include typography.default-text-style;
-    color: awsui.$color-text-layout-toggle;
+    color: awsui.$color-text-notification-stack-bar;
     cursor: pointer;
     margin-top: 0;
     margin-bottom: 0;
@@ -262,12 +261,12 @@ the grid layout will be:
   }
   &:hover {
-    background: awsui.$color-background-layout-toggle-hover;
-    border-color: awsui.$color-background-layout-toggle-hover;
+    background: awsui.$color-background-notification-stack-bar-hover;
+    border-color: awsui.$color-background-notification-stack-bar-hover;
   }
   &:active {
-    background: awsui.$color-background-layout-toggle-active;
+    background: awsui.$color-background-notification-stack-bar-active;
   }
   &.visual-refresh {

package/lib/internal/template/app-layout/drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAoC,MAAM,cAAc,CAAC;AAkB5G,eAAO,MAAM,MAAM,2FAyGlB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,sBAAsB,~~eAkCxB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAoC,MAAM,cAAc,CAAC;AAkB5G,eAAO,MAAM,MAAM,2FAyGlB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,sBAAsB,eAoCxB"}

package/lib/internal/template/app-layout/drawer/index.js CHANGED Viewed

@@ -75,7 +75,7 @@ export function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers,
         }) },
         React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['non-interactive']) }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers'], contentClassName) }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
             var _a;
-            return (React.createElement(AppLayoutButton, { className: clsx(toggleClassName, styles.trigger, styles['trigger-drawer'], drawers.activeDrawerId === item.id && styles.selected), key: `drawer-trigger-${index}`, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id }), ariaExpanded: drawers.activeDrawerId !== undefined }));
+            return (React.createElement(AppLayoutButton, { className: clsx(toggleClassName, styles.trigger, styles['trigger-drawer'], drawers.activeDrawerId === item.id && styles.selected), key: `drawer-trigger-${index}`, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined }), ariaExpanded: drawers.activeDrawerId !== undefined }));
         }))))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/drawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n drawerMainLabel: labels?.content,\n drawerOpenLabel: labels?.triggerButton,\n drawerCloseLabel: labels?.closeButton,\n });\n const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <AppLayoutButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['non-interactive'])}\n >\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <AppLayoutButton\n className={clsx(\n toggleClassName,\n styles.trigger,\n styles['trigger-drawer'],\n drawers.activeDrawerId === item.id && styles.selected\n )}\n key={`drawer-trigger-${index}`}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n />\n ))}\n </aside>\n )}\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n drawerMainLabel: labels?.content,\n drawerOpenLabel: labels?.triggerButton,\n drawerCloseLabel: labels?.closeButton,\n });\n const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <AppLayoutButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['non-interactive'])}\n >\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <AppLayoutButton\n className={clsx(\n toggleClassName,\n styles.trigger,\n styles['trigger-drawer'],\n drawers.activeDrawerId === item.id && styles.selected\n )}\n key={`drawer-trigger-${index}`}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n ariaExpanded={drawers.activeDrawerId !== undefined}\n />\n ))}\n </aside>\n )}\n </div>\n </div>\n );\n}\n"]}

package/lib/internal/template/app-layout/drawer/styles.css.js CHANGED Viewed

@@ -1,15 +1,15 @@
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_1dm4c_97",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1dm4c_102",
-  "drawer": "awsui_drawer_1uo6m_1dm4c_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1dm4c_112",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1dm4c_115",
-  "drawer-content": "awsui_drawer-content_1uo6m_1dm4c_123",
-  "non-interactive": "awsui_non-interactive_1uo6m_1dm4c_141",
-  "trigger": "awsui_trigger_1uo6m_1dm4c_149",
-  "trigger-drawer": "awsui_trigger-drawer_1uo6m_1dm4c_158",
-  "selected": "awsui_selected_1uo6m_1dm4c_158"
+  "toggle": "awsui_toggle_1uo6m_1y65i_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1y65i_102",
+  "drawer": "awsui_drawer_1uo6m_1y65i_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1y65i_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_1y65i_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_1y65i_123",
+  "non-interactive": "awsui_non-interactive_1uo6m_1y65i_141",
+  "trigger": "awsui_trigger_1uo6m_1y65i_149",
+  "trigger-drawer": "awsui_trigger-drawer_1uo6m_1y65i_160",
+  "selected": "awsui_selected_1uo6m_1y65i_160"
 };

package/lib/internal/template/app-layout/drawer/styles.scoped.css CHANGED Viewed

@@ -94,82 +94,79 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_toggle_1uo6m_1dm4c_97:not(#\9) {
+.awsui_toggle_1uo6m_1y65i_97:not(#\9) {
   box-sizing: border-box;
   padding: var(--space-xxs-ynfts5, 4px) 7px;
 }
-.awsui_drawer-triggers_1uo6m_1dm4c_102:not(#\9) {
+.awsui_drawer-triggers_1uo6m_1y65i_102:not(#\9) {
   box-sizing: border-box;
 }
-.awsui_drawer_1uo6m_1dm4c_102:not(#\9) {
+.awsui_drawer_1uo6m_1y65i_102:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-v9vx7i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_drawer_1uo6m_1dm4c_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_1dm4c_112) {
+.awsui_drawer_1uo6m_1y65i_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_1y65i_112) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_1dm4c_115:not(#\9) {
+.awsui_drawer-closed_1uo6m_1y65i_115:not(#\9) {
   min-width: 40px;
   cursor: pointer;
 }
-.awsui_drawer-closed_1uo6m_1dm4c_115.awsui_drawer-mobile_1uo6m_1dm4c_112:not(#\9) {
+.awsui_drawer-closed_1uo6m_1y65i_115.awsui_drawer-mobile_1uo6m_1y65i_112:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_1dm4c_123:not(#\9) {
+.awsui_drawer-content_1uo6m_1y65i_123:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_1dm4c_112 > .awsui_drawer-content_1uo6m_1dm4c_123:not(#\9) {
+.awsui_drawer-mobile_1uo6m_1y65i_112 > .awsui_drawer-content_1uo6m_1y65i_123:not(#\9) {
   z-index: 1001;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
-.awsui_drawer-closed_1uo6m_1dm4c_115 > .awsui_drawer-content_1uo6m_1dm4c_123:not(#\9) {
+.awsui_drawer-closed_1uo6m_1y65i_115 > .awsui_drawer-content_1uo6m_1y65i_123:not(#\9) {
   width: 40px;
 }
-.awsui_drawer-closed_1uo6m_1dm4c_115 > .awsui_drawer-content_1uo6m_1dm4c_123:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_1y65i_115 > .awsui_drawer-content_1uo6m_1y65i_123:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-thdv3z, #eaeded);
 }
-.awsui_drawer-closed_1uo6m_1dm4c_115 > .awsui_drawer-content_1uo6m_1dm4c_123.awsui_non-interactive_1uo6m_1dm4c_141:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_1y65i_115 > .awsui_drawer-content_1uo6m_1y65i_123.awsui_non-interactive_1uo6m_1y65i_141:not(#\9):hover {
   background: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
   cursor: default;
 }
-.awsui_drawer-content_1uo6m_1dm4c_123 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_1y65i_123 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger_1uo6m_1dm4c_149:not(#\9) {
-  padding: var(--space-scaled-xs-6859qs, 8px) 6px;
-  margin: 1px 6px;
-  border-radius: 0;
+.awsui_drawer-content_1uo6m_1y65i_123 > .awsui_drawer-triggers_1uo6m_1y65i_102 > .awsui_trigger_1uo6m_1y65i_149:not(#\9) {
+  background: var(--color-background-layout-toggle-default-wvi0uj, transparent);
   border: 0;
+  border-radius: 0;
+  color: var(--color-text-layout-toggle-3a24mh, #545b64);
+  padding: var(--space-scaled-xs-6859qs, 8px) var(--space-s-hv8c1d, 12px);
+  margin-top: 1px;
 }
-.awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger_1uo6m_1dm4c_149:not(#\9):not(:last-child) {
-  box-shadow: 0px 1px var(--color-shadow-layout-panel-trigger-lceo1i, #d5dbdb);
+.awsui_drawer-content_1uo6m_1y65i_123 > .awsui_drawer-triggers_1uo6m_1y65i_102 > .awsui_trigger_1uo6m_1y65i_149:not(#\9):not(:last-child) {
+  box-shadow: 0px 1px var(--color-shadow-layout-toggle-ys7l56, #d5dbdb);
 }
-.awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger-drawer_1uo6m_1dm4c_158:not(#\9):hover:not(.awsui_selected_1uo6m_1dm4c_158) {
-  color: var(--color-text-layout-panel-trigger-hover-5qaiq9, #0073bb);
+.awsui_drawer-content_1uo6m_1y65i_123 > .awsui_drawer-triggers_1uo6m_1y65i_102 > .awsui_trigger-drawer_1uo6m_1y65i_160:not(#\9):hover:not(.awsui_selected_1uo6m_1y65i_160) {
+  color: var(--color-text-layout-toggle-hover-hsrbuh, #0073bb);
 }
-.awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger-drawer_1uo6m_1dm4c_158:not(#\9):hover:not(.awsui_selected_1uo6m_1dm4c_158):not(:last-child) {
-  box-shadow: 0px 1px var(--color-shadow-layout-panel-trigger-lceo1i, #d5dbdb);
+.awsui_drawer-content_1uo6m_1y65i_123 > .awsui_drawer-triggers_1uo6m_1y65i_102 > .awsui_trigger-drawer_1uo6m_1y65i_160:not(#\9):hover:not(.awsui_selected_1uo6m_1y65i_160):not(:last-child) {
+  box-shadow: 0px 1px var(--color-shadow-layout-toggle-ys7l56, #d5dbdb);
 }
-.awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger_1uo6m_1dm4c_149.awsui_selected_1uo6m_1dm4c_158:not(#\9), .awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger_1uo6m_1dm4c_149.awsui_selected_1uo6m_1dm4c_158:not(#\9):hover {
-  padding: var(--space-scaled-xs-6859qs, 8px) var(--space-s-hv8c1d, 12px);
-  margin: 0;
-  border-top: 1px solid var(--color-background-layout-panel-trigger-active-opo2jh, #0073bb);
-  border-bottom: 1px solid var(--color-background-layout-panel-trigger-active-opo2jh, #0073bb);
-  background-color: var(--color-background-layout-panel-trigger-active-opo2jh, #0073bb);
-  color: var(--color-text-layout-panel-trigger-active-km1y5a, #ffffff);
+.awsui_drawer-content_1uo6m_1y65i_123 > .awsui_drawer-triggers_1uo6m_1y65i_102 > .awsui_trigger_1uo6m_1y65i_149.awsui_selected_1uo6m_1y65i_160:not(#\9), .awsui_drawer-content_1uo6m_1y65i_123 > .awsui_drawer-triggers_1uo6m_1y65i_102 > .awsui_trigger_1uo6m_1y65i_149.awsui_selected_1uo6m_1y65i_160:not(#\9):hover {
+  background-color: var(--color-background-layout-toggle-selected-default-kcqbvr, #0073bb);
+  border-top: 1px solid var(--color-background-layout-toggle-selected-default-kcqbvr, #0073bb);
   box-shadow: none;
-}
-.awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger_1uo6m_1dm4c_149.awsui_selected_1uo6m_1dm4c_158:not(#\9):hover, .awsui_drawer-content_1uo6m_1dm4c_123 > .awsui_drawer-triggers_1uo6m_1dm4c_102 > .awsui_trigger_1uo6m_1dm4c_149.awsui_selected_1uo6m_1dm4c_158:not(#\9):hover:hover {
-  cursor: default;
+  color: var(--color-text-layout-toggle-active-y84imf, #ffffff);
+  margin: 0;
 }

package/lib/internal/template/app-layout/drawer/styles.selectors.js CHANGED Viewed

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_1dm4c_97",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1dm4c_102",
-  "drawer": "awsui_drawer_1uo6m_1dm4c_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1dm4c_112",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1dm4c_115",
-  "drawer-content": "awsui_drawer-content_1uo6m_1dm4c_123",
-  "non-interactive": "awsui_non-interactive_1uo6m_1dm4c_141",
-  "trigger": "awsui_trigger_1uo6m_1dm4c_149",
-  "trigger-drawer": "awsui_trigger-drawer_1uo6m_1dm4c_158",
-  "selected": "awsui_selected_1uo6m_1dm4c_158"
+  "toggle": "awsui_toggle_1uo6m_1y65i_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1y65i_102",
+  "drawer": "awsui_drawer_1uo6m_1y65i_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1y65i_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_1y65i_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_1y65i_123",
+  "non-interactive": "awsui_non-interactive_1uo6m_1y65i_141",
+  "trigger": "awsui_trigger_1uo6m_1y65i_149",
+  "trigger-drawer": "awsui_trigger-drawer_1uo6m_1y65i_160",
+  "selected": "awsui_selected_1uo6m_1y65i_160"
 };

package/lib/internal/template/app-layout/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiF,MAAM,OAAO,CAAC;AAMtG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;~~AA2sBF~~,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiF,MAAM,OAAO,CAAC;AAMtG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAysBF,eAAe,SAAS,CAAC"}

package/lib/internal/template/app-layout/index.js CHANGED Viewed

@@ -400,9 +400,9 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                                     hasBreadcrumbs: !!breadcrumbs,
                                 } }, content))),
                     finalSplitPanePosition === 'bottom' && splitPanelWrapped),
-                finalSplitPanePosition === 'side' && (React.createElement(SideSplitPanelDrawer, { topOffset: headerHeight, bottomOffset: footerHeight, displayed: splitPanelDisplayed, width: splitPanelOpen ? splitPanelSize : undefined }, splitPanelWrapped)),
+                finalSplitPanePosition === 'side' && (React.createElement(SideSplitPanelDrawer, { topOffset: headerHeight, bottomOffset: footerHeight, displayed: splitPanelDisplayed, width: splitPanelOpen && splitPanel ? splitPanelSize : undefined }, splitPanelWrapped)),
                 ((hasDrawers && (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id)) || (!hasDrawers && !toolsHide)) &&
-                    (hasDrawers ? (React.createElement(ResizableDrawer, { contentClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools' ? testutilStyles.tools : testutilStyles['active-drawer'], toggleClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools' ? testutilStyles['tools-toggle'] : testutilStyles['drawers-trigger'], closeClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools'
+                    (hasDrawers ? (React.createElement(ResizableDrawer, { contentClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools' ? testutilStyles.tools : testutilStyles['active-drawer'], toggleClassName: testutilStyles['tools-toggle'], closeClassName: (selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.id) === 'tools'
                             ? testutilStyles['tools-close']
                             : testutilStyles['active-drawer-close-button'], ariaLabels: ariaLabels, drawersAriaLabels: selectedDrawer === null || selectedDrawer === void 0 ? void 0 : selectedDrawer.ariaLabels, width: !isResizeInvalid ? drawerSize : toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen || activeDrawerId !== undefined, toggleRefs: toolsRefs, type: "tools", onLoseFocus: hasDrawers ? loseDrawersFocus : loseToolsFocus, activeDrawer: selectedDrawer, drawers: {
                             items: tools && !toolsHide ? [toolsItem, ...drawers.items] : drawers.items,