@cloudscape-design/components-themeable 3.0.1341 → 3.0.1342

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6db99848695ad631858cad7dea69c46d347003ea"
+  "commit": "2041ec8f9027e7c42c879f7113759c67d545a585"
 }

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

@@ -198,6 +198,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    flex: 1;
+    min-inline-size: 0;
   }
 
   &-button,
@@ -285,6 +287,20 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 }
 
+// Internal-only class: zeros header wrapper padding when __disableHeaderPaddings is set.
+// Allows parent components to control spacing without brittle positional selectors.
+.disable-header-paddings {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+// Internal-only class: zeros content wrapper padding when the disableContentPaddings prop is set.
+// Paired with disable-header-paddings for consistent zero-padding on both wrapper divs.
+.disable-content-paddings {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
 .focusable {
   &:focus {
     outline: none;
@@ -302,3 +318,129 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     color: awsui.$color-text-expandable-section-hover;
   }
 }
+
+// When the expand/collapse icon is rendered at the end of the header.
+// For non-container variants the icon is rendered at the end of the headerButton
+// (taking the full width of the header). For the container variant the icon is
+// rendered as a sibling of the InternalHeader so it appears past any actions.
+.header-icon-end {
+  &.wrapper-default,
+  &.wrapper-inline,
+  &.wrapper-footer,
+  &.wrapper-compact {
+    padding-inline-start: 0;
+  }
+
+  &.wrapper-navigation {
+    justify-content: space-between;
+    align-items: flex-start;
+    column-gap: awsui.$space-xs;
+  }
+
+  &.wrapper-container,
+  &.wrapper-default {
+    display: flex;
+    align-items: flex-start;
+    column-gap: awsui.$space-m;
+  }
+
+  &.wrapper-container {
+    &:not(.header-deprecated) {
+      padding-inline-start: container.$header-padding-horizontal;
+    }
+  }
+}
+
+.header-button-icon-end {
+  margin-inline-start: 0;
+  column-gap: awsui.$space-xs;
+  justify-content: space-between;
+
+  // For non-container variants the icon lives inside this button, so it
+  // needs to be a full-width flex row to push the icon to the inline-end.
+  // The container variant renders the icon outside InternalHeader, so
+  // making this element a block-level flex container with 100% width would
+  // force the title to consume all available space and push the info slot
+  // (rendered as a sibling inside InternalHeader) to a new line.
+  &:not(.header-container-button) {
+    display: flex;
+    inline-size: 100%;
+
+    > .header-text {
+      flex: 1;
+      min-inline-size: 0;
+    }
+  }
+}
+
+.icon-container-end {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+  flex-shrink: 0;
+
+  // Stretch the button to fill the parent's block-size so the entire caret
+  // column is clickable/hoverable, matching start-position behavior.
+  align-self: stretch;
+  align-items: flex-start;
+
+  // Reset native <button> chrome for the outside caret in end-icon-position.
+  // The navigation variant already has its own reset via .header-navigation > .icon-container
+  // so this is harmless-but-redundant for that path, and necessary for default/container.
+  border-block: none;
+  border-inline: none;
+  background: none;
+  padding-block: 0;
+  padding-inline: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(2px);
+  }
+
+  // Align the navigation end-layout caret to the first line of header text.
+  // The header link has padding-block equal to (item-height - line-height) / 2
+  // (set by side-navigation). Mirror that on the caret so it sits at the same
+  // vertical position as the first text line — identical to the start layout.
+  .header-icon-end.wrapper-navigation > & {
+    padding-block-start: calc((#{awsui.$size-side-navigation-item-height} - #{awsui.$line-height-body-m}) / 2);
+  }
+
+  // In the end layout the icon is a flex child governed by the parent's
+  // align-items: flex-start. Reset the inset-block-start offsets that the
+  // start layout uses (they assume relative positioning within text flow)
+  // so the icon aligns with the first line of header text via flex.
+  @include theming.one-theme-only {
+    // Override the base .icon-container one-theme rule that re-introduces
+    // margin-inline-end via the margin-inline shorthand (equal specificity,
+    // later source order wins).
+    margin-inline-end: 0;
+    &:not(.icon-container-container) {
+      inset-block-start: $icon-offset-block;
+    }
+    > .icon {
+      inset-block-start: 0;
+    }
+  }
+}
+
+// Semantic wrapper around HeadingTag + actions in non-container variants
+.header-icon-end > .header-content {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.header-icon-end > .header-navigation-content {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+// Navigation variant, start icon: align the expand caret to the first line of text
+// when header paddings are disabled (side-navigation use case).
+// Mirrors the end-icon alignment at .icon-container-end (same formula).
+.disable-header-paddings.wrapper-navigation:not(.header-icon-end) > .icon-container {
+  display: grid;
+  align-items: flex-start;
+  padding-block: calc((#{awsui.$size-side-navigation-item-height} - #{awsui.$line-height-body-m}) / 2);
+}

package/lib/internal/scss/input/styles.scss

@@ -322,7 +322,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 1;
-  max-inline-size: max(0px, calc((100% - 12rem) / 2));
+  max-inline-size: calc(50% - 6rem);
   min-inline-size: 0;
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
@@ -412,9 +412,6 @@
 
   > .input-prefix,
   > .input-suffix {
-    max-inline-size: max(
-      0px,
-      calc((100% - 12rem + #{styles.$invalid-control-left-border} - #{awsui.$border-width-field}) / 2)
-    );
+    max-inline-size: calc(50% - 6rem + (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field}) / 2);
   }
 }

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "6db99848";
+    $awsui-commit-hash: "2041ec8f";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-esndbs;
 $minContentWidth: --awsui-min-content-width-esndbs;

package/lib/internal/scss/multiselect/styles.scss

@@ -18,3 +18,17 @@
 .tokens {
   margin-block-start: awsui.$space-scaled-xs;
 }
+
+// Custom dropdown header/footer regions (renderDropdownHeader / renderDropdownFooter). Duplicated in the
+// Select stylesheet. The header can sit directly above the options list, so it is lifted with z-index to
+// keep focusable content's focus ring above the list; the footer sits below the list with natural
+// clearance and needs no lift.
+.dropdown-header {
+  inline-size: 100%;
+  position: relative;
+  z-index: 4;
+}
+
+.dropdown-footer {
+  inline-size: 100%;
+}

package/lib/internal/scss/pagination/styles.scss

@@ -98,8 +98,14 @@
   color: awsui.$color-text-interactive-default;
 }
 
+.pages-compact {
+  color: awsui.$color-text-pagination-page-number-default;
+  white-space: nowrap;
+}
+
 .page-item,
-.dots {
+.dots,
+.pages-compact {
   margin-block: styles.$control-padding-vertical;
   margin-inline: awsui.$space-xxs;
   text-align: center;
@@ -114,6 +120,7 @@
   }
 }
 
-.root-disabled > .dots {
+.root-disabled > .dots,
+.root-disabled > .pages-compact {
   color: awsui.$color-text-interactive-disabled;
 }

package/lib/internal/scss/pagination/test-classes/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.pages-compact-text {
+  /* used in test-utils or tests */
+}

package/lib/internal/scss/select/styles.scss

@@ -4,8 +4,21 @@
 */
 
 @use '../internal/styles' as styles;
-@use '../internal/styles/tokens' as awsui;
 
 .root {
   @include styles.styles-reset;
 }
+
+// Custom dropdown header/footer regions (renderDropdownHeader / renderDropdownFooter). Duplicated in the
+// Multiselect stylesheet. The header can sit directly above the options list, so it is lifted with z-index
+// to keep focusable content's focus ring above the list; the footer sits below the list with natural
+// clearance and needs no lift.
+.dropdown-header {
+  inline-size: 100%;
+  position: relative;
+  z-index: 4;
+}
+
+.dropdown-footer {
+  inline-size: 100%;
+}

package/lib/internal/scss/side-navigation/styles.scss

@@ -19,7 +19,7 @@ $item-padding-inline: awsui.$space-xs;
 $item-indent: calc(awsui.$size-icon-normal + #{$item-icon-text-gap} - #{$item-padding-inline});
 $expandable-icon-negative-margin: awsui.$space-l;
 
-@mixin item-radius($radius: awsui.$border-radius-item) {
+@mixin item-radius($radius: awsui.$border-radius-side-navigation-item) {
   border-start-start-radius: $radius;
   border-start-end-radius: $radius;
   border-end-start-radius: $radius;
@@ -122,14 +122,27 @@ $expandable-icon-negative-margin: awsui.$space-l;
     padding-inline-start: 0;
     padding-inline-end: 0;
   }
+
+  &.list--with-icons:not(.list-variant-root--collapsed) {
+    padding-inline-start: calc(#{awsui.$space-panel-side-right} - #{$item-padding-inline});
+  }
 }
 
 .list-variant-expandable-link-group {
   padding-inline-start: calc(#{$item-indent} + #{$expandable-icon-negative-margin});
+
+  &.list--with-icons {
+    padding-inline-start: $item-indent;
+  }
 }
 
 .list-variant-section {
   padding-inline-start: calc(#{$expandable-icon-negative-margin} - #{$item-padding-inline});
+
+  &.list--with-icons {
+    padding-inline-start: 0;
+    margin-inline-start: calc(-1 * #{awsui.$space-xs});
+  }
 }
 
 .list-variant-link-group {
@@ -206,31 +219,13 @@ $expandable-icon-negative-margin: awsui.$space-l;
 .expandable-link-group {
   margin-inline-start: calc(-1 * #{$expandable-icon-negative-margin});
 
-  // HACK: Remove padding from section header and content to rely on margin collapsing rules.
-  // Hits the two direct <div> children of the ExpandableSection root: the header
-  // (.wrapper-footer / .header-footer) and the content (.content-footer).
-  /* stylelint-disable-next-line selector-max-type */
-  & > div {
-    padding-block: 0;
-    padding-inline: 0;
-  }
-
-  // Hits the header's first child only — the .icon-container inside the
-  // ExpandableSection header — to vertically align the icon with the text.
-  // Must NOT match the content div's first child (our <ul>); turning the <ul>
-  // into a grid container breaks sibling margin collapse on the .list-item children.
-  /* stylelint-disable-next-line selector-max-type */
-  & > div:first-child > :first-child {
-    display: grid;
-    align-items: flex-start;
-    padding-block: $item-padding-block;
-  }
-
-  &--no-ident {
+  &--no-ident,
+  &--expand-icon-end {
     margin-inline-start: 0;
   }
 }
 
+// Targets the ExpandableSection header wrapper (first child div of the component root).
 .expandable-link-group > div:first-child {
   @include item-radius;
   display: flex;
@@ -239,6 +234,7 @@ $expandable-icon-negative-margin: awsui.$space-l;
   box-sizing: content-box;
 }
 
+// Targets the ExpandableSection header wrapper (first child div of the component root).
 .expandable-link-group--active > div:first-child {
   background-color: awsui.$color-background-side-navigation-item-active;
 }
@@ -264,7 +260,6 @@ $expandable-icon-negative-margin: awsui.$space-l;
 // Section groups
 // ==========================================================================
 .section-group {
-  @include styles.font-heading-m;
   margin-block: calc(#{awsui.$space-scaled-xs} - #{awsui.$border-divider-section-width});
   margin-inline: 0;
 
@@ -291,7 +286,7 @@ $expandable-icon-negative-margin: awsui.$space-l;
   padding-inline: $item-padding-inline;
   margin-inline: calc(-1 * #{$item-padding-inline});
   align-items: flex-start;
-  @include item-radius(awsui.$border-radius-side-navigation-item);
+  @include item-radius;
   font-weight: styles.$font-weight-normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
@@ -385,3 +380,46 @@ $expandable-icon-negative-margin: awsui.$space-l;
     }
   }
 }
+
+// ==========================================================================
+// Icon-layout hover states
+// When icons are present, nav rows show a full-width hover background
+// connecting the item text/icon to the end-positioned caret.
+// ==========================================================================
+
+// Shared hover background for icon-layout rows (expanded with-icons AND collapsed rail).
+@mixin icon-layout-hover-background {
+  background-color: awsui.$color-background-side-navigation-item-icon-hover;
+}
+
+// --- Expanded icon layout (gated by .list--with-icons) ---
+.list--with-icons {
+  // Plain links: hover background (exclude active collapsed links to preserve their active background).
+  > .list-item > .link:not(.link-active.link--collapsed):hover {
+    @include icon-layout-hover-background;
+  }
+
+  // Expandable-link-group header: hover background.
+  > .list-item > .expandable-link-group > div:first-child:hover {
+    @include icon-layout-hover-background;
+  }
+
+  // Section (footer-variant expandable) header: full-width hover geometry + background.
+  // :first-child targets the ExpandableSection header wrapper (positional cross-component coupling).
+  > .list-item > .section > :first-child {
+    @include item-radius;
+    display: flex;
+    padding-inline: $item-padding-inline;
+    margin-inline: calc(-1 * #{$item-padding-inline});
+    box-sizing: content-box;
+
+    &:hover {
+      @include icon-layout-hover-background;
+    }
+  }
+}
+
+// --- Collapsed rail items (always have icons; gated by collapsed classes) ---
+.link--collapsed:not(.link-active):hover {
+  @include icon-layout-hover-background;
+}

package/lib/internal/scss/textarea/styles.scss

@@ -14,8 +14,8 @@
 
 .textarea {
   @include styles.styles-reset;
-  // Restore browsers' default resize values
-  resize: auto;
+  // Matches browsers' default for textarea; overridden by the resize modifiers below
+  resize: both;
   // Restore default text cursor
   cursor: text;
   // Allow multi-line placeholders
@@ -44,6 +44,25 @@
 
   @include styles.font-body-m;
 
+  // Physical axes are used here rather than logical ones: resize axes follow
+  // `writing-mode`, which is always horizontal-tb, so `block`/`inline` would
+  // resolve identically in both LTR and RTL.
+  &.textarea-resize-both {
+    resize: both;
+  }
+
+  &.textarea-resize-horizontal {
+    resize: horizontal;
+  }
+
+  &.textarea-resize-vertical {
+    resize: vertical;
+  }
+
+  &.textarea-resize-none {
+    resize: none;
+  }
+
   &:hover {
     border-color: var(
       #{custom-props.$styleBorderColorHover},

package/lib/internal/template/expandable-section/expandable-section-header.d.ts

@@ -14,6 +14,7 @@ interface ExpandableDefaultHeaderProps {
     onClick: MouseEventHandler;
     icon: JSX.Element;
     variant: InternalVariant;
+    expandIconPosition: 'start' | 'end';
 }
 interface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {
     header?: ReactNode;
@@ -25,6 +26,6 @@ interface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps
     headingTagOverride?: ExpandableSectionProps.HeadingTag;
     ariaLabelledBy?: string;
 }
-export declare const ExpandableSectionHeader: ({ id, descriptionId, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
+export declare const ExpandableSectionHeader: ({ id, descriptionId, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, expandIconPosition, }: ExpandableSectionHeaderProps) => JSX.Element;
 export {};
 //# sourceMappingURL=expandable-section-header.d.ts.map

package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAalF,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAaxD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuLD,eAAO,MAAM,uBAAuB,GAAI,iOAmBrC,4BAA4B,gBA4F9B,CAAC"}
+{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAalF,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAwExD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC;IACzB,kBAAkB,EAAE,OAAO,GAAG,KAAK,CAAC;CACrC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAkQD,eAAO,MAAM,uBAAuB,GAAI,qPAoBrC,4BAA4B,gBA6F9B,CAAC"}

package/lib/internal/template/expandable-section/expandable-section-header.js

@@ -11,6 +11,27 @@ import { variantRequiresActionsDivider, variantSupportsActions, variantSupportsD
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 const componentName = 'ExpandableSection';
+/**
+ * Standalone expand/collapse caret button used when the icon renders OUTSIDE
+ * the main clickable header area (navigation variant) or outside the headerButton
+ * (end-position with actions/container). This is always an independent interactive
+ * element with its own ARIA attributes.
+ */
+const ExpandIconButton = ({ icon, ariaLabel, ariaLabelledBy, ariaControls, expanded, onClick, stopPropagation, className, }) => {
+    const stopKeyPropagation = stopPropagation
+        ? (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.stopPropagation();
+            }
+        }
+        : undefined;
+    return (React.createElement("button", { className: clsx(styles['icon-container'], styles['expand-button'], className), type: "button", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-controls": ariaControls, "aria-expanded": expanded, onClick: stopPropagation
+            ? event => {
+                event.stopPropagation();
+                onClick(event);
+            }
+            : onClick, onKeyUp: stopKeyPropagation, onKeyDown: stopKeyPropagation, ...getExpandActionAnalyticsMetadataAttribute(expanded) }, icon));
+};
 const getExpandActionAnalyticsMetadataAttribute = (expanded) => {
     const metadata = {
         action: !expanded ? 'expand' : 'collapse',
@@ -25,12 +46,15 @@ const ExpandableDeprecatedHeader = ({ id, className, onClick, ariaLabel, ariaCon
         React.createElement("div", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
         children));
 };
-const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ariaLabel, ariaControls, expanded, children, icon, }) => {
-    return (React.createElement("div", { id: id, className: clsx(className, styles['click-target'], analyticsSelectors['header-label']) },
-        React.createElement("button", { className: clsx(styles['icon-container'], styles['expand-button']), "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button", onClick: onClick, ...getExpandActionAnalyticsMetadataAttribute(expanded) }, icon),
-        children));
+const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ariaLabel, ariaControls, expanded, children, icon, expandIconPosition, }) => {
+    const expandButton = (React.createElement(ExpandIconButton, { icon: icon, ariaLabelledBy: ariaLabelledBy, ariaLabel: ariaLabel, ariaControls: ariaControls, expanded: expanded, onClick: onClick, className: expandIconPosition === 'end' ? styles['icon-container-end'] : undefined }));
+    return (React.createElement("div", { id: id, className: clsx(className, styles['click-target'], analyticsSelectors['header-label'], expandIconPosition === 'end' && styles['header-icon-end']) }, expandIconPosition === 'end' ? (React.createElement(React.Fragment, null,
+        children,
+        expandButton)) : (React.createElement(React.Fragment, null,
+        expandButton,
+        children))));
 };
-const ExpandableHeaderTextWrapper = ({ id, descriptionId, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, headerInfo, headerActions, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
+const ExpandableHeaderTextWrapper = ({ id, descriptionId, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, headerInfo, headerActions, variant, headingTagOverride, onKeyUp, onKeyDown, expandIconPosition, }) => {
     const isContainer = variant === 'container';
     const HeadingTag = headingTagOverride || 'div';
     const supportsInteractiveElements = variantSupportsActions(variant);
@@ -38,6 +62,11 @@ const ExpandableHeaderTextWrapper = ({ id, descriptionId, className, onClick, ar
     const actions = supportsInteractiveElements && headerActions;
     const description = variantSupportsDescription(variant) && headerDescription && (React.createElement("span", { id: descriptionId, className: styles[`description-${variant}`] }, headerDescription));
     const listeners = { onClick, onKeyDown, onKeyUp };
+    const iconAtEnd = expandIconPosition === 'end';
+    // For the variants that allow actions, when end placement is active, the icon is rendered outside the
+    // InternalHeader so it appears at the inline-end of the wrapper, past any header actions.
+    // Other variants render the icon at the end of the headerButton itself.
+    const renderIconOutsideHeader = iconAtEnd && (isContainer || !!actions);
     // If interactive elements are present, constrain the clickable area to only the icon and the header text
     // to prevent nesting interactive elements.
     const headerButtonListeners = restrictClickableArea ? listeners : undefined;
@@ -47,16 +76,29 @@ const ExpandableHeaderTextWrapper = ({ id, descriptionId, className, onClick, ar
     const headingTagListeners = !headerButtonListeners && !isContainer && description ? listeners : undefined;
     // For all other cases, make the entire header clickable for backwards compatibility.
     const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;
-    const headerButton = (React.createElement("span", { className: clsx(styles['expand-button'], isContainer ? styles['header-container-button'] : styles['header-button'], headerButtonListeners && styles['click-target']), role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && description ? id : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-controls": ariaControls, "aria-expanded": expanded, ...headerButtonListeners, ...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {}) },
-        React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
-        React.createElement("span", { id: id, className: clsx(styles['header-text'], analyticsSelectors['header-label']) }, children)));
-    return (React.createElement("div", { className: clsx(className, wrapperListeners && styles['click-target']), ...wrapperListeners, ...(wrapperListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {}) }, isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: description, counter: headerCounter, info: headerInfo, actions: actions, headingTagOverride: headingTagOverride, __inExpandableSection: true }, headerButton)) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: clsx(actions && styles['header-actions-wrapper']) },
+    // Standalone caret button — used when the icon is rendered OUTSIDE the headerButton
+    // (end-position with container or actions). Must be its own <button> for accessibility.
+    const expandButton = (React.createElement(ExpandIconButton, { icon: icon, ariaLabel: ariaLabel, ariaLabelledBy: !ariaLabel ? id : undefined, ariaControls: ariaControls, expanded: expanded, onClick: onClick, stopPropagation: true, className: clsx(styles[`icon-container-${variant}`], styles['icon-container-end']) }));
+    // Decorative inline icon — used when the caret is INSIDE the headerButton
+    // (which itself is the interactive element). A nested <button> would be illegal.
+    const expandIcon = (React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`], iconAtEnd && styles['icon-container-end']) }, icon));
+    const outsideIcon = renderIconOutsideHeader ? expandButton : null;
+    const textElement = (React.createElement("span", { id: id, className: clsx(styles['header-text'], analyticsSelectors['header-label']) }, children));
+    const headerButton = (React.createElement("span", { className: clsx(styles['expand-button'], isContainer ? styles['header-container-button'] : styles['header-button'], iconAtEnd && styles['header-button-icon-end'], headerButtonListeners && styles['click-target']), role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && description ? id : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-controls": ariaControls, "aria-expanded": expanded, ...headerButtonListeners, ...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {}) }, renderIconOutsideHeader ? (textElement) : iconAtEnd ? (React.createElement(React.Fragment, null,
+        textElement,
+        expandIcon)) : (React.createElement(React.Fragment, null,
+        expandIcon,
+        textElement))));
+    return (React.createElement("div", { className: clsx(className, wrapperListeners && styles['click-target'], iconAtEnd && styles['header-icon-end']), ...wrapperListeners, ...(wrapperListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {}) }, isContainer ? (React.createElement(React.Fragment, null,
+        React.createElement(InternalHeader, { variant: "h2", description: description, counter: headerCounter, info: headerInfo, actions: actions, headingTagOverride: headingTagOverride, __inExpandableSection: true }, headerButton),
+        outsideIcon)) : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: clsx(styles['header-content'], actions && styles['header-actions-wrapper']) },
             React.createElement(HeadingTag, { className: clsx(styles['header-wrapper'], headingTagListeners && styles['click-target']), ...headingTagListeners, ...(headingTagListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {}) }, headerButton),
             actions),
-        description && React.createElement(HeaderDescription, { variantOverride: "h3" }, description)))));
+        description && React.createElement(HeaderDescription, { variantOverride: "h3" }, description),
+        outsideIcon))));
 };
-export const ExpandableSectionHeader = ({ id, descriptionId, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }) => {
+export const ExpandableSectionHeader = ({ id, descriptionId, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, expandIconPosition, }) => {
     const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;
     const icon = (React.createElement(InternalIcon, { size: isThemeActive(Theme.OneTheme) ? 'x-small' : variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled' }));
     const defaultHeaderProps = {
@@ -67,6 +109,7 @@ export const ExpandableSectionHeader = ({ id, descriptionId, className, variant,
         ariaLabel: ariaLabel,
         onClick: onClick,
         variant,
+        expandIconPosition,
     };
     if ((headerCounter || headerInfo) && !variantSupportsInfoLink(variant) && isDevelopment) {
         warnOnce(componentName, 'The `headerCounter` and `headerInfo` props are only supported for the "container" variant.');
@@ -79,7 +122,8 @@ export const ExpandableSectionHeader = ({ id, descriptionId, className, variant,
     }
     const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], (expanded || alwaysShowDivider) && styles['wrapper-expanded']);
     if (variant === 'navigation') {
-        return (React.createElement(ExpandableNavigationHeader, { className: clsx(className, wrapperClassName), ariaLabelledBy: ariaLabelledBy, ...defaultHeaderProps }, headerText !== null && headerText !== void 0 ? headerText : header));
+        return (React.createElement(ExpandableNavigationHeader, { className: clsx(className, wrapperClassName), ariaLabelledBy: ariaLabelledBy, ...defaultHeaderProps },
+            React.createElement("span", { className: styles['header-navigation-content'] }, headerText !== null && headerText !== void 0 ? headerText : header)));
     }
     if (headerText || variant === 'inline') {
         if (!headerText && header && variant === 'inline') {