@cloudscape-design/components-themeable 3.0.67 → 3.0.68

package/lib/internal/scss/container/styles.scss

@@ -9,18 +9,22 @@
 
 .root {
   @include styles.styles-reset;
-  display: block;
+  display: flex;
+  flex-flow: column nowrap;
   word-wrap: break-word;
+
   &.variant {
     &-default,
     &-stacked {
       @include shared.borders-and-shadows;
       background-color: awsui.$color-background-container-content;
     }
+
     &-stacked:not(:last-child) {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
+
     &-stacked + &-stacked {
       @include shared.divider;
       border-top-left-radius: 0;
@@ -31,6 +35,7 @@
 }
 
 .header {
+  flex: 0 0 auto;
   background-color: awsui.$color-background-container-header;
   border-top-left-radius: awsui.$border-radius-container;
   border-top-right-radius: awsui.$border-radius-container;
@@ -41,31 +46,38 @@
     position: relative;
     z-index: 1;
   }
+
   &-sticky-enabled {
     top: 0;
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     position: sticky;
     z-index: 800;
   }
+
   &-stuck {
     box-shadow: awsui.$shadow-sticky-embedded;
     border: 0;
     border-radius: 0;
   }
+
   &-dynamic-height.header-stuck {
     // to prevent the block from changing its height when variant dynamically changes
     margin-bottom: calc(#{awsui.$font-heading-xl-line-height} - #{awsui.$font-heading-l-line-height});
   }
+
   &:not(:empty) {
     border-bottom: awsui.$border-container-sticky-width solid awsui.$color-border-container-divider;
   }
+
   &.with-paddings {
     padding: shared.$header-padding;
   }
+
   &.with-hidden-content {
     border-bottom-left-radius: awsui.$border-radius-container;
     border-bottom-right-radius: awsui.$border-radius-container;
   }
+
   &-variant-cards {
     @include shared.borders-and-shadows;
 
@@ -73,16 +85,19 @@
       // bottom shadow does not appear in IE11 due to the presence of background color
       // Adding a bottom border
       border-bottom: 1px solid #d5dbdb;
+
       /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
       @supports (--css-variable-support-check: #000) {
         border-bottom: 0;
       }
     }
+
     &.header-stuck {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
   }
+
   &-variant-full-page.header-stuck {
     box-shadow: awsui.$shadow-sticky;
   }
@@ -96,17 +111,25 @@ the default white background of the container component.
   background-color: awsui.$color-background-layout-main;
 }
 
-.content.with-paddings {
-  padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
-  .header + & {
-    padding-top: awsui.$space-container-content-top;
+.content {
+  flex: 1 0 auto;
+
+  &.with-paddings {
+    padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
+
+    .header + & {
+      padding-top: awsui.$space-container-content-top;
+    }
   }
 }
 
 .footer {
+  flex: 0 0 auto;
+
   &.with-paddings {
     padding: shared.$footer-padding;
   }
+
   &.with-divider {
     @include shared.divider;
   }

package/lib/internal/template/breadcrumb-group/internal.js

@@ -16,7 +16,7 @@ var DropdownTrigger = function (clickHandler, ref, isDisabled, isExpanded, ariaL
     return (React.createElement(InternalButton, { disabled: isDisabled, onClick: function (event) {
             event.preventDefault();
             clickHandler();
-        }, ref: ref, "aria-expanded": isExpanded ? true : undefined, "aria-haspopup": true, ariaLabel: ariaLabel, variant: "breadcrumb-group", formAction: "none" }, "..."));
+        }, ref: ref, ariaExpanded: isExpanded, "aria-haspopup": true, ariaLabel: ariaLabel, variant: "breadcrumb-group", formAction: "none" }, "..."));
 };
 var EllipsisDropdown = function (_a) {
     var ariaLabel = _a.ariaLabel, dropdownItems = _a.dropdownItems, onDropdownItemClick = _a.onDropdownItemClick, onDropdownItemFollow = _a.onDropdownItemFollow;

package/lib/internal/template/breadcrumb-group/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types.js';\n\nconst DropdownTrigger = (\n  clickHandler: () => void,\n  ref: React.Ref<ButtonProps.Ref>,\n  isDisabled: boolean,\n  isExpanded: boolean,\n  ariaLabel?: string\n) => {\n  return (\n    <InternalButton\n      disabled={isDisabled}\n      onClick={event => {\n        event.preventDefault();\n        clickHandler();\n      }}\n      ref={ref}\n      aria-expanded={isExpanded ? true : undefined}\n      aria-haspopup={true}\n      ariaLabel={ariaLabel}\n      variant=\"breadcrumb-group\"\n      formAction=\"none\"\n    >\n      ...\n    </InternalButton>\n  );\n};\n\nconst EllipsisDropdown = ({\n  ariaLabel,\n  dropdownItems,\n  onDropdownItemClick,\n  onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n  return (\n    <li className={styles.ellipsis}>\n      <InternalButtonDropdown\n        ariaLabel={ariaLabel}\n        items={dropdownItems}\n        onItemClick={onDropdownItemClick}\n        onItemFollow={onDropdownItemFollow}\n        customTriggerBuilder={DropdownTrigger}\n      />\n      <span className={styles.icon}>\n        <InternalIcon name=\"angle-right\" />\n      </span>\n    </li>\n  );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n  item,\n  text: item.text,\n  href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = SomeRequired<\n  BreadcrumbGroupProps<T>,\n  'expandAriaLabel'\n> &\n  InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n  items = [],\n  ariaLabel,\n  expandAriaLabel,\n  onClick,\n  onFollow,\n  __internalRootRef,\n  ...props\n}: InternalBreadcrumbGroupProps<T>) {\n  for (const item of items) {\n    checkSafeUrl('BreadcrumbGroup', item.href);\n  }\n  const baseProps = getBaseProps(props);\n  const isMobile = useMobile();\n\n  let breadcrumbItems = items.map((item, index) => {\n    return (\n      <li className={styles.item} key={index}>\n        <BreadcrumbItem\n          item={item}\n          onClick={onClick}\n          onFollow={onFollow}\n          isCompressed={isMobile}\n          isLast={index === items.length - 1}\n        />\n      </li>\n    );\n  });\n\n  const getEventItem = (e: CustomEvent<{ id: string }>) => {\n    const { id } = e.detail;\n    return items[parseInt(id)];\n  };\n\n  // Add ellipsis\n  if (breadcrumbItems.length >= 3) {\n    const dropdownItems: Array<LinkItem> = items\n      .slice(1, items.length - 1)\n      .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n        id: (index + 1).toString(), // the first item doesn't get inside dropdown\n        text: item.text,\n        href: item.href || '#',\n      }));\n\n    breadcrumbItems = [\n      breadcrumbItems[0],\n      <EllipsisDropdown\n        key={'ellipsis'}\n        ariaLabel={expandAriaLabel}\n        dropdownItems={dropdownItems}\n        onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n        onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n      />,\n      ...breadcrumbItems.slice(1),\n    ];\n  }\n\n  return (\n    <nav\n      {...baseProps}\n      className={clsx(styles['breadcrumb-group'], isMobile && styles.mobile, baseProps.className)}\n      aria-label={ariaLabel || undefined}\n      ref={__internalRootRef}\n    >\n      <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n    </nav>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types.js';\n\nconst DropdownTrigger = (\n  clickHandler: () => void,\n  ref: React.Ref<ButtonProps.Ref>,\n  isDisabled: boolean,\n  isExpanded: boolean,\n  ariaLabel?: string\n) => {\n  return (\n    <InternalButton\n      disabled={isDisabled}\n      onClick={event => {\n        event.preventDefault();\n        clickHandler();\n      }}\n      ref={ref}\n      ariaExpanded={isExpanded}\n      aria-haspopup={true}\n      ariaLabel={ariaLabel}\n      variant=\"breadcrumb-group\"\n      formAction=\"none\"\n    >\n      ...\n    </InternalButton>\n  );\n};\n\nconst EllipsisDropdown = ({\n  ariaLabel,\n  dropdownItems,\n  onDropdownItemClick,\n  onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n  return (\n    <li className={styles.ellipsis}>\n      <InternalButtonDropdown\n        ariaLabel={ariaLabel}\n        items={dropdownItems}\n        onItemClick={onDropdownItemClick}\n        onItemFollow={onDropdownItemFollow}\n        customTriggerBuilder={DropdownTrigger}\n      />\n      <span className={styles.icon}>\n        <InternalIcon name=\"angle-right\" />\n      </span>\n    </li>\n  );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n  item,\n  text: item.text,\n  href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = SomeRequired<\n  BreadcrumbGroupProps<T>,\n  'expandAriaLabel'\n> &\n  InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n  items = [],\n  ariaLabel,\n  expandAriaLabel,\n  onClick,\n  onFollow,\n  __internalRootRef,\n  ...props\n}: InternalBreadcrumbGroupProps<T>) {\n  for (const item of items) {\n    checkSafeUrl('BreadcrumbGroup', item.href);\n  }\n  const baseProps = getBaseProps(props);\n  const isMobile = useMobile();\n\n  let breadcrumbItems = items.map((item, index) => {\n    return (\n      <li className={styles.item} key={index}>\n        <BreadcrumbItem\n          item={item}\n          onClick={onClick}\n          onFollow={onFollow}\n          isCompressed={isMobile}\n          isLast={index === items.length - 1}\n        />\n      </li>\n    );\n  });\n\n  const getEventItem = (e: CustomEvent<{ id: string }>) => {\n    const { id } = e.detail;\n    return items[parseInt(id)];\n  };\n\n  // Add ellipsis\n  if (breadcrumbItems.length >= 3) {\n    const dropdownItems: Array<LinkItem> = items\n      .slice(1, items.length - 1)\n      .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n        id: (index + 1).toString(), // the first item doesn't get inside dropdown\n        text: item.text,\n        href: item.href || '#',\n      }));\n\n    breadcrumbItems = [\n      breadcrumbItems[0],\n      <EllipsisDropdown\n        key={'ellipsis'}\n        ariaLabel={expandAriaLabel}\n        dropdownItems={dropdownItems}\n        onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n        onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n      />,\n      ...breadcrumbItems.slice(1),\n    ];\n  }\n\n  return (\n    <nav\n      {...baseProps}\n      className={clsx(styles['breadcrumb-group'], isMobile && styles.mobile, baseProps.className)}\n      aria-label={ariaLabel || undefined}\n      ref={__internalRootRef}\n    >\n      <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n    </nav>\n  );\n}\n"]}

package/lib/internal/template/container/styles.css.js

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_d572s_97",
-  "variant-default": "awsui_variant-default_14iqq_d572s_109",
-  "variant-stacked": "awsui_variant-stacked_14iqq_d572s_109",
-  "header": "awsui_header_14iqq_d572s_132",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_d572s_137",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_d572s_141",
-  "header-stuck": "awsui_header-stuck_14iqq_d572s_147",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_d572s_152",
-  "with-paddings": "awsui_with-paddings_14iqq_d572s_158",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_d572s_161",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_d572s_165",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_d572s_189",
-  "dark-header": "awsui_dark-header_14iqq_d572s_197",
-  "content": "awsui_content_14iqq_d572s_201",
-  "footer": "awsui_footer_14iqq_d572s_208",
-  "with-divider": "awsui_with-divider_14iqq_d572s_211"
+  "root": "awsui_root_14iqq_12v5q_97",
+  "variant-default": "awsui_variant-default_14iqq_12v5q_110",
+  "variant-stacked": "awsui_variant-stacked_14iqq_12v5q_110",
+  "header": "awsui_header_14iqq_12v5q_133",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_12v5q_139",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_12v5q_143",
+  "header-stuck": "awsui_header-stuck_14iqq_12v5q_149",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_12v5q_154",
+  "with-paddings": "awsui_with-paddings_14iqq_12v5q_160",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_12v5q_163",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_12v5q_167",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_12v5q_191",
+  "dark-header": "awsui_dark-header_14iqq_12v5q_199",
+  "content": "awsui_content_14iqq_12v5q_203",
+  "footer": "awsui_footer_14iqq_12v5q_213",
+  "with-divider": "awsui_with-divider_14iqq_12v5q_219"
 };
   

package/lib/internal/template/container/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_14iqq_d572s_97:not(#\9) {
+.awsui_root_14iqq_12v5q_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -129,10 +129,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-body-default-7m2b3r, #16191f);
   font-weight: 400;
   font-family: var(--font-family-base-mylvzb, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-  display: block;
+  display: flex;
+  flex-flow: column nowrap;
   word-wrap: break-word;
 }
-.awsui_root_14iqq_d572s_97.awsui_variant-default_14iqq_d572s_109:not(#\9), .awsui_root_14iqq_d572s_97.awsui_variant-stacked_14iqq_d572s_109:not(#\9) {
+.awsui_root_14iqq_12v5q_97.awsui_variant-default_14iqq_12v5q_110:not(#\9), .awsui_root_14iqq_12v5q_97.awsui_variant-stacked_14iqq_12v5q_110:not(#\9) {
   box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
   border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   border-radius: var(--border-radius-container-1aveko, 0px);
@@ -140,79 +141,80 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_root_14iqq_d572s_97.awsui_variant-default_14iqq_d572s_109:not(#\9), .awsui_root_14iqq_d572s_97.awsui_variant-stacked_14iqq_d572s_109:not(#\9) {
+  .awsui_root_14iqq_12v5q_97.awsui_variant-default_14iqq_12v5q_110:not(#\9), .awsui_root_14iqq_12v5q_97.awsui_variant-stacked_14iqq_12v5q_110:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_root_14iqq_d572s_97.awsui_variant-stacked_14iqq_d572s_109:not(#\9):not(:last-child) {
+.awsui_root_14iqq_12v5q_97.awsui_variant-stacked_14iqq_12v5q_110:not(#\9):not(:last-child) {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_root_14iqq_d572s_97.awsui_variant-stacked_14iqq_d572s_109 + .awsui_root_14iqq_d572s_97.awsui_variant-stacked_14iqq_d572s_109:not(#\9) {
+.awsui_root_14iqq_12v5q_97.awsui_variant-stacked_14iqq_12v5q_110 + .awsui_root_14iqq_12v5q_97.awsui_variant-stacked_14iqq_12v5q_110:not(#\9) {
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   box-shadow: var(--shadow-container-stacked-j8j87i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
 
-.awsui_header_14iqq_d572s_132:not(#\9) {
+.awsui_header_14iqq_12v5q_133:not(#\9) {
+  flex: 0 0 auto;
   background-color: var(--color-background-container-header-g9rg0j, #fafafa);
   border-top-left-radius: var(--border-radius-container-1aveko, 0px);
   border-top-right-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_header-sticky-disabled_14iqq_d572s_137:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_12v5q_139:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_d572s_141:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_12v5q_143:not(#\9) {
   top: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_d572s_147:not(#\9) {
+.awsui_header-stuck_14iqq_12v5q_149:not(#\9) {
   box-shadow: var(--shadow-sticky-embedded-5acv0s, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
   border: 0;
   border-radius: 0;
 }
-.awsui_header-dynamic-height_14iqq_d572s_152.awsui_header-stuck_14iqq_d572s_147:not(#\9) {
+.awsui_header-dynamic-height_14iqq_12v5q_154.awsui_header-stuck_14iqq_12v5q_149:not(#\9) {
   margin-bottom: calc(var(--font-heading-xl-line-height-qeciux, 36px) - var(--font-heading-l-line-height-oujdab, 22px));
 }
-.awsui_header_14iqq_d572s_132:not(#\9):not(:empty) {
+.awsui_header_14iqq_12v5q_133:not(#\9):not(:empty) {
   border-bottom: var(--border-container-sticky-width-pybmba, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
 }
-.awsui_header_14iqq_d572s_132.awsui_with-paddings_14iqq_d572s_158:not(#\9) {
+.awsui_header_14iqq_12v5q_133.awsui_with-paddings_14iqq_12v5q_160:not(#\9) {
   padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header_14iqq_d572s_132.awsui_with-hidden-content_14iqq_d572s_161:not(#\9) {
+.awsui_header_14iqq_12v5q_133.awsui_with-hidden-content_14iqq_12v5q_163:not(#\9) {
   border-bottom-left-radius: var(--border-radius-container-1aveko, 0px);
   border-bottom-right-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_header-variant-cards_14iqq_d572s_165:not(#\9) {
+.awsui_header-variant-cards_14iqq_12v5q_167:not(#\9) {
   box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
   border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   border-radius: var(--border-radius-container-1aveko, 0px);
   box-sizing: border-box;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-cards_14iqq_d572s_165:not(#\9) {
+  .awsui_header-variant-cards_14iqq_12v5q_167:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_header-variant-cards_14iqq_d572s_165:not(#\9):not(:empty) {
+.awsui_header-variant-cards_14iqq_12v5q_167:not(#\9):not(:empty) {
   border-bottom: 1px solid #d5dbdb;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
 @supports (--css-variable-support-check: #000) {
-  .awsui_header-variant-cards_14iqq_d572s_165:not(#\9):not(:empty) {
+  .awsui_header-variant-cards_14iqq_12v5q_167:not(#\9):not(:empty) {
     border-bottom: 0;
   }
 }
-.awsui_header-variant-cards_14iqq_d572s_165.awsui_header-stuck_14iqq_d572s_147:not(#\9) {
+.awsui_header-variant-cards_14iqq_12v5q_167.awsui_header-stuck_14iqq_12v5q_149:not(#\9) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_d572s_189.awsui_header-stuck_14iqq_d572s_147:not(#\9) {
+.awsui_header-variant-full-page_14iqq_12v5q_191.awsui_header-stuck_14iqq_12v5q_149:not(#\9) {
   box-shadow: var(--shadow-sticky-thyisb, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
 }
 
@@ -220,20 +222,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 The dynamic height dark header needs a background that will cover
 the default white background of the container component.
 */
-.awsui_dark-header_14iqq_d572s_197:not(#\9) {
+.awsui_dark-header_14iqq_12v5q_199:not(#\9) {
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
 }
 
-.awsui_content_14iqq_d572s_201.awsui_with-paddings_14iqq_d572s_158:not(#\9) {
+.awsui_content_14iqq_12v5q_203:not(#\9) {
+  flex: 1 0 auto;
+}
+.awsui_content_14iqq_12v5q_203.awsui_with-paddings_14iqq_12v5q_160:not(#\9) {
   padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header_14iqq_d572s_132 + .awsui_content_14iqq_d572s_201.awsui_with-paddings_14iqq_d572s_158:not(#\9) {
+.awsui_header_14iqq_12v5q_133 + .awsui_content_14iqq_12v5q_203.awsui_with-paddings_14iqq_12v5q_160:not(#\9) {
   padding-top: var(--space-container-content-top-u412x3, 16px);
 }
 
-.awsui_footer_14iqq_d572s_208.awsui_with-paddings_14iqq_d572s_158:not(#\9) {
+.awsui_footer_14iqq_12v5q_213:not(#\9) {
+  flex: 0 0 auto;
+}
+.awsui_footer_14iqq_12v5q_213.awsui_with-paddings_14iqq_12v5q_160:not(#\9) {
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_footer_14iqq_d572s_208.awsui_with-divider_14iqq_d572s_211:not(#\9) {
+.awsui_footer_14iqq_12v5q_213.awsui_with-divider_14iqq_12v5q_219:not(#\9) {
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }

package/lib/internal/template/container/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_d572s_97",
-  "variant-default": "awsui_variant-default_14iqq_d572s_109",
-  "variant-stacked": "awsui_variant-stacked_14iqq_d572s_109",
-  "header": "awsui_header_14iqq_d572s_132",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_d572s_137",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_d572s_141",
-  "header-stuck": "awsui_header-stuck_14iqq_d572s_147",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_d572s_152",
-  "with-paddings": "awsui_with-paddings_14iqq_d572s_158",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_d572s_161",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_d572s_165",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_d572s_189",
-  "dark-header": "awsui_dark-header_14iqq_d572s_197",
-  "content": "awsui_content_14iqq_d572s_201",
-  "footer": "awsui_footer_14iqq_d572s_208",
-  "with-divider": "awsui_with-divider_14iqq_d572s_211"
+  "root": "awsui_root_14iqq_12v5q_97",
+  "variant-default": "awsui_variant-default_14iqq_12v5q_110",
+  "variant-stacked": "awsui_variant-stacked_14iqq_12v5q_110",
+  "header": "awsui_header_14iqq_12v5q_133",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_12v5q_139",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_12v5q_143",
+  "header-stuck": "awsui_header-stuck_14iqq_12v5q_149",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_12v5q_154",
+  "with-paddings": "awsui_with-paddings_14iqq_12v5q_160",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_12v5q_163",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_12v5q_167",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_12v5q_191",
+  "dark-header": "awsui_dark-header_14iqq_12v5q_199",
+  "content": "awsui_content_14iqq_12v5q_203",
+  "footer": "awsui_footer_14iqq_12v5q_213",
+  "with-divider": "awsui_with-divider_14iqq_12v5q_219"
 };
   

package/lib/internal/template/internal/environment.js

@@ -1,5 +1,5 @@
 
-    export var PACKAGE_VERSION = '3.0.0 (7aef8d6)';
+    export var PACKAGE_VERSION = '3.0.0 (94858e8)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.67",
+  "version": "3.0.68",
   "files": [
     "lib",
     "package.json",