@cumulus-ui/components 0.5.3 → 0.5.4

package/dist/index.js

@@ -7272,6 +7272,59 @@ var componentStyles18 = css46`
   inset-block-start: 0;
   inset-inline-start: 0;
 
+}
+.arrow-outer::after, .arrow-inner::after {
+  content: "";
+  box-sizing: border-box;
+  display: inline-block;
+  position: absolute;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inline-size: 14px;
+  block-size: 14px;
+  transform: rotate(45deg);
+  transform-origin: 0 100%;
+}
+.arrow-outer:dir(rtl)::after, .arrow-inner:dir(rtl)::after {
+  transform: rotate(-45deg);
+  transform-origin: 100% 100%;
+}
+.arrow-outer::after {
+  background-color: var(--color-border-popover-1ye6tz, #b4b4bb);
+}
+.arrow-inner {
+  inset-block-start: calc(var(--border-width-popover-nflirh, 2px) + 1px);
+}
+.arrow-inner::after {
+  border-start-start-radius: 1px;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  background-color: var(--color-background-popover-e20fy8, #ffffff);
+}
+.arrow-position-right-top > .arrow-outer::after, .arrow-position-right-bottom > .arrow-outer::after {
+  box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+.arrow-position-left-top > .arrow-outer::after, .arrow-position-left-bottom > .arrow-outer::after {
+  box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+.arrow-position-top-center > .arrow-outer::after, .arrow-position-top-right > .arrow-outer::after, .arrow-position-top-left > .arrow-outer::after, .arrow-position-top-responsive > .arrow-outer::after {
+  box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+.arrow-position-bottom-center > .arrow-outer::after, .arrow-position-bottom-right > .arrow-outer::after, .arrow-position-bottom-left > .arrow-outer::after, .arrow-position-bottom-responsive > .arrow-outer::after {
+  box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+
+.arrow-variant-info > .arrow-outer::after {
+  background-color: var(--color-border-status-info-qf6jok, #006ce0);
+}
+.arrow-variant-info > .arrow-inner::after {
+  background-color: var(--color-background-status-info-sfobba, #f0fbff);
+}
 
 .body {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
@@ -7308,8 +7361,47 @@ var componentStyles18 = css46`
   order: 1;
 }
 
-.dismiss-control {
+.header-row {
+  margin-block-end: var(--space-xs-ymlm0b, 8px);
+}
+
+.header {
+  word-wrap: break-word;
+  max-inline-size: 100%;
+  overflow: hidden;
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  flex: 1 1 auto;
+
+}
+.header > h2 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  display: inline;
+}
 
+.content {
+  word-wrap: break-word;
+  max-inline-size: 100%;
+  overflow: hidden;
+  word-break: normal;
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+.content-overflow-visible {
+  overflow: visible;
+}
 
 .container {
   display: inline-block;
@@ -7400,6 +7492,64 @@ var componentStyles18 = css46`
   transform: rotate(-90deg);
   transform-origin: 0 100%;
 
+}
+.container-arrow-position-right-top:dir(rtl), .container-arrow-position-right-bottom:dir(rtl) {
+  transform: rotate(90deg);
+  transform-origin: 100% 100%;
+}
+.container-arrow-position-right-top {
+  inset-block-start: calc(12px + 10px);
+  inset-inline-start: 0;
+}
+.container-arrow-position-right-bottom {
+  inset-block-end: 12px;
+  inset-inline-start: 0;
+}
+.container-arrow-position-left-top, .container-arrow-position-left-bottom {
+  transform: rotate(90deg);
+  transform-origin: 100% 100%;
+
+}
+.container-arrow-position-left-top:dir(rtl), .container-arrow-position-left-bottom:dir(rtl) {
+  transform: rotate(-90deg);
+  transform-origin: 0% 100%;
+}
+.container-arrow-position-left-top {
+  inset-block-start: calc(12px + 10px);
+  inset-inline-end: 0;
+}
+.container-arrow-position-left-bottom {
+  inset-block-end: 12px;
+  inset-inline-end: 0;
+}
+.container-arrow-position-top-center, .container-arrow-position-top-right, .container-arrow-position-top-left, .container-arrow-position-top-responsive {
+  transform: rotate(180deg);
+  transform-origin: 50% 50%;
+}
+.container-arrow-position-top-center {
+  inset-block-end: -10px;
+  inset-inline-start: calc(50% - 10px);
+}
+.container-arrow-position-top-right {
+  inset-block-end: -10px;
+  inset-inline-start: 12px;
+}
+.container-arrow-position-top-left {
+  inset-block-end: -10px;
+  inset-inline-start: calc(100% - 20px - 12px);
+}
+.container-arrow-position-bottom-center {
+  inset-block-start: -10px;
+  inset-inline-start: calc(50% - 10px);
+}
+.container-arrow-position-bottom-right {
+  inset-block-start: -10px;
+  inset-inline-start: 12px;
+}
+.container-arrow-position-bottom-left {
+  inset-block-start: -10px;
+  inset-inline-start: calc(100% - 20px - 12px);
+}
 
 .container {
   animation: awsui_awsui-motion-fade-in_xjuzf_45l16_1 var(--motion-duration-show-paced-otsjh8, 180ms) var(--motion-easing-show-paced-ym6eyn, ease-out);
@@ -17891,10 +18041,41 @@ import { property as property48, state as state16 } from "lit/decorators.js";
 // src/collection-preferences/styles.ts
 import { css as css107 } from "lit";
 var componentStyles47 = css107`
-.visible-content,
-.visible-content-toggle,
-.visible-content-groups,
-.visible-content-group {
+.visible-content-title {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-form-label-6sbm75, #0f141a);
+  margin-block-start: 0;
+  margin-block-end: var(--space-scaled-l-sej05l, 20px);
+  margin-inline: 0;
+}
+
+.visible-content-group-label {
+  color: var(--color-text-group-label-a2qc05, #424650);
+  padding-block-end: var(--space-xs-ymlm0b, 8px);
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
+}
+
+.visible-content-option {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding-block: var(--space-xs-ymlm0b, 8px);
+  padding-inline-start: var(--space-scaled-l-sej05l, 20px);
+  padding-inline-end: 0px;
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
+}
+.visible-content-option:last-child {
+  border-block-end: none;
+}
+
+.visible-content-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-inline-end: var(--space-l-2ud1p3, 20px);
+  flex-grow: 1;
+}
 
 .content-display-option-content {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
@@ -23891,6 +24072,287 @@ import { classMap as classMap54 } from "lit/directives/class-map.js";
 // src/code-editor/styles.ts
 import { css as css141 } from "lit";
 var componentStyles63 = css141`
+.code-editor-refresh .ace_editor .ace_gutter {
+  border-start-start-radius: calc(var(--border-radius-code-editor-5palck, 8px) - var(--border-item-width-miijiw, 2px));
+}
+.code-editor-refresh .ace_editor .ace_scroller {
+  border-start-end-radius: calc(var(--border-radius-code-editor-5palck, 8px) - var(--border-item-width-miijiw, 2px));
+}
+
+.code-editor .ace_editor {
+  font-family: Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace;
+  font-size: 14px;
+  line-height: 20px;
+}
+.code-editor .ace_editor .ace_gutter-cell.ace_error,
+.code-editor .ace_editor .ace_gutter-cell.ace_warning {
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: 4px 2px;
+}
+.code-editor .ace_editor .ace_gutter-cell.ace_info {
+  background-image: none;
+}
+.code-editor .ace_editor .ace_gutter-cell.ace_error {
+  color: var(--color-text-status-error-ksqavh, #db0000);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-cell.ace_error {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23db0000' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Ccircle cx='8' cy='8' r='7'/%3E %3Cpath d='M10.828 5.172l-5.656 5.656M10.828 10.828L5.172 5.172'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-cell.ace_error, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-cell.ace_error {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ff7a7a' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Ccircle cx='8' cy='8' r='7'/%3E %3Cpath d='M10.828 5.172l-5.656 5.656M10.828 10.828L5.172 5.172'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-cell.ace_warning {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23855900' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M8 1l7 14H1L8 1z'/%3E %3Cpath d='M7.99 12H8v.01h-.01zM8 6v4'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-cell.ace_warning, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-cell.ace_warning {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23fbd332' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M8 1l7 14H1L8 1z'/%3E %3Cpath d='M7.99 12H8v.01h-.01zM8 6v4'/%3E %3C/svg%3E");
+    }
+  }
+}
+.code-editor .ace_editor .ace_gutter-cell {
+  padding-inline: 24px 16px;
+}
+.code-editor .ace_editor .ace_fold-widget {
+  /* A good test case for disabled folds
+     <<html<<<<
+     </html>
+  */
+  inline-size: 14px;
+  margin-inline-end: -15px;
+  background-color: transparent;
+  border-block: none;
+  border-inline: none;
+}
+.code-editor .ace_editor .ace_gutter_annotation {
+  margin-inline-start: -21px;
+}
+.code-editor .ace_editor .ace_fold-widget,
+.code-editor .ace_editor .ace_gutter_annotation {
+  box-shadow: none;
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter_annotation:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter_annotation:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-1px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_fold-widget:focus::before,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter_annotation:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * -1px);
+  inset-block-start: calc(-1 * -1px);
+  inline-size: calc(100% + -1px + -1px);
+  block-size: calc(100% + -1px + -1px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.code-editor .ace_editor .ace_marker-layer > .ace_active-line {
+  background: transparent;
+  box-sizing: border-box;
+  border-block-start: 1px solid var(--color-border-code-editor-ace-active-line-light-theme-q6hsvt, #dedee3);
+  border-block-end: 1px solid var(--color-border-code-editor-ace-active-line-light-theme-q6hsvt, #dedee3);
+}
+.code-editor .ace_editor.ace_dark .ace_marker-layer > .ace_active-line {
+  border-block-start: 1px solid var(--color-border-code-editor-ace-active-line-dark-theme-v09eti, #656871);
+  border-block-end: 1px solid var(--color-border-code-editor-ace-active-line-dark-theme-v09eti, #656871);
+}
+.code-editor .ace_editor .ace_gutter {
+  background-color: var(--color-background-code-editor-gutter-default-15qdwh, #f3f3f7);
+  color: var(--color-text-code-editor-gutter-default-nlshs8, #0f141a);
+}
+.code-editor .ace_editor .ace_gutter:focus,
+.code-editor .ace_editor .ace_scroller:focus {
+  box-shadow: inset 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_open {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23424650' fill='%23424650' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_open:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_closed {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23424650' fill='%23424650' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_closed:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+.code-editor .ace_editor .ace_gutter-active-line {
+  background-color: var(--color-background-code-editor-gutter-active-line-default-51v1pv, #656871);
+  color: var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff);
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_gutter_annotation:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_gutter_annotation:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-2px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_fold-widget:focus::before,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_gutter_annotation:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * -2px);
+  inset-block-start: calc(-1 * -2px);
+  inline-size: calc(100% + -2px + -2px);
+  block-size: calc(100% + -2px + -2px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+.code-editor .ace_editor .ace_gutter-active-line.ace_error {
+  color: var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff);
+  background-color: var(--color-background-code-editor-gutter-active-line-error-ro2qo1, #db0000);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ffffff' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Ccircle cx='8' cy='8' r='7'/%3E %3Cpath d='M10.828 5.172l-5.656 5.656M10.828 10.828L5.172 5.172'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Ccircle cx='8' cy='8' r='7'/%3E %3Cpath d='M10.828 5.172l-5.656 5.656M10.828 10.828L5.172 5.172'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_warning {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ffffff' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M8 1l7 14H1L8 1z'/%3E %3Cpath d='M7.99 12H8v.01h-.01zM8 6v4'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M8 1l7 14H1L8 1z'/%3E %3Cpath d='M7.99 12H8v.01h-.01zM8 6v4'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open:hover, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open:hover, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed:hover, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed:hover, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+
 .pane {
   display: flex;
   position: relative;
@@ -27916,6 +28378,16 @@ var appLayoutTogglesStyles = css171`
 // src/internal/styles/app-layout-visual-refresh.ts
 import { css as css172 } from "lit";
 var appLayoutVisualRefreshStyles = css172`
+div.app-layout-visual-refresh--background {
+  display: contents;
+}
+div.app-layout-visual-refresh--background > .app-layout-visual-refresh--scrolling-background {
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  grid-column: 1/span 5;
+  grid-row: 1/9;
+}
+
 .app-layout-visual-refresh--breadcrumbs {
   background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
   grid-area: breadcrumbs;
@@ -27945,15 +28417,411 @@ var appLayoutVisualRefreshStyles = css172`
     position: fixed;
     inset-inline-end: 0;
     z-index: 1001;
-
-header.app-layout-visual-refresh--content {
-  grid-area: header;
+    /*
+    When disableBodyScroll is true the offsetTop will be relative to the
+    app layout and not the body. However, the drawer position changes
+    to fixed in mobile viewports. The top value needs to include the
+    header because fixed position switches the top value so it is now
+    relative to the body.
+    */
+  }
+  .app-layout-visual-refresh--drawers-container.app-layout-visual-refresh--disable-body-scroll {
+    inset-block-start: var(--awsui-header-height-6b9ypa);
+  }
 }
 
-.app-layout-visual-refresh--container {
+.app-layout-visual-refresh--drawers-desktop-triggers-container {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  background-color: transparent;
+  box-sizing: border-box;
+  block-size: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  overscroll-behavior-y: contain;
+}
+.app-layout-visual-refresh--drawers-desktop-triggers-container:not(.app-layout-visual-refresh--has-multiple-triggers).app-layout-visual-refresh--has-open-drawer {
+  inline-size: 0;
+}
+.app-layout-visual-refresh--drawers-desktop-triggers-container.app-layout-visual-refresh--has-multiple-triggers.app-layout-visual-refresh--has-open-drawer {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+}
+.app-layout-visual-refresh--drawers-desktop-triggers-container:not(.app-layout-visual-refresh--has-multiple-triggers):not(.app-layout-visual-refresh--has-open-drawer) {
+  inline-size: calc(var(--space-layout-toggle-padding-chwlhz, 12px) * 2 + var(--space-layout-toggle-diameter-j2qffw, 36px));
+}
+
+.app-layout-visual-refresh--drawers-mobile-triggers-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.app-layout-visual-refresh--drawers-trigger-content {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs-ymlm0b, 8px);
+  padding-block-start: var(--space-scaled-s-8ozaad, 12px);
+  inline-size: calc(var(--space-layout-toggle-padding-chwlhz, 12px) * 2 + var(--space-layout-toggle-diameter-j2qffw, 36px));
+}
+.app-layout-visual-refresh--drawers-trigger-content:not(.app-layout-visual-refresh--has-multiple-triggers).app-layout-visual-refresh--has-open-drawer {
+  opacity: 0;
+}
+.app-layout-visual-refresh--drawers-trigger-content:not(.app-layout-visual-refresh--has-multiple-triggers):not(.app-layout-visual-refresh--has-open-drawer) {
+  opacity: 1;
+}
+.app-layout-visual-refresh--drawers-trigger-content > .app-layout-visual-refresh--drawers-trigger-overflow {
+  padding-block: 0;
+  padding-inline: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--drawers-trigger {
+    inline-size: 40px;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.app-layout-visual-refresh--drawer {
+  --awsui-drawer-size-6b9ypa: 290px;
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  border-color: transparent;
+  display: grid;
+  grid-template-columns: var(--space-m-dsumyt, 16px) 1fr;
+  flex-shrink: 0;
+  block-size: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  overscroll-behavior-y: contain;
+  pointer-events: auto;
+  word-wrap: break-word;
+}
+.app-layout-visual-refresh--drawer > .app-layout-visual-refresh--drawer-content-container {
+  grid-column: 1/span 2;
+  grid-row: 1;
+  inline-size: var(--awsui-drawer-size-6b9ypa);
+  display: grid;
+  grid-template-columns: var(--space-m-dsumyt, 16px) 1fr auto var(--space-m-dsumyt, 16px);
+  grid-template-rows: var(--size-vertical-panel-icon-offset-z959cw, 15px) auto 1fr;
+  overflow-y: auto;
+}
+.app-layout-visual-refresh--drawer > .app-layout-visual-refresh--drawer-content-container > .app-layout-visual-refresh--drawer-close-button {
+  grid-column: 3;
+  grid-row: 2;
+  z-index: 1;
+}
+.app-layout-visual-refresh--drawer > .app-layout-visual-refresh--drawer-content-container > .app-layout-visual-refresh--drawer-content {
+  grid-column: 1/span 4;
+  block-size: var(--awsui-content-height-6b9ypa);
+}
+.app-layout-visual-refresh--drawer > .app-layout-visual-refresh--drawer-content-container > .app-layout-visual-refresh--drawer-content.app-layout-visual-refresh--drawer-content-hidden {
+  display: none;
+}
+.app-layout-visual-refresh--drawer > .app-layout-visual-refresh--drawer-slider {
+  grid-column: 1;
+  grid-row: 1;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 850;
+}
+.app-layout-visual-refresh--drawer:not(.app-layout-visual-refresh--is-drawer-open) {
+  opacity: 0;
+  inline-size: 0;
+}
+.app-layout-visual-refresh--drawer.app-layout-visual-refresh--is-drawer-open {
+  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  border-inline-start: solid var(--border-divider-section-width-uwo8my, 1px) var(--color-border-divider-default-nr68jt, #c6c6cd);
+  opacity: 1;
+  inline-size: var(--awsui-drawer-size-6b9ypa);
+}
+@media (min-width: 2541px) {
+  .app-layout-visual-refresh--drawer.app-layout-visual-refresh--is-drawer-open {
+    --awsui-drawer-size-6b9ypa: 320px;
+  }
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--drawer.app-layout-visual-refresh--is-drawer-open {
+    --awsui-drawer-size-6b9ypa: 100vw;
+    inline-size: 100vw;
+  }
+}
+
+header.app-layout-visual-refresh--content {
+  grid-area: header;
+}
+
+/*
+The first and last column definitions have two responsibilities.
+If Navigation and/or Tools exist then that will determine the width of
+the first and last columns, respectively, and the content in these drawers
+will create horizontal space from the center column content. However, if the
+navigationHide and/or toolsHide properties have been set then the first
+and last column width will default to the minimum content gap properties to
+create the necessary visual space around the main content.
+
+The minimum content width property is set to zero and applied under all
+circumstances regardless of whether the minContentWidth property is
+explicitly set in script.
+*/
+.app-layout-visual-refresh--layout {
+  --awsui-breadcrumbs-gap-6b9ypa: 0px;
+  --awsui-content-gap-left-6b9ypa: 0px;
+  --awsui-content-gap-right-6b9ypa: 0px;
+  --awsui-content-height-6b9ypa: calc(100vh - var(--awsui-header-height-6b9ypa) - var(--awsui-footer-height-6b9ypa));
+  --awsui-default-max-content-width-6b9ypa: 1280px;
+  --awsui-default-min-content-width-6b9ypa: 0px;
+  --awsui-footer-height-6b9ypa: 0px;
+  --awsui-header-gap-6b9ypa: 0px;
+  --awsui-header-height-6b9ypa: 0px;
+  --awsui-layout-width-6b9ypa: 0px;
+  --awsui-main-gap-6b9ypa: 0px;
+  --awsui-main-offset-left-6b9ypa: 0px;
+  --awsui-main-template-rows-6b9ypa: 1fr;
+  --awsui-max-content-width-6b9ypa: 0px;
+  --awsui-min-content-width-6b9ypa: 280px;
+  --awsui-mobile-bar-height-6b9ypa: calc(2 * var(--space-m-dsumyt, 16px) + var(--space-scaled-xs-xwoogq, 8px));
+  --awsui-notifications-height-6b9ypa: 0px;
+  --awsui-offset-top-6b9ypa: var(--awsui-header-height-6b9ypa);
+  --awsui-overlap-height-6b9ypa: var(--space-dark-header-overlap-distance-ld45ap, 36px);
+  --awsui-toggles-left-width-6b9ypa: 0px;
+  --awsui-toggles-right-width-6b9ypa: 0px;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  display: grid;
+  grid-template-areas: ". . mobileToolbar . ." ". . notifications . ." ". . breadcrumbsGap . ." ". . breadcrumbs . ." ". . headerGap . ." ". . header . ." ". . mainGap . ." ". . main . ." ". . main . .";
+  grid-template-columns: min-content minmax(var(--awsui-content-gap-left-6b9ypa), 1fr) minmax(var(--awsui-default-min-content-width-6b9ypa), var(--awsui-default-max-content-width-6b9ypa)) minmax(var(--awsui-content-gap-right-6b9ypa), 1fr) min-content;
+  grid-template-rows: auto auto var(--awsui-breadcrumbs-gap-6b9ypa) auto var(--awsui-header-gap-6b9ypa) auto var(--awsui-main-gap-6b9ypa) var(--awsui-overlap-height-6b9ypa) var(--awsui-main-template-rows-6b9ypa);
+  min-block-size: var(--awsui-content-height-6b9ypa);
+  position: relative;
+  /*
+  Add unified max-width for AppLayout content based on breakpoints. Only use the max content
+  width custom property for the middle column definition if the maxContentWidth property
+  has been explicitly set to a non-zero value and subsequently set the has-max-content-width
+  data attribute to true.
+  */
+  /*
+  Only use the max content width custom property for the middle column definition
+  if the maxContentWidth property has been explicitly set to a non-zero value and
+  subsequently set the has-max-content-width data attribute to true.
+  */
+  /*
+  Warning! This is a hack! We are implementing a short term fix to prevent the
+  tools drawer from potentially getting pushed off screen. Currently there is no
+  protection against a navigationWidth, minContentWidth, and toolsWidth that are
+  in excess ove the available space in the viewport. To accomodate this we remove
+  the minContentWidth and set it to zero in small viewports and below until the
+  isMobile breakpoint sets the drawers to overlay at 100vw.
+  */
+  /*
+  In desktop viewports the content gap property for the left and right
+  columns should override the default of zero if the navigationHide
+  or toolsHide property is set. This ensures adequate horizontal space
+  for the center column from the edges of the viewport when there is
+  not left or right content.
+
+  Warning! If these design tokens change it will adversely impact the
+  calculation used to determine the Split Panel maximum width in the
+  handleSplitPanelMaxWidth function in the context.
+  */
+  /*
+  In mobile viewports the Navigation and Tools drawers are hidden
+  and triggered by the MobileToolbar which then take up the entire viewport.
+  The center column needs permanent space from the horizontal viewport
+  edges regardless of whether or not there is a Navigation or Tools.
+  */
+  /*
+  Override the desktop gap values set above for the Notifications, Header, and Main
+  components for mobile viewports.
+  */
+}
+@media (min-width: 1401px) {
+  .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width) {
+    --awsui-default-max-content-width-6b9ypa: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width) {
+    --awsui-default-max-content-width-6b9ypa: 1440px;
+  }
+}
+@media (min-width: 2541px) {
+  .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width) {
+    --awsui-default-max-content-width-6b9ypa: 1620px;
+  }
+}
+@media (min-width: 1401px) {
+  .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width).app-layout-visual-refresh--content-type-dashboard {
+    --awsui-default-max-content-width-6b9ypa: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width).app-layout-visual-refresh--content-type-dashboard {
+    --awsui-default-max-content-width-6b9ypa: 1620px;
+  }
+}
+@media (min-width: 2541px) {
+  .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width).app-layout-visual-refresh--content-type-dashboard {
+    --awsui-default-max-content-width-6b9ypa: 2160px;
+  }
+}
+.app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width).app-layout-visual-refresh--content-type-table, .app-layout-visual-refresh--layout:not(.app-layout-visual-refresh--has-max-content-width).app-layout-visual-refresh--content-type-cards {
+  --awsui-default-max-content-width-6b9ypa: 100%;
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-max-content-width {
+  --awsui-default-max-content-width-6b9ypa: var(--awsui-max-content-width-6b9ypa);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--is-overlap-disabled {
+  --awsui-overlap-height-6b9ypa: 0;
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--is-hide-mobile-toolbar {
+  --awsui-mobile-bar-height-6b9ypa: 0px;
+}
+@media (min-width: 993px) {
+  .app-layout-visual-refresh--layout {
+    --awsui-default-min-content-width-6b9ypa: var(--awsui-min-content-width-6b9ypa, 280px);
+  }
+}
+@media (max-width: 992px) {
+  .app-layout-visual-refresh--layout {
+    --awsui-default-min-content-width-6b9ypa: 0px;
+  }
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--layout.app-layout-visual-refresh--has-content-gap-left {
+    --awsui-content-gap-left-6b9ypa: var(--space-layout-content-horizontal-buc0zz, 24px);
+  }
+  .app-layout-visual-refresh--layout.app-layout-visual-refresh--has-content-gap-right {
+    --awsui-content-gap-right-6b9ypa: var(--space-layout-content-horizontal-buc0zz, 24px);
+  }
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--layout {
+    --awsui-content-gap-left-6b9ypa: var(--space-l-2ud1p3, 20px);
+    --awsui-content-gap-right-6b9ypa: var(--space-l-2ud1p3, 20px);
+  }
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-breadcrumbs {
+  --awsui-breadcrumbs-gap-6b9ypa: var(--space-scaled-m-m892r9, 16px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-header, .app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-notifications:not(.app-layout-visual-refresh--has-breadcrumbs).app-layout-visual-refresh--has-header {
+  --awsui-header-gap-6b9ypa: var(--space-scaled-xs-xwoogq, 8px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-breadcrumbs.app-layout-visual-refresh--has-header {
+  --awsui-header-gap-6b9ypa: var(--space-scaled-xs-xwoogq, 8px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-notifications:not(.app-layout-visual-refresh--has-breadcrumbs):not(.app-layout-visual-refresh--has-header) {
+  --awsui-main-gap-6b9ypa: var(--space-xs-ymlm0b, 8px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-breadcrumbs:not(.app-layout-visual-refresh--has-header) {
+  --awsui-main-gap-6b9ypa: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-header {
+  --awsui-main-gap-6b9ypa: var(--space-content-header-padding-bottom-rvy5xz, 16px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-main:not(.app-layout-visual-refresh--disable-content-paddings) {
+  --awsui-main-gap-6b9ypa: var(--space-scaled-s-8ozaad, 12px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-main.app-layout-visual-refresh--disable-content-paddings {
+  --awsui-main-gap-6b9ypa: 0px;
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-header {
+    --awsui-header-gap-6b9ypa: var(--space-scaled-s-8ozaad, 12px);
+  }
+  .app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-notifications:not(.app-layout-visual-refresh--has-breadcrumbs).app-layout-visual-refresh--has-header {
+    --awsui-header-gap-6b9ypa: var(--space-scaled-s-8ozaad, 12px);
+  }
+  .app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-notifications:not(.app-layout-visual-refresh--has-breadcrumbs):not(.app-layout-visual-refresh--has-header), .app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-main:not(.app-layout-visual-refresh--disable-content-paddings) {
+    --awsui-main-gap-6b9ypa: var(--space-scaled-s-8ozaad, 12px);
+  }
+  .app-layout-visual-refresh--layout.app-layout-visual-refresh--content-first-child-main.app-layout-visual-refresh--disable-content-paddings {
+    --awsui-main-gap-6b9ypa: 0px;
+  }
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-left-toggles-gutter {
+  --awsui-toggles-left-width-6b9ypa: calc(var(--space-layout-toggle-padding-chwlhz, 12px) + 36px);
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--has-right-toggles-gutter {
+  --awsui-toggles-right-width-6b9ypa: calc(var(--space-layout-toggle-padding-chwlhz, 12px) + 36px);
+}
+
+/*
+If disableBodyScroll is true (very uncommon use case) then the AppLayout component
+and not the document body will be the scrollable element. This requires a fixed height
+instead of a minimum height with a vertical scroll policy. The offset top value for
+components with position: sticky (MobileToolbar, Navigation, Notifications, Tools) will be
+set zero since the AppLayout is nearest scrollable parent and any existing header does
+not matter. The offset top value for AppLayout contentMain children with
+position: sticky will be the value of the notifications height in addition to the
+notifications top margin and some additional vertical space for aesthetics.
+*/
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--disable-body-scroll {
+  --awsui-main-template-rows-6b9ypa: 1fr auto;
+  --awsui-offset-top-6b9ypa: 0px;
+  block-size: var(--awsui-content-height-6b9ypa);
+  overflow-y: scroll;
+}
+.app-layout-visual-refresh--layout.app-layout-visual-refresh--disable-body-scroll.app-layout-visual-refresh--has-split-panel.app-layout-visual-refresh--split-panel-position-bottom {
+  --awsui-main-template-rows-6b9ypa: repeat(2, auto);
+}
+
+/*
+This CSS class is applied to the document body to prevent overflow scrolling
+when the navigation or tools drawers are open in responsive viewports.
+*/
+.app-layout-visual-refresh--block-body-scroll {
+  overflow: hidden;
+}
+
+.app-layout-visual-refresh--unfocusable,
+.app-layout-visual-refresh--unfocusable * {
+  visibility: hidden !important;
+}
+
+.app-layout-visual-refresh--container {
   grid-area: main;
   padding-block-end: var(--space-layout-content-bottom-zeb1g9, 40px);
-
+  /*
+  If the split panel is in the bottom position additional padding will need to be
+  added to the content area. This is to ensure that the user is able to scroll
+  far enough to see all of the content that would otherwise be obscured by the
+  sticky position of the split panel.
+  */
+  /*
+  If disableContentPaddings is enabled then the Main content has a different
+  behavior inside the Layout grid. By default it will render across the entire
+  grid column span. If the Navigation is open on the left, we increment the
+  start column by one. If the Tools or Split Panel (in side position) is open
+  on the right, we decrement the column end by one.
+  */
+}
+.app-layout-visual-refresh--container.app-layout-visual-refresh--has-split-panel.app-layout-visual-refresh--split-panel-position-bottom {
+  padding-block-end: calc(var(--awsui-split-panel-height-6b9ypa) + var(--space-layout-content-bottom-zeb1g9, 40px));
+}
+.app-layout-visual-refresh--container.app-layout-visual-refresh--disable-content-paddings {
+  grid-column: 1/6;
+  padding-block: 0;
+  padding-inline: 0;
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--container.app-layout-visual-refresh--disable-content-paddings.app-layout-visual-refresh--is-navigation-open {
+    grid-column-start: 2;
+  }
+  .app-layout-visual-refresh--container.app-layout-visual-refresh--disable-content-paddings.app-layout-visual-refresh--is-tools-open, .app-layout-visual-refresh--container.app-layout-visual-refresh--disable-content-paddings.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--split-panel-position-side, .app-layout-visual-refresh--container.app-layout-visual-refresh--disable-content-paddings.app-layout-visual-refresh--has-active-drawer {
+    grid-column-end: 5;
+  }
+}
 
 section.app-layout-visual-refresh--mobile-toolbar {
   align-items: center;
@@ -27997,6 +28865,140 @@ section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--
   position: sticky;
   inset-block-start: var(--awsui-offset-top-6b9ypa);
   z-index: 830;
+  /*
+  The navigation and tools containers (that contain the toggle buttons)
+  stretch the full height of the app layout. Normally, this wouldn't be an
+  issue because they sit above the app layout's content padding.
+
+  But if disableContentPaddings is set to true and there are buttons on the
+  left/right edges of the screen, they will be covered by the containers. So
+  we need to disable pointer events in the container and re-enable them in
+  the panels and toggle buttons.
+  */
+  pointer-events: none;
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--navigation-container {
+    inset-inline-start: 0;
+    position: fixed;
+    z-index: 1001;
+    /*
+    When disableBodyScroll is true the offsetTop will be relative to the
+    app layout and not the body. However, the drawer position changes
+    to fixed in mobile viewports. The top value needs to include the
+    header because fixed position switches the top value so it is now
+    relative to the body.
+    */
+  }
+  .app-layout-visual-refresh--navigation-container.app-layout-visual-refresh--disable-body-scroll {
+    inset-block-start: var(--awsui-header-height-6b9ypa);
+  }
+}
+
+nav.app-layout-visual-refresh--show-navigation {
+  padding-block: var(--space-scaled-s-8ozaad, 12px);
+  padding-inline: var(--space-layout-toggle-padding-chwlhz, 12px);
+  /*
+  Apply the animation only in desktop viewports because the MobileToolbar will
+  take control in responsive viewports.
+  */
+}
+@keyframes awsui_showButtons_hyvsj_1u13u_1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+nav.app-layout-visual-refresh--show-navigation.app-layout-visual-refresh--is-navigation-open {
+  display: none;
+}
+@media (min-width: 689px) {
+  nav.app-layout-visual-refresh--show-navigation:not(.app-layout-visual-refresh--is-navigation-open) {
+    display: block;
+  }
+  nav.app-layout-visual-refresh--show-navigation:not(.app-layout-visual-refresh--is-navigation-open).app-layout-visual-refresh--animating {
+    animation: awsui_showButtons_hyvsj_1u13u_1 var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  nav.app-layout-visual-refresh--show-navigation:not(.app-layout-visual-refresh--is-navigation-open).app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled nav.app-layout-visual-refresh--show-navigation:not(.app-layout-visual-refresh--is-navigation-open).app-layout-visual-refresh--animating, .awsui-mode-entering nav.app-layout-visual-refresh--show-navigation:not(.app-layout-visual-refresh--is-navigation-open).app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+}
+
+nav.app-layout-visual-refresh--navigation {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  inset-block-end: 0;
+  block-size: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  overscroll-behavior-y: contain;
+  position: relative;
+  word-wrap: break-word;
+  pointer-events: auto;
+  border-inline-end: solid var(--border-divider-section-width-uwo8my, 1px) var(--color-border-divider-default-nr68jt, #c6c6cd);
+  display: flex;
+  flex-direction: column;
+  /*
+  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.
+  */
+}
+@keyframes awsui_openNavigation_hyvsj_1u13u_1 {
+  from {
+    opacity: 0;
+    inline-size: calc(var(--space-layout-toggle-padding-chwlhz, 12px) * 2 + var(--space-layout-toggle-diameter-j2qffw, 36px));
+  }
+  to {
+    opacity: 1;
+    inline-size: var(--awsui-navigation-width-6b9ypa);
+  }
+}
+nav.app-layout-visual-refresh--navigation:not(.app-layout-visual-refresh--is-navigation-open) {
+  inline-size: 0;
+  display: none;
+}
+nav.app-layout-visual-refresh--navigation.app-layout-visual-refresh--is-navigation-open.app-layout-visual-refresh--animating {
+  animation: awsui_openNavigation_hyvsj_1u13u_1 var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  nav.app-layout-visual-refresh--navigation.app-layout-visual-refresh--is-navigation-open.app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled nav.app-layout-visual-refresh--navigation.app-layout-visual-refresh--is-navigation-open.app-layout-visual-refresh--animating, .awsui-mode-entering nav.app-layout-visual-refresh--navigation.app-layout-visual-refresh--is-navigation-open.app-layout-visual-refresh--animating {
+  animation: none;
+  transition: none;
+}
+nav.app-layout-visual-refresh--navigation > .app-layout-visual-refresh--animated-content {
+  inline-size: var(--awsui-navigation-width-6b9ypa);
+}
+nav.app-layout-visual-refresh--navigation > .app-layout-visual-refresh--content-container {
+  flex-grow: 1;
+}
+@media (max-width: 688px) {
+  nav.app-layout-visual-refresh--navigation {
+    --awsui-navigation-width-6b9ypa: 100vw;
+  }
+}
+
+.app-layout-visual-refresh--hide-navigation {
+  position: absolute;
+  inset-inline-end: var(--space-m-dsumyt, 16px);
+  inset-block-start: var(--size-vertical-panel-icon-offset-z959cw, 15px);
+}
 
 .app-layout-visual-refresh--notifications {
   color: var(--color-text-body-default-vvtq8u, #0f141a);
@@ -28020,6 +29022,284 @@ section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--
   }
 }
 
+/*
+When the Split Panel is in the bottom position it was share the same row
+as the content area. This row is defined as 1 fractional unit which will
+consume the remaining vertical space in the grid after the notifications
+and breadcrumbs.
+*/
+section.app-layout-visual-refresh--split-panel-bottom {
+  /*
+  The align self property will position the split panel at the bottom of the grid row.
+  This could be off the viewport if the content area has enough content to be scrollable.
+  */
+  align-self: end;
+  inset-block-end: var(--awsui-footer-height-6b9ypa);
+  display: none;
+  grid-column: 1/6;
+  grid-row: 9;
+  block-size: auto;
+  overflow-y: hidden;
+  /*
+  The position sticky will work in conjunction with the align self: end; property.
+  If the grid row scrolls beyond the viewport, the sticky bottom position
+  will lift it up above the footer so it is always visible.
+  */
+  position: sticky;
+  z-index: 840;
+  /*
+  Unlike the side position the Split Panel is persistent in the DOM
+  when in the bottom position.
+  */
+  /*
+  Warning! This is a hack! The existing design token for the split panel
+  shadow in the bottom position does not render in the refactored code.
+  It appears to be related to the fact that the legacy split panel element
+  has a height equal to the expanded height and a corresponding translation
+  of the Y position so it is moved off the screen. This will need to be
+  refactored with an adjustment to the split panel design token.
+  */
+  /*
+  When the data attribute changes indicating the Split Panel has been opened
+  apply the animation to the height property.
+  */
+}
+@keyframes awsui_openSplitPanelBottom_hyvsj_1u13u_1 {
+  from {
+    block-size: var(--awsui-split-panel-reported-header-size-6b9ypa, 0);
+  }
+  to {
+    block-size: var(--awsui-split-panel-reported-size-6b9ypa);
+  }
+}
+section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--disable-body-scroll {
+  inset-block-end: 0;
+}
+section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--is-navigation-open.app-layout-visual-refresh--position-bottom {
+  grid-column-start: 2;
+}
+section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--has-open-drawer.app-layout-visual-refresh--position-bottom {
+  grid-column-end: 5;
+}
+section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--position-bottom {
+  display: block;
+}
+section.app-layout-visual-refresh--split-panel-bottom:not(.app-layout-visual-refresh--is-split-panel-open).app-layout-visual-refresh--position-bottom {
+  box-shadow: rgba(0, 7, 22, 0.1) 0px -32px 32px -24px;
+}
+section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-bottom {
+  box-shadow: var(--shadow-split-bottom-vlyulf, 0px -36px 36px -36px rgba(0, 7, 22, 0.1));
+}
+section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-bottom.app-layout-visual-refresh--animating {
+  animation: awsui_openSplitPanelBottom_hyvsj_1u13u_1 var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-bottom.app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-bottom.app-layout-visual-refresh--animating, .awsui-mode-entering section.app-layout-visual-refresh--split-panel-bottom.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-bottom.app-layout-visual-refresh--animating {
+  animation: none;
+  transition: none;
+}
+
+section.app-layout-visual-refresh--split-panel-side {
+  block-size: 100%;
+  overflow-x: hidden;
+  pointer-events: auto;
+  /*
+  The min and max widths are applied when the Split Panel is opened otherwise
+  it would not be possible to animate the width and the box shadow would
+  be persistent in the DOM when closed.
+  */
+}
+section.app-layout-visual-refresh--split-panel-side:not(.app-layout-visual-refresh--is-split-panel-open), section.app-layout-visual-refresh--split-panel-side.app-layout-visual-refresh--position-bottom {
+  inline-size: 0;
+}
+section.app-layout-visual-refresh--split-panel-side.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-side {
+  max-inline-size: var(--awsui-split-panel-max-width-6b9ypa, 280px);
+  min-inline-size: var(--awsui-split-panel-min-width-6b9ypa, 280px);
+  border-inline-start: solid var(--border-divider-section-width-uwo8my, 1px) var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+section.app-layout-visual-refresh--split-panel-side.app-layout-visual-refresh--is-split-panel-open.app-layout-visual-refresh--position-side:not(.app-layout-visual-refresh--has-open-drawer) {
+  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-panel-side-an0w07, #c6c6cd);
+}
+
+/*
+The Tools component container has a max width calculation that depends on the
+state of the other siblings within the Layout grid definition. The layout width
+is set in the resize observer in the Layout component. The main offset left
+will calculate the distance from the start of the Layout component. The minimum
+content width has a default value that can be set directly with the minContentWidth
+property. The content gap right is computed in the Layout styles based on the
+viewport size and state of the Tools drawer.
+*/
+.app-layout-visual-refresh--tools-container {
+  --awsui-tools-max-width-6b9ypa: calc(var(--awsui-layout-width-6b9ypa) - var(--awsui-main-offset-left-6b9ypa) - var(--awsui-default-min-content-width-6b9ypa) - var(--awsui-content-gap-right-6b9ypa));
+  display: flex;
+  grid-column: 5;
+  grid-row: 1/span 9;
+  block-size: var(--awsui-content-height-6b9ypa);
+  max-inline-size: var(--awsui-tools-max-width-6b9ypa);
+  position: sticky;
+  inset-block-start: var(--awsui-offset-top-6b9ypa);
+  z-index: 830;
+  pointer-events: none;
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--tools-container {
+    --awsui-tools-max-width-6b9ypa: none;
+    --awsui-tools-width-6b9ypa: auto;
+    position: fixed;
+    inset-inline-end: 0;
+    z-index: 1001;
+    /*
+    When disableBodyScroll is true the offsetTop will be relative to the
+    app layout and not the body. However, the drawer position changes
+    to fixed in mobile viewports. The top value needs to include the
+    header because fixed position switches the top value so it is now
+    relative to the body.
+    */
+  }
+  .app-layout-visual-refresh--tools-container.app-layout-visual-refresh--disable-body-scroll {
+    inset-block-start: var(--awsui-header-height-6b9ypa);
+  }
+}
+
+.app-layout-visual-refresh--tools {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  flex-shrink: 0;
+  block-size: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  overscroll-behavior-y: contain;
+  pointer-events: auto;
+  position: relative;
+  word-wrap: break-word;
+  /*
+  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
+  prevent unwanted text wrapping.
+  */
+  /*
+  A right border is needed if the Tools is open and the buttons are persistent in
+  the DOM. This creates a visual vertical boundary between the Tools and the Buttons
+  only when they are both present. This is the circumstance when there is a Split Panel
+  in the side position.
+  */
+}
+@keyframes awsui_openTools_hyvsj_1u13u_1 {
+  from {
+    opacity: var(--awsui-tools-animation-starting-opacity-6b9ypa, 0);
+    inline-size: calc(var(--space-layout-toggle-padding-chwlhz, 12px) * 2 + var(--space-layout-toggle-diameter-j2qffw, 36px));
+  }
+  to {
+    opacity: 1;
+    inline-size: var(--awsui-tools-width-6b9ypa);
+  }
+}
+.app-layout-visual-refresh--tools:not(.app-layout-visual-refresh--is-tools-open) {
+  inline-size: 0;
+  display: none;
+}
+.app-layout-visual-refresh--tools.app-layout-visual-refresh--is-tools-open {
+  border-inline-start: solid var(--border-divider-section-width-uwo8my, 1px) var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.app-layout-visual-refresh--tools.app-layout-visual-refresh--is-tools-open.app-layout-visual-refresh--animating {
+  animation: awsui_openTools_hyvsj_1u13u_1 var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .app-layout-visual-refresh--tools.app-layout-visual-refresh--is-tools-open.app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .app-layout-visual-refresh--tools.app-layout-visual-refresh--is-tools-open.app-layout-visual-refresh--animating, .awsui-mode-entering .app-layout-visual-refresh--tools.app-layout-visual-refresh--is-tools-open.app-layout-visual-refresh--animating {
+  animation: none;
+  transition: none;
+}
+.app-layout-visual-refresh--tools > .app-layout-visual-refresh--animated-content {
+  inline-size: var(--awsui-tools-width-6b9ypa);
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--tools.app-layout-visual-refresh--is-tools-open.app-layout-visual-refresh--has-tools-form-persistence {
+    border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  }
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--tools {
+    --awsui-tools-width-6b9ypa: 100vw;
+  }
+}
+
+.app-layout-visual-refresh--hide-tools {
+  position: absolute;
+  inset-inline-end: var(--space-m-dsumyt, 16px);
+  inset-block-start: var(--size-vertical-panel-icon-offset-z959cw, 15px);
+  z-index: 1;
+}
+
+/*
+Warning! If these design tokens for padding change it will adversely impact
+the calculation used to determine the Split Panel maximum width in the
+handleSplitPanelMaxWidth function in the context.
+*/
+.app-layout-visual-refresh--show-tools {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  box-sizing: border-box;
+  padding-block: var(--space-scaled-s-8ozaad, 12px);
+  padding-inline: var(--space-layout-toggle-padding-chwlhz, 12px);
+  /*
+  Apply the animation only in desktop viewports because the MobileToolbar will
+  take control in responsive viewports.
+  */
+}
+@keyframes awsui_showButtons_hyvsj_1u13u_1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.app-layout-visual-refresh--show-tools:not(.app-layout-visual-refresh--has-tools-form) {
+  display: none;
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--show-tools.app-layout-visual-refresh--has-tools-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs-ymlm0b, 8px);
+  }
+  .app-layout-visual-refresh--show-tools.app-layout-visual-refresh--has-tools-form.app-layout-visual-refresh--animating {
+    animation: awsui_showButtons_hyvsj_1u13u_1 var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  .app-layout-visual-refresh--show-tools.app-layout-visual-refresh--has-tools-form.app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled .app-layout-visual-refresh--show-tools.app-layout-visual-refresh--has-tools-form.app-layout-visual-refresh--animating, .awsui-mode-entering .app-layout-visual-refresh--show-tools.app-layout-visual-refresh--has-tools-form.app-layout-visual-refresh--animating {
+    animation: none;
+    transition: none;
+  }
+  .app-layout-visual-refresh--show-tools.app-layout-visual-refresh--has-tools-form-persistence {
+    background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+    z-index: 1;
+  }
+}
+
 .app-layout-visual-refresh--trigger-button-styles {
   background: var(--color-background-layout-toggle-default-2hgjdu, #424650);
   border-start-start-radius: 50%;