@cumulus-ui/components 0.5.2 → 0.5.4

package/dist/index.js

@@ -7272,6 +7272,59 @@ var componentStyles18 = css46`
   inset-block-start: 0;
   inset-inline-start: 0;
 
+}
+.arrow-outer::after, .arrow-inner::after {
+  content: "";
+  box-sizing: border-box;
+  display: inline-block;
+  position: absolute;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inline-size: 14px;
+  block-size: 14px;
+  transform: rotate(45deg);
+  transform-origin: 0 100%;
+}
+.arrow-outer:dir(rtl)::after, .arrow-inner:dir(rtl)::after {
+  transform: rotate(-45deg);
+  transform-origin: 100% 100%;
+}
+.arrow-outer::after {
+  background-color: var(--color-border-popover-1ye6tz, #b4b4bb);
+}
+.arrow-inner {
+  inset-block-start: calc(var(--border-width-popover-nflirh, 2px) + 1px);
+}
+.arrow-inner::after {
+  border-start-start-radius: 1px;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  background-color: var(--color-background-popover-e20fy8, #ffffff);
+}
+.arrow-position-right-top > .arrow-outer::after, .arrow-position-right-bottom > .arrow-outer::after {
+  box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+.arrow-position-left-top > .arrow-outer::after, .arrow-position-left-bottom > .arrow-outer::after {
+  box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+.arrow-position-top-center > .arrow-outer::after, .arrow-position-top-right > .arrow-outer::after, .arrow-position-top-left > .arrow-outer::after, .arrow-position-top-responsive > .arrow-outer::after {
+  box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+.arrow-position-bottom-center > .arrow-outer::after, .arrow-position-bottom-right > .arrow-outer::after, .arrow-position-bottom-left > .arrow-outer::after, .arrow-position-bottom-responsive > .arrow-outer::after {
+  box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12));
+}
+
+.arrow-variant-info > .arrow-outer::after {
+  background-color: var(--color-border-status-info-qf6jok, #006ce0);
+}
+.arrow-variant-info > .arrow-inner::after {
+  background-color: var(--color-background-status-info-sfobba, #f0fbff);
+}
 
 .body {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
@@ -7308,8 +7361,47 @@ var componentStyles18 = css46`
   order: 1;
 }
 
-.dismiss-control {
+.header-row {
+  margin-block-end: var(--space-xs-ymlm0b, 8px);
+}
+
+.header {
+  word-wrap: break-word;
+  max-inline-size: 100%;
+  overflow: hidden;
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  flex: 1 1 auto;
+
+}
+.header > h2 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  display: inline;
+}
 
+.content {
+  word-wrap: break-word;
+  max-inline-size: 100%;
+  overflow: hidden;
+  word-break: normal;
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+.content-overflow-visible {
+  overflow: visible;
+}
 
 .container {
   display: inline-block;
@@ -7400,6 +7492,64 @@ var componentStyles18 = css46`
   transform: rotate(-90deg);
   transform-origin: 0 100%;
 
+}
+.container-arrow-position-right-top:dir(rtl), .container-arrow-position-right-bottom:dir(rtl) {
+  transform: rotate(90deg);
+  transform-origin: 100% 100%;
+}
+.container-arrow-position-right-top {
+  inset-block-start: calc(12px + 10px);
+  inset-inline-start: 0;
+}
+.container-arrow-position-right-bottom {
+  inset-block-end: 12px;
+  inset-inline-start: 0;
+}
+.container-arrow-position-left-top, .container-arrow-position-left-bottom {
+  transform: rotate(90deg);
+  transform-origin: 100% 100%;
+
+}
+.container-arrow-position-left-top:dir(rtl), .container-arrow-position-left-bottom:dir(rtl) {
+  transform: rotate(-90deg);
+  transform-origin: 0% 100%;
+}
+.container-arrow-position-left-top {
+  inset-block-start: calc(12px + 10px);
+  inset-inline-end: 0;
+}
+.container-arrow-position-left-bottom {
+  inset-block-end: 12px;
+  inset-inline-end: 0;
+}
+.container-arrow-position-top-center, .container-arrow-position-top-right, .container-arrow-position-top-left, .container-arrow-position-top-responsive {
+  transform: rotate(180deg);
+  transform-origin: 50% 50%;
+}
+.container-arrow-position-top-center {
+  inset-block-end: -10px;
+  inset-inline-start: calc(50% - 10px);
+}
+.container-arrow-position-top-right {
+  inset-block-end: -10px;
+  inset-inline-start: 12px;
+}
+.container-arrow-position-top-left {
+  inset-block-end: -10px;
+  inset-inline-start: calc(100% - 20px - 12px);
+}
+.container-arrow-position-bottom-center {
+  inset-block-start: -10px;
+  inset-inline-start: calc(50% - 10px);
+}
+.container-arrow-position-bottom-right {
+  inset-block-start: -10px;
+  inset-inline-start: 12px;
+}
+.container-arrow-position-bottom-left {
+  inset-block-start: -10px;
+  inset-inline-start: calc(100% - 20px - 12px);
+}
 
 .container {
   animation: awsui_awsui-motion-fade-in_xjuzf_45l16_1 var(--motion-duration-show-paced-otsjh8, 180ms) var(--motion-easing-show-paced-ym6eyn, ease-out);
@@ -9068,7 +9218,7 @@ __decorateClass([
   property24({ type: Boolean, reflect: true })
 ], CsPaginationInternal.prototype, "disabled", 2);
 __decorateClass([
-  property24({ type: Object })
+  property24({ attribute: false })
 ], CsPaginationInternal.prototype, "ariaLabels", 2);
 
 // src/pagination/index.ts
@@ -12447,6 +12597,7 @@ var CsSliderInternal = class extends CsBaseElement {
     this.step = 1;
     this.disabled = false;
     this.ariaLabel = null;
+    this.ariaDescription = null;
     this._onInput = (e) => {
       if (this.disabled) return;
       const input = e.target;
@@ -12497,6 +12648,7 @@ var CsSliderInternal = class extends CsBaseElement {
             step=${this.step}
             ?disabled=${this.disabled}
             aria-label=${ifDefined17(this.ariaLabel || void 0)}
+            aria-description=${ifDefined17(this.ariaDescription || void 0)}
             aria-valuemin=${this.min}
             aria-valuemax=${this.max}
             aria-valuenow=${this.value}
@@ -12529,6 +12681,9 @@ __decorateClass([
 __decorateClass([
   property34({ type: String })
 ], CsSliderInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property34({ type: String })
+], CsSliderInternal.prototype, "ariaDescription", 2);
 
 // src/slider/index.ts
 var CsSlider = class extends CsSliderInternal {
@@ -13123,6 +13278,7 @@ var CsFileInputInternal = class extends CsBaseElement {
     this.multiple = false;
     this.variant = "button";
     this.ariaLabel = "Choose file";
+    this.ariaRequired = null;
     this.disabled = false;
     this._onButtonClick = () => {
       if (this.disabled) return;
@@ -13170,6 +13326,7 @@ var CsFileInputInternal = class extends CsBaseElement {
           icon-name=${isIconOnly ? "upload" : ""}
           ?disabled=${this.disabled}
           aria-label=${label}
+          aria-required=${ifDefined19(this.ariaRequired || void 0)}
           @click=${this._onButtonClick}
         >${!isIconOnly ? html38`<slot>${label}</slot>` : ""}</cs-button>
       </span>
@@ -13188,6 +13345,9 @@ __decorateClass([
 __decorateClass([
   property37({ type: String })
 ], CsFileInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property37({ type: Boolean })
+], CsFileInputInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property37({ type: Boolean, reflect: true })
 ], CsFileInputInternal.prototype, "disabled", 2);
@@ -13201,6 +13361,7 @@ customElements.define("cs-file-input", CsFileInput);
 import { css as css84, html as html39, nothing as nothing16 } from "lit";
 import { property as property38, state as state9 } from "lit/decorators.js";
 import { classMap as classMap34 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined20 } from "lit/directives/if-defined.js";
 
 // src/tabs/styles.ts
 import { css as css83 } from "lit";
@@ -13528,6 +13689,8 @@ var CsTabsInternal = class extends CsBaseElement {
     this.variant = "default";
     this.disableContentPaddings = false;
     this.fitHeight = false;
+    this.ariaLabel = null;
+    this.ariaLabelledby = null;
     this._internalActiveTabId = "";
     this._onTabKeyDown = (e) => {
       const enabledTabs = this.tabs.filter((t) => !t.disabled);
@@ -13643,7 +13806,9 @@ var CsTabsInternal = class extends CsBaseElement {
       <div class=${classMap34(rootClasses)}>
         <div class=${classMap34(headerClasses)}>
           <div class="tab-header-scroll-container">
-            <ul class="tabs-header-list" role="tablist">
+            <ul class="tabs-header-list" role="tablist"
+              aria-label=${ifDefined20(this.ariaLabel || void 0)}
+              aria-labelledby=${ifDefined20(!this.ariaLabel && this.ariaLabelledby ? this.ariaLabelledby : void 0)}>
               ${this.tabs.map((tab) => this._renderTab(tab))}
             </ul>
           </div>
@@ -13700,6 +13865,12 @@ __decorateClass([
 __decorateClass([
   property38({ type: Boolean, reflect: true })
 ], CsTabsInternal.prototype, "fitHeight", 2);
+__decorateClass([
+  property38({ type: String })
+], CsTabsInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property38({ type: String })
+], CsTabsInternal.prototype, "ariaLabelledby", 2);
 __decorateClass([
   state9()
 ], CsTabsInternal.prototype, "_internalActiveTabId", 2);
@@ -14199,7 +14370,7 @@ customElements.define("cs-expandable-section", CsExpandableSection);
 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 { classMap as classMap36 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined20 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
 
 // src/button-dropdown/styles.ts
 import { css as css87 } from "lit";
@@ -14693,8 +14864,8 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
           type="button"
           aria-haspopup="true"
           aria-expanded=${this._open}
-          aria-label=${ifDefined20(this.ariaLabel || "Actions")}
-          aria-disabled=${ifDefined20(ariaDisabled)}
+          aria-label=${ifDefined21(this.ariaLabel || "Actions")}
+          aria-disabled=${ifDefined21(ariaDisabled)}
           tabindex=${tabIndex}
           @click=${this._onTriggerClick}
         >
@@ -14712,8 +14883,8 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
         type="button"
         aria-haspopup="true"
         aria-expanded=${this._open}
-        aria-label=${ifDefined20(this.ariaLabel || void 0)}
-        aria-disabled=${ifDefined20(ariaDisabled)}
+        aria-label=${ifDefined21(this.ariaLabel || void 0)}
+        aria-disabled=${ifDefined21(ariaDisabled)}
         tabindex=${tabIndex}
         @click=${this._onTriggerClick}
       >
@@ -14823,7 +14994,7 @@ customElements.define("cs-button-dropdown", CsButtonDropdown);
 // src/button-group/internal.ts
 import { css as css91, html as html42 } from "lit";
 import { property as property41 } from "lit/decorators.js";
-import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined22 } from "lit/directives/if-defined.js";
 
 // src/button-group/styles.ts
 import { css as css90 } from "lit";
@@ -14908,9 +15079,9 @@ var CsButtonGroupInternal = class extends CsBaseElement {
             data-item-id=${item.id}
             ?pressed=${item.pressed}
             ?disabled=${!!item.disabled}
-            icon-name=${ifDefined21(item.iconName)}
-            pressed-icon-name=${ifDefined21(item.pressedIconName)}
-            aria-label=${ifDefined21(item.text)}
+            icon-name=${ifDefined22(item.iconName)}
+            pressed-icon-name=${ifDefined22(item.pressedIconName)}
+            aria-label=${ifDefined22(item.text)}
             @change=${() => this._onToggleButtonChange(item)}
           ></cs-toggle-button>
         </div>
@@ -14924,8 +15095,8 @@ var CsButtonGroupInternal = class extends CsBaseElement {
             data-item-id=${item.id}
             ?disabled=${!!item.disabled}
             ?loading=${!!item.loading}
-            icon-name=${ifDefined21(item.iconName)}
-            aria-label=${ifDefined21(item.text)}
+            icon-name=${ifDefined22(item.iconName)}
+            aria-label=${ifDefined22(item.text)}
             @click=${(e) => {
         if (e instanceof CustomEvent) {
           this._onIconButtonClick(item);
@@ -14947,13 +15118,13 @@ var CsButtonGroupInternal = class extends CsBaseElement {
       <div
         class="root"
         role="toolbar"
-        aria-label=${ifDefined21(this.ariaLabel || void 0)}
+        aria-label=${ifDefined22(this.ariaLabel || void 0)}
       >
         ${this.items.map((itemOrGroup, groupIndex) => {
       if (isGroup(itemOrGroup)) {
         return html42`
               ${groupIndex > 0 ? html42`<div class="divider" role="separator"></div>` : ""}
-              <div class="group" role="group" aria-label=${ifDefined21(itemOrGroup.text)}>
+              <div class="group" role="group" aria-label=${ifDefined22(itemOrGroup.text)}>
                 ${this._renderGroupItems(itemOrGroup.items)}
               </div>
             `;
@@ -14987,7 +15158,7 @@ customElements.define("cs-button-group", CsButtonGroup);
 import { css as css94, html as html43 } from "lit";
 import { property as property42 } from "lit/decorators.js";
 import { classMap as classMap37 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined22 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined23 } from "lit/directives/if-defined.js";
 
 // src/breadcrumb-group/styles.ts
 import { css as css92 } from "lit";
@@ -15289,7 +15460,7 @@ var CsBreadcrumbGroupInternal = class extends CsBaseElement {
     return html43`
       <nav
         class="breadcrumb-group"
-        aria-label=${ifDefined22(this.ariaLabel || "Breadcrumbs")}
+        aria-label=${ifDefined23(this.ariaLabel || "Breadcrumbs")}
       >
         <ol class="breadcrumb-group-list">
           ${this.items.map((item, i) => this._renderItem(item, i))}
@@ -15314,7 +15485,7 @@ customElements.define("cs-breadcrumb-group", CsBreadcrumbGroup);
 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 { classMap as classMap38 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined23 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
 
 // src/select/styles.ts
 import { css as css95 } from "lit";
@@ -15628,6 +15799,8 @@ var CsSelectInternal = class extends Base6 {
     this.filteringType = "none";
     this.placeholder = "";
     this.ariaLabel = null;
+    this.ariaRequired = null;
+    this.ariaLabelledby = null;
     this.invalid = false;
     this.filteringPlaceholder = "";
     this.selectedAriaLabel = "";
@@ -15845,7 +16018,7 @@ var CsSelectInternal = class extends Base6 {
         class=${classMap38(classes)}
         role="option"
         aria-selected=${isSelected}
-        aria-disabled=${ifDefined23(opt.disabled ? "true" : void 0)}
+        aria-disabled=${ifDefined24(opt.disabled ? "true" : void 0)}
         @click=${(e) => this._onOptionClick(opt, e)}
         @mouseenter=${() => {
       if (!opt.disabled) this._highlightedIndex = index;
@@ -15891,7 +16064,7 @@ var CsSelectInternal = class extends Base6 {
           />
         </div>
       ` : nothing19}
-      <ul class="option-list" role="listbox" aria-label=${ifDefined23(this.ariaLabel || void 0)}>
+      <ul class="option-list" role="listbox" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
         ${items}
       </ul>
     `;
@@ -15912,8 +16085,9 @@ var CsSelectInternal = class extends Base6 {
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this._open}
-          aria-label=${ifDefined23(this.ariaLabel || void 0)}
-          aria-disabled=${ifDefined23(this.disabled ? "true" : void 0)}
+          aria-label=${ifDefined24(this.ariaLabel || void 0)}
+          aria-required=${ifDefined24(this.ariaRequired || void 0)}
+          aria-disabled=${ifDefined24(this.disabled ? "true" : void 0)}
           ?disabled=${false}
           tabindex=${this.disabled ? -1 : 0}
           @click=${this._onTriggerClick}
@@ -15949,6 +16123,12 @@ __decorateClass([
 __decorateClass([
   property43({ type: String })
 ], CsSelectInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property43({ type: String })
+], CsSelectInternal.prototype, "ariaRequired", 2);
+__decorateClass([
+  property43({ type: String })
+], CsSelectInternal.prototype, "ariaLabelledby", 2);
 __decorateClass([
   property43({ type: Boolean })
 ], CsSelectInternal.prototype, "invalid", 2);
@@ -15986,7 +16166,7 @@ customElements.define("cs-select", CsSelect);
 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 { classMap as classMap39 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
 
 // src/multiselect/styles.ts
 import { css as css98 } from "lit";
@@ -16461,7 +16641,7 @@ var CsMultiselectInternal = class extends Base7 {
         class=${classMap39(classes)}
         role="option"
         aria-selected=${isSelected}
-        aria-disabled=${ifDefined24(opt.disabled ? "true" : void 0)}
+        aria-disabled=${ifDefined25(opt.disabled ? "true" : void 0)}
         @click=${(e) => this._onOptionClick(opt, e)}
         @mouseenter=${() => {
       if (!opt.disabled) this._highlightedIndex = index;
@@ -16506,7 +16686,7 @@ var CsMultiselectInternal = class extends Base7 {
           />
         </div>
       ` : nothing20}
-      <ul class="option-list" role="listbox" aria-multiselectable="true" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
+      <ul class="option-list" role="listbox" aria-multiselectable="true" aria-label=${ifDefined25(this.ariaLabel || void 0)}>
         ${items}
       </ul>
     `;
@@ -16545,8 +16725,8 @@ var CsMultiselectInternal = class extends Base7 {
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this._open}
-          aria-label=${ifDefined24(this.ariaLabel || void 0)}
-          aria-disabled=${ifDefined24(this.disabled ? "true" : void 0)}
+          aria-label=${ifDefined25(this.ariaLabel || void 0)}
+          aria-disabled=${ifDefined25(this.disabled ? "true" : void 0)}
           ?disabled=${false}
           tabindex=${this.disabled ? -1 : 0}
           @click=${this._onTriggerClick}
@@ -16629,7 +16809,7 @@ customElements.define("cs-multiselect", CsMultiselect);
 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 { classMap as classMap40 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
 
 // src/autosuggest/styles.ts
 import { css as css100 } from "lit";
@@ -17029,14 +17209,14 @@ var CsAutosuggestInternal = class extends Base8 {
             class=${classMap40(inputClasses)}
             type="text"
             .value=${this.value}
-            placeholder=${ifDefined25(this.placeholder || void 0)}
+            placeholder=${ifDefined26(this.placeholder || void 0)}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
-            aria-label=${ifDefined25(this.ariaLabel || void 0)}
+            aria-label=${ifDefined26(this.ariaLabel || void 0)}
             aria-autocomplete="list"
             aria-expanded=${showDropdown ? "true" : "false"}
-            aria-controls=${ifDefined25(showDropdown ? this._listboxId : void 0)}
-            aria-activedescendant=${ifDefined25(
+            aria-controls=${ifDefined26(showDropdown ? this._listboxId : void 0)}
+            aria-activedescendant=${ifDefined26(
       showDropdown && this._highlightedIndex >= 0 ? `${this._listboxId}-option-${this._highlightedIndex}` : void 0
     )}
             role="combobox"
@@ -17074,7 +17254,7 @@ var CsAutosuggestInternal = class extends Base8 {
         id=${`${this._listboxId}-option-${index}`}
         role="option"
         aria-selected=${isHighlighted ? "true" : "false"}
-        aria-disabled=${ifDefined25(isDisabled ? "true" : void 0)}
+        aria-disabled=${ifDefined26(isDisabled ? "true" : void 0)}
         @click=${() => this._onOptionClick(option)}
       >
         ${option.label || option.value || ""}
@@ -17128,7 +17308,7 @@ customElements.define("cs-autosuggest", CsAutosuggest);
 import { css as css104, html as html47 } from "lit";
 import { property as property46 } from "lit/decorators.js";
 import { classMap as classMap41 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined27 } from "lit/directives/if-defined.js";
 
 // src/segmented-control/styles.ts
 import { css as css103 } from "lit";
@@ -17401,8 +17581,8 @@ var CsSegmentedControlInternal = class extends CsBaseElement {
         <div
           class=${classMap41({ "segment-part": true, [segmentCountClass]: true })}
           role="group"
-          aria-label=${ifDefined26(this.label || void 0)}
-          aria-labelledby=${ifDefined26(!this.label && this.ariaLabelledby ? this.ariaLabelledby : void 0)}
+          aria-label=${ifDefined27(this.label || void 0)}
+          aria-labelledby=${ifDefined27(!this.label && this.ariaLabelledby ? this.ariaLabelledby : void 0)}
         >
           ${this.options.map((option, index) => this._renderSegment(option, index))}
         </div>
@@ -17423,7 +17603,7 @@ var CsSegmentedControlInternal = class extends CsBaseElement {
         type="button"
         ?disabled=${isDisabled}
         aria-pressed=${isSelected ? "true" : "false"}
-        aria-label=${ifDefined26(option.iconName && !option.text ? option.iconAlt || void 0 : void 0)}
+        aria-label=${ifDefined27(option.iconName && !option.text ? option.iconAlt || void 0 : void 0)}
         tabindex=${this._getTabIndex(index)}
         @click=${() => this._onSegmentClick(option)}
         @focus=${() => this._onSegmentFocus(index)}
@@ -17861,10 +18041,41 @@ import { property as property48, state as state16 } from "lit/decorators.js";
 // src/collection-preferences/styles.ts
 import { css as css107 } from "lit";
 var componentStyles47 = css107`
-.visible-content,
-.visible-content-toggle,
-.visible-content-groups,
-.visible-content-group {
+.visible-content-title {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-form-label-6sbm75, #0f141a);
+  margin-block-start: 0;
+  margin-block-end: var(--space-scaled-l-sej05l, 20px);
+  margin-inline: 0;
+}
+
+.visible-content-group-label {
+  color: var(--color-text-group-label-a2qc05, #424650);
+  padding-block-end: var(--space-xs-ymlm0b, 8px);
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
+}
+
+.visible-content-option {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding-block: var(--space-xs-ymlm0b, 8px);
+  padding-inline-start: var(--space-scaled-l-sej05l, 20px);
+  padding-inline-end: 0px;
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
+}
+.visible-content-option:last-child {
+  border-block-end: none;
+}
+
+.visible-content-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-inline-end: var(--space-l-2ud1p3, 20px);
+  flex-grow: 1;
+}
 
 .content-display-option-content {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
@@ -20100,7 +20311,7 @@ customElements.define("cs-form", CsForm);
 import { css as css122, html as html56 } from "lit";
 import { property as property55 } from "lit/decorators.js";
 import { classMap as classMap46 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined27 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined28 } from "lit/directives/if-defined.js";
 
 // src/modal/styles.ts
 import { css as css121 } from "lit";
@@ -20443,7 +20654,7 @@ var CsModalInternal = class extends CsBaseElement {
             class=${classMap46(dialogClasses)}
             role="dialog"
             aria-modal="true"
-            aria-label=${ifDefined27(this.header || void 0)}
+            aria-label=${ifDefined28(this.header || void 0)}
           >
             <div class="container">
               <div class="header">
@@ -20500,7 +20711,7 @@ customElements.define("cs-modal", CsModal);
 import { css as css124, html as html57, nothing as nothing30 } from "lit";
 import { property as property56 } from "lit/decorators.js";
 import { classMap as classMap47 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined28 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
 
 // src/file-upload/styles.ts
 import { css as css123 } from "lit";
@@ -20617,6 +20828,7 @@ var CsFileUploadInternal = class extends CsBaseElement {
     this.errorText = "";
     this.constraintText = "";
     this.ariaLabel = null;
+    this.ariaRequired = null;
     this.label = "";
     this.fileTokenAlignment = "vertical";
     this._thumbnailUrls = /* @__PURE__ */ new Map();
@@ -20728,10 +20940,11 @@ var CsFileUploadInternal = class extends CsBaseElement {
 
         <cs-file-input
           variant="button"
-          accept=${ifDefined28(this.accept || void 0)}
+          accept=${ifDefined29(this.accept || void 0)}
           ?multiple=${this.multiple}
           ?disabled=${this.disabled}
           aria-label=${this.ariaLabel || uploadButtonText}
+          aria-required=${ifDefined29(this.ariaRequired || void 0)}
           @change=${this._onFileInputChange}
         >${uploadButtonText}</cs-file-input>
 
@@ -20781,6 +20994,9 @@ __decorateClass([
 __decorateClass([
   property56({ type: String })
 ], CsFileUploadInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property56({ type: Boolean })
+], CsFileUploadInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property56({ type: String })
 ], CsFileUploadInternal.prototype, "label", 2);
@@ -20800,7 +21016,7 @@ customElements.define("cs-file-upload", CsFileUpload);
 import { css as css126, html as html58, nothing as nothing31 } from "lit";
 import { property as property57, state as state18 } from "lit/decorators.js";
 import { classMap as classMap48 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
 
 // src/calendar/styles.ts
 import { css as css125 } from "lit";
@@ -21233,11 +21449,11 @@ var CsCalendarInternal = class extends CsBaseElement {
       <div
         class="calendar"
         role="group"
-        aria-label=${ifDefined29(this.ariaLabel || void 0)}
-        aria-labelledby=${ifDefined29(
+        aria-label=${ifDefined30(this.ariaLabel || void 0)}
+        aria-labelledby=${ifDefined30(
       !this.ariaLabel ? this.ariaLabelledby || void 0 : void 0
     )}
-        aria-describedby=${ifDefined29(this.ariaDescribedby || void 0)}
+        aria-describedby=${ifDefined30(this.ariaDescribedby || void 0)}
       >
         <div class="calendar-inner">
           <div class="calendar-header">
@@ -21360,7 +21576,7 @@ customElements.define("cs-calendar", CsCalendar);
 import { css as css128, html as html59 } from "lit";
 import { property as property58 } from "lit/decorators.js";
 import { classMap as classMap49 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined31 } from "lit/directives/if-defined.js";
 import { consume as consume2 } from "@lit/context";
 
 // src/date-input/styles.ts
@@ -21443,17 +21659,17 @@ var CsDateInputInternal = class extends Base9 {
             class=${classMap49(inputClasses)}
             type="text"
             .value=${this.value}
-            placeholder=${ifDefined30(this.placeholder || void 0)}
+            placeholder=${ifDefined31(this.placeholder || void 0)}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             ?autofocus=${this.autoFocus}
-            id=${ifDefined30(controlId)}
-            aria-label=${ifDefined30(this.ariaLabel || void 0)}
-            aria-labelledby=${ifDefined30(
+            id=${ifDefined31(controlId)}
+            aria-label=${ifDefined31(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined31(
       !this.ariaLabel ? ariaLabelledby : void 0
     )}
-            aria-describedby=${ifDefined30(this._resolvedAriaDescribedby)}
-            aria-invalid=${ifDefined30(this._isInvalid ? "true" : void 0)}
+            aria-describedby=${ifDefined31(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined31(this._isInvalid ? "true" : void 0)}
             @input=${this._onInput}
             @blur=${this._onBlur}
             @focus=${this._onFocus}
@@ -21499,7 +21715,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 { ifDefined as ifDefined31 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
 import { consume as consume3 } from "@lit/context";
 
 // src/date-picker/styles.ts
@@ -21578,6 +21794,7 @@ var CsDatePickerInternal = class extends Base10 {
     this.warning = false;
     this.autoFocus = false;
     this.ariaLabel = null;
+    this.ariaRequired = null;
     this._open = false;
     this._cleanupOutsideClick = null;
     this._onInputChange = (e) => {
@@ -21707,7 +21924,8 @@ var CsDatePickerInternal = class extends Base10 {
                 ?read-only=${this.readOnly}
                 ?invalid=${this._isInvalid}
                 ?warning=${this._isWarning}
-                aria-label=${ifDefined31(this.ariaLabel || void 0)}
+                aria-label=${ifDefined32(this.ariaLabel || void 0)}
+                aria-required=${ifDefined32(this.ariaRequired || void 0)}
                 @change=${this._onInputChange}
               ></cs-date-input>
             </div>
@@ -21729,7 +21947,7 @@ var CsDatePickerInternal = class extends Base10 {
                       start-of-week=${this.startOfWeek}
                       .isDateEnabled=${this.isDateEnabled}
                       .i18nStrings=${this.i18nStrings}
-                      aria-label=${ifDefined31(this.ariaLabel || void 0)}
+                      aria-label=${ifDefined32(this.ariaLabel || void 0)}
                       @change=${this._onCalendarChange}
                     ></cs-calendar>
                   </div>
@@ -21779,6 +21997,9 @@ __decorateClass([
 __decorateClass([
   property59({ type: String })
 ], CsDatePickerInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property59({ type: Boolean })
+], CsDatePickerInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property59({ attribute: false })
 ], CsDatePickerInternal.prototype, "i18nStrings", 2);
@@ -21801,7 +22022,7 @@ customElements.define("cs-date-picker", CsDatePicker);
 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 { classMap as classMap50 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
 
 // src/date-range-picker/styles.ts
 import { css as css131 } from "lit";
@@ -22533,8 +22754,8 @@ var CsDateRangePickerInternal = class extends Base11 {
             type="button"
             aria-haspopup="dialog"
             aria-expanded=${this._open ? "true" : "false"}
-            aria-label=${ifDefined32(this.ariaLabel || void 0)}
-            aria-disabled=${ifDefined32(this.disabled ? "true" : void 0)}
+            aria-label=${ifDefined33(this.ariaLabel || void 0)}
+            aria-disabled=${ifDefined33(this.disabled ? "true" : void 0)}
             ?disabled=${false}
             tabindex=${this.disabled ? -1 : 0}
             @click=${this._onTriggerClick}
@@ -22551,7 +22772,7 @@ var CsDateRangePickerInternal = class extends Base11 {
         </div>
         ${this._open ? html61`
           <div class=${classMap50(dropdownClasses)} role="dialog"
-            aria-label=${ifDefined32(this.ariaLabel || "Date range picker")}
+            aria-label=${ifDefined33(this.ariaLabel || "Date range picker")}
             aria-modal="true">
             ${this._renderModeSwitch()}
             <div class="dropdown-body">
@@ -22771,7 +22992,7 @@ var componentStyles60 = css134`
 import { css as css135, html as html62, nothing as nothing34 } from "lit";
 import { property as property61 } from "lit/decorators.js";
 import { classMap as classMap51 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined34 } from "lit/directives/if-defined.js";
 import { consume as consume4 } from "@lit/context";
 var Base12 = FormAssociatedMixin(CsBaseElement);
 var hostStyles61 = css135`:host { display: block; }`;
@@ -22788,6 +23009,7 @@ var CsInputInternal = class extends Base12 {
     this.autoFocus = false;
     this.inputMode = "";
     this.ariaLabel = null;
+    this.ariaRequired = null;
     this.ariaDescribedby = null;
     this.clearAriaLabel = "";
     this._onInput = (e) => {
@@ -22886,17 +23108,18 @@ var CsInputInternal = class extends Base12 {
             class=${classMap51(inputClasses)}
             type=${this.type}
             .value=${this.value}
-            placeholder=${ifDefined33(this.placeholder || void 0)}
+            placeholder=${ifDefined34(this.placeholder || void 0)}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             ?autofocus=${this.autoFocus}
-            inputmode=${ifDefined33(this.inputMode || void 0)}
-            step=${ifDefined33(this.step)}
-            id=${ifDefined33(controlId)}
-            aria-label=${ifDefined33(this.ariaLabel || void 0)}
-            aria-labelledby=${ifDefined33(!this.ariaLabel ? ariaLabelledby : void 0)}
-            aria-describedby=${ifDefined33(this._resolvedAriaDescribedby)}
-            aria-invalid=${ifDefined33(this._isInvalid ? "true" : void 0)}
+            inputmode=${ifDefined34(this.inputMode || void 0)}
+            step=${ifDefined34(this.step)}
+            id=${ifDefined34(controlId)}
+            aria-label=${ifDefined34(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined34(!this.ariaLabel ? ariaLabelledby : void 0)}
+            aria-describedby=${ifDefined34(this._resolvedAriaDescribedby)}
+            aria-required=${ifDefined34(this.ariaRequired || void 0)}
+            aria-invalid=${ifDefined34(this._isInvalid ? "true" : void 0)}
             @input=${this._onInput}
             @blur=${this._onBlur}
             @focus=${this._onFocus}
@@ -22952,6 +23175,9 @@ __decorateClass([
 __decorateClass([
   property61({ type: String })
 ], CsInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property61({ type: Boolean })
+], CsInputInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property61({ type: String })
 ], CsInputInternal.prototype, "ariaDescribedby", 2);
@@ -23846,72 +24072,353 @@ 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);
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter_annotation:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter_annotation:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-1px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_fold-widget:focus::before,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter_annotation:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * -1px);
+  inset-block-start: calc(-1 * -1px);
+  inline-size: calc(100% + -1px + -1px);
+  block-size: calc(100% + -1px + -1px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.code-editor .ace_editor .ace_marker-layer > .ace_active-line {
+  background: transparent;
+  box-sizing: border-box;
+  border-block-start: 1px solid var(--color-border-code-editor-ace-active-line-light-theme-q6hsvt, #dedee3);
+  border-block-end: 1px solid var(--color-border-code-editor-ace-active-line-light-theme-q6hsvt, #dedee3);
+}
+.code-editor .ace_editor.ace_dark .ace_marker-layer > .ace_active-line {
+  border-block-start: 1px solid var(--color-border-code-editor-ace-active-line-dark-theme-v09eti, #656871);
+  border-block-end: 1px solid var(--color-border-code-editor-ace-active-line-dark-theme-v09eti, #656871);
+}
+.code-editor .ace_editor .ace_gutter {
+  background-color: var(--color-background-code-editor-gutter-default-15qdwh, #f3f3f7);
+  color: var(--color-text-code-editor-gutter-default-nlshs8, #0f141a);
+}
+.code-editor .ace_editor .ace_gutter:focus,
+.code-editor .ace_editor .ace_scroller:focus {
+  box-shadow: inset 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_open {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23424650' fill='%23424650' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_open:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_open:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_closed {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23424650' fill='%23424650' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_fold-widget.ace_closed:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_fold-widget.ace_closed:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+.code-editor .ace_editor .ace_gutter-active-line {
+  background-color: var(--color-background-code-editor-gutter-active-line-default-51v1pv, #656871);
+  color: var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff);
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_gutter_annotation:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_fold-widget:focus,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_gutter_annotation:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(-2px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_fold-widget:focus::before,
+:host-context([data-awsui-focus-visible=true]) .code-editor .ace_editor .ace_gutter-active-line .ace_gutter_annotation:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * -2px);
+  inset-block-start: calc(-1 * -2px);
+  inline-size: calc(100% + -2px + -2px);
+  block-size: calc(100% + -2px + -2px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_open:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line > .ace_fold-widget.ace_closed:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+.code-editor .ace_editor .ace_gutter-active-line.ace_error {
+  color: var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff);
+  background-color: var(--color-background-code-editor-gutter-active-line-error-ro2qo1, #db0000);
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ffffff' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Ccircle cx='8' cy='8' r='7'/%3E %3Cpath d='M10.828 5.172l-5.656 5.656M10.828 10.828L5.172 5.172'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Ccircle cx='8' cy='8' r='7'/%3E %3Cpath d='M10.828 5.172l-5.656 5.656M10.828 10.828L5.172 5.172'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_warning {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ffffff' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M8 1l7 14H1L8 1z'/%3E %3Cpath d='M7.99 12H8v.01h-.01zM8 6v4'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill-opacity='0' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M8 1l7 14H1L8 1z'/%3E %3Cpath d='M7.99 12H8v.01h-.01zM8 6v4'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open:hover, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_open:hover, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_open:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2'%3E %3Cpath d='M4 5h8l-4 6-4-6z' stroke-linejoin='round'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill='%23dedee3' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%231b232d' fill='%231b232d' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+@supports (--css-variable-support-check: #000) {
+  body .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed:hover, body .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed:hover {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23f9f9fa' fill='%23f9f9fa' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+  }
+  @media not print {
+    body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_error > .ace_fold-widget.ace_closed:hover, body.awsui-polaris-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed:hover, body.awsui-dark-mode .code-editor .ace_editor .ace_gutter-active-line.ace_warning > .ace_fold-widget.ace_closed:hover {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230f141a' fill='%230f141a' stroke-width='2' stroke-linejoin='round'%3E %3Cpath d='M5 4v8l6-4-6-4z'/%3E %3C/svg%3E");
+    }
+  }
+}
+
+.pane {
+  display: flex;
+  position: relative;
+  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 {
@@ -24383,7 +24890,7 @@ customElements.define("cs-code-editor", CsCodeEditor);
 import { css as css144, html as html67, nothing as nothing38 } from "lit";
 import { property as property66 } from "lit/decorators.js";
 import { classMap as classMap55 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined34 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined35 } from "lit/directives/if-defined.js";
 
 // src/top-navigation/styles.ts
 import { css as css143 } from "lit";
@@ -24791,10 +25298,10 @@ var CsTopNavigationInternal = class extends CsBaseElement {
       <div class=${classMap55(identityClasses)}>
         <a
           class="identity-link"
-          href=${ifDefined34(this.identity.href)}
+          href=${ifDefined35(this.identity.href)}
           @click=${(e) => this._onIdentityClick(e)}
         >
-          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined34(this.identity.logo.alt)} />` : nothing38}
+          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined35(this.identity.logo.alt)} />` : nothing38}
           ${this.identity.title ? html67`<span class="title">${this.identity.title}</span>` : nothing38}
         </a>
       </div>
@@ -24813,9 +25320,9 @@ var CsTopNavigationInternal = class extends CsBaseElement {
           <a
             class="overflow-menu-control overflow-menu-control-link"
             href=${utility.href}
-            target=${ifDefined34(utility.target)}
-            rel=${ifDefined34(utility.rel || (utility.target === "_blank" ? "noopener noreferrer" : void 0))}
-            aria-label=${ifDefined34(utility.ariaLabel)}
+            target=${ifDefined35(utility.target)}
+            rel=${ifDefined35(utility.rel || (utility.target === "_blank" ? "noopener noreferrer" : void 0))}
+            aria-label=${ifDefined35(utility.ariaLabel)}
             @click=${(e) => this._onUtilityButtonClick(utility, e)}
           >
             ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
@@ -24830,7 +25337,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
         <button
           type="button"
           class="overflow-menu-control"
-          aria-label=${ifDefined34(utility.ariaLabel)}
+          aria-label=${ifDefined35(utility.ariaLabel)}
           @click=${(e) => this._onUtilityButtonClick(utility, e)}
         >
           ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
@@ -24849,7 +25356,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
         <cs-button-dropdown
           .items=${utility.items}
           variant="normal"
-          aria-label=${ifDefined34(utility.ariaLabel)}
+          aria-label=${ifDefined35(utility.ariaLabel)}
         >
           ${utility.iconName ? html67`<cs-icon name=${utility.iconName}></cs-icon>` : nothing38}
           ${utility.text ?? ""}
@@ -24865,7 +25372,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
   }
   render() {
     return html67`
-      <nav class="top-navigation" aria-label=${ifDefined34(this.ariaLabel || "Site")}>
+      <nav class="top-navigation" aria-label=${ifDefined35(this.ariaLabel || "Site")}>
         <div class="padding-box">
           ${this._renderIdentity()}
           <div class="inputs">
@@ -24900,7 +25407,7 @@ customElements.define("cs-top-navigation", CsTopNavigation);
 import { css as css146, html as html68, nothing as nothing39 } from "lit";
 import { property as property67, state as state21 } from "lit/decorators.js";
 import { classMap as classMap56 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined35 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined36 } from "lit/directives/if-defined.js";
 
 // src/side-navigation/styles.ts
 import { css as css145 } from "lit";
@@ -25229,7 +25736,7 @@ var CsSideNavigationInternal = class extends CsBaseElement {
       e
     )}
         >
-          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined35(this.header.logo.alt)} />` : nothing39}
+          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined36(this.header.logo.alt)} />` : nothing39}
           ${this.header.text ? html68`<span class="header-link-text">${this.header.text}</span>` : nothing39}
         </a>
       </div>
@@ -25371,7 +25878,7 @@ var CsSideNavigationInternal = class extends CsBaseElement {
   }
   render() {
     return html68`
-      <nav class="root" aria-label=${ifDefined35(this.ariaLabel || "Side navigation")}>
+      <nav class="root" aria-label=${ifDefined36(this.ariaLabel || "Side navigation")}>
         ${this._renderHeader()}
         <slot name="itemsControl"></slot>
         <div class="list-container">
@@ -26248,6 +26755,7 @@ var CsSplitPanelInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
     this.header = "";
+    this.ariaLabel = null;
     this.hidePreferencesButton = false;
     this.closeBehavior = "collapse";
     this.size = 250;
@@ -26272,7 +26780,7 @@ var CsSplitPanelInternal = class extends CsBaseElement {
     this.styles = [sharedStyles, componentStyles68, hostStyles70];
   }
   get _regionLabel() {
-    return this.panelAriaLabel || this.header;
+    return this.ariaLabel || this.panelAriaLabel || this.header;
   }
   render() {
     const closeLabel = this.i18nStrings?.closeButtonAriaLabel ?? "Close";
@@ -26421,6 +26929,9 @@ var CsSplitPanelInternal = class extends CsBaseElement {
 __decorateClass([
   property70({ type: String })
 ], CsSplitPanelInternal.prototype, "header", 2);
+__decorateClass([
+  property70({ type: String })
+], CsSplitPanelInternal.prototype, "ariaLabel", 2);
 __decorateClass([
   property70({ type: Boolean, reflect: true })
 ], CsSplitPanelInternal.prototype, "hidePreferencesButton", 2);
@@ -26508,7 +27019,7 @@ customElements.define("cs-annotation-context", CsAnnotationContext);
 import { css as css154, html as html73 } from "lit";
 import { property as property72 } from "lit/decorators.js";
 import { classMap as classMap59 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined36 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined37 } from "lit/directives/if-defined.js";
 import { consume as consume5 } from "@lit/context";
 
 // src/textarea/styles.ts
@@ -26702,16 +27213,16 @@ var CsTextareaInternal = class extends Base13 {
         <textarea
           class=${classMap59(textareaClasses)}
           .value=${this.value}
-          placeholder=${ifDefined36(this.placeholder || void 0)}
+          placeholder=${ifDefined37(this.placeholder || void 0)}
           rows=${this.rows}
           ?disabled=${this.disabled}
           ?readonly=${this.readOnly}
           ?autofocus=${this.autoFocus}
-          id=${ifDefined36(controlId)}
-          aria-label=${ifDefined36(this.ariaLabel || void 0)}
-          aria-labelledby=${ifDefined36(!this.ariaLabel ? ariaLabelledby : void 0)}
-          aria-describedby=${ifDefined36(this._resolvedAriaDescribedby)}
-          aria-invalid=${ifDefined36(this._isInvalid ? "true" : void 0)}
+          id=${ifDefined37(controlId)}
+          aria-label=${ifDefined37(this.ariaLabel || void 0)}
+          aria-labelledby=${ifDefined37(!this.ariaLabel ? ariaLabelledby : void 0)}
+          aria-describedby=${ifDefined37(this._resolvedAriaDescribedby)}
+          aria-invalid=${ifDefined37(this._isInvalid ? "true" : void 0)}
           @input=${this._onInput}
           @blur=${this._onBlur}
           @focus=${this._onFocus}
@@ -26883,7 +27394,7 @@ customElements.define("cs-text-filter", CsTextFilter);
 import { css as css158, html as html75 } from "lit";
 import { property as property74 } from "lit/decorators.js";
 import { classMap as classMap60 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined37 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined38 } from "lit/directives/if-defined.js";
 import { consume as consume6 } from "@lit/context";
 
 // src/time-input/styles.ts
@@ -26962,11 +27473,11 @@ var CsTimeInputInternal = class extends Base14 {
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             ?autofocus=${this.autoFocus}
-            id=${ifDefined37(controlId)}
-            aria-label=${ifDefined37(this.ariaLabel || void 0)}
-            aria-labelledby=${ifDefined37(!this.ariaLabel ? ariaLabelledby : void 0)}
-            aria-describedby=${ifDefined37(this._resolvedAriaDescribedby)}
-            aria-invalid=${ifDefined37(this._isInvalid ? "true" : void 0)}
+            id=${ifDefined38(controlId)}
+            aria-label=${ifDefined38(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined38(!this.ariaLabel ? ariaLabelledby : void 0)}
+            aria-describedby=${ifDefined38(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined38(this._isInvalid ? "true" : void 0)}
             @input=${this._onInput}
             @blur=${this._onBlur}
             @focus=${this._onFocus}
@@ -27867,6 +28378,16 @@ var appLayoutTogglesStyles = css171`
 // src/internal/styles/app-layout-visual-refresh.ts
 import { css as css172 } from "lit";
 var appLayoutVisualRefreshStyles = css172`
+div.app-layout-visual-refresh--background {
+  display: contents;
+}
+div.app-layout-visual-refresh--background > .app-layout-visual-refresh--scrolling-background {
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  grid-column: 1/span 5;
+  grid-row: 1/9;
+}
+
 .app-layout-visual-refresh--breadcrumbs {
   background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
   grid-area: breadcrumbs;
@@ -27896,78 +28417,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;
   }
 }