@cloudscape-design/components-themeable 3.0.679 → 3.0.681

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1b84e107d7ba936913ae8890124156e5984dc8fc"
+  "commit": "061d78adeeb31508831aa27e9a84a3409f50632d"
 }

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

@@ -0,0 +1,53 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/styles' as styles;
+@use '../../constants.scss' as constants;
+
+.drawer {
+  position: sticky;
+  z-index: 830;
+  background-color: awsui.$color-background-container-content;
+  display: grid;
+  grid-template-columns: awsui.$space-m 1fr;
+
+  block-size: 100%;
+  overflow: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-y: contain;
+  pointer-events: auto;
+  word-wrap: break-word;
+
+  > .drawer-content-container {
+    grid-column: 1 / span 2;
+    grid-row: 1;
+    display: grid;
+    grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
+    grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
+    overflow-y: auto;
+
+    > .drawer-close-button {
+      grid-column: 3;
+      grid-row: 2;
+      z-index: 1;
+    }
+
+    > .drawer-content {
+      grid-column: 1 / span 4;
+      grid-row: 1 / span 2;
+      &.drawer-content-hidden {
+        display: none;
+      }
+    }
+  }
+
+  > .drawer-slider {
+    grid-column: 1;
+    grid-row: 1;
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,71 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../../internal/styles' as styles;
+@use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+.navigation {
+  position: sticky;
+  background-color: awsui.$color-background-container-content;
+  inset-block-end: 0;
+  block-size: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-y: contain;
+  word-wrap: break-word;
+  pointer-events: auto;
+  z-index: 1001;
+
+  // TODO:re-enable all transitions
+  @keyframes openNavigation {
+    from {
+      opacity: 0;
+      inline-size: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
+    }
+
+    to {
+      opacity: 1;
+      inline-size: var(#{custom-props.$navigationWidth});
+    }
+  }
+
+  // All content is hidden by the overflow-x property
+  &:not(.is-navigation-open) {
+    inline-size: 0;
+    // We need to hide the closed panel to make containing focusable elements not focusable anymore.
+    display: none;
+  }
+
+  // Apply the animation when the Navigation is opened
+  &.is-navigation-open {
+    &.animating {
+      @include styles.with-motion {
+        animation: openNavigation awsui.$motion-duration-refresh-only-fast;
+      }
+    }
+  }
+
+  /*
+  A non-semantic node is added with a fixed width equal to the final Navigation
+  width. This will create the visual appearance of horizontal movement and
+  prevent unwanted text wrapping.
+  */
+  > .animated-content {
+    inline-size: var(#{custom-props.$navigationWidth});
+  }
+
+  // The Navigation drawer will take up the entire viewport on mobile
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    #{custom-props.$navigationWidth}: 100vw;
+  }
+}
+
+.hide-navigation {
+  position: absolute;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: awsui.$size-vertical-panel-icon-offset;
+}

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

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.sticky-notifications {
+  position: sticky;
+  z-index: 850;
+}

package/lib/internal/scss/app-layout/{skeleton → visual-refresh-toolbar/skeleton}/styles.scss

@@ -2,10 +2,16 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@use '../../internal/styles' as styles;
-@use '../../internal/styles/tokens' as awsui;
-@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '../constants' as constants;
+@use '../../../internal/styles' as styles;
+@use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../../constants' as constants;
+
+@mixin desktop-only {
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    @content;
+  }
+}
 
 .root {
   @include styles.styles-reset;
@@ -27,16 +33,17 @@
   grid-template-rows: min-content min-content 1fr;
 
   // desktop grid
-  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+  @include desktop-only {
     grid-template-areas:
-      'navigation topBar       topBar        topBar    tools'
-      'navigation .         notifications    .         tools'
-      'navigation .             main         .         tools';
+      'navigation toolbar      toolbar       toolbar   toolbar         tools'
+      'navigation .         notifications    .         sideSplitPanel  tools'
+      'navigation .             main         .         sideSplitPanel  tools';
     grid-template-columns:
       min-content
       minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
       minmax(0, var(#{custom-props.$maxContentWidth}))
       minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
+      min-content
       min-content;
     grid-template-rows: min-content min-content 1fr min-content;
 
@@ -63,11 +70,11 @@
   grid-row: 1 / -1;
   grid-column: 1/ -1;
   background: awsui.$color-background-container-content;
-  z-index: 1;
+  z-index: 850;
 }
 
 .navigation {
-  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+  @include desktop-only {
     grid-area: navigation;
     inline-size: var(#{custom-props.$navigationWidth});
     border-inline-end: 1px solid awsui.$color-border-divider-panel-side;
@@ -75,20 +82,42 @@
 }
 
 .tools {
-  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+  @include desktop-only {
     grid-area: tools;
     inline-size: var(#{custom-props.$toolsWidth});
     border-inline-start: 1px solid awsui.$color-border-divider-panel-side;
   }
 }
 
-.top-bar {
-  grid-area: topBar;
+.split-panel-side {
+  @include desktop-only {
+    grid-area: sideSplitPanel;
+    border-inline-start: 1px solid awsui.$color-border-divider-panel-side;
+  }
+}
+
+.split-panel-bottom {
+  position: sticky;
+  z-index: 840;
+  align-self: end;
+  grid-area: main;
+  grid-column: 1 / -1;
+  @include desktop-only {
+    grid-column: 2 / span 3;
+  }
+}
+
+.panel-hidden {
+  display: none;
+}
+
+.toolbar-container {
+  grid-area: toolbar;
   block-size: 48px;
   border-block-end: 1px solid awsui.$color-border-divider-panel-bottom;
 }
 
-.notifications {
+.notifications-container {
   grid-area: notifications;
   &:not(:empty) {
     padding-block-start: awsui.$space-scaled-xs;
@@ -106,7 +135,7 @@
   margin-block-end: awsui.$space-layout-content-bottom;
   &-disable-paddings {
     grid-column: 1 / -1;
-    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    @include desktop-only {
       grid-column: 2 / span 3;
     }
     margin-block: 0;
@@ -116,3 +145,11 @@
 .content-header {
   margin-block-end: awsui.$space-content-header-padding-bottom;
 }
+
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.unfocusable-mobile * {
+  visibility: hidden;
+  @include desktop-only {
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../../internal/styles' as styles;
+@use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/generated/custom-css-properties' as custom-props;
+
+.split-panel-side {
+  position: sticky;
+  z-index: 830;
+}

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

@@ -0,0 +1,95 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../../internal/styles' as styles;
+@use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
+
+.universal-toolbar {
+  background-color: awsui.$color-background-layout-panel-content;
+  border-block-end: 1px solid awsui.$color-border-divider-panel-bottom;
+  box-sizing: border-box;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
+  position: sticky;
+  z-index: 840;
+  @include styles.with-motion {
+    transition: ease awsui.$motion-duration-refresh-only-slow;
+    transition-property: inset-block-start, opacity;
+  }
+
+  &.disable-body-scroll {
+    inset-block-start: 0px;
+  }
+
+  &.toolbar-hidden {
+    opacity: 0;
+  }
+
+  > .toolbar-container {
+    block-size: 48px;
+    align-items: center;
+    display: grid;
+    column-gap: awsui.$space-static-xs;
+    inline-size: 100%;
+    grid-template-columns: min-content auto minmax(140px, 1fr);
+    grid-template-rows: 1fr;
+
+    > .universal-toolbar-nav {
+      grid-column: 1;
+      padding-inline-end: awsui.$space-static-xxs;
+    }
+
+    > .universal-toolbar-breadcrumbs {
+      grid-column: 2;
+      background-color: transparent;
+      flex: 1 0;
+    }
+
+    > .universal-toolbar-drawers {
+      grid-column: 3;
+      column-gap: awsui.$space-static-xs;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.drawers-desktop-triggers-container {
+  @include styles.styles-reset;
+  background-color: transparent;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-y: contain;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-x: contain;
+  inline-size: 100%;
+}
+
+.drawers-trigger-content {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: awsui.$space-xs;
+  justify-content: flex-end;
+
+  &:not(.has-multiple-triggers).has-open-drawer {
+    opacity: 0;
+  }
+
+  &:not(.has-multiple-triggers):not(.has-open-drawer) {
+    opacity: 1;
+  }
+}
+
+.drawers-trigger {
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,126 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../../../internal/styles' as styles;
+@use '../../../../internal/styles/tokens' as awsui;
+@use '../../../../internal/hooks/focus-visible' as focus-visible;
+
+@mixin trigger-selected-styles {
+  background: awsui.$color-background-layout-toggle-selected-default;
+  color: awsui.$color-text-layout-toggle-selected;
+  border-block: awsui.$border-field-width solid awsui.$color-background-layout-toggle-selected-default;
+  border-inline: awsui.$border-field-width solid awsui.$color-background-layout-toggle-selected-default;
+
+  &:hover {
+    background: awsui.$color-background-layout-toggle-selected-hover;
+    border-color: awsui.$color-background-layout-toggle-selected-hover;
+  }
+  &:active {
+    background: awsui.$color-background-layout-toggle-selected-active;
+    border-color: awsui.$color-background-layout-toggle-selected-active;
+  }
+}
+
+@mixin trigger-button-styles {
+  background: transparent;
+  color: awsui.$color-text-interactive-default;
+  border-block: awsui.$border-field-width solid transparent;
+  border-inline: awsui.$border-field-width solid transparent;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: awsui.$space-layout-toggle-diameter;
+  inline-size: awsui.$space-layout-toggle-diameter;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  &:hover {
+    background: awsui.$color-background-input-disabled;
+    color: awsui.$color-text-interactive-hover;
+    border-color: awsui.$color-background-input-disabled;
+  }
+
+  &:active {
+    background: awsui.$color-background-control-disabled;
+    color: awsui.$color-text-interactive-hover;
+    border-color: awsui.$color-background-control-disabled;
+  }
+}
+
+.trigger-badge-wrapper {
+  @include trigger-button-styles();
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  clip-path: path(
+    'M34.2193 10.1845C33.3961 10.579 32.4739 10.8 31.5 10.8C28.0206 10.8 25.2 7.97939 25.2 4.5C25.2 3.52614 25.421 2.6039 25.8155 1.78066C23.4518 0.639587 20.8006 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18C36 15.1994 35.3604 12.5482 34.2193 10.1845Z'
+  );
+
+  @include styles.with-direction('rtl') {
+    clip-path: path(
+      'M1.78066 10.1845C2.6039 10.579 3.52615 10.8 4.5 10.8C7.97939 10.8 10.8 7.97939 10.8 4.5C10.8 3.52614 10.579 2.6039 10.1845 1.78066C12.5482 0.639587 15.1994 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18C0 15.1994 0.639587 12.5482 1.78066 10.1845Z'
+    );
+  }
+}
+
+/*
+Warning! If these design tokens for width change it will adversely impact 
+the calculation used to determine the Split Panel maximum width in the 
+handleSplitPanelMaxWidth function in the context.
+*/
+.trigger {
+  @include trigger-button-styles();
+  cursor: pointer;
+  pointer-events: auto;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(3px);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.selected {
+    @include trigger-selected-styles();
+
+    > .trigger-badge-wrapper {
+      @include trigger-selected-styles();
+    }
+  }
+
+  &.badge,
+  &.badge:hover,
+  &.badge:active {
+    background: transparent;
+  }
+}
+
+.trigger-wrapper {
+  position: relative;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+}
+
+.dot {
+  position: absolute;
+  inline-size: 9px;
+  block-size: 9px;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
+  background-color: awsui.$color-background-badge-icon;
+  inset-block-start: 1px;
+  inset-inline-end: 1px;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"classic.d.ts","sourceRoot":"","sources":["../../../src/app-layout/classic.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,cAAc,EAA8B,MAAM,cAAc,CAAC;AA+B1E,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;4CAqjBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"classic.d.ts","sourceRoot":"","sources":["../../../src/app-layout/classic.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,cAAc,EAA8B,MAAM,cAAc,CAAC;AA+B1E,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;4CAsjBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/internal/template/app-layout/classic.js

@@ -41,6 +41,7 @@ const ClassicAppLayout = React.forwardRef((_a, ref) => {
         fireNonCancelableEvent(onToolsChange, { open });
     };
     const { drawers, activeDrawer, minDrawerSize, activeDrawerSize, activeDrawerId, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers(Object.assign({ drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId }, rest), ariaLabels, {
+        disableDrawersMerge: true,
         ariaLabels,
         tools,
         toolsOpen,