@cloudscape-design/components-themeable 3.0.349 → 3.0.351

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

@@ -94,79 +94,76 @@ 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_dsezo_97:not(#\9) {
+.awsui_toggle_1uo6m_1fg2f_97:not(#\9) {
   box-sizing: border-box;
   padding: var(--space-xxs-xx079q, 4px) 7px;
 }
 
-.awsui_drawer-triggers_1uo6m_dsezo_102:not(#\9) {
+.awsui_drawer-triggers_1uo6m_1fg2f_102:not(#\9) {
   box-sizing: border-box;
 }
 
-.awsui_drawer_1uo6m_dsezo_102:not(#\9) {
+.awsui_drawer_1uo6m_1fg2f_102:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-5eimfm, 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_dsezo_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_dsezo_112) {
+.awsui_drawer_1uo6m_1fg2f_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_1fg2f_112) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_dsezo_115:not(#\9) {
+.awsui_drawer-closed_1uo6m_1fg2f_115:not(#\9) {
   min-width: 40px;
-  cursor: pointer;
 }
-.awsui_drawer-closed_1uo6m_dsezo_115.awsui_drawer-mobile_1uo6m_dsezo_112:not(#\9) {
+.awsui_drawer-closed_1uo6m_1fg2f_115.awsui_drawer-mobile_1uo6m_1fg2f_112:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_1uo6m_dsezo_123:not(#\9) {
+.awsui_drawer-content_1uo6m_1fg2f_122:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-jx4wcr, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_dsezo_112 > .awsui_drawer-content_1uo6m_dsezo_123:not(#\9) {
+.awsui_drawer-mobile_1uo6m_1fg2f_112 > .awsui_drawer-content_1uo6m_1fg2f_122:not(#\9) {
   z-index: 1001;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
-.awsui_drawer-closed_1uo6m_dsezo_115 > .awsui_drawer-content_1uo6m_dsezo_123:not(#\9) {
+.awsui_drawer-closed_1uo6m_1fg2f_115 > .awsui_drawer-content_1uo6m_1fg2f_122:not(#\9) {
   width: 40px;
 }
-.awsui_drawer-closed_1uo6m_dsezo_115 > .awsui_drawer-content_1uo6m_dsezo_123:not(#\9):hover {
-  background: var(--color-background-layout-panel-hover-yn48lk, #eaeded);
+.awsui_drawer-closed_1uo6m_1fg2f_115 > .awsui_drawer-content_1uo6m_1fg2f_122.awsui_drawer-content-clickable_1uo6m_1fg2f_137:not(#\9) {
+  cursor: pointer;
+  color: var(--color-text-interactive-default-9x433a, #545b64);
 }
-.awsui_drawer-closed_1uo6m_dsezo_115 > .awsui_drawer-content_1uo6m_dsezo_123.awsui_non-interactive_1uo6m_dsezo_141:not(#\9):hover {
-  background: var(--color-background-layout-panel-content-jx4wcr, #ffffff);
-  cursor: default;
+.awsui_drawer-closed_1uo6m_1fg2f_115 > .awsui_drawer-content_1uo6m_1fg2f_122.awsui_drawer-content-clickable_1uo6m_1fg2f_137:not(#\9):hover {
+  background: var(--color-background-layout-panel-hover-yn48lk, #eaeded);
 }
-.awsui_drawer-content_1uo6m_dsezo_123 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_1fg2f_122 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger_1uo6m_dsezo_149:not(#\9) {
-  background: var(--color-background-layout-toggle-default-ra31l6, transparent);
-  border: 0;
-  border-radius: 0;
-  color: var(--color-text-layout-toggle-hg4zdn, #545b64);
-  padding: var(--space-scaled-xs-sg3tfb, 8px) var(--space-s-o95p2n, 12px);
-  margin-top: 1px;
-}
-.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger_1uo6m_dsezo_149:not(#\9):not(:last-child) {
-  box-shadow: 0px 1px var(--color-shadow-layout-toggle-67ezos, #d5dbdb);
-}
-.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger-drawer_1uo6m_dsezo_160:not(#\9):hover:not(.awsui_selected_1uo6m_dsezo_160) {
-  color: var(--color-text-layout-toggle-hover-x3sh37, #0073bb);
+.awsui_drawer-triggers-wrapper_1uo6m_1fg2f_148:not(#\9) {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: stretch;
 }
-.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger-drawer_1uo6m_dsezo_160:not(#\9):hover:not(.awsui_selected_1uo6m_dsezo_160):not(:last-child) {
-  box-shadow: 0px 1px var(--color-shadow-layout-toggle-67ezos, #d5dbdb);
+
+.awsui_drawer-trigger_1uo6m_1fg2f_102:not(#\9) {
+  padding: var(--space-xxs-xx079q, 4px) 7px;
+  cursor: pointer;
+  color: var(--color-text-interactive-default-9x433a, #545b64);
+}
+.awsui_drawer-trigger_1uo6m_1fg2f_102:not(#\9):not(:first-child) {
+  border-top: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
+}
+.awsui_drawer-trigger_1uo6m_1fg2f_102:not(#\9):hover {
+  color: var(--color-text-layout-toggle-hover-x3sh37, #0073bb);
 }
-.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger_1uo6m_dsezo_149.awsui_selected_1uo6m_dsezo_160:not(#\9), .awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger_1uo6m_dsezo_149.awsui_selected_1uo6m_dsezo_160:not(#\9):hover {
+.awsui_drawer-trigger-active_1uo6m_1fg2f_166:not(#\9), .awsui_drawer-trigger-active_1uo6m_1fg2f_166:not(#\9):hover {
   background-color: var(--color-background-layout-toggle-selected-default-ksjxnl, #0073bb);
-  border-top: 1px solid var(--color-background-layout-toggle-selected-default-ksjxnl, #0073bb);
-  box-shadow: none;
   color: var(--color-text-layout-toggle-active-xajvuf, #ffffff);
-  margin: 0;
 }

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

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_dsezo_97",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_dsezo_102",
-  "drawer": "awsui_drawer_1uo6m_dsezo_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_dsezo_112",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_dsezo_115",
-  "drawer-content": "awsui_drawer-content_1uo6m_dsezo_123",
-  "non-interactive": "awsui_non-interactive_1uo6m_dsezo_141",
-  "trigger": "awsui_trigger_1uo6m_dsezo_149",
-  "trigger-drawer": "awsui_trigger-drawer_1uo6m_dsezo_160",
-  "selected": "awsui_selected_1uo6m_dsezo_160"
+  "toggle": "awsui_toggle_1uo6m_1fg2f_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1fg2f_102",
+  "drawer": "awsui_drawer_1uo6m_1fg2f_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1fg2f_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_1fg2f_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_1fg2f_122",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1fg2f_137",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1fg2f_148",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_1fg2f_102",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1fg2f_166"
 };
   

package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,eAgEpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,eA8DpB"}

package/lib/internal/template/app-layout/mobile-toolbar/index.js

@@ -2,15 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
-import { AppLayoutButton, togglesConfig } from '../toggles';
+import { ToggleButton, togglesConfig } from '../toggles';
 import styles from './styles.css.js';
 import sharedStyles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled, onClick }, ref) => {
     const { TagName, iconName, getLabels } = togglesConfig[type];
     const { mainLabel, openLabel } = getLabels(ariaLabels);
-    return (React.createElement(TagName, { className: clsx(styles['mobile-toggle']), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
-        React.createElement(AppLayoutButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
+    return (React.createElement(TagName, { className: clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`]), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
+        React.createElement(ToggleButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
 });
 export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, mobileBarRef, }) {
     useEffect(() => {
@@ -28,9 +28,10 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
         !navigationHide && (React.createElement(MobileToggle, { ref: toggleRefs.navigation, type: "navigation", className: testutilStyles['navigation-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onNavigationOpen })),
         React.createElement("div", { className: styles['mobile-bar-breadcrumbs'] }, children && React.createElement("div", { className: testutilStyles.breadcrumbs }, children)),
         !toolsHide && !drawers && (React.createElement(MobileToggle, { ref: toggleRefs.tools, type: "tools", className: testutilStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen })),
-        drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['mobile-toggle'], styles['mobile-toggle-with-drawers'], testutilStyles['drawers-mobile-triggers-container']) }, drawers.items.map((item, index) => {
+        drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container']) }, drawers.items.map((item, index) => {
             var _a;
-            return (React.createElement(AppLayoutButton, { className: clsx(styles['mobile-trigger-with-drawers'], testutilStyles['drawers-trigger']), 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("span", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']), key: index },
+                React.createElement(ToggleButton, { className: testutilStyles['drawers-trigger'], 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, testId: `awsui-app-layout-trigger-${item.id}` })));
         })))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/mobile-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/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, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { AppLayoutButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(\n            styles['mobile-toggle'],\n            styles['mobile-toggle-with-drawers'],\n            testutilStyles['drawers-mobile-triggers-container']\n          )}\n        >\n          {drawers.items.map((item: DrawerItem, index: number) => (\n            <AppLayoutButton\n              className={clsx(styles['mobile-trigger-with-drawers'], testutilStyles['drawers-trigger'])}\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  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/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, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <ToggleButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}\n        >\n          {drawers.items.map((item: DrawerItem, index: number) => (\n            <span className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])} key={index}>\n              <ToggleButton\n                className={testutilStyles['drawers-trigger']}\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                testId={`awsui-app-layout-trigger-${item.id}`}\n              />\n            </span>\n          ))}\n        </aside>\n      )}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/mobile-toolbar/styles.css.js

@@ -1,11 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_ldjmq_97",
-  "mobile-bar": "awsui_mobile-bar_19d8l_ldjmq_101",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_ldjmq_115",
-  "mobile-trigger-with-drawers": "awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_ldjmq_128",
-  "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_1363s_97",
+  "mobile-bar": "awsui_mobile-bar_19d8l_1363s_101",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1363s_114",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_1363s_121",
+  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_1363s_129",
+  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_1363s_132",
+  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_1363s_132",
+  "drawers-container": "awsui_drawers-container_19d8l_1363s_139"
 };
   

package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css

@@ -94,12 +94,11 @@ 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_block-body-scroll_19d8l_ldjmq_97:not(#\9) {
+.awsui_block-body-scroll_19d8l_1363s_97:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_mobile-bar_19d8l_ldjmq_101:not(#\9) {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+.awsui_mobile-bar_19d8l_1363s_101:not(#\9) {
   position: sticky;
   display: flex;
   align-items: center;
@@ -112,43 +111,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   height: calc(2 * var(--space-m-2wfcpy, 16px) + var(--space-scaled-xs-sg3tfb, 8px));
 }
 
-.awsui_mobile-bar-breadcrumbs_19d8l_ldjmq_115:not(#\9) {
+.awsui_mobile-bar-breadcrumbs_19d8l_1363s_114:not(#\9) {
   min-width: 0;
   flex: 1;
   margin-left: var(--space-m-2wfcpy, 16px);
   margin-right: var(--space-m-2wfcpy, 16px);
 }
 
-.awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122:not(#\9) {
-  width: 40px;
-  display: flex;
-  justify-content: center;
-}
-
-.awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9) {
+.awsui_mobile-toggle_19d8l_1363s_121:not(#\9) {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
   padding: var(--space-xxs-xx079q, 4px) 7px;
   width: 40px;
+  color: var(--color-text-interactive-default-9x433a, #545b64);
 }
-.awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9):first-child {
+.awsui_mobile-toggle-type-navigation_19d8l_1363s_129:not(#\9) {
   border-right: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9):last-child:not(.awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138) {
+.awsui_mobile-toggle-type-tools_19d8l_1363s_132:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_1363s_132:not(#\9) {
   border-left: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9):hover:not(.awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138) {
+.awsui_mobile-toggle_19d8l_1363s_121:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-yn48lk, #eaeded);
 }
-.awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138:not(#\9) {
-  display: flex;
-  width: auto;
-  padding: 0;
-  height: 100%;
-}
-.awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138 > .awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122:not(#\9) {
-  border-left: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
+
+.awsui_drawers-container_19d8l_1363s_139:not(#\9) {
   display: flex;
-  align-items: center;
+  align-items: stretch;
 }

package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js

@@ -2,11 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_ldjmq_97",
-  "mobile-bar": "awsui_mobile-bar_19d8l_ldjmq_101",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_ldjmq_115",
-  "mobile-trigger-with-drawers": "awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_ldjmq_128",
-  "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_1363s_97",
+  "mobile-bar": "awsui_mobile-bar_19d8l_1363s_101",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1363s_114",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_1363s_121",
+  "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_1363s_129",
+  "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_1363s_132",
+  "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_1363s_132",
+  "drawers-container": "awsui_drawers-container_19d8l_1363s_139"
 };
   

package/lib/internal/template/app-layout/toggles/index.d.ts

@@ -22,7 +22,9 @@ export declare const togglesConfig: {
         };
     };
 };
-export declare const AppLayoutButton: React.ForwardRefExoticComponent<AppLayoutButtonProps & React.RefAttributes<ButtonProps.Ref>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<AppLayoutButtonProps & React.RefAttributes<{
+    focus(): void;
+}>>;
 interface CloseButtonProps {
     className?: string;
     ariaLabel: string | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,8FAqB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,YAAY;aAGK,IAAI;GAkBjC,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAgBvB,CAAC"}

package/lib/internal/template/app-layout/toggles/index.js

@@ -1,7 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
 import React from 'react';
 import { InternalButton } from '../../button/internal';
+import InternalIcon from '../../icon/internal';
 import styles from './styles.css.js';
 export const togglesConfig = {
     navigation: {
@@ -23,11 +25,12 @@ export const togglesConfig = {
         }),
     },
 };
-export const AppLayoutButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }, ref) => {
-    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, iconSvg: iconSvg, disabled: disabled, ariaExpanded: ariaExpanded ? undefined : false, __nativeAttributes: { 'aria-haspopup': ariaExpanded ? undefined : true } }));
+export const ToggleButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }, ref) => {
+    return (React.createElement("button", { ref: ref, className: clsx(className, styles['toggle-button']), "aria-label": ariaLabel, type: "button", onClick: onClick, disabled: disabled, "aria-expanded": ariaExpanded ? undefined : false, "aria-haspopup": ariaExpanded ? undefined : true, "data-testid": testId },
+        React.createElement(InternalIcon, { svg: iconSvg, name: iconName })));
 });
 export const CloseButton = React.forwardRef(({ className, ariaLabel, onClick }, ref) => {
     return (React.createElement("span", { className: styles['close-button'] },
-        React.createElement(AppLayoutButton, { ref: ref, className: className, ariaExpanded: true, ariaLabel: ariaLabel, iconName: "close", onClick: onClick })));
+        React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", iconName: "close", onClick: onClick })));
 });
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/toggles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAwB,EAClG,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const AppLayoutButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    return (\n      <InternalButton\n        ref={ref}\n        className={className}\n        ariaLabel={ariaLabel}\n        variant=\"icon\"\n        formAction=\"none\"\n        onClick={onClick}\n        iconName={iconName}\n        iconSvg={iconSvg}\n        disabled={disabled}\n        ariaExpanded={ariaExpanded ? undefined : false}\n        __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n      />\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <AppLayoutButton\n          ref={ref}\n          className={className}\n          ariaExpanded={true}\n          ariaLabel={ariaLabel}\n          iconName=\"close\"\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAG/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAwB,EAC1G,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,gBACvC,SAAS,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,mBACH,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,mBAChC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,iBACjC,MAAM;QAEnB,oBAAC,YAAY,IAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,GAAI,CACvC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport InternalIcon from '../../icon/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const ToggleButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<{ focus(): void }>\n  ) => {\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        className={clsx(className, styles['toggle-button'])}\n        aria-label={ariaLabel}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-expanded={ariaExpanded ? undefined : false}\n        aria-haspopup={ariaExpanded ? undefined : true}\n        data-testid={testId}\n      >\n        <InternalIcon svg={iconSvg} name={iconName} />\n      </button>\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <InternalButton\n          ref={ref}\n          className={className}\n          ariaLabel={ariaLabel}\n          variant=\"icon\"\n          formAction=\"none\"\n          iconName=\"close\"\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}

package/lib/internal/template/app-layout/toggles/interfaces.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconProps } from '../../icon/interfaces';
 export interface AppLayoutButtonProps {
     className?: string;
@@ -6,7 +6,8 @@ export interface AppLayoutButtonProps {
     ariaExpanded?: boolean;
     iconName?: IconProps.Name;
     iconSvg?: React.ReactNode;
-    onClick: () => void;
+    onClick?: () => void;
     disabled?: boolean;
+    testId?: string;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/app-layout/toggles/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/internal/template/app-layout/toggles/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  ariaExpanded?: boolean;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  ariaExpanded?: boolean;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  testId?: string;\n}\n"]}

package/lib/internal/template/app-layout/toggles/styles.css.js

@@ -1,6 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "close-button": "awsui_close-button_16w0h_ln6p9_93"
+  "toggle-button": "awsui_toggle-button_16w0h_pbc0z_93",
+  "close-button": "awsui_close-button_16w0h_pbc0z_123"
 };
   

package/lib/internal/template/app-layout/toggles/styles.scoped.css

@@ -90,7 +90,37 @@ 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_close-button_16w0h_ln6p9_93:not(#\9) {
+.awsui_toggle-button_16w0h_pbc0z_93:not(#\9) {
+  cursor: pointer;
+  border: 0;
+  padding: calc(var(--space-scaled-xxs-gmgwxk, 4px) + 1px) calc(var(--space-xxs-xx079q, 4px) + 1px);
+  background: transparent;
+  color: currentColor;
+}
+.awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus {
+  outline: none;
+  text-decoration: none;
+}
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
+  top: calc(-1 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
+  width: calc(100% + 2 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
+  height: calc(100% + 2 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
+  border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
+}
+
+.awsui_close-button_16w0h_pbc0z_123:not(#\9) {
   position: absolute;
   outline: none;
   right: var(--space-m-2wfcpy, 16px);

package/lib/internal/template/app-layout/toggles/styles.selectors.js

@@ -2,6 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "close-button": "awsui_close-button_16w0h_ln6p9_93"
+  "toggle-button": "awsui_toggle-button_16w0h_pbc0z_93",
+  "close-button": "awsui_close-button_16w0h_pbc0z_123"
 };
   

package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAcA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBAuB9B;AA+LD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAuE7B"}
+{"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAcA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBAuB9B;AAgMD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAuE7B"}

package/lib/internal/template/app-layout/visual-refresh/drawers.js

@@ -103,7 +103,7 @@ function DesktopTriggers() {
                 return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
                         isToolsOpen && handleToolsClick(!isToolsOpen, true);
                         handleDrawersClick(item.id);
-                    }, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, selected: item.id === activeDrawerId }));
+                    }, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, selected: item.id === activeDrawerId, testId: `awsui-app-layout-trigger-${item.id}` }));
             }),
             hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, className: clsx(styles['drawers-trigger'], splitPanelStyles['open-button']), iconName: "view-vertical", onClick: () => handleSplitPanelClick(), selected: hasSplitPanel && isSplitPanelOpen, ref: splitPanelRefs.toggle })))));
 }
@@ -129,7 +129,7 @@ export function MobileTriggers() {
         !toolsHide && tools && (React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isToolsOpen, className: testutilStyles['tools-toggle'], disabled: hasDrawerViewportOverlay, formAction: "none", iconName: "status-info", onClick: () => handleToolsClick(true), ref: toolsRefs.toggle, variant: "icon", __nativeAttributes: { 'aria-haspopup': true } })),
         drawers.items.map(item => {
             var _a;
-            return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), disabled: hasDrawerViewportOverlay, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, variant: "icon", __nativeAttributes: { 'aria-haspopup': true } }));
+            return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), disabled: hasDrawerViewportOverlay, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, variant: "icon", __nativeAttributes: { 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` } }));
         })));
 }
 //# sourceMappingURL=drawers.js.map