@cumulus-ui/components 0.1.3 → 0.1.5

package/dist/index.js

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/checkbox/internal.ts
-import { css as css4, html, svg } from "lit";
+import { css as css5, html, svg } from "lit";
 import { property as property2 } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -203,80 +203,80 @@ var componentStyles = css2`
 // src/internal/styles/abstract-switch.ts
 import { css as css3 } from "lit";
 var abstractSwitchStyles = css3`
-.content,
-.description,
-.label {
+.abstract-switch--content,
+.abstract-switch--description,
+.abstract-switch--label {
   display: block;
 }
 
-.label {
+.abstract-switch--label {
   color: var(--color-text-form-default-47mtz6, #0f141a);
 }
 
-.outline {
+.abstract-switch--outline {
   display: none;
 }
-.outline.show-outline {
+.abstract-switch--outline.abstract-switch--show-outline {
   display: block;
 }
 
-:host-context([data-awsui-focus-visible=true]) .native-input:focus + .outline {
+:host-context([data-awsui-focus-visible=true]) .abstract-switch--native-input:focus + .abstract-switch--outline {
   display: block;
 }
 
-.wrapper {
+.abstract-switch--wrapper {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
 }
 
-.label-wrapper {
+.abstract-switch--label-wrapper {
   position: relative;
   display: flex;
   cursor: default;
 }
 
-.content {
+.abstract-switch--content {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.empty-content {
+.abstract-switch--empty-content {
   inline-size: 0px;
 }
 
-.description {
+.abstract-switch--description {
   color: var(--color-text-form-secondary-1nm780, #656871);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
   letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
 }
-.description-bottom-padding {
+.abstract-switch--description-bottom-padding {
   padding-block-end: var(--space-scaled-xxs-pfm1nx, 4px);
 }
 
-.label,
-.description {
+.abstract-switch--label,
+.abstract-switch--description {
   padding-inline-start: var(--space-xs-ymlm0b, 8px);
 }
-.label-disabled,
-.description-disabled {
+.abstract-switch--label-disabled,
+.abstract-switch--description-disabled {
   color: var(--color-text-control-disabled-upk9lz, #b4b4bb);
 }
 
-.control {
+.abstract-switch--control {
   position: relative;
 
 
 }
-.control > input, .control > svg, .control > .outline {
+.abstract-switch--control > input, .abstract-switch--control > svg, .abstract-switch--control > .abstract-switch--outline {
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.control > input {
+.abstract-switch--control > input {
   opacity: 0;
   z-index: 1;
   -webkit-user-select: none;
@@ -287,44 +287,56 @@ var abstractSwitchStyles = css3`
 }
 `;
 
-// src/checkbox/internal.ts
-var Base = FormAssociatedMixin(CsBaseElement);
-var hostStyles = css4`
-  :host { display: block; }
-  .checkbox-icon {
-    position: absolute;
-    inline-size: 100%;
-    block-size: 100%;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-  }
-  .checkbox-icon > .styled-box {
-    fill: var(--color-background-control-default-4jb21l, #ffffff);
-    stroke: var(--color-border-control-default-sh3548, #8c8c94);
-    stroke-width: var(--border-width-field-2xc78x, 1px);
-  }
-  .checkbox-icon > .styled-box-checked,
-  .checkbox-icon > .styled-box-indeterminate {
-    fill: var(--color-background-control-checked-ka7kc2, #006ce0);
-    stroke: var(--color-border-control-checked-bdv28l, #006ce0);
-  }
-  .checkbox-icon > .styled-box-disabled,
-  .checkbox-icon > .styled-box-readonly {
-    fill: var(--color-background-control-disabled-1f3718, #dedee3);
-    stroke: var(--color-border-control-disabled-uj7t08, #dedee3);
-  }
-  .checkbox-icon > .styled-line {
-    stroke: var(--color-foreground-control-default-eto4wy, #ffffff);
-    stroke-width: 2;
-    fill: none;
-  }
-  .checkbox-icon > .styled-line-disabled {
-    stroke: var(--color-foreground-control-disabled-txi6cf, #ffffff);
-  }
-  .checkbox-icon > .styled-line-readonly {
-    stroke: var(--color-foreground-control-read-only-7ydvuj, #656871);
+// src/internal/styles/checkbox-icon.ts
+import { css as css4 } from "lit";
+var checkboxIconStyles = css4`
+.checkbox-icon--root {
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+.checkbox-icon--root > .checkbox-icon--styled-box {
+  fill: var(--color-background-control-default-4jb21l, #ffffff);
+  stroke: var(--color-border-control-default-sh3548, #8c8c94);
+  stroke-width: var(--border-width-field-2xc78x, 1px);
+  transition: fill var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear), stroke var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear);
+}
+@media (prefers-reduced-motion: reduce) {
+  .checkbox-icon--root > .checkbox-icon--styled-box {
+    animation: none;
+    transition: none;
   }
+}
+.awsui-motion-disabled .checkbox-icon--root > .checkbox-icon--styled-box, .awsui-mode-entering .checkbox-icon--root > .checkbox-icon--styled-box {
+  animation: none;
+  transition: none;
+}
+.checkbox-icon--root > .checkbox-icon--styled-box-checked, .checkbox-icon--root > .checkbox-icon--styled-box-indeterminate {
+  fill: var(--color-background-control-checked-ka7kc2, #006ce0);
+  stroke: var(--color-border-control-checked-bdv28l, #006ce0);
+}
+.checkbox-icon--root > .checkbox-icon--styled-box-disabled, .checkbox-icon--root > .checkbox-icon--styled-box-readonly {
+  fill: var(--color-background-control-disabled-1f3718, #dedee3);
+  stroke: var(--color-border-control-disabled-uj7t08, #dedee3);
+}
+.checkbox-icon--root > .checkbox-icon--styled-line {
+  stroke: var(--color-foreground-control-default-eto4wy, #ffffff);
+  stroke-width: 2;
+  fill: none;
+}
+.checkbox-icon--root > .checkbox-icon--styled-line-disabled {
+  stroke: var(--color-foreground-control-disabled-txi6cf, #ffffff);
+}
+.checkbox-icon--root > .checkbox-icon--styled-line-readonly {
+  stroke: var(--color-foreground-control-read-only-7ydvuj, #656871);
+}
 `;
+
+// src/checkbox/internal.ts
+var Base = FormAssociatedMixin(CsBaseElement);
+var hostStyles = css5`:host { display: block; }`;
 var CsCheckboxInternal = class extends Base {
   constructor() {
     super(...arguments);
@@ -332,8 +344,9 @@ var CsCheckboxInternal = class extends Base {
     this.indeterminate = false;
     this.readOnly = false;
     this.description = "";
-    this.ariaLabel = "";
+    this.ariaLabel = null;
     this.ariaRequired = null;
+    this.ariaControls = null;
     this._labelId = generateUniqueId("checkbox-label");
     this._descriptionId = generateUniqueId("checkbox-desc");
     this._onHostClick = () => {
@@ -341,7 +354,7 @@ var CsCheckboxInternal = class extends Base {
     };
   }
   static {
-    this.styles = [sharedStyles, componentStyles, abstractSwitchStyles, hostStyles];
+    this.styles = [sharedStyles, componentStyles, abstractSwitchStyles, checkboxIconStyles, hostStyles];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -375,63 +388,60 @@ var CsCheckboxInternal = class extends Base {
   }
   render() {
     const styledBoxClasses = {
-      "styled-box": true,
-      "styled-box-checked": this.checked && !this.indeterminate,
-      "styled-box-indeterminate": this.indeterminate,
-      "styled-box-disabled": this.disabled,
-      "styled-box-readonly": this.readOnly
+      "checkbox-icon--styled-box": true,
+      "checkbox-icon--styled-box-checked": this.checked && !this.indeterminate,
+      "checkbox-icon--styled-box-indeterminate": this.indeterminate,
+      "checkbox-icon--styled-box-disabled": this.disabled,
+      "checkbox-icon--styled-box-readonly": this.readOnly
     };
     const styledLineClasses = {
-      "styled-line": true,
-      "styled-line-disabled": this.disabled,
-      "styled-line-readonly": this.readOnly
+      "checkbox-icon--styled-line": true,
+      "checkbox-icon--styled-line-disabled": this.disabled,
+      "checkbox-icon--styled-line-readonly": this.readOnly
     };
     const hasDescription = this.description.length > 0;
     const ariaDescribedBy = hasDescription ? this._descriptionId : void 0;
     return html`
-      <label class="root wrapper" @click=${this._preventNativeToggle}>
-        <span class="label-wrapper">
-          <span class=${classMap({
-      "control": true,
-      "checkbox-control": true,
-      "checkbox-control--checked": this.checked && !this.indeterminate,
-      "checkbox-control--indeterminate": this.indeterminate
-    })}>
-            <svg class="checkbox-icon" viewBox="0 0 16 16" aria-hidden="true"><rect class=${classMap(styledBoxClasses)} x="0.5" y="0.5" width="15" height="15" rx="3" ry="3" />${this.checked && !this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 7,11 12,4" />` : this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 12.5,8" />` : ""}</svg>
+      <span class="root abstract-switch--wrapper" @click=${this._preventNativeToggle}>
+        <span class="abstract-switch--label-wrapper">
+          <span class="abstract-switch--control checkbox-control">
+            <svg class="checkbox-icon--root" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><rect class=${classMap(styledBoxClasses)} x="0.5" y="0.5" width="15" height="15" rx="3" ry="3" />${this.checked && !this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 7,11 12,4" />` : this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 12.5,8" />` : ""}</svg>
             <input
               type="checkbox"
-              class="native-input"
+              class="abstract-switch--native-input"
               .checked=${this.checked}
               .indeterminate=${this.indeterminate}
               ?disabled=${this.disabled}
               ?readonly=${this.readOnly}
               aria-label=${ifDefined(this.ariaLabel || void 0)}
+              aria-labelledby=${ifDefined(!this.ariaLabel ? this._labelId : void 0)}
               aria-required=${ifDefined(this.ariaRequired || void 0)}
+              aria-controls=${ifDefined(this.ariaControls || void 0)}
               aria-describedby=${ifDefined(ariaDescribedBy)}
               aria-checked=${this.indeterminate ? "mixed" : this.checked}
               @click=${this._preventNativeToggle}
             />
-            <span class="outline"></span>
+            <span class="abstract-switch--outline outline"></span>
           </span>
-          <span class="content">
+          <span class="abstract-switch--content">
             <span id=${this._labelId} class=${classMap({
-      "label": true,
-      "label-disabled": this.disabled
+      "abstract-switch--label": true,
+      "abstract-switch--label-disabled": this.disabled
     })}>
               <slot></slot>
             </span>
             ${hasDescription ? html`
               <span id=${this._descriptionId} class=${classMap({
-      "description": true,
-      "description-bottom-padding": true,
-      "description-disabled": this.disabled
+      "abstract-switch--description": true,
+      "abstract-switch--description-bottom-padding": true,
+      "abstract-switch--description-disabled": this.disabled
     })}>
                 ${this.description}
               </span>
             ` : ""}
           </span>
         </span>
-      </label>
+      </span>
     `;
   }
 };
@@ -453,6 +463,9 @@ __decorateClass([
 __decorateClass([
   property2({ type: String })
 ], CsCheckboxInternal.prototype, "ariaRequired", 2);
+__decorateClass([
+  property2({ type: String })
+], CsCheckboxInternal.prototype, "ariaControls", 2);
 
 // src/checkbox/index.ts
 var CsCheckbox = class extends CsCheckboxInternal {
@@ -460,13 +473,13 @@ var CsCheckbox = class extends CsCheckboxInternal {
 customElements.define("cs-checkbox", CsCheckbox);
 
 // src/spinner/internal.ts
-import { css as css6, html as html2 } from "lit";
+import { css as css7, html as html2 } from "lit";
 import { property as property3 } from "lit/decorators.js";
 import { classMap as classMap2 } from "lit/directives/class-map.js";
 
 // src/spinner/styles.ts
-import { css as css5 } from "lit";
-var componentStyles2 = css5`
+import { css as css6 } from "lit";
+var componentStyles2 = css6`
 @keyframes awsui_spinner-rotator_1612d_1krck_1 {
   0% {
     transform: rotate(var(--awsui-spinner-rotator-from-6b9ypa));
@@ -595,7 +608,7 @@ var componentStyles2 = css5`
 `;
 
 // src/spinner/internal.ts
-var hostStyles2 = css6`
+var hostStyles2 = css7`
   :host {
     display: inline-block;
     vertical-align: top;
@@ -635,13 +648,13 @@ var CsSpinner = class extends CsSpinnerInternal {
 customElements.define("cs-spinner", CsSpinner);
 
 // src/badge/internal.ts
-import { css as css8, html as html3 } from "lit";
+import { css as css9, html as html3 } from "lit";
 import { property as property4 } from "lit/decorators.js";
 import { classMap as classMap3 } from "lit/directives/class-map.js";
 
 // src/badge/styles.ts
-import { css as css7 } from "lit";
-var componentStyles3 = css7`
+import { css as css8 } from "lit";
+var componentStyles3 = css8`
 .badge {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -701,7 +714,7 @@ var componentStyles3 = css7`
 `;
 
 // src/badge/internal.ts
-var hostStyles3 = css8`
+var hostStyles3 = css9`
   :host {
     display: inline-block;
     line-height: 0;
@@ -737,13 +750,13 @@ var CsBadge = class extends CsBadgeInternal {
 customElements.define("cs-badge", CsBadge);
 
 // src/live-region/internal.ts
-import { css as css10, html as html4 } from "lit";
+import { css as css11, html as html4 } from "lit";
 import { property as property5 } from "lit/decorators.js";
 import { classMap as classMap4 } from "lit/directives/class-map.js";
 
 // src/live-region/styles.ts
-import { css as css9 } from "lit";
-var componentStyles4 = css9`
+import { css as css10 } from "lit";
+var componentStyles4 = css10`
 .root {
   display: contents;
 }
@@ -760,7 +773,7 @@ var componentStyles4 = css9`
 `;
 
 // src/live-region/internal.ts
-var hostStyles4 = css10`:host { display: contents; }`;
+var hostStyles4 = css11`:host { display: contents; }`;
 var CsLiveRegionInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -807,15 +820,15 @@ var CsLiveRegion = class extends CsLiveRegionInternal {
 customElements.define("cs-live-region", CsLiveRegion);
 
 // src/icon/internal.ts
-import { css as css12, html as html6, svg as svgTag } from "lit";
+import { css as css13, html as html6, svg as svgTag } from "lit";
 import { property as property7 } from "lit/decorators.js";
 import { classMap as classMap5 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
 import { consume } from "@lit/context";
 
 // src/icon/styles.ts
-import { css as css11 } from "lit";
-var componentStyles5 = css11`
+import { css as css12 } from "lit";
+var componentStyles5 = css12`
 .icon {
   position: relative;
   display: inline-block;
@@ -1188,7 +1201,7 @@ __decorateClass([
 ], CsIconProviderInternal.prototype, "_resolver", 2);
 
 // src/icon/internal.ts
-var hostStyles5 = css12`:host { display: inline-block; vertical-align: top; line-height: 0; }`;
+var hostStyles5 = css13`:host { display: inline-block; vertical-align: top; line-height: 0; }`;
 var CsIconInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -1279,14 +1292,14 @@ var CsIconProvider = class extends CsIconProviderInternal {
 customElements.define("cs-icon-provider", CsIconProvider);
 
 // src/radio-group/internal.ts
-import { css as css15, html as html7 } from "lit";
+import { css as css16, html as html7 } from "lit";
 import { property as property8 } from "lit/decorators.js";
 import { classMap as classMap6 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
 
 // src/radio-group/styles.ts
-import { css as css13 } from "lit";
-var componentStyles6 = css13`
+import { css as css14 } from "lit";
+var componentStyles6 = css14`
 .radio-group {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -1320,9 +1333,9 @@ var componentStyles6 = css13`
 `;
 
 // src/internal/styles/radio-button.ts
-import { css as css14 } from "lit";
-var radioButtonStyles = css14`
-.radio-control {
+import { css as css15 } from "lit";
+var radioButtonStyles = css15`
+.radio-button--radio-control {
   margin-block-start: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-control-adm93y, 16px)) / 2);
   min-block-size: var(--size-control-adm93y, 16px);
   min-inline-size: var(--size-control-adm93y, 16px);
@@ -1330,15 +1343,15 @@ var radioButtonStyles = css14`
   inline-size: var(--size-control-adm93y, 16px);
 }
 
-.outline {
+.radio-button--outline {
   --awsui-style-focus-ring-box-shadow-6b9ypa: 0 0 0 var(--awsui-style-focus-ring-border-width-6b9ypa, 2px) var(--awsui-style-focus-ring-border-color-6b9ypa, var(--color-border-item-focused-uk47pl, #006ce0));
   position: relative;
 }
-.outline {
+.radio-button--outline {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.outline::before {
+.radio-button--outline::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1353,39 +1366,39 @@ var radioButtonStyles = css14`
   box-shadow: var(--awsui-style-focus-ring-box-shadow-6b9ypa);
 }
 
-.styled-circle-border {
+.radio-button--styled-circle-border {
   stroke: var(--color-border-control-default-sh3548, #8c8c94);
   fill: var(--color-background-control-default-4jb21l, #ffffff);
 }
-.styled-circle-border.styled-circle-disabled, .styled-circle-border.styled-circle-readonly {
+.radio-button--styled-circle-border.radio-button--styled-circle-disabled, .radio-button--styled-circle-border.radio-button--styled-circle-readonly {
   fill: var(--color-background-control-disabled-1f3718, #dedee3);
   stroke: var(--color-background-control-disabled-1f3718, #dedee3);
 }
 
-.styled-circle-fill {
+.radio-button--styled-circle-fill {
   stroke: var(--color-background-control-checked-ka7kc2, #006ce0);
   fill: var(--color-foreground-control-default-eto4wy, #ffffff);
   opacity: 0;
   transition: opacity var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .styled-circle-fill {
+  .radio-button--styled-circle-fill {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .styled-circle-fill, .awsui-mode-entering .styled-circle-fill {
+.awsui-motion-disabled .radio-button--styled-circle-fill, .awsui-mode-entering .radio-button--styled-circle-fill {
   animation: none;
   transition: none;
 }
-.styled-circle-fill.styled-circle-checked {
+.radio-button--styled-circle-fill.radio-button--styled-circle-checked {
   opacity: 1;
 }
-.styled-circle-fill.styled-circle-disabled {
+.radio-button--styled-circle-fill.radio-button--styled-circle-disabled {
   fill: var(--color-foreground-control-disabled-txi6cf, #ffffff);
   stroke: var(--color-background-control-disabled-1f3718, #dedee3);
 }
-.styled-circle-fill.styled-circle-readonly {
+.radio-button--styled-circle-fill.radio-button--styled-circle-readonly {
   fill: var(--color-foreground-control-read-only-7ydvuj, #656871);
   stroke: var(--color-background-control-disabled-1f3718, #dedee3);
 }
@@ -1393,7 +1406,7 @@ var radioButtonStyles = css14`
 
 // src/radio-group/internal.ts
 var Base2 = FormAssociatedMixin(CsBaseElement);
-var hostStyles6 = css15`:host { display: block; }`;
+var hostStyles6 = css16`:host { display: block; }`;
 var CsRadioGroupInternal = class extends Base2 {
   constructor() {
     super(...arguments);
@@ -1468,7 +1481,7 @@ var CsRadioGroupInternal = class extends Base2 {
   _getRadioInputs() {
     const root = this.shadowRoot;
     if (!root) return [];
-    return Array.from(root.querySelectorAll(".native-input"));
+    return Array.from(root.querySelectorAll(".abstract-switch--native-input"));
   }
   _getSelectedIndex() {
     return this.items.findIndex((item) => item.value === this.value);
@@ -1506,6 +1519,7 @@ var CsRadioGroupInternal = class extends Base2 {
   render() {
     const groupName = this.name || this._groupName;
     const groupClasses = {
+      "root": true,
       "radio-group": true,
       "horizontal-group": this.direction === "horizontal"
     };
@@ -1527,59 +1541,63 @@ var CsRadioGroupInternal = class extends Base2 {
     const isChecked = item.value === this.value;
     const isDisabled = this.disabled || !!item.disabled;
     const itemId = item.controlId || generateUniqueId("radio-item");
+    const labelId = `${itemId}-label`;
     const descId = item.description ? `${itemId}-desc` : void 0;
     const itemClasses = {
+      "root": true,
       "radio": true,
-      "wrapper": true,
+      "abstract-switch--wrapper": true,
+      "selected": isChecked,
       "radio--has-description": !!item.description,
       "horizontal": this.direction === "horizontal"
     };
     const controlClasses = {
-      "control": true,
-      "radio-control": true
+      "abstract-switch--control": true,
+      "radio-button--radio-control": true
     };
     return html7`
-      <label
+      <span
         class=${classMap6(itemClasses)}
         @click=${(e) => {
       e.preventDefault();
       this._onItemClick(item);
     }}
       >
-        <span class="label-wrapper">
+        <span class="abstract-switch--label-wrapper">
           <span class=${classMap6(controlClasses)}>
             <svg viewBox="0 0 100 100" aria-hidden="true">
               <circle class=${classMap6({
-      "styled-circle-border": true,
-      "styled-circle-disabled": isDisabled,
-      "styled-circle-readonly": this.readOnly
+      "radio-button--styled-circle-border": true,
+      "radio-button--styled-circle-disabled": isDisabled,
+      "radio-button--styled-circle-readonly": this.readOnly
     })} stroke-width="6.25" cx="50" cy="50" r="46" />
               <circle class=${classMap6({
-      "styled-circle-fill": true,
-      "styled-circle-checked": isChecked,
-      "styled-circle-disabled": isDisabled,
-      "styled-circle-readonly": this.readOnly
+      "radio-button--styled-circle-fill": true,
+      "radio-button--styled-circle-checked": isChecked,
+      "radio-button--styled-circle-disabled": isDisabled,
+      "radio-button--styled-circle-readonly": this.readOnly
     })} stroke-width="30" cx="50" cy="50" r="35" />
             </svg>
             <input
               type="radio"
-              class="native-input"
+              class="abstract-switch--native-input"
               name=${groupName}
               .value=${item.value}
               .checked=${isChecked}
               ?disabled=${isDisabled}
               ?readonly=${this.readOnly}
               tabindex=${this._getTabIndex(index)}
+              aria-labelledby=${labelId}
               aria-describedby=${ifDefined3(descId)}
               @click=${(e) => e.preventDefault()}
               @focus=${() => this._onFocus(index)}
             />
-            <span class="outline"></span>
+            <span class="abstract-switch--outline radio-button--outline"></span>
           </span>
-          <span class="content">
-            <span class=${classMap6({
-      "label": true,
-      "label-disabled": isDisabled
+          <span class="abstract-switch--content">
+            <span id=${labelId} class=${classMap6({
+      "abstract-switch--label": true,
+      "abstract-switch--label-disabled": isDisabled
     })}>
               ${item.label}
             </span>
@@ -1587,8 +1605,8 @@ var CsRadioGroupInternal = class extends Base2 {
               <span
                 id=${descId}
                 class=${classMap6({
-      "description": true,
-      "description-disabled": isDisabled
+      "abstract-switch--description": true,
+      "abstract-switch--description-disabled": isDisabled
     })}
               >
                 ${item.description}
@@ -1596,7 +1614,7 @@ var CsRadioGroupInternal = class extends Base2 {
             ` : ""}
           </span>
         </span>
-      </label>
+      </span>
     `;
   }
 };
@@ -1628,14 +1646,14 @@ var CsRadioGroup = class extends CsRadioGroupInternal {
 customElements.define("cs-radio-group", CsRadioGroup);
 
 // src/tiles/internal.ts
-import { css as css17, html as html8 } from "lit";
+import { css as css18, html as html8 } from "lit";
 import { property as property9 } from "lit/decorators.js";
 import { classMap as classMap7 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 
 // src/tiles/styles.ts
-import { css as css16 } from "lit";
-var componentStyles7 = css16`
+import { css as css17 } from "lit";
+var componentStyles7 = css17`
 div.column-layout {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -1933,7 +1951,7 @@ div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint
 
 // src/tiles/internal.ts
 var Base3 = FormAssociatedMixin(CsBaseElement);
-var hostStyles7 = css17`:host { display: block; }`;
+var hostStyles7 = css18`:host { display: block; }`;
 var CsTilesInternal = class extends Base3 {
   constructor() {
     super(...arguments);
@@ -2008,7 +2026,7 @@ var CsTilesInternal = class extends Base3 {
   _getRadioInputs() {
     const root = this.shadowRoot;
     if (!root) return [];
-    return Array.from(root.querySelectorAll(".native-input"));
+    return Array.from(root.querySelectorAll(".abstract-switch--native-input"));
   }
   _getSelectedIndex() {
     return this.items.findIndex((item) => item.value === this.value);
@@ -2074,7 +2092,7 @@ var CsTilesInternal = class extends Base3 {
     const tileClasses = {
       "tile-container": true,
       "refresh": true,
-      "breakpoint-xxs": true,
+      "breakpoint-xs": true,
       "selected": isSelected,
       "disabled": isDisabled,
       "readonly": this.readOnly,
@@ -2093,25 +2111,30 @@ var CsTilesInternal = class extends Base3 {
     }}
       >
         <div class=${classMap7(controlClasses)}>
-          <span class="wrapper">
-            <span class="label-wrapper">
-              <span class="control radio-control">
+          <span class=${classMap7({
+      "root": true,
+      "radio-button": true,
+      "abstract-switch--wrapper": true,
+      "selected": isSelected
+    })}>
+            <span class="abstract-switch--label-wrapper">
+              <span class="abstract-switch--control radio-button--radio-control">
                 <svg viewBox="0 0 100 100" aria-hidden="true">
                   <circle class=${classMap7({
-      "styled-circle-border": true,
-      "styled-circle-disabled": isDisabled,
-      "styled-circle-readonly": this.readOnly
+      "radio-button--styled-circle-border": true,
+      "radio-button--styled-circle-disabled": isDisabled,
+      "radio-button--styled-circle-readonly": this.readOnly
     })} stroke-width="6.25" cx="50" cy="50" r="46" />
                   <circle class=${classMap7({
-      "styled-circle-fill": true,
-      "styled-circle-checked": isSelected,
-      "styled-circle-disabled": isDisabled,
-      "styled-circle-readonly": this.readOnly
+      "radio-button--styled-circle-fill": true,
+      "radio-button--styled-circle-checked": isSelected,
+      "radio-button--styled-circle-disabled": isDisabled,
+      "radio-button--styled-circle-readonly": this.readOnly
     })} stroke-width="30" cx="50" cy="50" r="35" />
                 </svg>
                 <input
                   type="radio"
-                  class="native-input"
+                  class="abstract-switch--native-input"
                   name=${groupName}
                   .value=${item.value}
                   .checked=${isSelected}
@@ -2123,14 +2146,14 @@ var CsTilesInternal = class extends Base3 {
                   @click=${(e) => e.preventDefault()}
                   @focus=${() => this._onFocus(index)}
                 />
-                <span class="outline"></span>
+                <span class="abstract-switch--outline radio-button--outline"></span>
               </span>
-              <span class="content">
+              <span class="abstract-switch--content">
                 <span
                   id=${labelId}
                   class=${classMap7({
-      "label": true,
-      "label-disabled": isDisabled
+      "abstract-switch--label": true,
+      "abstract-switch--label-disabled": isDisabled
     })}
                 >
                   ${item.label}
@@ -2139,8 +2162,8 @@ var CsTilesInternal = class extends Base3 {
                   <span
                     id=${descId}
                     class=${classMap7({
-      "description": true,
-      "description-disabled": isDisabled
+      "abstract-switch--description": true,
+      "abstract-switch--description-disabled": isDisabled
     })}
                   >
                     ${item.description}
@@ -2190,15 +2213,15 @@ var CsTiles = class extends CsTilesInternal {
 customElements.define("cs-tiles", CsTiles);
 
 // src/list/internal.ts
-import { css as css20, html as html9, nothing } from "lit";
+import { css as css21, html as html9, nothing } from "lit";
 import { property as property10 } from "lit/decorators.js";
 import { classMap as classMap8 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 
 // src/list/styles.ts
-import { css as css18 } from "lit";
-var componentStyles8 = css18`
+import { css as css19 } from "lit";
+var componentStyles8 = css19`
 .root {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -2238,9 +2261,9 @@ var componentStyles8 = css18`
 `;
 
 // src/internal/styles/structured-item.ts
-import { css as css19 } from "lit";
-var structuredItemStyles = css19`
-.root {
+import { css as css20 } from "lit";
+var structuredItemStyles = css20`
+.structured-item--root {
   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);
@@ -2256,44 +2279,44 @@ var structuredItemStyles = css19`
   align-items: baseline;
   column-gap: var(--space-xs-ymlm0b, 8px);
 }
-.root.disable-paddings {
+.structured-item--root.structured-item--disable-paddings {
   column-gap: 0;
 }
 
-.main {
+.structured-item--main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
 }
 
-.content-wrap {
+.structured-item--content-wrap {
   flex-grow: 1;
   display: flex;
   align-items: baseline;
   flex-direction: row;
   column-gap: var(--space-xs-ymlm0b, 8px);
 }
-.disable-paddings > .main > .content-wrap {
+.structured-item--disable-paddings > .structured-item--main > .structured-item--content-wrap {
   column-gap: 0;
 }
-.content-wrap.wrap-actions {
+.structured-item--content-wrap.structured-item--wrap-actions {
   flex-wrap: wrap;
 }
 
-.content {
+.structured-item--content {
   flex-grow: 1;
   min-inline-size: 0;
 }
 
-.actions {
+.structured-item--actions {
   flex-shrink: 0;
   margin-inline-start: auto;
 }
 `;
 
 // src/list/internal.ts
-var hostStyles8 = css20`:host { display: block; }`;
+var hostStyles8 = css21`:host { display: block; }`;
 var CsListInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -2315,14 +2338,25 @@ var CsListInternal = class extends CsBaseElement {
       "disable-item-paddings": this.disableItemPaddings,
       "disable-paddings": this.disablePaddings
     };
+    const structuredRootClasses = {
+      "structured-item--root": true,
+      "structured-item--disable-paddings": this.disableItemPaddings
+    };
+    const hasActions = !!rendered.actions;
     return html9`
       <li class=${classMap8(itemClasses)} data-item-id=${rendered.id}>
-        ${rendered.icon ? html9`<span class="item-icon">${rendered.icon}</span>` : nothing}
-        <span class="item-content">
-          <span class="item-primary">${rendered.content}</span>
-          ${rendered.secondaryContent ? html9`<span class="item-secondary">${rendered.secondaryContent}</span>` : nothing}
-        </span>
-        ${rendered.actions ? html9`<span class="item-actions">${rendered.actions}</span>` : nothing}
+        <div class=${classMap8(structuredRootClasses)}>
+          ${rendered.icon ? html9`<div class="structured-item--icon">${rendered.icon}</div>` : nothing}
+          <div class="structured-item--main">
+            <div class="structured-item--content-wrap structured-item--wrap-actions">
+              <div class="structured-item--content">
+                ${rendered.content}
+              </div>
+              ${hasActions ? html9`<div class="structured-item--actions">${rendered.actions}</div>` : nothing}
+            </div>
+            ${rendered.secondaryContent ? html9`<div class="structured-item--secondary">${rendered.secondaryContent}</div>` : nothing}
+          </div>
+        </div>
       </li>
     `;
   }
@@ -2401,14 +2435,14 @@ var CsList = class extends CsListInternal {
 customElements.define("cs-list", CsList);
 
 // src/tree-view/internal.ts
-import { css as css22, html as html10, nothing as nothing2 } from "lit";
+import { css as css26, html as html10, nothing as nothing2 } from "lit";
 import { property as property11 } from "lit/decorators.js";
 import { classMap as classMap9 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
 
 // src/tree-view/styles.ts
-import { css as css21 } from "lit";
-var componentStyles9 = css21`
+import { css as css22 } from "lit";
+var componentStyles9 = css22`
 .root {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -2433,8 +2467,188 @@ var componentStyles9 = css21`
 }
 `;
 
+// src/internal/styles/tree-view-tree-item.ts
+import { css as css23 } from "lit";
+var treeViewTreeItemStyles = css23`
+.tree-view-tree-item--treeitem-group {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  position: relative;
+}
+
+.tree-view-tree-item--treeitem {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  position: relative;
+}
+.tree-view-tree-item--treeitem.tree-view-tree-item--offset {
+  margin-inline-start: var(--space-tree-view-indentation-xh9kis, 24px);
+}
+.tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  align-items: baseline;
+}
+:host-context([data-awsui-focus-visible=true]) .tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper:has(.tree-view-tree-item--tree-item-focus-target:focus) {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper:has(.tree-view-tree-item--tree-item-focus-target:focus) {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper:has(.tree-view-tree-item--tree-item-focus-target:focus)::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 0px);
+  inset-block-start: calc(-1 * 0px);
+  inline-size: calc(100% + 0px + 0px);
+  block-size: calc(100% + 0px + 0px);
+  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);
+}
+.tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper > .tree-view-tree-item--expand-toggle-wrapper {
+  display: grid;
+  grid-column: 1;
+  grid-row: 1;
+}
+.tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper > .tree-view-tree-item--expand-toggle-wrapper > .tree-view-tree-item--toggle {
+  justify-self: center;
+  position: relative;
+  inset-block-start: 2px;
+  inset-inline-start: -2px;
+}
+.tree-view-tree-item--treeitem > .tree-view-tree-item--treeitem-content-wrapper > .tree-view-tree-item--structured-item-wrapper {
+  grid-column: 2;
+  grid-row: 1/span 2;
+  padding-block: var(--space-scaled-xxxs-oo06c7, 2px);
+  position: relative;
+}
+
+.tree-view-tree-item--tree-item-structured-item {
+  /* used in keyboard navigation */
+}
+
+.tree-view-tree-item--tree-item-focus-target {
+  outline: none;
+}
+`;
+
+// src/internal/styles/expand-toggle-button.ts
+import { css as css24 } from "lit";
+var expandToggleButtonStyles = css24`
+.expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+  transition: transform var(--motion-duration-rotate-90-lyzb0k, 135ms) var(--motion-easing-rotate-90-jhbqg9, cubic-bezier(0.165, 0.84, 0.44, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .expand-toggle-button--expand-toggle-button--expand-toggle-icon, .awsui-mode-entering .expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+  animation: none;
+  transition: none;
+}
+
+.expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+  transform: rotate(-90deg);
+
+}
+.expand-toggle-button--expand-toggle-button--expand-toggle-icon:dir(rtl) {
+  transform: rotate(90deg);
+}
+.expand-toggle-button--expand-toggle-button--expand-toggle-icon-expanded {
+  transform: rotate(0deg);
+
+}
+.expand-toggle-button--expand-toggle-button--expand-toggle-icon-expanded:dir(rtl) {
+  transform: rotate(0deg);
+}
+
+.expand-toggle-button--expand-toggle {
+  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;
+  cursor: pointer;
+  inline-size: var(--space-m-dsumyt, 16px);
+  block-size: var(--space-m-dsumyt, 16px);
+  border-block: 0;
+  border-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  background: none;
+  outline: 0;
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--expand-toggle-button--disable-focus-highlight):focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--expand-toggle-button--disable-focus-highlight):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-focus-outline-gutter-jj138g, 4px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--expand-toggle-button--disable-focus-highlight):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-button-focus-outline-gutter-jj138g, 4px));
+  inset-block-start: calc(-1 * var(--space-button-focus-outline-gutter-jj138g, 4px));
+  inline-size: calc(100% + var(--space-button-focus-outline-gutter-jj138g, 4px) + var(--space-button-focus-outline-gutter-jj138g, 4px));
+  block-size: calc(100% + var(--space-button-focus-outline-gutter-jj138g, 4px) + var(--space-button-focus-outline-gutter-jj138g, 4px));
+  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);
+}
+.expand-toggle-button--expand-toggle:hover {
+  color: var(--color-text-interactive-hover-6naf7i, #0f141a);
+}
+.expand-toggle-button--expand-toggle:active {
+  color: var(--color-text-interactive-active-uoe6zi, #0f141a);
+}
+`;
+
+// src/internal/styles/tree-view-vertical-connector.ts
+import { css as css25 } from "lit";
+var treeViewVerticalConnectorStyles = css25`
+.tree-view-vertical-connector--vertical-connector {
+  background-color: var(--color-tree-view-connector-line-1usxvn, #8c8c94);
+  inline-size: var(--border-divider-list-width-tdfx1x, 1px);
+}
+.tree-view-vertical-connector--vertical-connector.tree-view-vertical-connector--grid {
+  grid-row: 2/span 3;
+  grid-column: 1;
+  block-size: 100%;
+  position: relative;
+  inset-inline-start: calc((28px - var(--border-divider-list-width-tdfx1x, 1px)) / 2 - 2px);
+}
+.tree-view-vertical-connector--vertical-connector.tree-view-vertical-connector--absolute {
+  position: absolute;
+  inset: 0;
+  inset-block-end: var(--space-scaled-xs-xwoogq, 8px);
+  inset-inline-start: calc((28px - var(--border-divider-list-width-tdfx1x, 1px)) / 2 - 2px);
+}
+`;
+
 // src/tree-view/internal.ts
-var hostStyles9 = css22`:host { display: block; }`;
+var hostStyles9 = css26`:host { display: block; }`;
 var CsTreeViewInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -2445,7 +2659,7 @@ var CsTreeViewInternal = class extends CsBaseElement {
     this._expandedSet = /* @__PURE__ */ new Set();
   }
   static {
-    this.styles = [sharedStyles, componentStyles9, hostStyles9];
+    this.styles = [sharedStyles, componentStyles9, treeViewTreeItemStyles, expandToggleButtonStyles, treeViewVerticalConnectorStyles, structuredItemStyles, hostStyles9];
   }
   willUpdate(changed) {
     if (changed.has("expandedItems")) {
@@ -2463,55 +2677,77 @@ var CsTreeViewInternal = class extends CsBaseElement {
     if (this.renderItemToggleIcon) {
       return html10`${this.renderItemToggleIcon({ expanded })}`;
     }
-    const iconClasses = {
-      "toggle-icon": true,
-      "toggle-icon--expanded": expanded
-    };
     return html10`
-      <svg class=${classMap9(iconClasses)} width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
-        <path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
+      <span class=${classMap9({
+      "expand-toggle-icon": true,
+      "expand-toggle-icon-expanded": expanded,
+      "icon": true,
+      "size-small": true,
+      "size-small-mapped-height": true,
+      "variant-normal": true
+    })}>
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+          <path class="filled stroke-linejoin-round" d="m8 11 4-6H4l4 6Z"></path>
+        </svg>
+      </span>
     `;
   }
-  _renderNode(item, index, level) {
+  _renderNode(item, index, level, globalIndex) {
     if (!this.renderItem || !this.getItemId || !this.getItemChildren) return html10``;
     const id = this.getItemId(item, index);
     const rendered = this.renderItem(item, index);
     const children = this.getItemChildren(item, index);
     const hasChildren = children !== void 0 && children.length > 0;
     const expanded = this._isExpanded(id);
-    const expandLabel = this.i18nStrings?.expandButtonLabel?.(item) ?? "Expand";
-    const collapseLabel = this.i18nStrings?.collapseButtonLabel?.(item) ?? "Collapse";
-    const childrenClasses = {
-      "tree": true,
-      "tree--hidden": !expanded
-    };
+    globalIndex.value++;
+    const contentLabel = typeof rendered.content === "string" ? rendered.content : id;
     return html10`
       <li
-        class="node"
+        class=${classMap9({ "treeitem": true, "offset": level > 0, "expandable": hasChildren, "expanded": hasChildren && expanded })}
         role="treeitem"
         aria-expanded=${hasChildren ? String(expanded) : nothing2}
+        aria-level=${level + 1}
         data-node-id=${id}
       >
-        <div class="node-row" tabindex=${level === 0 ? "0" : "-1"}>
-          ${hasChildren ? html10`
-              <button
-                class="toggle"
-                aria-label=${expanded ? collapseLabel : expandLabel}
-                @click=${() => this._handleToggle(item, id, expanded)}
-              >
-                ${this._renderToggleIcon(expanded)}
-              </button>` : html10`<span class="toggle-placeholder"></span>`}
-          ${rendered.icon ? html10`<span class="node-icon">${rendered.icon}</span>` : nothing2}
-          <span class="node-content">
-            <span class="node-primary">${rendered.content}</span>
-            ${rendered.secondaryContent ? html10`<span class="node-secondary">${rendered.secondaryContent}</span>` : nothing2}
-          </span>
-          ${rendered.actions ? html10`<span class="node-actions">${rendered.actions}</span>` : nothing2}
+        <div class="treeitem-content-wrapper">
+          <div class="expand-toggle-wrapper">
+            <div class="toggle">
+              ${hasChildren ? html10`
+                  <button
+                    class="expand-toggle disable-focus-highlight tree-item-focus-target"
+                    type="button"
+                    tabindex="-1"
+                    aria-label=${contentLabel}
+                    aria-expanded=${String(expanded)}
+                    @click=${() => this._handleToggle(item, id, expanded)}
+                  >
+                    ${this._renderToggleIcon(expanded)}
+                  </button>` : html10`
+                  <div class="tree-item-focus-target"
+                    role="group"
+                    tabindex="-1"
+                    aria-label=${contentLabel}
+                  ></div>`}
+            </div>
+          </div>
+          <div class="structured-item-wrapper">
+            <div class="structured-item--root tree-item-structured-item">
+              ${rendered.icon ? html10`<div class="structured-item--icon">${rendered.icon}</div>` : nothing2}
+              <div class="structured-item--main">
+                <div class="structured-item--content-wrap">
+                  <div class="structured-item--content">
+                    ${rendered.content}
+                  </div>
+                </div>
+                ${rendered.secondaryContent ? html10`<div>${rendered.secondaryContent}</div>` : nothing2}
+              </div>
+              ${rendered.actions ? html10`<div class="structured-item--actions">${rendered.actions}</div>` : nothing2}
+            </div>
+          </div>
         </div>
-        ${hasChildren ? html10`
-          <ul class=${classMap9(childrenClasses)} role="group">
-            ${children.map((child, i) => this._renderNode(child, i, level + 1))}
+        ${hasChildren && expanded ? html10`
+          <ul class="treeitem-group" role="group">
+            ${children.map((child, i) => this._renderNode(child, i, level + 1, globalIndex))}
           </ul>
         ` : nothing2}
       </li>
@@ -2521,19 +2757,21 @@ var CsTreeViewInternal = class extends CsBaseElement {
     if (!this.renderItem || !this.getItemId || !this.getItemChildren) return nothing2;
     const rootClasses = {
       "root": true,
-      "tree": true,
       "root--connector-lines": this.connectorLines === "vertical"
     };
+    const globalIndex = { value: 0 };
     return html10`
-      <ul
-        class=${classMap9(rootClasses)}
-        role="tree"
-        aria-label=${ifDefined6(this.controlAriaLabel || void 0)}
-        aria-labelledby=${ifDefined6(this.controlAriaLabelledby || void 0)}
-        aria-describedby=${ifDefined6(this.controlAriaDescribedby || void 0)}
-      >
-        ${this.items.map((item, i) => this._renderNode(item, i, 0))}
-      </ul>
+      <div class=${classMap9(rootClasses)}>
+        <ul
+          class="tree"
+          role="tree"
+          aria-label=${ifDefined6(this.controlAriaLabel || void 0)}
+          aria-labelledby=${ifDefined6(this.controlAriaLabelledby || void 0)}
+          aria-describedby=${ifDefined6(this.controlAriaDescribedby || void 0)}
+        >
+          ${this.items.map((item, i) => this._renderNode(item, i, 0, globalIndex))}
+        </ul>
+      </div>
     `;
   }
 };
@@ -2577,13 +2815,13 @@ var CsTreeView = class extends CsTreeViewInternal {
 customElements.define("cs-tree-view", CsTreeView);
 
 // src/box/internal.ts
-import { css as css24, html as html11 } from "lit";
+import { css as css28, html as html11 } from "lit";
 import { property as property12 } from "lit/decorators.js";
 import { classMap as classMap10 } from "lit/directives/class-map.js";
 
 // src/box/styles.ts
-import { css as css23 } from "lit";
-var componentStyles10 = css23`
+import { css as css27 } from "lit";
+var componentStyles10 = css27`
 .box.p-variant.color-default, .box.b-variant.color-default, .box.strong-variant.color-default, .box.code-variant.color-default, .box.pre-variant.color-default, .box.samp-variant.color-default {
   color: var(--color-text-body-default-vvtq8u, #0f141a);
 }
@@ -3391,7 +3629,7 @@ function spacingClasses(prefix, value) {
   }
   return {};
 }
-var hostStyles10 = css24`
+var hostStyles10 = css28`
   :host { display: block; }
   :host([display="inline"]) { display: inline; }
   :host([display="inline-block"]) { display: inline-block; }
@@ -3408,14 +3646,15 @@ var CsBoxInternal = class extends CsBaseElement {
   render() {
     const tag = this.tagOverride || VARIANT_TAG_MAP[this.variant] || "div";
     const classes = {
+      "root": true,
       "box": true,
       [variantCssClass(this.variant)]: true,
       ...this.display ? { [`d-${this.display}`]: true } : {},
       ...this.textAlign ? { [`t-${this.textAlign}`]: true } : {},
       ...this.float ? { [`f-${this.float}`]: true } : {},
-      ...this.fontSize ? { [`font-size-${this.fontSize}`]: true } : {},
-      ...this.fontWeight ? { [`font-weight-${this.fontWeight}`]: true } : {},
-      ...this.color ? { [`color-${this.color}`]: true } : {},
+      [`font-size-${this.fontSize || "default"}`]: true,
+      [`font-weight-${this.fontWeight || "default"}`]: true,
+      [`color-${this.color || "default"}`]: true,
       ...spacingClasses("m", this.margin),
       ...spacingClasses("p", this.padding)
     };
@@ -3491,13 +3730,13 @@ var CsBox = class extends CsBoxInternal {
 customElements.define("cs-box", CsBox);
 
 // src/grid/internal.ts
-import { css as css26, html as html12 } from "lit";
+import { css as css30, html as html12 } from "lit";
 import { property as property13, state } from "lit/decorators.js";
 import { classMap as classMap11 } from "lit/directives/class-map.js";
 
 // src/grid/styles.ts
-import { css as css25 } from "lit";
-var componentStyles11 = css25`
+import { css as css29 } from "lit";
+var componentStyles11 = css29`
 .grid {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -3700,7 +3939,7 @@ function resolveNumericValue(value, defaultValue) {
   if (typeof value === "number") return value;
   return value.default ?? defaultValue;
 }
-var hostStyles11 = css26`:host { display: block; }`;
+var hostStyles11 = css30`:host { display: block; }`;
 var CsGridInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -3783,13 +4022,13 @@ var CsGrid = class extends CsGridInternal {
 customElements.define("cs-grid", CsGrid);
 
 // src/space-between/internal.ts
-import { css as css28, html as html13 } from "lit";
+import { css as css32, html as html13 } from "lit";
 import { property as property14 } from "lit/decorators.js";
 import { classMap as classMap12 } from "lit/directives/class-map.js";
 
 // src/space-between/styles.ts
-import { css as css27 } from "lit";
-var componentStyles12 = css27`
+import { css as css31 } from "lit";
+var componentStyles12 = css31`
 .root {
   display: flex;
 }
@@ -3875,7 +4114,12 @@ var componentStyles12 = css27`
 `;
 
 // src/space-between/internal.ts
-var hostStyles12 = css28`:host { display: block; }`;
+var hostStyles12 = css32`
+  :host { display: block; }
+  ::slotted(*) {
+    /* Mirrors .child styles from Cloudscape's space-between CSS */
+  }
+`;
 var CsSpaceBetweenInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -3917,11 +4161,11 @@ var CsSpaceBetween = class extends CsSpaceBetweenInternal {
 customElements.define("cs-space-between", CsSpaceBetween);
 
 // src/text-content/internal.ts
-import { css as css30, html as html14 } from "lit";
+import { css as css34, html as html14 } from "lit";
 
 // src/text-content/styles.ts
-import { css as css29 } from "lit";
-var componentStyles13 = css29`
+import { css as css33 } from "lit";
+var componentStyles13 = css33`
 .text-content {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -4145,7 +4389,7 @@ var componentStyles13 = css29`
 `;
 
 // src/text-content/internal.ts
-var hostStyles13 = css30`:host { display: block; }`;
+var hostStyles13 = css34`:host { display: block; }`;
 var CsTextContentInternal = class extends CsBaseElement {
   static {
     this.styles = [sharedStyles, componentStyles13, hostStyles13];
@@ -4165,13 +4409,13 @@ var CsTextContent = class extends CsTextContentInternal {
 customElements.define("cs-text-content", CsTextContent);
 
 // src/file-dropzone/internal.ts
-import { css as css32, html as html15 } from "lit";
+import { css as css36, html as html15 } from "lit";
 import { state as state2 } from "lit/decorators.js";
 import { classMap as classMap13 } from "lit/directives/class-map.js";
 
 // src/file-dropzone/styles.ts
-import { css as css31 } from "lit";
-var componentStyles14 = css31`
+import { css as css35 } from "lit";
+var componentStyles14 = css35`
 .root {
   padding-block: var(--space-static-l-n53k41, 20px);
   padding-inline: var(--space-static-l-n53k41, 20px);
@@ -4202,7 +4446,7 @@ var componentStyles14 = css31`
 `;
 
 // src/file-dropzone/internal.ts
-var hostStyles14 = css32`:host { display: block; }`;
+var hostStyles14 = css36`:host { display: block; }`;
 var CsFileDropzoneInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -4267,7 +4511,9 @@ var CsFileDropzoneInternal = class extends CsBaseElement {
         @dragleave=${this._onDragLeave}
         @drop=${this._onDrop}
       >
-        <slot></slot>
+        <div class="content">
+          <slot></slot>
+        </div>
       </div>
     `;
   }
@@ -4282,14 +4528,14 @@ var CsFileDropzone = class extends CsFileDropzoneInternal {
 customElements.define("cs-file-dropzone", CsFileDropzone);
 
 // src/anchor-navigation/internal.ts
-import { css as css34, html as html16 } from "lit";
+import { css as css38, html as html16, nothing as nothing3 } from "lit";
 import { property as property15, state as state3 } from "lit/decorators.js";
 import { classMap as classMap14 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined7 } from "lit/directives/if-defined.js";
 
 // src/anchor-navigation/styles.ts
-import { css as css33 } from "lit";
-var componentStyles15 = css33`
+import { css as css37 } from "lit";
+var componentStyles15 = css37`
 .root {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
@@ -4427,7 +4673,7 @@ var componentStyles15 = css33`
 `;
 
 // src/anchor-navigation/internal.ts
-var hostStyles15 = css34`:host { display: block; }`;
+var hostStyles15 = css38`:host { display: block; }`;
 var CsAnchorNavigationInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -4516,38 +4762,76 @@ var CsAnchorNavigationInternal = class extends CsBaseElement {
   _onAnchorClick(_e, anchor) {
     fireNonCancelableEvent(this, "follow", anchor);
   }
+  _buildTree(anchors) {
+    const groups = [];
+    for (const anchor of anchors) {
+      if (anchor.level <= 1) {
+        groups.push({ anchor, children: [] });
+      } else if (groups.length > 0) {
+        groups[groups.length - 1].children.push(anchor);
+      }
+    }
+    return groups;
+  }
+  _renderAnchorLink(anchor) {
+    const isActive = this._currentHref === anchor.href;
+    return html16`
+      <li class=${classMap14({
+      "anchor-item": true,
+      "anchor-item--active": isActive
+    })}>
+        <a
+          class=${classMap14({
+      "anchor-link": true,
+      "anchor-link--active": isActive
+    })}
+          href=${anchor.href}
+          aria-current=${ifDefined7(isActive ? "location" : void 0)}
+          @click=${(e) => this._onAnchorClick(e, anchor)}
+        >
+          <span class="anchor-link-text">${anchor.text}</span>
+          ${anchor.info ? html16`<span class="anchor-link-info">${anchor.info}</span>` : nothing3}
+        </a>
+      </li>
+    `;
+  }
   render() {
+    const groups = this._buildTree(this.anchors);
     return html16`
       <nav
         class="root"
         aria-labelledby=${ifDefined7(this.ariaLabelledby)}
       >
-        <ul class="anchor-list" role="list">
-          ${this.anchors.map((anchor) => {
+        <ol class="anchor-list" role="list">
+          ${groups.map(({ anchor, children }) => {
       const isActive = this._currentHref === anchor.href;
-      const indent = Math.max(0, anchor.level - 1) * 16;
-      const linkClasses = {
-        "anchor-link": true,
-        "anchor-link--active": isActive
-      };
+      if (children.length === 0) {
+        return this._renderAnchorLink(anchor);
+      }
       return html16`
               <li class=${classMap14({
         "anchor-item": true,
         "anchor-item--active": isActive
-      })} style="padding-left: ${indent}px">
+      })}>
                 <a
-                  class=${classMap14(linkClasses)}
+                  class=${classMap14({
+        "anchor-link": true,
+        "anchor-link--active": isActive
+      })}
                   href=${anchor.href}
                   aria-current=${ifDefined7(isActive ? "location" : void 0)}
                   @click=${(e) => this._onAnchorClick(e, anchor)}
                 >
                   <span class="anchor-link-text">${anchor.text}</span>
-                  ${anchor.info ? html16`<span class="anchor-link-info">${anchor.info}</span>` : ""}
+                  ${anchor.info ? html16`<span class="anchor-link-info">${anchor.info}</span>` : nothing3}
                 </a>
+                <ol class="anchor-list">
+                  ${children.map((child) => this._renderAnchorLink(child))}
+                </ol>
               </li>
             `;
     })}
-        </ul>
+        </ol>
       </nav>
     `;
   }