@cloudscape-design/components-themeable 3.0.251 → 3.0.253

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "7ed751a10e2ecf63cec865877bf8a6f75b6f1e54"
+  "commit": "471735b67df75c4cb69b1b7b201ef05ca6ddf2df"
 }

package/lib/internal/scss/app-layout/constants.scss

@@ -12,6 +12,11 @@ $toggle-padding-horizontal: 0.7 * styles.$base-size;
 $toggle-padding-vertical: awsui.$space-xxs;
 $toggle-padding: $toggle-padding-vertical $toggle-padding-horizontal;
 
+// New styles for when there are drawers
+$drawers-padding-horizontal: 0.6 * styles.$base-size;
+$drawers-padding-vertical: awsui.$space-scaled-xs;
+$drawers-padding: $drawers-padding-vertical $drawers-padding-horizontal;
+
 $sidebar-size-closed: 4 * styles.$base-size;
 
 $adaptive-content-widths: (

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

@@ -15,12 +15,15 @@ $drawer-z-index-mobile: 1001;
   padding: constants.$toggle-padding;
 }
 
+.drawer-triggers {
+  box-sizing: border-box;
+}
+
 .drawer {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: awsui.$shadow-panel;
-
   &:not(.drawer-mobile) {
     z-index: $drawer-z-index;
   }
@@ -32,12 +35,10 @@ $drawer-z-index-mobile: 1001;
     }
   }
 }
-
 .drawer-content {
   position: fixed;
   overflow: auto;
   background-color: awsui.$color-background-layout-panel-content;
-
   .drawer-mobile > & {
     z-index: $drawer-z-index-mobile;
     top: 0;
@@ -45,15 +46,54 @@ $drawer-z-index-mobile: 1001;
     left: 0;
     right: 0;
   }
-
   .drawer-closed > & {
     width: constants.$sidebar-size-closed;
     &:hover {
       background: awsui.$color-background-layout-panel-hover;
     }
+    &.non-interactive {
+      &:hover {
+        background: awsui.$color-background-layout-panel-content;
+        cursor: default;
+      }
+    }
   }
-
   & > [aria-hidden='true'] {
     display: none;
   }
 }
+
+.trigger {
+  .drawer-triggers > & {
+    padding: constants.$drawers-padding;
+    margin: 1px constants.$drawers-padding-horizontal;
+    border-radius: 0;
+    border: 0;
+
+    &:not(:last-child) {
+      box-shadow: 0px 1px awsui.$color-shadow-layout-panel-trigger;
+    }
+    &-drawer {
+      &:hover:not(.selected) {
+        color: awsui.$color-text-layout-panel-trigger-hover;
+        &:not(:last-child) {
+          box-shadow: 0px 1px awsui.$color-shadow-layout-panel-trigger;
+        }
+      }
+    }
+
+    &.selected {
+      padding: constants.$drawers-padding-vertical awsui.$space-s;
+      margin: 0;
+      border-top: 1px solid awsui.$color-background-layout-panel-trigger-active;
+      border-bottom: 1px solid awsui.$color-background-layout-panel-trigger-active;
+
+      background-color: awsui.$color-background-layout-panel-trigger-active;
+      color: awsui.$color-text-layout-panel-trigger-active;
+      box-shadow: none;
+      &:hover {
+        cursor: default;
+      }
+    }
+  }
+}

package/lib/internal/scss/app-layout/mobile-toolbar/styles.scss

@@ -44,7 +44,12 @@
   &:last-child {
     border-left: 1px solid awsui.$color-border-layout;
   }
-  &:hover {
+  &:hover:not(.mobile-toggle-with-drawers) {
     background: awsui.$color-background-layout-panel-hover;
   }
+
+  &-with-drawers {
+    display: flex;
+    width: auto;
+  }
 }

package/lib/internal/scss/app-layout/test-classes/styles.scss

@@ -42,3 +42,18 @@
 .disable-body-scroll-root {
   /* used in tests */
 }
+.drawers-desktop-triggers-container {
+  /* used in tests */
+}
+.drawers-mobile-triggers-container {
+  /* used in tests */
+}
+.drawers-trigger {
+  /* used in tests */
+}
+.active-drawer {
+  /* used in tests */
+}
+.active-drawer-close-button {
+  /* used in tests */
+}

package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss

@@ -29,7 +29,8 @@ section.appbar {
     background-color: awsui.$color-background-layout-main;
   }
 
-  > .appbar-tools {
+  > .appbar-tools,
+  > .drawers-mobile-triggers-container {
     grid-column: 3;
     margin-left: awsui.$space-m;
   }
@@ -53,7 +54,8 @@ section.appbar {
     }
 
     > .appbar-nav,
-    > .appbar-tools {
+    > .appbar-tools,
+    > .drawers-mobile-triggers-container {
       display: none;
     }
 
@@ -127,7 +129,8 @@ section.appbar {
 
     // the Navigation and Tools buttons resume their grid column position
     > .appbar-nav,
-    > .appbar-tools {
+    > .appbar-tools,
+    > .drawers-mobile-triggers-container {
       display: block;
     }
 

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss

@@ -0,0 +1,151 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../../internal/styles' as styles;
+
+.drawers-container {
+  background-color: transparent;
+  display: flex;
+  grid-column: 5;
+  grid-row: 1 / span 5;
+  height: var(#{custom-props.$contentHeight});
+  pointer-events: none;
+  position: sticky;
+  top: var(#{custom-props.$offsetTop});
+  z-index: 830;
+
+  &.has-open-drawer {
+    background-color: awsui.$color-background-container-content;
+    box-shadow: awsui.$shadow-panel;
+  }
+
+  @include styles.with-motion {
+    transition: background-color awsui.$motion-duration-refresh-only-fast;
+  }
+
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    /* stylelint-disable scss/operator-no-newline-after */
+    max-width: calc(
+      var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) -
+        var(#{custom-props.$defaultMinContentWidth}) - var(#{custom-props.$contentGapRight})
+    );
+    /* stylelint-enable scss/operator-no-newline-after */
+  }
+
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    position: fixed;
+    right: 0;
+    top: var(#{custom-props.$offsetTop});
+    z-index: 1001;
+  }
+}
+
+.drawers-desktop-triggers-container {
+  @include styles.styles-reset;
+  background-color: transparent;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  overscroll-behavior-y: contain;
+
+  &:not(.has-multiple-triggers).has-open-drawer {
+    width: 0;
+  }
+
+  &.has-multiple-triggers.has-open-drawer {
+    background-color: awsui.$color-background-container-content;
+
+    @include styles.with-motion {
+      transition: background-color awsui.$motion-duration-refresh-only-fast;
+    }
+  }
+
+  &:not(.has-multiple-triggers):not(.has-open-drawer) {
+    width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+
+    @include styles.with-motion {
+      transition: width awsui.$motion-duration-refresh-only-fast;
+    }
+  }
+}
+
+.drawers-trigger-content {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: awsui.$space-xs;
+  padding-top: awsui.$space-scaled-s;
+  width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+
+  &:not(.has-multiple-triggers).has-open-drawer {
+    opacity: 0;
+  }
+
+  &:not(.has-multiple-triggers):not(.has-open-drawer) {
+    opacity: 1;
+
+    @include styles.with-motion {
+      transition: opacity awsui.$motion-duration-refresh-only-medium;
+      transition-delay: calc(awsui.$motion-duration-refresh-only-fast / 1.5);
+    }
+  }
+}
+
+.drawer {
+  #{custom-props.$activeDrawerWidth}: 290px;
+  background-color: awsui.$color-background-container-content;
+  border-color: transparent;
+  display: grid;
+  flex-shrink: 0;
+  grid-template-columns: 1fr auto awsui.$space-m;
+  grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior-y: contain;
+  pointer-events: auto;
+  word-wrap: break-word;
+
+  > .drawer-close-button {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  > .drawer-content {
+    grid-column: 1 / span 3;
+    grid-row: 1 / span 3;
+    width: var(#{custom-props.$activeDrawerWidth});
+  }
+
+  &:not(.is-drawer-open) {
+    opacity: 0;
+    width: 0;
+  }
+
+  &.is-drawer-open {
+    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    opacity: 1;
+    width: var(#{custom-props.$activeDrawerWidth});
+  }
+
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-refresh-only-fast;
+    transition-property: border-color, opacity, width;
+  }
+
+  @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
+    &.is-drawer-open {
+      #{custom-props.$activeDrawerWidth}: 320px;
+    }
+  }
+
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    &.is-drawer-open {
+      #{custom-props.$activeDrawerWidth}: 100vw;
+    }
+  }
+}

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -52,7 +52,7 @@ section.split-panel-bottom {
     grid-column-start: 2;
   }
 
-  &.is-tools-open.position-bottom {
+  &.has-open-drawer.position-bottom {
     grid-column-end: 5;
   }
 

package/lib/internal/scss/app-layout/visual-refresh/styles.scss

@@ -5,6 +5,7 @@
 
 @use './app-bar.scss';
 @use './background.scss';
+@use './drawers.scss';
 @use './header.scss';
 @use './layout.scss';
 @use './main.scss';

package/lib/internal/scss/button/styles.scss

@@ -38,8 +38,10 @@
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  &:not(.hide-focus-outline) {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    }
   }
   &.variant-icon,
   &.variant-modal-dismiss,
@@ -53,7 +55,7 @@
       );
     }
   }
-  &.variant-inline-icon {
+  &.variant-inline-icon:not(.hide-focus-outline) {
     @include focus-visible.when-visible {
       @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
     }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,32 +1,33 @@
 
-    $offsetTop: --awsui-offset-top-lgrg0d;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-lgrg0d;
-$contentGapLeft: --awsui-content-gap-left-lgrg0d;
-$contentGapRight: --awsui-content-gap-right-lgrg0d;
-$contentHeight: --awsui-content-height-lgrg0d;
-$defaultMaxContentWidth: --awsui-default-max-content-width-lgrg0d;
-$defaultMinContentWidth: --awsui-default-min-content-width-lgrg0d;
-$footerHeight: --awsui-footer-height-lgrg0d;
-$headerHeight: --awsui-header-height-lgrg0d;
-$layoutWidth: --awsui-layout-width-lgrg0d;
-$mainOffsetLeft: --awsui-main-offset-left-lgrg0d;
-$maxContentWidth: --awsui-max-content-width-lgrg0d;
-$minContentWidth: --awsui-min-content-width-lgrg0d;
-$notificationsHeight: --awsui-notifications-height-lgrg0d;
-$overlapHeight: --awsui-overlap-height-lgrg0d;
-$navigationWidth: --awsui-navigation-width-lgrg0d;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-lgrg0d;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-lgrg0d;
-$splitPanelHeight: --awsui-split-panel-height-lgrg0d;
-$splitPanelMinWidth: --awsui-split-panel-min-width-lgrg0d;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-lgrg0d;
-$toolsMaxWidth: --awsui-tools-max-width-lgrg0d;
-$toolsWidth: --awsui-tools-width-lgrg0d;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-lgrg0d;
-$contentScrollMargin: --awsui-content-scroll-margin-lgrg0d;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-lgrg0d;
-$flashbarStackIndex: --awsui-flashbar-stack-index-lgrg0d;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-lgrg0d;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-lgrg0d;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-lgrg0d;
+    $activeDrawerWidth: --awsui-active-drawer-width-3j0evk;
+$offsetTop: --awsui-offset-top-3j0evk;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-3j0evk;
+$contentGapLeft: --awsui-content-gap-left-3j0evk;
+$contentGapRight: --awsui-content-gap-right-3j0evk;
+$contentHeight: --awsui-content-height-3j0evk;
+$defaultMaxContentWidth: --awsui-default-max-content-width-3j0evk;
+$defaultMinContentWidth: --awsui-default-min-content-width-3j0evk;
+$footerHeight: --awsui-footer-height-3j0evk;
+$headerHeight: --awsui-header-height-3j0evk;
+$layoutWidth: --awsui-layout-width-3j0evk;
+$mainOffsetLeft: --awsui-main-offset-left-3j0evk;
+$maxContentWidth: --awsui-max-content-width-3j0evk;
+$minContentWidth: --awsui-min-content-width-3j0evk;
+$notificationsHeight: --awsui-notifications-height-3j0evk;
+$overlapHeight: --awsui-overlap-height-3j0evk;
+$navigationWidth: --awsui-navigation-width-3j0evk;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-3j0evk;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-3j0evk;
+$splitPanelHeight: --awsui-split-panel-height-3j0evk;
+$splitPanelMinWidth: --awsui-split-panel-min-width-3j0evk;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-3j0evk;
+$toolsMaxWidth: --awsui-tools-max-width-3j0evk;
+$toolsWidth: --awsui-tools-width-3j0evk;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-3j0evk;
+$contentScrollMargin: --awsui-content-scroll-margin-3j0evk;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-3j0evk;
+$flashbarStackIndex: --awsui-flashbar-stack-index-3j0evk;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-3j0evk;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-3j0evk;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-3j0evk;
     

package/lib/internal/scss/internal/hooks/focus-visible/index.scss

@@ -6,7 +6,8 @@
 // mixin to apply styles only when keyboard focus is needed
 // requires JavaScript part from useFocusVisible hook to be applied
 @mixin when-visible {
-  &[data-awsui-focus-visible='true']:focus {
+  // stylelint-disable-next-line selector-combinator-disallowed-list
+  body[data-awsui-focus-visible='true'] &:focus {
     @content;
   }
 }

package/lib/internal/scss/space-between/styles.scss

@@ -50,33 +50,21 @@ $sizes-vertical: (
 
   @each $name, $size in $sizes-horizontal {
     &-#{$name} {
-      // This cancels out the margins of the children in the first row / in the first column.
-      margin-left: calc(-1 * #{$size});
-      margin-bottom: calc(-1 * #{$size});
+      gap: $size;
     }
   }
 }
 
-@each $name, $size in $sizes-horizontal {
-  .child-horizontal-#{$name} {
-    margin-left: $size;
-    margin-bottom: $size;
-
-    // This is a fix for IE11. It prevents the content from overflowing.
-    min-width: 1px;
-  }
-}
-
 /*
  * Vertical variant
  */
 
 .vertical {
   flex-direction: column;
-}
 
-@each $name, $size in $sizes-vertical {
-  .child-vertical-#{$name}:not(:last-child) {
-    margin-bottom: $size;
+  @each $name, $size in $sizes-vertical {
+    &-#{$name} {
+      row-gap: $size;
+    }
   }
 }

package/lib/internal/scss/table/body-cell/styles.scss

@@ -181,6 +181,12 @@ $border-placeholder: awsui.$border-item-width solid transparent;
     }
 
     &:not(.body-cell-edit-active) {
+      @mixin focused-editor-styles {
+        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        & > .body-cell-editor {
+          opacity: 1;
+        }
+      }
       & > .body-cell-editor {
         opacity: 0;
       }
@@ -190,6 +196,11 @@ $border-placeholder: awsui.$border-item-width solid transparent;
         border: awsui.$border-divider-list-width solid awsui.$color-border-control-default;
         left: calc(-1 * #{awsui.$border-divider-list-width});
         right: calc(-1 * #{awsui.$border-divider-list-width});
+        @include focused-editor-styles;
+        &:first-child {
+          left: 0;
+          right: 0;
+        }
         & > .body-cell-editor {
           padding-right: calc(#{awsui.$space-xs} - (2 * #{awsui.$border-divider-list-width}));
         }
@@ -206,18 +217,9 @@ $border-placeholder: awsui.$border-item-width solid transparent;
           padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
         }
       }
-      &:hover,
-      &[data-awsui-focus-visible='true']:focus-within {
-        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
-        & > .body-cell-editor {
-          opacity: 1;
-        }
-      }
-      &:hover:first-child {
-        left: 0;
-        right: 0;
-      }
-      &[data-awsui-focus-visible='true']:focus-within {
+      // stylelint-disable-next-line selector-combinator-disallowed-list
+      body[data-awsui-focus-visible='true'] &:focus-within {
+        @include focused-editor-styles;
         @include styles.focus-highlight(
           (
             'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),

package/lib/internal/scss/table/header-cell/styles.scss

@@ -81,7 +81,8 @@
     @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
   }
 
-  &.header-cell-fake-focus {
+  // stylelint-disable-next-line selector-combinator-disallowed-list
+  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
     @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
   }
 

package/lib/internal/scss/table/resizer/styles.scss

@@ -50,7 +50,8 @@ $active-separator-width: 2px;
       }
     }
   }
-  &.has-focus {
+  // stylelint-disable-next-line selector-combinator-disallowed-list
+  body[data-awsui-focus-visible='true'] &.has-focus {
     @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
     position: absolute;
     &::before {

package/lib/internal/template/annotation-context/annotation/annotation-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-trigger.d.ts","sourceRoot":"lib/default/","sources":["annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IAEd,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACnD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;CACzB;;AAED,wBA0BG"}
+{"version":3,"file":"annotation-trigger.d.ts","sourceRoot":"lib/default/","sources":["annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IAEd,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,WAAW,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACnD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;CACzB;;AAED,wBAuBG"}

package/lib/internal/template/annotation-context/annotation/annotation-trigger.js

@@ -3,14 +3,12 @@
 import React, { useCallback } from 'react';
 import styles from './styles.css.js';
 import { AnnotationIcon } from './annotation-icon';
-import useFocusVisible from '../../internal/hooks/focus-visible/index.js';
 export default React.forwardRef(function AnnotationTrigger({ open, onClick: onClickHandler, i18nStrings, taskLocalStepIndex, totalLocalSteps }, ref) {
-    const focusVisible = useFocusVisible();
     const onClick = useCallback((event) => {
         event.preventDefault();
         onClickHandler();
     }, [onClickHandler]);
-    return (React.createElement("button", Object.assign({ ref: ref, className: styles.hotspot, "aria-haspopup": "dialog", "aria-label": i18nStrings.labelHotspot(open, taskLocalStepIndex !== null && taskLocalStepIndex !== void 0 ? taskLocalStepIndex : 0, totalLocalSteps !== null && totalLocalSteps !== void 0 ? totalLocalSteps : 0), onClick: onClick }, focusVisible),
+    return (React.createElement("button", { ref: ref, className: styles.hotspot, "aria-haspopup": "dialog", "aria-label": i18nStrings.labelHotspot(open, taskLocalStepIndex !== null && taskLocalStepIndex !== void 0 ? taskLocalStepIndex : 0, totalLocalSteps !== null && totalLocalSteps !== void 0 ? totalLocalSteps : 0), onClick: onClick },
         React.createElement(AnnotationIcon, { open: open })));
 });
 //# sourceMappingURL=annotation-trigger.js.map

package/lib/internal/template/annotation-context/annotation/annotation-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-trigger.js","sourceRoot":"lib/default/","sources":["annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAa1E,eAAe,KAAK,CAAC,UAAU,CAA4C,SAAS,iBAAiB,CACnG,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAA0B,EAC3G,GAAG;IAEH,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAuB,EAAE,EAAE;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,OAAO,mBACX,QAAQ,gBACV,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,EACzF,OAAO,EAAE,OAAO,IACZ,YAAY;QAEhB,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport styles from './styles.css.js';\nimport { AnnotationIcon } from './annotation-icon';\nimport useFocusVisible from '../../internal/hooks/focus-visible/index.js';\nimport { AnnotationContextProps } from '../interfaces';\n\nexport interface AnnotationTriggerProps {\n  open: boolean;\n\n  onClick: () => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n  taskLocalStepIndex: number;\n  totalLocalSteps: number;\n}\n\nexport default React.forwardRef<HTMLButtonElement, AnnotationTriggerProps>(function AnnotationTrigger(\n  { open, onClick: onClickHandler, i18nStrings, taskLocalStepIndex, totalLocalSteps }: AnnotationTriggerProps,\n  ref\n) {\n  const focusVisible = useFocusVisible();\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      onClickHandler();\n    },\n    [onClickHandler]\n  );\n\n  return (\n    <button\n      ref={ref}\n      className={styles.hotspot}\n      aria-haspopup=\"dialog\"\n      aria-label={i18nStrings.labelHotspot(open, taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}\n      onClick={onClick}\n      {...focusVisible}\n    >\n      <AnnotationIcon open={open} />\n    </button>\n  );\n});\n"]}
+{"version":3,"file":"annotation-trigger.js","sourceRoot":"lib/default/","sources":["annotation-context/annotation/annotation-trigger.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAanD,eAAe,KAAK,CAAC,UAAU,CAA4C,SAAS,iBAAiB,CACnG,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAA0B,EAC3G,GAAG;IAEH,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAuB,EAAE,EAAE;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,OAAO,mBACX,QAAQ,gBACV,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,EACzF,OAAO,EAAE,OAAO;QAEhB,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport styles from './styles.css.js';\nimport { AnnotationIcon } from './annotation-icon';\nimport { AnnotationContextProps } from '../interfaces';\n\nexport interface AnnotationTriggerProps {\n  open: boolean;\n\n  onClick: () => void;\n\n  i18nStrings: AnnotationContextProps['i18nStrings'];\n  taskLocalStepIndex: number;\n  totalLocalSteps: number;\n}\n\nexport default React.forwardRef<HTMLButtonElement, AnnotationTriggerProps>(function AnnotationTrigger(\n  { open, onClick: onClickHandler, i18nStrings, taskLocalStepIndex, totalLocalSteps }: AnnotationTriggerProps,\n  ref\n) {\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault();\n      onClickHandler();\n    },\n    [onClickHandler]\n  );\n\n  return (\n    <button\n      ref={ref}\n      className={styles.hotspot}\n      aria-haspopup=\"dialog\"\n      aria-label={i18nStrings.labelHotspot(open, taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}\n      onClick={onClick}\n    >\n      <AnnotationIcon open={open} />\n    </button>\n  );\n});\n"]}

package/lib/internal/template/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_1srfv_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1srfv_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1srfv_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1srfv_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1srfv_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1srfv_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1srfv_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1srfv_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1srfv_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1srfv_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1srfv_137",
-  "annotation": "awsui_annotation_1hpp3_1srfv_145",
-  "next-button": "awsui_next-button_1hpp3_1srfv_146",
-  "previous-button": "awsui_previous-button_1hpp3_1srfv_147",
-  "finish-button": "awsui_finish-button_1hpp3_1srfv_148",
-  "header": "awsui_header_1hpp3_1srfv_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1srfv_150",
-  "content": "awsui_content_1hpp3_1srfv_151",
-  "description": "awsui_description_1hpp3_1srfv_155",
-  "actionBar": "awsui_actionBar_1hpp3_1srfv_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1srfv_167",
-  "divider": "awsui_divider_1hpp3_1srfv_171",
-  "hotspot": "awsui_hotspot_1hpp3_1srfv_175",
-  "icon": "awsui_icon_1hpp3_1srfv_215"
+  "arrow": "awsui_arrow_1hpp3_1umef_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
+  "annotation": "awsui_annotation_1hpp3_1umef_145",
+  "next-button": "awsui_next-button_1hpp3_1umef_146",
+  "previous-button": "awsui_previous-button_1hpp3_1umef_147",
+  "finish-button": "awsui_finish-button_1hpp3_1umef_148",
+  "header": "awsui_header_1hpp3_1umef_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
+  "content": "awsui_content_1hpp3_1umef_151",
+  "description": "awsui_description_1hpp3_1umef_155",
+  "actionBar": "awsui_actionBar_1hpp3_1umef_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
+  "divider": "awsui_divider_1hpp3_1umef_171",
+  "hotspot": "awsui_hotspot_1hpp3_1umef_175",
+  "icon": "awsui_icon_1hpp3_1umef_215"
 };