npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.267 → 3.0.269 - Mend

@cloudscape-design/components-themeable 3.0.267 → 3.0.269

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "7bf7790b6fc8a0d9a81ba5779df51f783da094f2"
+  "commit": "6f85b644a2990f0b0fd0395ce384f9a8e872158b"
 }

package/lib/internal/scss/table/body-cell/styles.scss CHANGED Viewed

@@ -5,6 +5,7 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../../internal/hooks/focus-visible' as focus-visible;
 $cell-vertical-padding: awsui.$space-scaled-xs;
 // Calculate padding to prevent a shift in content after selection due to the difference
@@ -134,6 +135,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
   &-selected:not(.body-cell-prev-selected) {
     padding-top: $cell-vertical-padding;
   }
+  &-success,
   &-editor {
     top: 0;
     right: 0;
@@ -201,10 +203,16 @@ $border-placeholder: awsui.$border-item-width solid transparent;
         & > .body-cell-editor {
           opacity: 1;
         }
+        & > .body-cell-success {
+          opacity: 0;
+        }
       }
       & > .body-cell-editor {
         opacity: 0;
       }
+      &.body-cell-has-success {
+        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+      }
       // We don't use our focus-visible polyfill here because it doesn't work properly with screen readers.
       // These edit buttons are special because they are visually hidden (opacity: 0), but exposed to assistive technology.
       // It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
@@ -261,3 +269,157 @@ $border-placeholder: awsui.$border-item-width solid transparent;
     }
   }
 }
+// Header cell styles
+.header-cell {
+  position: relative;
+  text-align: left;
+  box-sizing: border-box;
+  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  background: awsui.$color-background-table-header;
+  color: awsui.$color-text-column-header;
+  font-weight: awsui.$font-heading-s-weight;
+  @include styles.font-smoothing;
+  padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
+  &-sticky {
+    border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
+  }
+  &-stuck:not(.header-cell-variant-full-page) {
+    border-bottom-color: transparent;
+  }
+  &-variant-full-page.header-cell-hidden {
+    border-bottom-color: transparent;
+  }
+  &:last-child,
+  &.header-cell-sortable {
+    padding-right: awsui.$space-xs;
+  }
+  &:not(:last-child):before {
+    $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    min-height: awsui.$font-heading-xs-line-height;
+    max-height: calc(100% - #{$gap});
+    margin: auto;
+    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    box-sizing: border-box;
+  }
+  &-resizable:not(:last-child):before {
+    border-left-color: awsui.$color-border-divider-interactive-default;
+  }
+}
+.sorting-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: awsui.$space-xxs;
+  color: awsui.$color-text-column-sorting-icon;
+}
+.edit-icon {
+  margin-left: awsui.$space-xxs;
+  margin-top: awsui.$space-scaled-xxs;
+  color: inherit;
+}
+.header-cell-content {
+  position: relative;
+  padding: awsui.$space-scaled-xxs awsui.$space-s;
+  .header-cell-sortable > & {
+    padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
+  }
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
+  }
+  // stylelint-disable-next-line selector-combinator-disallowed-list
+  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
+    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
+  }
+  .header-cell-disabled.header-cell-sorted > & {
+    & > .sorting-icon {
+      color: awsui.$color-text-interactive-disabled;
+    }
+  }
+}
+.header-cell-sortable:not(.header-cell-disabled) {
+  & > .header-cell-content {
+    cursor: pointer;
+  }
+  & > .header-cell-content:hover,
+  &.header-cell-sorted > .header-cell-content {
+    color: awsui.$color-text-interactive-active;
+    & > .sorting-icon {
+      color: awsui.$color-text-interactive-active;
+    }
+  }
+}
+.header-cell-text {
+  line-height: awsui.$font-heading-xs-line-height;
+  padding-top: calc(#{awsui.$space-xxxs} / 2);
+  padding-bottom: calc(#{awsui.$space-xxxs} / 2);
+  &:not(.header-cell-text-wrap) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.header-cell-ascending,
+.header-cell-descending {
+  /* used in test-utils */
+}
+/*
+In Visual Refresh the first cell in the header should align
+with the left edge of the table as closely as possible. If the
+last header cell is sortable the sort icon should align with the
+settings icon in the pagination slot.
+*/
+.header-cell:not(.is-visual-refresh) {
+  &:first-child {
+    padding-left: awsui.$space-xs;
+  }
+}
+.header-cell.is-visual-refresh {
+  &:first-child:not(.has-striped-rows) {
+    padding-left: awsui.$space-xxxs;
+  }
+  /*
+  Striped rows requires additional left padding because the
+  shaded background makes the child content appear too close
+  to the table edge.
+  */
+  &:first-child.has-striped-rows {
+    padding-left: awsui.$space-xxs;
+  }
+  &:first-child > .header-cell-content {
+    padding-left: 0;
+  }
+  &:last-child.header-cell-sortable {
+    padding-right: awsui.$space-xxxs;
+  }
+}

package/lib/internal/template/attribute-editor/row.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"row.d.ts","sourceRoot":"lib/default/","sources":["attribute-editor/row.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;CAC/F;AAYD,eAAO,MAAM,GAAG,~~yLA0Ef~~,CAAC"}
1	+ {"version":3,"file":"row.d.ts","sourceRoot":"lib/default/","sources":["attribute-editor/row.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;CAC/F;AAYD,eAAO,MAAM,GAAG,yLA4Ef,CAAC"}

package/lib/internal/template/attribute-editor/row.js CHANGED Viewed

@@ -23,6 +23,7 @@ export const Row = React.memo(({ breakpoint, item, definition, i18nStrings = {},
         fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });
     }, [onRemoveButtonClick, index]);
     const firstControlId = useUniqueId('first-control-id-');
+    const removeButtonTextId = useUniqueId('remove-button-text-id-');
     return (React.createElement(InternalBox, { className: styles.row, margin: { bottom: 's' } },
         React.createElement("div", { role: "group", "aria-labelledby": `${firstControlId}-label ${firstControlId}` },
             React.createElement(InternalGrid, { __breakpoint: breakpoint, gridDefinition: removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION },
@@ -30,7 +31,8 @@ export const Row = React.memo(({ breakpoint, item, definition, i18nStrings = {},
                 removable && (React.createElement(ButtonContainer, { index: index, isNarrowViewport: isNarrowViewport, hasLabel: definition.some(row => row.label) },
                     React.createElement(InternalButton, { className: styles['remove-button'], formAction: "none", ref: ref => {
                             removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;
-                        }, onClick: handleRemoveClick }, removeButtonText))))),
+                        }, onClick: handleRemoveClick, __nativeAttributes: { 'aria-labelledby': `${removeButtonTextId} ${firstControlId}` } },
+                        React.createElement("span", { id: removeButtonTextId }, removeButtonText)))))),
         isNarrowViewport && React.createElement(Divider, null)));
 });
 const ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }) => (React.createElement("div", { className: clsx({

package/lib/internal/template/attribute-editor/row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"row.js","sourceRoot":"lib/default/","sources":["attribute-editor/row.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,oBAAgD,MAAM,2BAA2B,CAAC;AAGzF,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAI,CAAC;AAcxF,SAAS,MAAM,CACb,IAAO,EACP,SAAiB,EACjB,IAA2E;IAE3E,OAAO,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACnE,CAAC;AAED,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,yBAAyB,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAC7G,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAC3B,CAAK,EACH,UAAU,EACV,IAAI,EACJ,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,GACP,EAAE,EAAE;IAChB,MAAM,gBAAgB,GAAG,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,KAAK,CAAC;IAC1E,MAAM,cAAc,GAAG,CAAC,gBAAgB,CAAC;IAEzC,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,sBAAsB,CAAC,mBAAmB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjC,MAAM,cAAc,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;~~IAExD~~,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;QACzD,6BAAK,IAAI,EAAC,OAAO,qBAAkB,GAAG,cAAc,UAAU,cAAc,EAAE;YAC5E,oBAAC,YAAY,IACX,YAAY,EAAE,UAAU,EACxB,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,eAAe;gBAEvE,oBAAC,oBAAoB,IACnB,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,OAAO,EAAE,UAAU,CAAC,MAAM,EAC1B,YAAY,EAAE,UAAU,IAEvB,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC,CACjF,oBAAC,iBAAiB,IAChB,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,cAAc,CAAC,EACnD,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,EACzC,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,EAAE,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,EAAE,EACnE,WAAW,EAAE,cAAc,IAAI,KAAK,GAAG,CAAC,EACxC,SAAS,EAAE,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,IAErD,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CACX,CACrB,CAAC,CACmB;gBACtB,SAAS,IAAI,CACZ,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;oBAE3C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,UAAU,EAAC,MAAM,EACjB,GAAG,EAAE,GAAG,CAAC,EAAE;4BACT,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,SAAS,CAAC;wBAC7C,CAAC,EACD,OAAO,EAAE,iBAAiB,~~IAEzB~~,gBAAgB,~~CACF~~,CACD,CACnB,CACY,CACX;QACL,gBAAgB,IAAI,oBAAC,OAAO,OAAG,CACpB,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAmB,EAAE,EAAE,CAAC,CAC5F,6BACE,SAAS,EAAE,IAAI,CAAC;QACd,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,CAAC,gBAAgB,IAAI,KAAK,KAAK,CAAC,IAAI,QAAQ;QACnF,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,CAAC,gBAAgB,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,QAAQ;QACnF,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,gBAAgB;KAC1C,CAAC,IAED,QAAQ,CACL,CACP,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n breakpoint: ColumnLayoutBreakpoint \| null;\n item: T;\n definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n i18nStrings: AttributeEditorProps.I18nStrings \| undefined;\n index: number;\n removable: boolean;\n removeButtonText: string;\n removeButtonRefs: Array<ButtonProps.Ref \| undefined>;\n onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n}\n\nfunction render<T>(\n item: T,\n itemIndex: number,\n slot: AttributeEditorProps.FieldRenderable<T> \| React.ReactNode \| undefined\n) {\n return typeof slot === 'function' ? slot(item, itemIndex) : slot;\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n <T,>({\n breakpoint,\n item,\n definition,\n i18nStrings = {},\n index,\n removable,\n removeButtonText,\n removeButtonRefs,\n onRemoveButtonClick,\n }: RowProps<T>) => {\n const isNarrowViewport = breakpoint === 'default' \|\| breakpoint === 'xxs';\n const isWideViewport = !isNarrowViewport;\n\n const handleRemoveClick = useCallback(() => {\n fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n }, [onRemoveButtonClick, index]);\n\n const firstControlId = useUniqueId('first-control-id-');\n\n return (\n <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n <InternalGrid\n __breakpoint={breakpoint}\n gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n >\n <InternalColumnLayout\n className={styles['row-control']}\n columns={definition.length}\n __breakpoint={breakpoint}\n >\n {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n <InternalFormField\n key={defIndex}\n className={styles.field}\n label={label}\n info={info}\n constraintText={render(item, index, constraintText)}\n errorText={render(item, index, errorText)}\n stretch={true}\n i18nStrings={{ errorIconAriaLabel: i18nStrings.errorIconAriaLabel }}\n __hideLabel={isWideViewport && index > 0}\n controlId={defIndex === 0 ? firstControlId : undefined}\n >\n {render(item, index, control)}\n </InternalFormField>\n ))}\n </InternalColumnLayout>\n {removable && (\n <ButtonContainer\n index={index}\n isNarrowViewport={isNarrowViewport}\n hasLabel={definition.some(row => row.label)}\n >\n <InternalButton\n className={styles['remove-button']}\n formAction=\"none\"\n ref={ref => {\n removeButtonRefs[index] = ref ?? undefined;\n }}\n onClick={handleRemoveClick}\n >\n {removeButtonText}\n </InternalButton>\n </ButtonContainer>\n )}\n </InternalGrid>\n </div>\n {isNarrowViewport && <Divider />}\n </InternalBox>\n );\n }\n);\n\ninterface ButtonContainer {\n index: number;\n children: React.ReactNode;\n isNarrowViewport: boolean;\n hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n <div\n className={clsx({\n [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n [styles['right-align']]: isNarrowViewport,\n })}\n >\n {children}\n </div>\n);\n"]}
1	+ {"version":3,"file":"row.js","sourceRoot":"lib/default/","sources":["attribute-editor/row.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 InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n breakpoint: ColumnLayoutBreakpoint \| null;\n item: T;\n definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n i18nStrings: AttributeEditorProps.I18nStrings \| undefined;\n index: number;\n removable: boolean;\n removeButtonText: string;\n removeButtonRefs: Array<ButtonProps.Ref \| undefined>;\n onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n}\n\nfunction render<T>(\n item: T,\n itemIndex: number,\n slot: AttributeEditorProps.FieldRenderable<T> \| React.ReactNode \| undefined\n) {\n return typeof slot === 'function' ? slot(item, itemIndex) : slot;\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n <T,>({\n breakpoint,\n item,\n definition,\n i18nStrings = {},\n index,\n removable,\n removeButtonText,\n removeButtonRefs,\n onRemoveButtonClick,\n }: RowProps<T>) => {\n const isNarrowViewport = breakpoint === 'default' \|\| breakpoint === 'xxs';\n const isWideViewport = !isNarrowViewport;\n\n const handleRemoveClick = useCallback(() => {\n fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n }, [onRemoveButtonClick, index]);\n\n const firstControlId = useUniqueId('first-control-id-');\n const removeButtonTextId = useUniqueId('remove-button-text-id-');\n\n return (\n <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n <InternalGrid\n __breakpoint={breakpoint}\n gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n >\n <InternalColumnLayout\n className={styles['row-control']}\n columns={definition.length}\n __breakpoint={breakpoint}\n >\n {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n <InternalFormField\n key={defIndex}\n className={styles.field}\n label={label}\n info={info}\n constraintText={render(item, index, constraintText)}\n errorText={render(item, index, errorText)}\n stretch={true}\n i18nStrings={{ errorIconAriaLabel: i18nStrings.errorIconAriaLabel }}\n __hideLabel={isWideViewport && index > 0}\n controlId={defIndex === 0 ? firstControlId : undefined}\n >\n {render(item, index, control)}\n </InternalFormField>\n ))}\n </InternalColumnLayout>\n {removable && (\n <ButtonContainer\n index={index}\n isNarrowViewport={isNarrowViewport}\n hasLabel={definition.some(row => row.label)}\n >\n <InternalButton\n className={styles['remove-button']}\n formAction=\"none\"\n ref={ref => {\n removeButtonRefs[index] = ref ?? undefined;\n }}\n onClick={handleRemoveClick}\n __nativeAttributes={{ 'aria-labelledby': `${removeButtonTextId} ${firstControlId}` }}\n >\n <span id={removeButtonTextId}>{removeButtonText}</span>\n </InternalButton>\n </ButtonContainer>\n )}\n </InternalGrid>\n </div>\n {isNarrowViewport && <Divider />}\n </InternalBox>\n );\n }\n);\n\ninterface ButtonContainer {\n index: number;\n children: React.ReactNode;\n isNarrowViewport: boolean;\n hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n <div\n className={clsx({\n [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n [styles['right-align']]: isNarrowViewport,\n })}\n >\n {children}\n </div>\n);\n"]}

package/lib/internal/template/cards/styles.css.js CHANGED Viewed

@@ -1,42 +1,42 @@
     import './styles.scoped.css';
     export default {
-  "card-inner": "awsui_card-inner_p8a6i_17pis_97",
-  "root": "awsui_root_p8a6i_17pis_133",
-  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_17pis_153",
-  "header-refresh": "awsui_header-refresh_p8a6i_17pis_153",
-  "list": "awsui_list_p8a6i_17pis_196",
-  "list-grid-1": "awsui_list-grid-1_p8a6i_17pis_204",
-  "card": "awsui_card_p8a6i_17pis_97",
-  "list-grid-2": "awsui_list-grid-2_p8a6i_17pis_207",
-  "list-grid-3": "awsui_list-grid-3_p8a6i_17pis_210",
-  "list-grid-4": "awsui_list-grid-4_p8a6i_17pis_213",
-  "list-grid-5": "awsui_list-grid-5_p8a6i_17pis_216",
-  "list-grid-6": "awsui_list-grid-6_p8a6i_17pis_219",
-  "list-grid-7": "awsui_list-grid-7_p8a6i_17pis_222",
-  "list-grid-8": "awsui_list-grid-8_p8a6i_17pis_225",
-  "list-grid-9": "awsui_list-grid-9_p8a6i_17pis_228",
-  "list-grid-10": "awsui_list-grid-10_p8a6i_17pis_231",
-  "list-grid-11": "awsui_list-grid-11_p8a6i_17pis_234",
-  "list-grid-12": "awsui_list-grid-12_p8a6i_17pis_237",
-  "list-grid-13": "awsui_list-grid-13_p8a6i_17pis_240",
-  "list-grid-14": "awsui_list-grid-14_p8a6i_17pis_243",
-  "list-grid-15": "awsui_list-grid-15_p8a6i_17pis_246",
-  "list-grid-16": "awsui_list-grid-16_p8a6i_17pis_249",
-  "list-grid-17": "awsui_list-grid-17_p8a6i_17pis_252",
-  "list-grid-18": "awsui_list-grid-18_p8a6i_17pis_255",
-  "list-grid-19": "awsui_list-grid-19_p8a6i_17pis_258",
-  "list-grid-20": "awsui_list-grid-20_p8a6i_17pis_261",
-  "selection-control": "awsui_selection-control_p8a6i_17pis_265",
-  "loading": "awsui_loading_p8a6i_17pis_274",
-  "empty": "awsui_empty_p8a6i_17pis_275",
-  "has-header": "awsui_has-header_p8a6i_17pis_282",
-  "card-header": "awsui_card-header_p8a6i_17pis_343",
-  "card-header-inner": "awsui_card-header-inner_p8a6i_17pis_351",
-  "card-selectable": "awsui_card-selectable_p8a6i_17pis_355",
-  "card-selected": "awsui_card-selected_p8a6i_17pis_358",
-  "section": "awsui_section_p8a6i_17pis_365",
-  "section-header": "awsui_section-header_p8a6i_17pis_371",
-  "section-content": "awsui_section-content_p8a6i_17pis_377"
+  "card-inner": "awsui_card-inner_p8a6i_be694_97",
+  "root": "awsui_root_p8a6i_be694_133",
+  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_be694_153",
+  "header-refresh": "awsui_header-refresh_p8a6i_be694_153",
+  "list": "awsui_list_p8a6i_be694_196",
+  "list-grid-1": "awsui_list-grid-1_p8a6i_be694_204",
+  "card": "awsui_card_p8a6i_be694_97",
+  "list-grid-2": "awsui_list-grid-2_p8a6i_be694_207",
+  "list-grid-3": "awsui_list-grid-3_p8a6i_be694_210",
+  "list-grid-4": "awsui_list-grid-4_p8a6i_be694_213",
+  "list-grid-5": "awsui_list-grid-5_p8a6i_be694_216",
+  "list-grid-6": "awsui_list-grid-6_p8a6i_be694_219",
+  "list-grid-7": "awsui_list-grid-7_p8a6i_be694_222",
+  "list-grid-8": "awsui_list-grid-8_p8a6i_be694_225",
+  "list-grid-9": "awsui_list-grid-9_p8a6i_be694_228",
+  "list-grid-10": "awsui_list-grid-10_p8a6i_be694_231",
+  "list-grid-11": "awsui_list-grid-11_p8a6i_be694_234",
+  "list-grid-12": "awsui_list-grid-12_p8a6i_be694_237",
+  "list-grid-13": "awsui_list-grid-13_p8a6i_be694_240",
+  "list-grid-14": "awsui_list-grid-14_p8a6i_be694_243",
+  "list-grid-15": "awsui_list-grid-15_p8a6i_be694_246",
+  "list-grid-16": "awsui_list-grid-16_p8a6i_be694_249",
+  "list-grid-17": "awsui_list-grid-17_p8a6i_be694_252",
+  "list-grid-18": "awsui_list-grid-18_p8a6i_be694_255",
+  "list-grid-19": "awsui_list-grid-19_p8a6i_be694_258",
+  "list-grid-20": "awsui_list-grid-20_p8a6i_be694_261",
+  "selection-control": "awsui_selection-control_p8a6i_be694_265",
+  "loading": "awsui_loading_p8a6i_be694_274",
+  "empty": "awsui_empty_p8a6i_be694_275",
+  "has-header": "awsui_has-header_p8a6i_be694_282",
+  "card-header": "awsui_card-header_p8a6i_be694_343",
+  "card-header-inner": "awsui_card-header-inner_p8a6i_be694_351",
+  "card-selectable": "awsui_card-selectable_p8a6i_be694_355",
+  "card-selected": "awsui_card-selected_p8a6i_be694_358",
+  "section": "awsui_section_p8a6i_be694_365",
+  "section-header": "awsui_section-header_p8a6i_be694_371",
+  "section-content": "awsui_section-content_p8a6i_be694_377"
 };

package/lib/internal/template/cards/styles.scoped.css CHANGED Viewed

@@ -94,34 +94,34 @@ 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_card-inner_p8a6i_17pis_97:not(#\9) {
+.awsui_card-inner_p8a6i_be694_97:not(#\9) {
   transition-property: background-color;
   transition-duration: var(--motion-duration-transition-show-paced-ai4wlf, 180ms);
   transition-timing-function: var(--motion-easing-transition-show-paced-bg1hyg, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_card-inner_p8a6i_17pis_97:not(#\9) {
+  .awsui_card-inner_p8a6i_be694_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_card-inner_p8a6i_17pis_97:not(#\9), .awsui-mode-entering .awsui_card-inner_p8a6i_17pis_97:not(#\9) {
+.awsui-motion-disabled .awsui_card-inner_p8a6i_be694_97:not(#\9), .awsui-mode-entering .awsui_card-inner_p8a6i_be694_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_card-inner_p8a6i_17pis_97:not(#\9)::before {
+.awsui_card-inner_p8a6i_be694_97:not(#\9)::before {
   transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
   transition-duration: var(--motion-duration-transition-show-paced-ai4wlf, 180ms);
   transition-timing-function: var(--motion-easing-transition-show-paced-bg1hyg, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_card-inner_p8a6i_17pis_97:not(#\9)::before {
+  .awsui_card-inner_p8a6i_be694_97:not(#\9)::before {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_card-inner_p8a6i_17pis_97:not(#\9)::before, .awsui-mode-entering .awsui_card-inner_p8a6i_17pis_97:not(#\9)::before {
+.awsui-motion-disabled .awsui_card-inner_p8a6i_be694_97:not(#\9)::before, .awsui-mode-entering .awsui_card-inner_p8a6i_be694_97:not(#\9)::before {
   animation: none;
   transition: none;
 }
@@ -130,7 +130,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_p8a6i_17pis_133:not(#\9) {
+.awsui_root_p8a6i_be694_133:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -176,7 +176,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
-.awsui_header-variant-full-page_p8a6i_17pis_153.awsui_header-refresh_p8a6i_17pis_153:not(#\9) {
+.awsui_header-variant-full-page_p8a6i_be694_153.awsui_header-refresh_p8a6i_be694_153:not(#\9) {
   border-radius: var(--border-radius-container-1aveko, 0px);
   box-sizing: border-box;
   padding-top: var(--space-container-header-vertical-0bd19u, 12px);
@@ -184,7 +184,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-right: 0;
   padding-bottom: calc(var(--space-container-header-vertical-0bd19u, 12px) + var(--space-scaled-xxs-95dhkm, 4px));
 }
-.awsui_header-variant-full-page_p8a6i_17pis_153.awsui_header-refresh_p8a6i_17pis_153:not(#\9)::before {
+.awsui_header-variant-full-page_p8a6i_be694_153.awsui_header-refresh_p8a6i_be694_153:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -199,7 +199,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-1aveko, 0px);
   z-index: 1;
 }
-.awsui_header-variant-full-page_p8a6i_17pis_153.awsui_header-refresh_p8a6i_17pis_153:not(#\9)::after {
+.awsui_header-variant-full-page_p8a6i_be694_153.awsui_header-refresh_p8a6i_be694_153:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -214,12 +214,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-full-page_p8a6i_17pis_153.awsui_header-refresh_p8a6i_17pis_153:not(#\9) {
+  .awsui_header-variant-full-page_p8a6i_be694_153.awsui_header-refresh_p8a6i_be694_153:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_list_p8a6i_17pis_196:not(#\9) {
+.awsui_list_p8a6i_be694_196:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
@@ -227,68 +227,68 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   list-style: none;
   margin: 0 0 0 calc(var(--space-grid-gutter-0subky, 20px) * -1);
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-1_p8a6i_17pis_204 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-1_p8a6i_be694_204 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 100%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-2_p8a6i_17pis_207 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-2_p8a6i_be694_207 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 50%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-3_p8a6i_17pis_210 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-3_p8a6i_be694_210 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 33.3333333333%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-4_p8a6i_17pis_213 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-4_p8a6i_be694_213 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 25%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-5_p8a6i_17pis_216 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-5_p8a6i_be694_216 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 20%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-6_p8a6i_17pis_219 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-6_p8a6i_be694_219 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 16.6666666667%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-7_p8a6i_17pis_222 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-7_p8a6i_be694_222 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 14.2857142857%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-8_p8a6i_17pis_225 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-8_p8a6i_be694_225 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 12.5%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-9_p8a6i_17pis_228 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-9_p8a6i_be694_228 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 11.1111111111%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-10_p8a6i_17pis_231 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-10_p8a6i_be694_231 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 10%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-11_p8a6i_17pis_234 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-11_p8a6i_be694_234 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 9.0909090909%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-12_p8a6i_17pis_237 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-12_p8a6i_be694_237 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 8.3333333333%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-13_p8a6i_17pis_240 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-13_p8a6i_be694_240 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 7.6923076923%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-14_p8a6i_17pis_243 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-14_p8a6i_be694_243 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 7.1428571429%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-15_p8a6i_17pis_246 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-15_p8a6i_be694_246 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 6.6666666667%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-16_p8a6i_17pis_249 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-16_p8a6i_be694_249 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 6.25%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-17_p8a6i_17pis_252 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-17_p8a6i_be694_252 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 5.8823529412%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-18_p8a6i_17pis_255 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-18_p8a6i_be694_255 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 5.5555555556%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-19_p8a6i_17pis_258 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-19_p8a6i_be694_258 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 5.2631578947%;
 }
-.awsui_list_p8a6i_17pis_196.awsui_list-grid-20_p8a6i_17pis_261 > .awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_list_p8a6i_be694_196.awsui_list-grid-20_p8a6i_be694_261 > .awsui_card_p8a6i_be694_97:not(#\9) {
   width: 5%;
 }
-.awsui_selection-control_p8a6i_17pis_265:not(#\9) {
+.awsui_selection-control_p8a6i_be694_265:not(#\9) {
   position: absolute;
   box-sizing: border-box;
   width: calc(var(--size-control-eyly4k, 14px) + (2 * var(--space-card-horizontal-di7llb, 20px)));
@@ -297,19 +297,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding: var(--space-scaled-l-t03y3z, 20px) var(--space-card-horizontal-di7llb, 20px);
 }
-.awsui_loading_p8a6i_17pis_274:not(#\9),
-.awsui_empty_p8a6i_17pis_275:not(#\9) {
+.awsui_loading_p8a6i_be694_274:not(#\9),
+.awsui_empty_p8a6i_be694_275:not(#\9) {
   overflow: hidden;
   text-align: center;
   color: var(--color-text-empty-izapdt, #687078);
   margin-bottom: var(--space-scaled-l-t03y3z, 20px);
 }
-.awsui_has-header_p8a6i_17pis_282:not(#\9) {
+.awsui_has-header_p8a6i_be694_282:not(#\9) {
   margin-top: var(--space-grid-gutter-0subky, 20px);
 }
-.awsui_card_p8a6i_17pis_97:not(#\9) {
+.awsui_card_p8a6i_be694_97:not(#\9) {
   display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -317,7 +317,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding: 0;
   list-style: none;
 }
-.awsui_card-inner_p8a6i_17pis_97:not(#\9) {
+.awsui_card-inner_p8a6i_be694_97:not(#\9) {
   position: relative;
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
   margin: 0 0 var(--space-grid-gutter-0subky, 20px) var(--space-grid-gutter-0subky, 20px);
@@ -328,11 +328,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-width: 0;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_card-inner_p8a6i_17pis_97:not(#\9) {
+  .awsui_card-inner_p8a6i_be694_97:not(#\9) {
     padding: calc(var(--space-scaled-l-t03y3z, 20px) - var(--border-item-width-yvnixs, 1px)) calc(var(--space-card-horizontal-di7llb, 20px) - var(--border-item-width-yvnixs, 1px)) calc(var(--space-scaled-l-t03y3z, 20px) - var(--border-item-width-yvnixs, 1px));
   }
 }
-.awsui_card-inner_p8a6i_17pis_97:not(#\9)::before {
+.awsui_card-inner_p8a6i_be694_97:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -347,7 +347,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-1aveko, 0px);
   z-index: 1;
 }
-.awsui_card-inner_p8a6i_17pis_97:not(#\9)::after {
+.awsui_card-inner_p8a6i_be694_97:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -362,11 +362,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_card-inner_p8a6i_17pis_97:not(#\9) {
+  .awsui_card-inner_p8a6i_be694_97:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_card-header_p8a6i_17pis_343:not(#\9) {
+.awsui_card-header_p8a6i_be694_343:not(#\9) {
   font-size: var(--font-heading-m-size-f8kmgg, 18px);
   line-height: var(--font-heading-m-line-height-wqj6lz, 22px);
   letter-spacing: var(--font-heading-m-letter-spacing-vsl82f, normal);
@@ -374,36 +374,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-aglr0j, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-f5m4xg, auto);
 }
-.awsui_card-header-inner_p8a6i_17pis_351:not(#\9) {
+.awsui_card-header-inner_p8a6i_be694_351:not(#\9) {
   width: 100%;
   display: inline-block;
 }
-.awsui_card-selectable_p8a6i_17pis_355 > .awsui_card-inner_p8a6i_17pis_97 > .awsui_card-header_p8a6i_17pis_343:not(#\9) {
+.awsui_card-selectable_p8a6i_be694_355 > .awsui_card-inner_p8a6i_be694_97 > .awsui_card-header_p8a6i_be694_343:not(#\9) {
   width: 90%;
 }
-.awsui_card-selected_p8a6i_17pis_358 > .awsui_card-inner_p8a6i_17pis_97:not(#\9) {
+.awsui_card-selected_p8a6i_be694_358 > .awsui_card-inner_p8a6i_be694_97:not(#\9) {
   background-color: var(--color-background-item-selected-fva7ca, #f1faff);
 }
-.awsui_card-selected_p8a6i_17pis_358 > .awsui_card-inner_p8a6i_17pis_97:not(#\9)::before {
-  border: var(--border-item-width-yvnixs, 1px) solid var(--color-border-item-selected-pr9yuf, #00a1c9);
+.awsui_card-selected_p8a6i_be694_358 > .awsui_card-inner_p8a6i_be694_97:not(#\9)::before {
+  border: var(--border-item-width-yvnixs, 1px) solid var(--color-border-item-selected-592lau, #0073bb);
 }
-.awsui_section_p8a6i_17pis_365:not(#\9) {
+.awsui_section_p8a6i_be694_365:not(#\9) {
   display: inline-block;
   box-sizing: border-box;
   padding: var(--space-xs-rsr2qu, 8px) 0 var(--space-scaled-xs-6859qs, 8px) 0;
   vertical-align: top;
 }
-.awsui_section-header_p8a6i_17pis_371:not(#\9) {
+.awsui_section-header_p8a6i_be694_371:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: var(--font-display-label-weight-tjy9e4, 400);
   color: var(--color-text-label-kjjshz, #545b64);
 }
-.awsui_section-content_p8a6i_17pis_377:not(#\9) {
+.awsui_section-content_p8a6i_be694_377:not(#\9) {
   /* used in test-utils */
 }
-.awsui_section_p8a6i_17pis_365:not(#\9):last-child {
+.awsui_section_p8a6i_be694_365:not(#\9):last-child {
   padding: var(--space-xs-rsr2qu, 8px) 0 0 0;
 }