@cloudscape-design/components-themeable 3.0.1311 → 3.0.1313

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "22d5a6b41ce5227a2c00c9075f17f45fdce50abc"
+  "commit": "82d11d6689b17a690065d458b0e747753087e3e6"
 }

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

@@ -22,6 +22,12 @@
     background-color: awsui.$color-background-container-content;
   }
 
+  &.one-theme {
+    &.has-open-drawer {
+      background-color: awsui.$color-background-layout-panel-content;
+    }
+  }
+
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     max-inline-size: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) - var(
@@ -66,6 +72,12 @@
     background-color: awsui.$color-background-container-content;
   }
 
+  &.one-theme {
+    &.has-multiple-triggers.has-open-drawer {
+      background-color: awsui.$color-background-layout-panel-content;
+    }
+  }
+
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
     inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   }
@@ -125,6 +137,10 @@
   pointer-events: auto;
   word-wrap: break-word;
 
+  &.one-theme {
+    background-color: awsui.$color-background-layout-panel-content;
+  }
+
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;

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

@@ -82,7 +82,7 @@ nav.show-navigation {
 }
 
 nav.navigation {
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   inset-block-end: 0;
   block-size: 100%;
   overflow-x: hidden;

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

@@ -95,6 +95,10 @@ viewport size and state of the Tools drawer.
     }
   }
 
+  &.one-theme {
+    background-color: awsui.$color-background-layout-panel-content;
+  }
+
   /*
   A non-semantic node is added with a fixed width equal to the final Tools
   width. This will create the visual appearance of horizontal movement and

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

@@ -28,7 +28,7 @@ $ai-drawer-heider-height: 42px;
 .drawer {
   position: sticky;
   z-index: constants.$drawer-z-index;
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   display: grid;
   grid-template-columns: awsui.$space-m 1fr;
   inline-size: var(#{custom-props.$drawerSize});

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

@@ -12,7 +12,7 @@
 .navigation-container {
   position: sticky;
   z-index: constants.$drawer-z-index;
-  background-color: awsui.$color-background-container-content;
+  background-color: awsui.$color-background-layout-panel-content;
   inset-block-end: 0;
   overflow-x: hidden;
   word-wrap: break-word;

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -120,6 +120,11 @@
   display: inline-block;
   margin-inline-start: auto;
 
+  &.one-theme {
+    inset-inline-end: calc(-1 * #{awsui.$space-xs});
+    inline-size: awsui.$space-s;
+  }
+
   @include styles.with-motion {
     transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
   }

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

@@ -50,6 +50,10 @@ $dropdown-trigger-icon-offset: 2px;
 }
 
 .trigger-button {
+  &.one-theme {
+    display: flex;
+    align-items: center;
+  }
   &.full-width {
     display: grid;
     grid-template-columns: 1fr auto;
@@ -110,6 +114,20 @@ $dropdown-trigger-icon-offset: 2px;
       margin-inline-start: calc(#{awsui.$border-width-button} * -1);
     }
   }
+
+  & > .trigger-item:not(:first-child).one-theme {
+    & > .trigger-button {
+      // Resets the padding-inline-end override applied by .visual-refresh above,
+      // so both sides stay at $space-xs - $dropdown-trigger-icon-offset.
+      padding-inline: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
+    }
+
+    &.has-trigger-text {
+      & > .trigger-button {
+        padding-inline: calc(#{awsui.$space-xs} + #{$dropdown-trigger-icon-offset});
+      }
+    }
+  }
 }
 .split-trigger {
   display: contents;

package/lib/internal/scss/expandable-section/styles.scss

@@ -14,6 +14,8 @@ $icon-width-medium: awsui.$size-icon-medium;
 $icon-margin-left: '(#{awsui.$line-height-body-m} - #{$icon-width-normal}) / -2';
 $icon-margin-right-normal: '#{awsui.$space-xxs} + #{awsui.$border-divider-list-width}';
 $icon-margin-right-medium: awsui.$space-xs;
+$icon-offset-inline: awsui.$space-xxs;
+$icon-offset-block: awsui.$space-xxxs;
 
 // Total space occupied by the expand icon on the left and its margins.
 // Useful to keep elements correctly aligned.
@@ -52,6 +54,21 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   // For vertical alignment of text in side navigation items
   &-container {
     margin-inline-end: $icon-margin-right-medium;
+    &.one-theme {
+      margin-inline-end: calc(#{$icon-margin-right-medium} + $icon-offset-inline);
+      inset-block-start: $icon-offset-block;
+      > .icon {
+        inset-block-start: calc(#{$icon-offset-block} * 3); // Double-check
+      }
+    }
+  }
+  &.one-theme {
+    display: inline-flex;
+    align-items: flex-start;
+    margin-inline-end: calc(#{$icon-margin-right-normal} + #{$icon-offset-inline});
+    > .icon {
+      inset-block-start: $icon-offset-block;
+    }
   }
 }
 

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -12,6 +12,7 @@
 
 $padding-inline-inner-filtering-token: styles.$control-padding-horizontal;
 $padding-block-inner-filtering-token: 0px;
+$icon-offset: awsui.$space-xxxs;
 
 .button-trigger {
   @include styles.styles-reset;
@@ -69,6 +70,9 @@ $padding-block-inner-filtering-token: 0px;
     inset-inline-end: styles.$control-icon-horizontal-offset;
     inset-block-start: styles.$control-icon-vertical-offset;
     color: awsui.$color-text-button-inline-icon-default;
+    &.one-theme {
+      inset-block-start: calc(styles.$control-icon-vertical-offset + $icon-offset);
+    }
   }
 
   &:hover {
@@ -80,6 +84,9 @@ $padding-block-inner-filtering-token: 0px;
   &.pressed {
     > .arrow {
       transform: rotate(-180deg);
+      &.one-theme {
+        inset-block-start: calc(styles.$control-icon-vertical-offset - $icon-offset);
+      }
     }
   }
 

package/lib/internal/scss/internal/components/drag-handle/styles.scss

@@ -64,7 +64,11 @@
 
   @include focus-visible.when-visible {
     &:not(.hide-focus) {
-      @include styles.focus-highlight(0px);
+      // Render the focus ring above container border overlays. The dropdown content border is
+      // drawn by `dropdown-shadow`'s `::after` at `z-index: 1`; since that `::after` is the
+      // wrapper's generated last child, it paints after (on top of) this deeply-nested ring in
+      // tree order, so the ring must use a strictly higher z-index to win.
+      @include styles.focus-highlight(0px, $z-index: 2);
     }
   }
 }

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "22d5a6b4";
+    $awsui-commit-hash: "82d11d66";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

package/lib/internal/scss/internal/styles/utils/theming.scss

@@ -11,3 +11,9 @@
     }
   }
 }
+
+@mixin one-theme-only($selector: '') {
+  :global(#{$selector}.awsui-one-theme) & {
+    @content;
+  }
+}

package/lib/internal/scss/segmented-control/styles.scss

@@ -24,8 +24,8 @@
 
 .segment-part {
   display: inline-grid;
-  border-inline: solid awsui.$border-width-field awsui.$color-border-input-default;
-  border-block: solid awsui.$border-width-field awsui.$color-border-input-default;
+  border-inline: solid awsui.$border-width-field awsui.$color-border-segment-wrapper;
+  border-block: solid awsui.$border-width-field awsui.$color-border-segment-wrapper;
   border-start-start-radius: awsui.$border-radius-button;
   border-start-end-radius: awsui.$border-radius-button;
   border-end-start-radius: awsui.$border-radius-button;

package/lib/internal/scss/status-indicator/styles.scss

@@ -41,6 +41,14 @@ $_status-backgrounds: (
   'not-started': awsui.$color-background-status-indicator-neutral,
 );
 
+$_background-overrides: (
+  'red': awsui.$color-background-status-indicator-error,
+  'grey': awsui.$color-background-status-indicator-neutral,
+  'blue': awsui.$color-background-status-indicator-info,
+  'green': awsui.$color-background-status-indicator-success,
+  'yellow': awsui.$color-background-status-indicator-warning,
+);
+
 .root {
   @include styles.default-text-style;
   @each $status in map.keys($_status-colors) {
@@ -58,6 +66,11 @@ $_status-backgrounds: (
       background: #{map.get($_status-backgrounds, $status)};
     }
   }
+  @each $color in map.keys($_background-overrides) {
+    &.color-override-#{$color} > .container {
+      background: #{map.get($_background-overrides, $color)};
+    }
+  }
 }
 
 .container {
@@ -72,6 +85,9 @@ $_status-backgrounds: (
 
     > .icon {
       white-space: nowrap;
+      &.one-theme {
+        vertical-align: middle;
+      }
     }
   }
 
@@ -79,9 +95,19 @@ $_status-backgrounds: (
     display: inline-block;
     word-wrap: break-word;
     word-break: break-all;
+    &.one-theme {
+      display: inline-flex;
+      align-items: flex-start;
+    }
 
     > .icon {
       padding-inline-end: awsui.$space-xxs;
+
+      &.one-theme {
+        display: inline-flex;
+        align-items: center;
+        margin-block-start: awsui.$space-xxxs;
+      }
     }
   }
 }
@@ -92,4 +118,14 @@ $_status-backgrounds: (
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: text-bottom;
+
+  &.one-theme {
+    text-overflow: unset;
+
+    > span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 }

package/lib/internal/scss/steps/styles.scss

@@ -116,3 +116,42 @@
     }
   }
 }
+
+// Vertical custom steps: a column-1 "rail" stacks the icon above a connector that grows to fill
+// the full height of the step (header + details), keeping the vertical line continuous and
+// connecting consecutive steps regardless of header height. Placed after `.horizontal` so
+// selectors stay in ascending specificity order.
+.root > .list > .container.custom-vertical {
+  // The rail stretches to the row height (default `align-items: stretch`), which is driven by the
+  // content column, so the connector always spans the full step.
+  > .rail {
+    grid-column: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > .connector {
+      grid-row: auto;
+      grid-column: auto;
+      flex: 1 1 auto;
+      background-color: awsui.$color-border-divider-default;
+      border-block: 0;
+      border-inline: 0;
+      inline-size: awsui.$border-divider-list-width;
+      block-size: auto;
+      min-block-size: awsui.$space-static-xs;
+      inset-inline-end: 0;
+      margin-block: awsui.$space-static-xxs 0;
+    }
+  }
+
+  > .content {
+    grid-column: 2;
+    // Allow long header/details text to wrap instead of stretching the grid column.
+    min-inline-size: 0;
+  }
+}
+
+.root > .list > .container.custom-vertical:last-of-type > .rail > .connector {
+  display: none;
+}

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

@@ -53,7 +53,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   position: relative;
   text-align: start;
   box-sizing: border-box;
-  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
+  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-weight-heading-s;
@@ -68,10 +68,21 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   &.header-cell-spans-rows {
     padding-block: awsui.$space-xxxs;
     padding-inline: awsui.$space-scaled-xs;
+    border-block-end-color: awsui.$color-border-divider-table-group;
+
+    > .resize-divider.resize-divider {
+      border-inline-start-color: awsui.$color-border-divider-table-group;
+    }
   }
 
   &-sticky {
     border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
+
+    &.header-cell-group,
+    &.header-cell-grouped,
+    &.header-cell-spans-rows {
+      border-block-end-color: awsui.$color-border-divider-table-group;
+    }
   }
   &-stuck:not(.header-cell-variant-full-page) {
     border-block-end-color: transparent;

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

@@ -46,9 +46,17 @@ th:not([data-rightmost]) > .divider,
   max-block-size: calc(100% - #{$block-gap});
   margin-block: auto;
   margin-inline: auto;
-  border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
+  border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   box-sizing: border-box;
 
+  &.divider-interactive {
+    border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
+  }
+
+  &.divider-grouped {
+    border-inline-start-color: awsui.$color-border-divider-table-group;
+  }
+
   // Position variants for grouped column headers.
   // All Column dividers maintain the same bottom gap ($block-gap / 2) as the default.
   &.divider-position-top {

package/lib/internal/scss/toggle/styles.scss

@@ -13,7 +13,7 @@ $toggle-width: 2.4 * styles.$base-size;
 $toggle-height: 1.6 * styles.$base-size;
 $handle-size: 1.2 * styles.$base-size;
 $handle-offset: 0.2 * styles.$base-size;
-$shadow-color: rgba(0, 0, 0, 0.25);
+$shadow-color: awsui.$color-shadow-toggle-handle;
 
 .root {
   @include styles.styles-reset;

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

@@ -5,8 +5,14 @@
 
 @use '../internal/styles/tokens' as awsui;
 
-.variant-normal {
+.toggle-button.variant-normal {
   background: awsui.$color-background-toggle-button-normal-default;
+  border-color: awsui.$color-border-toggle-button-normal-default;
+
+  &:hover {
+    background: awsui.$color-background-toggle-button-normal-hover;
+    border-color: awsui.$color-border-toggle-button-normal-hover;
+  }
 }
 
 .variant-normal.pressed {

package/lib/internal/scss/token/mixins.scss

@@ -42,10 +42,10 @@
   display: flex;
   align-items: center;
   background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background);
-  border-start-start-radius: awsui.$space-scaled-xxs;
-  border-start-end-radius: awsui.$space-scaled-xxs;
-  border-end-start-radius: awsui.$space-scaled-xxs;
-  border-end-end-radius: awsui.$space-scaled-xxs;
+  border-start-start-radius: awsui.$border-radius-token-inline;
+  border-start-end-radius: awsui.$border-radius-token-inline;
+  border-end-start-radius: awsui.$border-radius-token-inline;
+  border-end-end-radius: awsui.$border-radius-token-inline;
   color: awsui.$color-text-body-default;
   box-sizing: border-box;
   max-inline-size: 100%;

package/lib/internal/scss/token/styles.scss

@@ -10,6 +10,7 @@
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use './constants' as constants;
 @use './mixins.scss' as mixins;
+@use '../internal/styles/utils/theming' as theming;
 
 .root {
   @include styles.styles-reset;
@@ -54,6 +55,12 @@
     align-items: center;
     align-self: center;
   }
+
+  &:not(&-inline) {
+    @include theming.one-theme-only {
+      padding-block-start: 1px;
+    }
+  }
 }
 
 .icon {

package/lib/internal/scss/tree-view/tree-item/styles.scss

@@ -49,6 +49,16 @@ $item-toggle-column-width: 28px;
       }
     }
 
+    &.one-theme {
+      align-items: center;
+      > .expand-toggle-wrapper {
+        > .toggle {
+          inset-inline-start: 0px;
+          inset-block-start: 3px;
+        }
+      }
+    }
+
     > .structured-item-wrapper {
       grid-column: 2;
       grid-row: 1 / span 2;

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

@@ -53,7 +53,7 @@ function mapRuntimeHeaderActionsToHeaderActions(runtimeHeaderActions) {
             // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type
             ...('pressedIconSvg' in runtimeHeaderAction &&
                 runtimeHeaderAction.pressedIconSvg && {
-                iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),
+                pressedIconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),
             }),
         };
     });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useRef } from 'react';\n\nimport { ButtonGroupProps, ItemRuntime } from '../../button-group/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n  DrawerConfig as RuntimeDrawerConfig,\n  DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n  position?: 'side' | 'bottom';\n}\n\nexport interface DrawersLayout {\n  global: Array<RuntimeDrawer>;\n  localBefore: Array<RuntimeDrawer>;\n  localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n  id?: string;\n  mountContent: RuntimeDrawerConfig['mountContent'];\n  unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);\n  const activeDrawersIds = useContext(ActiveDrawersContext);\n  const isVisible = !!id && activeDrawersIds.includes(id);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountContent(container, {\n      onVisibilityChange: cb => {\n        visibilityChangeCallback.current = cb;\n      },\n    });\n    return () => {\n      unmountContent(container);\n      visibilityChangeCallback.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    visibilityChangeCallback.current?.(isVisible);\n  }, [isVisible]);\n\n  return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n  mountHeader: (container: HTMLElement) => void;\n  unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountHeader?.(container);\n    return () => {\n      unmountHeader?.(container);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nfunction mapRuntimeHeaderActionsToHeaderActions(\n  runtimeHeaderActions: ReadonlyArray<ItemRuntime>\n): ReadonlyArray<ButtonGroupProps.Item> {\n  return runtimeHeaderActions.map(runtimeHeaderAction => {\n    return {\n      ...runtimeHeaderAction,\n      // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n      ...('iconSvg' in runtimeHeaderAction &&\n        runtimeHeaderAction.iconSvg && {\n          iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),\n        }),\n      // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n      ...('pressedIconSvg' in runtimeHeaderAction &&\n        runtimeHeaderAction.pressedIconSvg && {\n          iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),\n        }),\n    };\n  });\n}\n\nconst convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {\n  if (!runtimeTrigger) {\n    return undefined;\n  }\n  // eslint-disable-next-line react/no-danger\n  return <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: runtimeTrigger }} />;\n};\n\nexport const mapRuntimeConfigToDrawer = (\n  runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n  headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n} => {\n  const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    trigger: trigger\n      ? {\n          ...(trigger.iconSvg && {\n            iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),\n          }),\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n    headerActions: runtimeDrawer.headerActions\n      ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n      : undefined,\n  };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n  runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n  headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n  exitExpandedModeTrigger?: React.ReactNode;\n  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;\n} => {\n  const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    ...(trigger && {\n      trigger: {\n        customIcon: convertRuntimeTriggerToReactNode(trigger?.customIcon),\n        iconSvg: convertRuntimeTriggerToReactNode(trigger?.iconSvg),\n      },\n    }),\n    exitExpandedModeTrigger: exitExpandedModeTrigger\n      ? {\n          customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger?.customIcon),\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    ...(runtimeDrawer.mountHeader && {\n      header: (\n        <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n      ),\n    }),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n    headerActions: runtimeDrawer.headerActions\n      ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n      : undefined,\n  };\n};\n\nexport function convertRuntimeDrawers(\n  localDrawers: Array<RuntimeDrawerConfig>,\n  globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n  const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n  const sorted = sortByPriority(converted);\n  return {\n    global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n    localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n    localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useRef } from 'react';\n\nimport { ButtonGroupProps, ItemRuntime } from '../../button-group/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n  DrawerConfig as RuntimeDrawerConfig,\n  DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n  position?: 'side' | 'bottom';\n}\n\nexport interface DrawersLayout {\n  global: Array<RuntimeDrawer>;\n  localBefore: Array<RuntimeDrawer>;\n  localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n  id?: string;\n  mountContent: RuntimeDrawerConfig['mountContent'];\n  unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);\n  const activeDrawersIds = useContext(ActiveDrawersContext);\n  const isVisible = !!id && activeDrawersIds.includes(id);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountContent(container, {\n      onVisibilityChange: cb => {\n        visibilityChangeCallback.current = cb;\n      },\n    });\n    return () => {\n      unmountContent(container);\n      visibilityChangeCallback.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    visibilityChangeCallback.current?.(isVisible);\n  }, [isVisible]);\n\n  return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n  mountHeader: (container: HTMLElement) => void;\n  unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountHeader?.(container);\n    return () => {\n      unmountHeader?.(container);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nfunction mapRuntimeHeaderActionsToHeaderActions(\n  runtimeHeaderActions: ReadonlyArray<ItemRuntime>\n): ReadonlyArray<ButtonGroupProps.Item> {\n  return runtimeHeaderActions.map(runtimeHeaderAction => {\n    return {\n      ...runtimeHeaderAction,\n      // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n      ...('iconSvg' in runtimeHeaderAction &&\n        runtimeHeaderAction.iconSvg && {\n          iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),\n        }),\n      // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n      ...('pressedIconSvg' in runtimeHeaderAction &&\n        runtimeHeaderAction.pressedIconSvg && {\n          pressedIconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),\n        }),\n    };\n  });\n}\n\nconst convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {\n  if (!runtimeTrigger) {\n    return undefined;\n  }\n  // eslint-disable-next-line react/no-danger\n  return <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: runtimeTrigger }} />;\n};\n\nexport const mapRuntimeConfigToDrawer = (\n  runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n  headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n} => {\n  const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    trigger: trigger\n      ? {\n          ...(trigger.iconSvg && {\n            iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),\n          }),\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n    headerActions: runtimeDrawer.headerActions\n      ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n      : undefined,\n  };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n  runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n  headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n  exitExpandedModeTrigger?: React.ReactNode;\n  onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;\n} => {\n  const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    ...(trigger && {\n      trigger: {\n        customIcon: convertRuntimeTriggerToReactNode(trigger?.customIcon),\n        iconSvg: convertRuntimeTriggerToReactNode(trigger?.iconSvg),\n      },\n    }),\n    exitExpandedModeTrigger: exitExpandedModeTrigger\n      ? {\n          customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger?.customIcon),\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    ...(runtimeDrawer.mountHeader && {\n      header: (\n        <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n      ),\n    }),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n    headerActions: runtimeDrawer.headerActions\n      ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n      : undefined,\n  };\n};\n\nexport function convertRuntimeDrawers(\n  localDrawers: Array<RuntimeDrawerConfig>,\n  globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n  const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n  const sorted = sortByPriority(converted);\n  return {\n    global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n    localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n    localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA+B9B;AAqPD;;;;;GAKG;AACH,wBAAgB,cAAc,uBA2E7B"}
+{"version":3,"file":"drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AA+BA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA+B9B;AAuPD;;;;;GAKG;AACH,wBAAgB,cAAc,uBA2E7B"}

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

@@ -3,6 +3,7 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
 import { InternalButton } from '../../button/internal';
 import customCssProps from '../../internal/generated/custom-css-properties';
 import { getLimitedValue } from '../../split-panel/utils/size-utils';
@@ -60,6 +61,7 @@ function ActiveDrawer() {
     return (React.createElement("aside", { id: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : undefined, "aria-hidden": isHidden, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, {
             [styles['is-drawer-open']]: activeDrawerId,
             [styles.unfocusable]: isUnfocusable,
+            [styles['one-theme']]: isThemeActive(Theme.OneTheme),
             [testutilStyles['active-drawer']]: activeDrawerId,
             [testutilStyles.tools]: isToolsDrawer,
         }), style: {
@@ -118,6 +120,7 @@ function DesktopTriggers() {
     return (React.createElement("aside", { className: clsx(styles['drawers-desktop-triggers-container'], {
             [styles['has-multiple-triggers']]: hasMultipleTriggers,
             [styles['has-open-drawer']]: hasOpenDrawer,
+            [styles['one-theme']]: isThemeActive(Theme.OneTheme),
         }), "aria-label": drawersAriaLabel, ref: triggersContainerRef, role: "region" },
         React.createElement("div", { className: clsx(styles['drawers-trigger-content'], {
                 [styles['has-multiple-triggers']]: hasMultipleTriggers,