@cloudscape-design/components-themeable 3.0.72 → 3.0.74

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -33,6 +33,7 @@
     }
     > .anchor {
       color: awsui.$color-text-breadcrumb-current;
+      font-weight: styles.$font-weight-bold;
       text-decoration: none;
       cursor: default;
       pointer-events: none;

package/lib/internal/scss/calendar/styles.scss

@@ -45,50 +45,33 @@
     /* used for identifying element */
   }
 
-  &-day-names {
-    display: flex;
-    justify-content: stretch;
+  &-grid {
+    width: 100%;
+    border-spacing: 0;
   }
 
-  &-day-name {
-    flex: 1 1 0%;
-    width: 0;
+  &-grid-cell {
+    width: calc(100% / 7);
     word-break: break-word;
     text-align: center;
+    font-weight: unset;
+  }
+
+  &-day-header {
     padding: awsui.$space-s 0 awsui.$space-xxs;
     color: calendar.$grid-day-name-color;
     @include styles.font-body-s;
   }
 
-  &-dates {
-    border: calendar.$grid-border;
-  }
-  &-week {
-    display: flex;
-    justify-content: stretch;
-  }
-
   &-day {
-    flex: 1 1 0%;
-    width: 0;
-    word-break: break-word;
-    text-align: center;
     border-bottom: calendar.$grid-border;
     border-right: calendar.$grid-border;
     padding: awsui.$space-xxs 0;
     color: calendar.$grid-disabled-day-color;
     position: relative;
 
-    &:last-child {
-      border-right: none;
-    }
-
-    &-in-last-week {
-      border-bottom: none;
-    }
-
-    &-focusable {
-      /* used for identifying element */
+    &:first-child {
+      border-left: calendar.$grid-border;
     }
 
     &-enabled {
@@ -173,5 +156,13 @@
     }
   }
 
+  &-week {
+    &:first-child {
+      > .calendar-day {
+        border-top: calendar.$grid-border;
+      }
+    }
+  }
+
   @include styles.styles-reset;
 }

package/lib/internal/scss/date-range-picker/calendar/grids/{day/styles.scss → styles.scss}

@@ -3,10 +3,10 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../../../internal/styles/index' as styles;
-@use '../../../../internal/styles/tokens' as awsui;
-@use '../../../../internal/hooks/focus-visible' as focus-visible;
-@use '../../../../calendar/calendar' as calendar;
+@use '../../../internal/styles/index' as styles;
+@use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/hooks/focus-visible' as focus-visible;
+@use '../../../calendar/calendar' as calendar;
 
 @mixin border-radius($horizontal, $vertical) {
   &,
@@ -30,11 +30,27 @@
   }
 }
 
-.day {
-  flex: 1 1 0%;
-  width: 0;
+.grid {
+  width: awsui.$size-calendar-grid-width;
+  border-spacing: 0;
+}
+.grid-cell {
+  width: calc(100% / 7);
   word-break: break-word;
   text-align: center;
+  font-weight: unset;
+}
+.day-header {
+  padding: awsui.$space-s 0 awsui.$space-xxs;
+  color: calendar.$grid-day-name-color;
+  @include styles.font-body-s;
+}
+
+.week {
+  /* used for identifying element */
+}
+
+.day {
   border-bottom: calendar.$grid-border;
   border-right: calendar.$grid-border;
   padding: awsui.$space-xxs 0;

package/lib/internal/scss/date-range-picker/styles.scss

@@ -9,10 +9,8 @@
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 
-$calendar-header-color: awsui.$color-text-body-default;
-$calendar-grid-day-name-color: awsui.$color-text-calendar-month;
-
 $calendar-grid-width: awsui.$size-calendar-grid-width;
+$calendar-header-color: awsui.$color-text-body-default;
 
 .root {
   @include styles.styles-reset;
@@ -74,26 +72,6 @@ $calendar-grid-width: awsui.$size-calendar-grid-width;
   &-prev-month-btn {
     /* used for identifying element */
   }
-
-  &-day-names {
-    display: flex;
-    justify-content: stretch;
-  }
-
-  &-day-name {
-    flex: 1 1 0%;
-    width: 0;
-    word-break: break-word;
-    text-align: center;
-    padding: awsui.$space-s 0 awsui.$space-xxs;
-    color: $calendar-grid-day-name-color;
-    @include styles.font-body-s;
-  }
-
-  &-week {
-    display: flex;
-    justify-content: stretch;
-  }
 }
 
 .first-grid,
@@ -101,10 +79,6 @@ $calendar-grid-width: awsui.$size-calendar-grid-width;
   /* used in test-utils */
 }
 
-.grid {
-  width: $calendar-grid-width;
-}
-
 .date-and-time-wrapper {
   width: $calendar-grid-width;
 }
@@ -156,6 +130,10 @@ $calendar-grid-width: awsui.$size-calendar-grid-width;
   @include styles.form-placeholder;
 }
 
+.label-token-nowrap {
+  white-space: nowrap;
+}
+
 .mode-switch {
   /* used in test-utils */
 }

package/lib/internal/scss/property-filter/styles.scss

@@ -37,7 +37,9 @@
   font-weight: bold;
 }
 
+.property-editor,
 .token-editor {
+  user-select: text;
   margin: awsui.$space-xxs;
   &-form {
     margin-bottom: awsui.$space-scaled-l;
@@ -51,22 +53,30 @@
   &-field-value {
     margin-top: awsui.$space-scaled-l;
   }
+  &-cancel {
+    margin-right: awsui.$space-xs;
+  }
+  &-submit {
+    /* used in test-utils */
+  }
   &-actions {
     display: flex;
     justify-content: flex-end;
     padding-top: awsui.$space-s;
     border-top: 1px solid #{awsui.$color-border-dropdown-item-default};
+  }
+}
+.token-editor {
+  &-actions {
     // The below code cancels horizontal padding of the popover and horizontal margin of the token-editor.
     padding-right: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
     margin-left: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
     margin-right: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
   }
-  &-cancel {
-    margin-right: awsui.$space-xs;
-  }
-  &-submit {
-    /* used in test-utils */
-  }
+}
+.property-editor {
+  padding: awsui.$space-m;
+  overflow-y: auto;
 }
 
 .custom-control {

package/lib/internal/scss/tabs/tab-header-bar.scss

@@ -22,6 +22,7 @@ $label-horizontal-spacing: awsui.$space-l;
   padding: 0;
   display: flex;
   overflow-x: scroll;
+  overflow-y: hidden;
   position: relative;
   width: 100%;
   // do not use pointer-events none because it disables scroll by sliding

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,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,8FAmB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,0FAQvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,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,8FAoB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}

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

@@ -31,11 +31,11 @@ export var togglesConfig = {
 };
 export var AppLayoutButton = React.forwardRef(function (_a, ref) {
     var className = _a.className, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, iconName = _a.iconName, disabled = _a.disabled, onClick = _a.onClick;
-    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, disabled: disabled, ariaExpanded: ariaExpanded }));
+    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, disabled: disabled, ariaExpanded: ariaExpanded, __nativeAttributes: { 'aria-haspopup': true } }));
 });
 export var CloseButton = React.forwardRef(function (_a, ref) {
     var className = _a.className, ariaLabel = _a.ariaLabel, onClick = _a.onClick, iconName = _a.iconName;
     return (React.createElement("span", { className: styles['close-button'] },
-        React.createElement(AppLayoutButton, { ref: ref, className: className, ariaLabel: ariaLabel, iconName: iconName, onClick: onClick })));
+        React.createElement(AppLayoutButton, { ref: ref, className: className, ariaExpanded: true, ariaLabel: ariaLabel, iconName: iconName, onClick: onClick })));
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,UAAU;gBAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;gBAClC,UAAU,EAAE,MAAM,CAAC,eAAe;aACnC,CAAC;QAJiD,CAIjD;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,KAAK;gBACvB,SAAS,EAAE,MAAM,CAAC,WAAW;gBAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;aAC9B,CAAC;QAJiD,CAIjD;KACH;CACO,CAAC;AAEX,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,UACE,EAAyF,EACzF,GAA+B;QAD7B,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAGjE,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,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AASF,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,UAAC,EAA6D,EAAE,GAA+B;QAA5F,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA;IACxC,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAC1G,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 { IconProps } from '../../icon/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, 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        disabled={disabled}\n        ariaExpanded={ariaExpanded}\n      />\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n  iconName: IconProps.Name;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick, iconName }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <AppLayoutButton ref={ref} className={className} ariaLabel={ariaLabel} iconName={iconName} onClick={onClick} />\n      </span>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,UAAU;gBAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;gBAClC,UAAU,EAAE,MAAM,CAAC,eAAe;aACnC,CAAC;QAJiD,CAIjD;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,UAAC,MAAkC;YAAlC,uBAAA,EAAA,WAAkC;YAAK,OAAA,CAAC;gBAClD,SAAS,EAAE,MAAM,CAAC,KAAK;gBACvB,SAAS,EAAE,MAAM,CAAC,WAAW;gBAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;aAC9B,CAAC;QAJiD,CAIjD;KACH;CACO,CAAC;AAEX,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,UACE,EAAyF,EACzF,GAA+B;QAD7B,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAGjE,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,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,GAC7C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AASF,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,UAAC,EAA6D,EAAE,GAA+B;QAA5F,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA;IACxC,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,EAAE,QAAQ,EAClB,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 { IconProps } from '../../icon/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, 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        disabled={disabled}\n        ariaExpanded={ariaExpanded}\n        __nativeAttributes={{ 'aria-haspopup': true }}\n      />\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n  iconName: IconProps.Name;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick, iconName }: 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={iconName}\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBAyF7B"}
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBA2F7B"}

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

@@ -26,13 +26,13 @@ export default function AppBar() {
             _a[testutilStyles['mobile-bar']] = isMobile,
             _a), 'awsui-context-content-header') },
         !navigationHide && isMobile && (React.createElement("nav", { className: clsx(styles['appbar-nav'], (_b = {}, _b[testutilStyles['drawer-closed']] = !isNavigationOpen, _b)), "aria-hidden": isNavigationOpen },
-            React.createElement(InternalButton, { ariaLabel: (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _e !== void 0 ? _e : undefined, ariaExpanded: isNavigationOpen, iconName: "menu", formAction: "none", onClick: function () { return handleNavigationClick(true); }, variant: "icon", className: testutilStyles['navigation-toggle'], ref: focusRefsNav.toggle, disabled: isAnyPanelOpen }))),
+            React.createElement(InternalButton, { ariaLabel: (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _e !== void 0 ? _e : undefined, ariaExpanded: isNavigationOpen, iconName: "menu", formAction: "none", onClick: function () { return handleNavigationClick(true); }, variant: "icon", className: testutilStyles['navigation-toggle'], ref: focusRefsNav.toggle, disabled: isAnyPanelOpen, __nativeAttributes: { 'aria-haspopup': true } }))),
         breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, styles["content-type-".concat(contentType)], testutilStyles.breadcrumbs, (_c = {},
                 _c[styles['has-dynamic-overlap-height']] = dynamicOverlapHeight > 0,
                 _c[styles['has-header']] = contentHeader,
                 _c[styles['has-notifications-content']] = hasNotificationsContent,
                 _c)) }, breadcrumbs)),
         !toolsHide && isMobile && (React.createElement("aside", { className: clsx(styles['appbar-tools'], (_d = {}, _d[testutilStyles['drawer-closed']] = !isToolsOpen, _d)), "aria-hidden": isToolsOpen, "aria-label": (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _f !== void 0 ? _f : undefined },
-            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _g !== void 0 ? _g : undefined, iconName: "status-info", formAction: "none", onClick: function () { return handleToolsClick(true); }, variant: "icon", ref: focusRefsTools.toggle })))));
+            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _g !== void 0 ? _g : undefined, iconName: "status-info", formAction: "none", onClick: function () { return handleToolsClick(true); }, variant: "icon", ref: focusRefsTools.toggle, __nativeAttributes: { 'aria-haspopup': true } })))));
 }
 //# sourceMappingURL=app-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.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 React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const focusRefsNav = useFocusControl(isNavigationOpen);\n  const focusRefsTools = useFocusControl(isToolsOpen);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/app-bar.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 React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n  } = useContext(AppLayoutContext);\n  const focusRefsNav = useFocusControl(isNavigationOpen);\n  const focusRefsTools = useFocusControl(isToolsOpen);\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={focusRefsNav.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={focusRefsTools.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,uBAmGjC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.tsx"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,uBAqGjC"}

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

@@ -55,7 +55,7 @@ export default function Navigation() {
                 } },
                 React.createElement("div", { className: clsx(styles['animated-content']) },
                     React.createElement("div", { className: clsx(styles['hide-navigation']) },
-                        React.createElement(InternalButton, { ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _g !== void 0 ? _g : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: function () { return handleNavigationClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: focusRefs.close })),
+                        React.createElement(InternalButton, { ariaLabel: (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _g !== void 0 ? _g : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: function () { return handleNavigationClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: focusRefs.close, ariaExpanded: true, __nativeAttributes: { 'aria-haspopup': true } })),
                     navigation))));
     }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.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 React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    handleNavigationClick,\n    isMobile,\n    isNavigationOpen,\n    navigation,\n    navigationHide,\n    navigationWidth,\n    isToolsOpen,\n    isAnyPanelOpen,\n    toolsHide,\n  } = useContext(AppLayoutContext);\n\n  const focusRefs = useFocusControl(isNavigationOpen);\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;\n\n  return (\n    <Transition in={isNavigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [testutilStyles['drawer-closed']]: !isNavigationOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n          style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || isNavigationOpen ? true : false}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={focusRefs.toggle}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!isNavigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={clsx(styles['animated-content'])}>\n              <div className={clsx(styles['hide-navigation'])}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={focusRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/navigation.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 React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    handleNavigationClick,\n    isMobile,\n    isNavigationOpen,\n    navigation,\n    navigationHide,\n    navigationWidth,\n    isToolsOpen,\n    isAnyPanelOpen,\n    toolsHide,\n  } = useContext(AppLayoutContext);\n\n  const focusRefs = useFocusControl(isNavigationOpen);\n\n  if (navigationHide) {\n    return null;\n  }\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;\n\n  return (\n    <Transition in={isNavigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [testutilStyles['drawer-closed']]: !isNavigationOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n          style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || isNavigationOpen ? true : false}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={focusRefs.toggle}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!isNavigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\n            }}\n          >\n            <div className={clsx(styles['animated-content'])}>\n              <div className={clsx(styles['hide-navigation'])}>\n                <InternalButton\n                  ariaLabel={ariaLabels?.navigationClose ?? undefined}\n                  iconName={isMobile ? 'close' : 'angle-left'}\n                  onClick={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={focusRefs.close}\n                  ariaExpanded={true}\n                  __nativeAttributes={{ 'aria-haspopup': true }}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAa1C,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,sBA2HrD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,OAAO,WAU/E"}
+{"version":3,"file":"tools.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAa1C,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,sBA6HrD;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,OAAO,WAU/E"}

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

@@ -51,7 +51,7 @@ export default function Tools(_a) {
                     _c), testutilStyles.tools), ref: state !== 'exiting' ? transitionEventsRef : undefined },
                 React.createElement("div", { className: clsx(styles['animated-content']) },
                     React.createElement("div", { className: clsx(styles['hide-tools']) },
-                        React.createElement(InternalButton, { ariaLabel: (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose) !== null && _f !== void 0 ? _f : undefined, iconName: isMobile ? 'close' : 'angle-right', onClick: function () { return handleToolsClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['tools-close'], ref: focusRefs.close })),
+                        React.createElement(InternalButton, { ariaLabel: (_f = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose) !== null && _f !== void 0 ? _f : undefined, iconName: isMobile ? 'close' : 'angle-right', onClick: function () { return handleToolsClick(false); }, variant: "icon", formAction: "none", className: testutilStyles['tools-close'], ref: focusRefs.close, ariaExpanded: true, __nativeAttributes: { 'aria-haspopup': true } })),
                     tools))),
             !isMobile && (React.createElement("aside", { "aria-hidden": !hasToolsForm ? true : false, "aria-label": (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _g !== void 0 ? _g : undefined, className: clsx(styles['show-tools'], (_d = {},
                     _d[styles.animating] = state === 'exiting',

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

@@ -1 +1 @@
-{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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 React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutContext } from './context';\nimport { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n  } = useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, openButtonAriaLabel } = useContext(SplitPanelContext);\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const focusRefs = useFocusControl(isToolsOpen);\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && (\n                <TriggerButton\n                  ariaLabel={openButtonAriaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanel: React.ReactNode, splitPanelPosition: string) {\n  return splitPanel && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/tools.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 React, { useContext } from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutContext } from './context';\nimport { SplitPanelContext } from '../../internal/context/split-panel-context';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface ToolsProps {\n  children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n  const {\n    ariaLabels,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasDefaultToolsWidth,\n    isNavigationOpen,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    tools,\n    toolsHide,\n    toolsWidth,\n    isAnyPanelOpen,\n    navigationHide,\n  } = useContext(AppLayoutContext);\n\n  const { position: splitPanelPosition, openButtonAriaLabel } = useContext(SplitPanelContext);\n\n  const hasSplitPanel = getSplitPanelStatus(splitPanel, splitPanelPosition);\n  const hasToolsForm = getToolsFormStatus(hasSplitPanel, isMobile, isSplitPanelOpen, isToolsOpen, toolsHide);\n  const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n\n  const focusRefs = useFocusControl(isToolsOpen);\n\n  if (toolsHide && !hasSplitPanel) {\n    return null;\n  }\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isNavigationOpen && !navigationHide;\n\n  return (\n    <Transition in={isToolsOpen ?? false}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['tools-container'], {\n            [testutilStyles['drawer-closed']]: !isToolsOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          style={{\n            [customCssProps.toolsAnimationStartingOpacity]: `${hasSplitPanel && isSplitPanelOpen ? 1 : 0}`,\n            // Overwrite the default tools width (depends on breakpoints) only when the `toolsWidth` property has been set.\n            [customCssProps.toolsWidth]: hasDefaultToolsWidth ? '' : `${toolsWidth}px`,\n          }}\n        >\n          {children}\n\n          {!toolsHide && (\n            <aside\n              aria-hidden={!isToolsOpen ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles.tools,\n                {\n                  [styles.animating]: state === 'entering',\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                  [styles['is-tools-open']]: isToolsOpen,\n                },\n                testutilStyles.tools\n              )}\n              ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            >\n              <div className={clsx(styles['animated-content'])}>\n                <div className={clsx(styles['hide-tools'])}>\n                  <InternalButton\n                    ariaLabel={ariaLabels?.toolsClose ?? undefined}\n                    iconName={isMobile ? 'close' : 'angle-right'}\n                    onClick={() => handleToolsClick(false)}\n                    variant=\"icon\"\n                    formAction=\"none\"\n                    className={testutilStyles['tools-close']}\n                    ref={focusRefs.close}\n                    ariaExpanded={true}\n                    __nativeAttributes={{ 'aria-haspopup': true }}\n                  />\n                </div>\n\n                {tools}\n              </div>\n            </aside>\n          )}\n\n          {!isMobile && (\n            <aside\n              aria-hidden={!hasToolsForm ? true : false}\n              aria-label={ariaLabels?.tools ?? undefined}\n              className={clsx(\n                styles['show-tools'],\n                {\n                  [styles.animating]: state === 'exiting',\n                  [styles['has-tools-form']]: hasToolsForm,\n                  [styles['has-tools-form-persistence']]: hasToolsFormPersistence,\n                },\n                splitPanelStyles.root\n              )}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              {!toolsHide && (\n                <TriggerButton\n                  ariaLabel={ariaLabels?.toolsToggle}\n                  iconName=\"status-info\"\n                  onClick={() => handleToolsClick(!isToolsOpen)}\n                  selected={hasSplitPanel && isToolsOpen}\n                  className={testutilStyles['tools-toggle']}\n                  ref={focusRefs.toggle}\n                />\n              )}\n\n              {hasSplitPanel && (\n                <TriggerButton\n                  ariaLabel={openButtonAriaLabel}\n                  iconName=\"view-vertical\"\n                  onClick={() => handleSplitPanelClick()}\n                  selected={hasSplitPanel && isSplitPanelOpen}\n                  className={splitPanelStyles['open-button']}\n                  // TODO should this button also get focus handling? (i.e. when the split panel is toggled)\n                />\n              )}\n            </aside>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * Determine the default state of the Tools component. Mobile viewports should be\n * closed by default under all circumstances. If the toolsOpen prop has not been\n * set then it should be closed as well. Otherwise, default to the toolsOpen prop.\n */\nexport function getToolsDefaultState(isMobile: boolean, stateFromProps?: boolean) {\n  let isToolsOpen;\n\n  if (isMobile || stateFromProps === undefined) {\n    isToolsOpen = false;\n  } else {\n    isToolsOpen = stateFromProps;\n  }\n\n  return isToolsOpen;\n}\n\n/**\n * This simple function returns the presence of the split panel as a child of the\n * Tools component. It must exist and be in side position.\n */\nfunction getSplitPanelStatus(splitPanel: React.ReactNode, splitPanelPosition: string) {\n  return splitPanel && splitPanelPosition === 'side' ? true : false;\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n  hasSplitPanel: boolean,\n  isMobile: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsForm = false;\n\n  if (!isMobile) {\n    // Both the Split Panel and Tools button are needed\n    if (hasSplitPanel && !toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Split Panel button is needed\n    if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n      hasToolsForm = true;\n    }\n\n    // The Tools button is needed\n    if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n      hasToolsForm = true;\n    }\n  }\n\n  return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n  hasSplitPanel: boolean,\n  isSplitPanelOpen?: boolean,\n  isToolsOpen?: boolean,\n  toolsHide?: boolean\n) {\n  let hasToolsFormPersistence = false;\n\n  // Both Tools and Split Panel exist and one or both is open\n  if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n    hasToolsFormPersistence = true;\n  }\n\n  return hasToolsFormPersistence;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"trigger-button.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;AA6BD,wBAA+C"}
+{"version":3,"file":"trigger-button.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;AA8BD,wBAA+C"}

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

@@ -10,7 +10,7 @@ function TriggerButton(_a, ref) {
     var _b;
     var ariaLabel = _a.ariaLabel, iconName = _a.iconName, onClick = _a.onClick, _c = _a.selected, selected = _c === void 0 ? false : _c, className = _a.className;
     var focusVisible = useFocusVisible();
-    return (React.createElement("button", __assign({ "aria-label": ariaLabel, "aria-expanded": false, className: clsx(styles.trigger, (_b = {},
+    return (React.createElement("button", __assign({ "aria-label": ariaLabel, "aria-expanded": false, "aria-haspopup": true, className: clsx(styles.trigger, (_b = {},
             _b[styles.selected] = selected,
             _b), className), onClick: onClick, type: "button", ref: ref }, focusVisible),
         React.createElement(Icon, { name: iconName })));

package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,SAAS,aAAa,CACpB,EAAiF,EACjF,GAA+B;;QAD7B,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA;IAG3D,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,uDACc,SAAS,mBACN,KAAK,EACpB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO;YAEZ,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;iBAE7B,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAmC,IACpC,YAAY;QAEhB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\ninterface TriggerButtonProps {\n  ariaLabel?: string;\n  iconName: IconProps.Name;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  className?: string;\n}\n\nfunction TriggerButton(\n  { ariaLabel, iconName, onClick, selected = false, className }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const focusVisible = useFocusVisible();\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      aria-expanded={false}\n      className={clsx(\n        styles.trigger,\n        {\n          [styles.selected]: selected,\n        },\n        className\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref as React.Ref<HTMLButtonElement>}\n      {...focusVisible}\n    >\n      <Icon name={iconName} />\n    </button>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"trigger-button.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,SAAS,aAAa,CACpB,EAAiF,EACjF,GAA+B;;QAD7B,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA;IAG3D,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,uDACc,SAAS,mBACN,KAAK,mBACL,IAAI,EACnB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO;YAEZ,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;iBAE7B,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAmC,IACpC,YAAY;QAEhB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,CACjB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\ninterface TriggerButtonProps {\n  ariaLabel?: string;\n  iconName: IconProps.Name;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  className?: string;\n}\n\nfunction TriggerButton(\n  { ariaLabel, iconName, onClick, selected = false, className }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const focusVisible = useFocusVisible();\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      aria-expanded={false}\n      aria-haspopup={true}\n      className={clsx(\n        styles.trigger,\n        {\n          [styles.selected]: selected,\n        },\n        className\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref as React.Ref<HTMLButtonElement>}\n      {...focusVisible}\n    >\n      <Icon name={iconName} />\n    </button>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/lib/internal/template/breadcrumb-group/item/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "link": "awsui_link_1kosq_1lntj_93",
-  "breadcrumb": "awsui_breadcrumb_1kosq_1lntj_97",
-  "icon": "awsui_icon_1kosq_1lntj_100",
-  "anchor": "awsui_anchor_1kosq_1lntj_104",
-  "last": "awsui_last_1kosq_1lntj_147",
-  "compressed": "awsui_compressed_1kosq_1lntj_157",
-  "text": "awsui_text_1kosq_1lntj_161"
+  "link": "awsui_link_1kosq_w4ewt_93",
+  "breadcrumb": "awsui_breadcrumb_1kosq_w4ewt_97",
+  "icon": "awsui_icon_1kosq_w4ewt_100",
+  "anchor": "awsui_anchor_1kosq_w4ewt_104",
+  "last": "awsui_last_1kosq_w4ewt_147",
+  "compressed": "awsui_compressed_1kosq_w4ewt_158",
+  "text": "awsui_text_1kosq_w4ewt_162"
 };