@cumulus-ui/components 0.5.3 → 0.5.5

package/dist/index.js

@@ -5934,7 +5934,8 @@ customElements.define("cs-alert", CsAlert);
 
 // src/tooltip/internal.ts
 import { css as css45, html as html19, nothing as nothing6 } from "lit";
-import { property as property18, query, state as state4 } from "lit/decorators.js";
+import { property as property18, state as state4 } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
@@ -7155,6 +7156,8 @@ var CsTooltipInternal = class extends CsBaseElement {
     this.position = "top";
     this.content = "";
     this._visible = false;
+    this._triggerRef = createRef();
+    this._bodyRef = createRef();
     this._tooltipId = generateUniqueId("tooltip");
     this._showTimeout = null;
     this._show = () => {
@@ -7183,22 +7186,20 @@ var CsTooltipInternal = class extends CsBaseElement {
     }
   }
   async updated() {
-    if (this._visible && this._triggerEl && this._bodyEl) {
+    if (this._visible && this._triggerRef.value && this._bodyRef.value) {
       await this._updatePosition();
     }
   }
   async _updatePosition() {
-    if (!this._triggerEl || !this._bodyEl) return;
+    const trigger = this._triggerRef.value;
+    const body = this._bodyRef.value;
+    if (!trigger || !body) return;
     const placement = this.position;
-    const { x, y } = await computePosition2(
-      this._triggerEl,
-      this._bodyEl,
-      {
-        placement,
-        middleware: [offset2(8), flip2(), shift2({ padding: 8 })]
-      }
-    );
-    Object.assign(this._bodyEl.style, {
+    const { x, y } = await computePosition2(trigger, body, {
+      placement,
+      middleware: [offset2(8), flip2(), shift2({ padding: 8 })]
+    });
+    Object.assign(body.style, {
       position: "absolute",
       left: `${x}px`,
       top: `${y}px`
@@ -7208,7 +7209,7 @@ var CsTooltipInternal = class extends CsBaseElement {
     return html19`
       <div class="tooltip--root">
         <div
-          class="tooltip-trigger"
+          ${ref(this._triggerRef)}
           aria-describedby=${this._visible ? this._tooltipId : nothing6}
           @mouseenter=${this._show}
           @mouseleave=${this._hide}
@@ -7219,9 +7220,10 @@ var CsTooltipInternal = class extends CsBaseElement {
         </div>
         ${this._visible && this.content ? html19`
             <div
-              class="tooltip-body"
+              ${ref(this._bodyRef)}
               role="tooltip"
               id=${this._tooltipId}
+              style="position: absolute"
             >
               ${this.content}
             </div>
@@ -7239,12 +7241,6 @@ __decorateClass([
 __decorateClass([
   state4()
 ], CsTooltipInternal.prototype, "_visible", 2);
-__decorateClass([
-  query(".tooltip-trigger")
-], CsTooltipInternal.prototype, "_triggerEl", 2);
-__decorateClass([
-  query(".tooltip-body")
-], CsTooltipInternal.prototype, "_bodyEl", 2);
 
 // src/tooltip/index.ts
 var CsTooltip = class extends CsTooltipInternal {
@@ -7253,7 +7249,7 @@ customElements.define("cs-tooltip", CsTooltip);
 
 // src/popover/internal.ts
 import { css as css47, html as html20, nothing as nothing7 } from "lit";
-import { property as property19, state as state5, query as query2 } from "lit/decorators.js";
+import { property as property19, state as state5, query } from "lit/decorators.js";
 import { classMap as classMap17 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined10 } from "lit/directives/if-defined.js";
 
@@ -7272,6 +7268,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 +7357,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 +7488,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);
@@ -7777,10 +7923,10 @@ __decorateClass([
   state5()
 ], CsPopoverInternal.prototype, "_open", 2);
 __decorateClass([
-  query2(".trigger")
+  query(".trigger")
 ], CsPopoverInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query2(".container")
+  query(".container")
 ], CsPopoverInternal.prototype, "_containerEl", 2);
 
 // src/popover/index.ts
@@ -14218,9 +14364,10 @@ customElements.define("cs-expandable-section", CsExpandableSection);
 
 // src/button-dropdown/internal.ts
 import { css as css89, html as html41, nothing as nothing18 } from "lit";
-import { property as property40, state as state11, query as query3 } from "lit/decorators.js";
+import { property as property40, state as state11, query as query2 } from "lit/decorators.js";
 import { classMap as classMap36 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
+import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 
 // src/button-dropdown/styles.ts
 import { css as css87 } from "lit";
@@ -14550,6 +14697,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     this.ariaLabel = null;
     this._open = false;
     this._highlightedIndex = -1;
+    this._triggerRef = createRef2();
     this._cleanupOutsideClick = null;
     this._onTriggerClick = () => {
       if (!this._isInteractive()) return;
@@ -14571,7 +14719,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
         case "Escape":
           e.stopPropagation();
           this._open = false;
-          this._triggerEl?.focus();
+          this._triggerRef.value?.focus();
           break;
         case "ArrowDown":
           e.preventDefault();
@@ -14627,7 +14775,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     }
   }
   focus(options) {
-    this._triggerEl?.focus(options);
+    this._triggerRef.value?.focus(options);
   }
   _flatItems() {
     return this.items.filter(isActionItem);
@@ -14653,13 +14801,13 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
       });
     }
     this._open = false;
-    this._triggerEl?.focus();
+    this._triggerRef.value?.focus();
   }
   async _updatePosition() {
     await this.updateComplete;
-    if (!this._triggerEl || !this._dropdownEl) return;
+    if (!this._triggerRef.value || !this._dropdownEl) return;
     const { x, y } = await computePosition2(
-      this._triggerEl,
+      this._triggerRef.value,
       this._dropdownEl,
       {
         placement: "bottom-start",
@@ -14700,7 +14848,6 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     const isDisabled = this.disabled || this.loading;
     const buttonClasses = {
       "button": true,
-      "trigger-btn": true,
       [`variant-${this.variant}`]: true,
       "disabled": isDisabled,
       "button-no-text": isIcon
@@ -14710,6 +14857,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     if (isIcon) {
       return html41`
         <button
+          ${ref2(this._triggerRef)}
           class=${classMap36(buttonClasses)}
           type="button"
           aria-haspopup="true"
@@ -14729,6 +14877,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     };
     return html41`
       <button
+        ${ref2(this._triggerRef)}
         class=${classMap36(buttonClasses)}
         type="button"
         aria-haspopup="true"
@@ -14830,10 +14979,7 @@ __decorateClass([
   state11()
 ], CsButtonDropdownInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query3(".trigger-btn")
-], CsButtonDropdownInternal.prototype, "_triggerEl", 2);
-__decorateClass([
-  query3(".dropdown")
+  query2(".dropdown")
 ], CsButtonDropdownInternal.prototype, "_dropdownEl", 2);
 
 // src/button-dropdown/index.ts
@@ -15333,9 +15479,10 @@ customElements.define("cs-breadcrumb-group", CsBreadcrumbGroup);
 
 // src/select/internal.ts
 import { css as css97, html as html44, nothing as nothing19 } from "lit";
-import { property as property43, state as state12, query as query4 } from "lit/decorators.js";
+import { property as property43, state as state12, query as query3 } from "lit/decorators.js";
 import { classMap as classMap38 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
+import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
 
 // src/select/styles.ts
 import { css as css95 } from "lit";
@@ -15657,6 +15804,7 @@ var CsSelectInternal = class extends Base6 {
     this._open = false;
     this._filterText = "";
     this._highlightedIndex = -1;
+    this._filterInputRef = createRef3();
     this._cleanupOutsideClick = null;
     this._onTriggerClick = () => {
       if (this.disabled) return;
@@ -15743,7 +15891,7 @@ var CsSelectInternal = class extends Base6 {
         this._addOutsideClickListener();
         if (this._hasFiltering()) {
           this.updateComplete.then(() => {
-            this._filterInputEl?.focus();
+            this._filterInputRef.value?.focus();
           });
         }
       } else {
@@ -15904,6 +16052,7 @@ var CsSelectInternal = class extends Base6 {
       ${this._hasFiltering() ? html44`
         <div class="filter-container select-parts--filter">
           <input
+            ${ref3(this._filterInputRef)}
             class="filter-input"
             type="text"
             placeholder=${this.filteringPlaceholder || "Filter"}
@@ -15998,14 +16147,11 @@ __decorateClass([
   state12()
 ], CsSelectInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query4(".trigger")
+  query3(".trigger")
 ], CsSelectInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query4(".dropdown")
+  query3(".dropdown")
 ], CsSelectInternal.prototype, "_dropdownEl", 2);
-__decorateClass([
-  query4(".filter-input")
-], CsSelectInternal.prototype, "_filterInputEl", 2);
 
 // src/select/index.ts
 var CsSelect = class extends CsSelectInternal {
@@ -16014,9 +16160,10 @@ customElements.define("cs-select", CsSelect);
 
 // src/multiselect/internal.ts
 import { css as css99, html as html45, nothing as nothing20 } from "lit";
-import { property as property44, state as state13, query as query5 } from "lit/decorators.js";
+import { property as property44, state as state13, query as query4 } from "lit/decorators.js";
 import { classMap as classMap39 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
+import { createRef as createRef4, ref as ref4 } from "lit/directives/ref.js";
 
 // src/multiselect/styles.ts
 import { css as css98 } from "lit";
@@ -16246,6 +16393,7 @@ var CsMultiselectInternal = class extends Base7 {
     this._open = false;
     this._filterText = "";
     this._highlightedIndex = -1;
+    this._filterInputRef = createRef4();
     this._cleanupOutsideClick = null;
     this._onTriggerClick = () => {
       if (this.disabled) return;
@@ -16348,7 +16496,7 @@ var CsMultiselectInternal = class extends Base7 {
         this._addOutsideClickListener();
         if (this._hasFiltering()) {
           this.updateComplete.then(() => {
-            this._filterInputEl?.focus();
+            this._filterInputRef.value?.focus();
           });
         }
       } else {
@@ -16526,6 +16674,7 @@ var CsMultiselectInternal = class extends Base7 {
       ${this._hasFiltering() ? html45`
         <div class="filter-container select-parts--filter">
           <input
+            ${ref4(this._filterInputRef)}
             class="filter-input"
             type="text"
             placeholder=${this.filteringPlaceholder || "Filter"}
@@ -16641,14 +16790,11 @@ __decorateClass([
   state13()
 ], CsMultiselectInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query5(".trigger")
+  query4(".trigger")
 ], CsMultiselectInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query5(".dropdown")
+  query4(".dropdown")
 ], CsMultiselectInternal.prototype, "_dropdownEl", 2);
-__decorateClass([
-  query5(".filter-input")
-], CsMultiselectInternal.prototype, "_filterInputEl", 2);
 
 // src/multiselect/index.ts
 var CsMultiselect = class extends CsMultiselectInternal {
@@ -16657,9 +16803,10 @@ customElements.define("cs-multiselect", CsMultiselect);
 
 // src/autosuggest/internal.ts
 import { css as css102, html as html46, nothing as nothing21 } from "lit";
-import { property as property45, state as state14, query as query6 } from "lit/decorators.js";
+import { property as property45, state as state14, query as query5 } from "lit/decorators.js";
 import { classMap as classMap40 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
+import { createRef as createRef5, ref as ref5 } from "lit/directives/ref.js";
 
 // src/autosuggest/styles.ts
 import { css as css100 } from "lit";
@@ -16897,6 +17044,7 @@ var CsAutosuggestInternal = class extends Base8 {
     this.filteringType = "auto";
     this._open = false;
     this._highlightedIndex = -1;
+    this._inputRef = createRef5();
     this._listboxId = generateUniqueId("autosuggest-listbox");
     this._flatOptions = [];
     this._onInput = (e) => {
@@ -16988,10 +17136,10 @@ var CsAutosuggestInternal = class extends Base8 {
     this._flatOptions = result;
   }
   focus(options) {
-    this._inputEl?.focus(options);
+    this._inputRef.value?.focus(options);
   }
   select() {
-    this._inputEl?.select();
+    this._inputRef.value?.select();
   }
   _scrollHighlightedIntoView() {
     this.updateComplete.then(() => {
@@ -17017,14 +17165,14 @@ var CsAutosuggestInternal = class extends Base8 {
   }
   async updated(changed) {
     super.updated(changed);
-    if (this._open && this._inputEl && this._dropdownEl) {
+    if (this._open && this._inputRef.value && this._dropdownEl) {
       await this._updatePosition();
     }
   }
   async _updatePosition() {
-    if (!this._inputEl || !this._dropdownEl) return;
+    if (!this._inputRef.value || !this._dropdownEl) return;
     const { x, y } = await computePosition2(
-      this._inputEl,
+      this._inputRef.value,
       this._dropdownEl,
       {
         placement: "bottom-start",
@@ -17039,7 +17187,7 @@ var CsAutosuggestInternal = class extends Base8 {
     Object.assign(this._dropdownEl.style, {
       left: `${x}px`,
       top: `${y}px`,
-      inlineSize: `${this._inputEl.offsetWidth}px`
+      inlineSize: `${this._inputRef.value.offsetWidth}px`
     });
   }
   render() {
@@ -17047,7 +17195,6 @@ var CsAutosuggestInternal = class extends Base8 {
     const showDropdown = this._open && filtered.length > 0 && !this.readOnly && !this.disabled;
     const inputClasses = {
       "input": true,
-      "input-element": true,
       "input-readonly": this.readOnly,
       "input-invalid": this.invalid,
       "input-disabled": this.disabled
@@ -17056,6 +17203,7 @@ var CsAutosuggestInternal = class extends Base8 {
       <div class="root">
         <div class="layout-strut">
           <input
+            ${ref5(this._inputRef)}
             class=${classMap40(inputClasses)}
             type="text"
             .value=${this.value}
@@ -17143,10 +17291,7 @@ __decorateClass([
   state14()
 ], CsAutosuggestInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query6(".input-element")
-], CsAutosuggestInternal.prototype, "_inputEl", 2);
-__decorateClass([
-  query6(".dropdown")
+  query5(".dropdown")
 ], CsAutosuggestInternal.prototype, "_dropdownEl", 2);
 
 // src/autosuggest/index.ts
@@ -17891,10 +18036,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);
@@ -18942,7 +19118,8 @@ customElements.define("cs-key-value-pairs", CsKeyValuePairs);
 
 // src/property-filter/internal.ts
 import { css as css116, html as html53, nothing as nothing27 } from "lit";
-import { property as property52, state as state17, query as queryDecorator } from "lit/decorators.js";
+import { property as property52, state as state17 } from "lit/decorators.js";
+import { createRef as createRef6, ref as ref6 } from "lit/directives/ref.js";
 
 // src/property-filter/styles.ts
 import { css as css115 } from "lit";
@@ -19210,12 +19387,13 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
     this.disabled = false;
     this.filteringPlaceholder = "Filter by text";
     this._inputValue = "";
+    this._inputRef = createRef6();
   }
   static {
     this.styles = [sharedStyles, componentStyles51, componentStyles26, filterInputStyles, hostStyles52];
   }
   focus(options) {
-    this._inputEl?.focus(options);
+    this._inputRef.value?.focus(options);
   }
   _onInput(e) {
     this._inputValue = e.target.value;
@@ -19268,6 +19446,7 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
         <div class="search-field">
           <div class="input-wrapper">
             <input
+              ${ref6(this._inputRef)}
               class="filter-input"
               type="text"
               .value=${this._inputValue}
@@ -19319,9 +19498,6 @@ __decorateClass([
 __decorateClass([
   state17()
 ], CsPropertyFilterInternal.prototype, "_inputValue", 2);
-__decorateClass([
-  queryDecorator(".filter-input")
-], CsPropertyFilterInternal.prototype, "_inputEl", 2);
 
 // src/property-filter/index.ts
 var CsPropertyFilter = class extends CsPropertyFilterInternal {
@@ -21533,7 +21709,7 @@ customElements.define("cs-date-input", CsDateInput);
 
 // src/date-picker/internal.ts
 import { css as css130, html as html60, nothing as nothing32 } from "lit";
-import { property as property59, state as state19, query as query7 } from "lit/decorators.js";
+import { property as property59, state as state19, query as query6 } from "lit/decorators.js";
 import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
 import { consume as consume3 } from "@lit/context";
 
@@ -21826,10 +22002,10 @@ __decorateClass([
   state19()
 ], CsDatePickerInternal.prototype, "_open", 2);
 __decorateClass([
-  query7(".date-picker-trigger")
+  query6(".date-picker-trigger")
 ], CsDatePickerInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query7(".dropdown")
+  query6(".dropdown")
 ], CsDatePickerInternal.prototype, "_dropdownEl", 2);
 
 // src/date-picker/index.ts
@@ -21839,7 +22015,7 @@ customElements.define("cs-date-picker", CsDatePicker);
 
 // src/date-range-picker/internal.ts
 import { css as css133, html as html61, nothing as nothing33 } from "lit";
-import { property as property60, state as state20, query as query8 } from "lit/decorators.js";
+import { property as property60, state as state20, query as query7 } from "lit/decorators.js";
 import { classMap as classMap50 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
 
@@ -22668,10 +22844,10 @@ __decorateClass([
   state20()
 ], CsDateRangePickerInternal.prototype, "_selectedRelativeKey", 2);
 __decorateClass([
-  query8(".trigger-button")
+  query7(".trigger-button")
 ], CsDateRangePickerInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query8(".dropdown")
+  query7(".dropdown")
 ], CsDateRangePickerInternal.prototype, "_dropdownEl", 2);
 
 // src/date-range-picker/index.ts
@@ -23891,96 +24067,377 @@ import { classMap as classMap54 } from "lit/directives/class-map.js";
 // src/code-editor/styles.ts
 import { css as css141 } from "lit";
 var componentStyles63 = css141`
-.pane {
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  flex: 1;
-  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
-  border-end-start-radius: var(--border-radius-code-editor-5palck, 8px);
-  border-end-end-radius: var(--border-radius-code-editor-5palck, 8px);
-  background: var(--color-background-code-editor-status-bar-yjtxod, #f3f3f7);
-  color: var(--color-text-body-default-vvtq8u, #0f141a);
+.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));
 }
-.pane__close-container {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: calc(var(--space-s-tvghoh, 12px) / 2);
+.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));
 }
-.pane__list {
-  flex: 1;
-  overflow: auto;
-  max-block-size: 100%;
-  box-sizing: border-box;
-  margin-inline-end: calc(var(--line-height-body-m-2mh3ke, 20px) + 2 * var(--space-xs-ymlm0b, 8px));
+
+.code-editor .ace_editor {
+  font-family: Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace;
+  font-size: 14px;
+  line-height: 20px;
 }
-.pane__table {
-  inline-size: 100%;
-  border-spacing: 0;
-  margin-block: var(--space-s-tvghoh, 12px);
-  margin-inline: 0;
+.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;
 }
-.pane__item > .pane__cell {
-  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
-  border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+.code-editor .ace_editor .ace_gutter-cell.ace_info {
+  background-image: none;
 }
-.pane__item > .pane__cell:first-child {
-  border-inline-start: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
-  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
-  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+.code-editor .ace_editor .ace_gutter-cell.ace_error {
+  color: var(--color-text-status-error-ksqavh, #db0000);
 }
-.pane__item > .pane__cell:last-child {
-  border-inline-end: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
-  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
-  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+@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");
+    }
+  }
 }
-.pane__item--highlighted, .pane__item:hover, .pane__item:focus {
-  cursor: pointer;
-  outline: none;
+@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");
+    }
+  }
 }
-.pane__item--highlighted > .pane__cell, .pane__item:hover > .pane__cell, .pane__item:focus > .pane__cell {
-  background-color: var(--color-background-code-editor-pane-item-hover-z6k9mr, #ebebf0);
+.code-editor .ace_editor .ace_gutter-cell {
+  padding-inline: 24px 16px;
 }
-.pane__item--highlighted > .pane__cell, .pane__item:hover > .pane__cell, .pane__item:focus > .pane__cell {
-  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
-  border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+.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;
 }
-.pane__item--highlighted > .pane__cell:first-child, .pane__item:hover > .pane__cell:first-child, .pane__item:focus > .pane__cell:first-child {
-  border-inline-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
-  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
-  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+.code-editor .ace_editor .ace_gutter_annotation {
+  margin-inline-start: -21px;
 }
-.pane__item--highlighted > .pane__cell:last-child, .pane__item:hover > .pane__cell:last-child, .pane__item:focus > .pane__cell:last-child {
-  border-inline-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
-  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
-  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+.code-editor .ace_editor .ace_fold-widget,
+.code-editor .ace_editor .ace_gutter_annotation {
+  box-shadow: none;
 }
-.pane__location, .pane__description {
-  padding-block: var(--space-xxs-hwfkai, 4px);
-  padding-inline: var(--space-s-tvghoh, 12px);
+: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;
 }
-.pane__location {
-  vertical-align: baseline;
-  white-space: nowrap;
-  padding-inline-start: calc(var(--space-l-2ud1p3, 20px) + var(--space-s-tvghoh, 12px));
+: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);
 }
-.pane__description {
-  padding-inline-end: 0;
-  min-inline-size: 0;
-  word-break: break-word;
+: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);
 }
-
-.focus-lock {
-  block-size: 100%;
+.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 {
-  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;
+.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;
+  flex-direction: row;
+  flex: 1;
+  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+  border-end-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-end-radius: var(--border-radius-code-editor-5palck, 8px);
+  background: var(--color-background-code-editor-status-bar-yjtxod, #f3f3f7);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+}
+.pane__close-container {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: calc(var(--space-s-tvghoh, 12px) / 2);
+}
+.pane__list {
+  flex: 1;
+  overflow: auto;
+  max-block-size: 100%;
+  box-sizing: border-box;
+  margin-inline-end: calc(var(--line-height-body-m-2mh3ke, 20px) + 2 * var(--space-xs-ymlm0b, 8px));
+}
+.pane__table {
+  inline-size: 100%;
+  border-spacing: 0;
+  margin-block: var(--space-s-tvghoh, 12px);
+  margin-inline: 0;
+}
+.pane__item > .pane__cell {
+  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+  border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+}
+.pane__item > .pane__cell:first-child {
+  border-inline-start: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__item > .pane__cell:last-child {
+  border-inline-end: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__item--highlighted, .pane__item:hover, .pane__item:focus {
+  cursor: pointer;
+  outline: none;
+}
+.pane__item--highlighted > .pane__cell, .pane__item:hover > .pane__cell, .pane__item:focus > .pane__cell {
+  background-color: var(--color-background-code-editor-pane-item-hover-z6k9mr, #ebebf0);
+}
+.pane__item--highlighted > .pane__cell, .pane__item:hover > .pane__cell, .pane__item:focus > .pane__cell {
+  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+  border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+}
+.pane__item--highlighted > .pane__cell:first-child, .pane__item:hover > .pane__cell:first-child, .pane__item:focus > .pane__cell:first-child {
+  border-inline-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__item--highlighted > .pane__cell:last-child, .pane__item:hover > .pane__cell:last-child, .pane__item:focus > .pane__cell:last-child {
+  border-inline-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__location, .pane__description {
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+.pane__location {
+  vertical-align: baseline;
+  white-space: nowrap;
+  padding-inline-start: calc(var(--space-l-2ud1p3, 20px) + var(--space-s-tvghoh, 12px));
+}
+.pane__description {
+  padding-inline-end: 0;
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.focus-lock {
+  block-size: 100%;
+}
+
+.code-editor {
+  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;
   display: block;
   border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
@@ -27916,6 +28373,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,78 +28412,886 @@ 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 {
-  grid-area: main;
-  padding-block-end: var(--space-layout-content-bottom-zeb1g9, 40px);
-
-
-section.app-layout-visual-refresh--mobile-toolbar {
-  align-items: center;
-  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
-  border-block-end: 1px solid var(--color-border-divider-default-nr68jt, #c6c6cd);
-  box-shadow: var(--shadow-sticky-lolw8j, 0px 4px 8px 1px rgba(0, 7, 22, 0.1));
+.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: var(--awsui-mobile-bar-height-6b9ypa);
-  display: grid;
-  grid-area: mobileToolbar;
-  grid-column: 1/span 5;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  padding-block: 0;
-  padding-inline: var(--space-m-dsumyt, 16px);
-  position: sticky;
-  inset-block-start: var(--awsui-offset-top-6b9ypa);
-  z-index: 1000;
-}
-section.app-layout-visual-refresh--mobile-toolbar:not(.app-layout-visual-refresh--remove-high-contrast-header) {
-  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
-  box-shadow: var(--shadow-panel-toggle-qddz27, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+  block-size: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  overscroll-behavior-y: contain;
 }
-section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-nav {
-  grid-column: 1;
-  margin-inline-end: var(--space-m-dsumyt, 16px);
+.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;
 }
-section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-breadcrumbs {
-  grid-column: 2;
-  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+.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);
 }
-section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-tools {
-  grid-column: 3;
-  margin-inline-start: var(--space-m-dsumyt, 16px);
+.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--navigation-container {
+.app-layout-visual-refresh--drawers-mobile-triggers-container {
   display: flex;
-  grid-column: 1;
-  grid-row: 1/span 9;
-  block-size: var(--awsui-content-height-6b9ypa);
-  position: sticky;
-  inset-block-start: var(--awsui-offset-top-6b9ypa);
-  z-index: 830;
-
-.app-layout-visual-refresh--notifications {
-  color: var(--color-text-body-default-vvtq8u, #0f141a);
-  grid-area: notifications;
-  z-index: 850;
+  justify-content: flex-end;
 }
-.app-layout-visual-refresh--notifications.app-layout-visual-refresh--has-notification-content {
+
+.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));
 }
-@media (min-width: 689px) {
-  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--sticky-notifications {
-    --awsui-flashbar-sticky-bottom-margin-6b9ypa: var(--space-xxl-32srm4, 32px);
-    position: sticky;
-    inset-block-start: var(--awsui-offset-top-6b9ypa);
-  }
-  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--sticky-notifications:not(.app-layout-visual-refresh--high-contrast) {
-    background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
-  }
-  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--has-notification-content {
-    padding-block-start: var(--space-xs-ymlm0b, 8px);
+.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;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  border-block-end: 1px solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  box-shadow: var(--shadow-sticky-lolw8j, 0px 4px 8px 1px rgba(0, 7, 22, 0.1));
+  box-sizing: border-box;
+  block-size: var(--awsui-mobile-bar-height-6b9ypa);
+  display: grid;
+  grid-area: mobileToolbar;
+  grid-column: 1/span 5;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding-block: 0;
+  padding-inline: var(--space-m-dsumyt, 16px);
+  position: sticky;
+  inset-block-start: var(--awsui-offset-top-6b9ypa);
+  z-index: 1000;
+}
+section.app-layout-visual-refresh--mobile-toolbar:not(.app-layout-visual-refresh--remove-high-contrast-header) {
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  box-shadow: var(--shadow-panel-toggle-qddz27, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+}
+section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-nav {
+  grid-column: 1;
+  margin-inline-end: var(--space-m-dsumyt, 16px);
+}
+section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-breadcrumbs {
+  grid-column: 2;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+}
+section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-tools {
+  grid-column: 3;
+  margin-inline-start: var(--space-m-dsumyt, 16px);
+}
+
+.app-layout-visual-refresh--navigation-container {
+  display: flex;
+  grid-column: 1;
+  grid-row: 1/span 9;
+  block-size: var(--awsui-content-height-6b9ypa);
+  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);
+  grid-area: notifications;
+  z-index: 850;
+}
+.app-layout-visual-refresh--notifications.app-layout-visual-refresh--has-notification-content {
+  padding-block-start: var(--space-scaled-s-8ozaad, 12px);
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--sticky-notifications {
+    --awsui-flashbar-sticky-bottom-margin-6b9ypa: var(--space-xxl-32srm4, 32px);
+    position: sticky;
+    inset-block-start: var(--awsui-offset-top-6b9ypa);
+  }
+  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--sticky-notifications:not(.app-layout-visual-refresh--high-contrast) {
+    background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  }
+  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--has-notification-content {
+    padding-block-start: var(--space-xs-ymlm0b, 8px);
+  }
+}
+
+/*
+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;
   }
 }