@cloudscape-design/components 3.0.149 → 3.0.151

package/table/thead.js

@@ -9,13 +9,15 @@ import { fireNonCancelableEvent } from '../internal/events';
 import { getColumnKey } from './utils';
 import { TableHeaderCell } from './header-cell';
 import { useColumnWidths } from './use-column-widths';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import styles from './styles.css.js';
 import headerCellStyles from './header-cell/styles.css.js';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
 var Thead = React.forwardRef(function (_a, outerRef) {
-    var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, variant = _a.variant, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onCellFocus = _a.onCellFocus, onCellBlur = _a.onCellBlur, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, singleSelectionHeaderAriaLabel = _a.singleSelectionHeaderAriaLabel, _b = _a.showFocusRing, showFocusRing = _b === void 0 ? null : _b, _c = _a.sticky, sticky = _c === void 0 ? false : _c, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.stuck, stuck = _e === void 0 ? false : _e;
-    var headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles["header-cell-variant-".concat(variant)], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck']);
-    var selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);
+    var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, variant = _a.variant, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onCellFocus = _a.onCellFocus, onCellBlur = _a.onCellBlur, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, singleSelectionHeaderAriaLabel = _a.singleSelectionHeaderAriaLabel, stripedRows = _a.stripedRows, _b = _a.showFocusRing, showFocusRing = _b === void 0 ? null : _b, _c = _a.sticky, sticky = _c === void 0 ? false : _c, _d = _a.hidden, hidden = _d === void 0 ? false : _d, _e = _a.stuck, stuck = _e === void 0 ? false : _e;
+    var isVisualRefresh = useVisualRefresh();
+    var headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles["header-cell-variant-".concat(variant)], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
+    var selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header'], isVisualRefresh && styles['is-visual-refresh']);
     var _f = useColumnWidths(), columnWidths = _f.columnWidths, totalWidth = _f.totalWidth, updateColumn = _f.updateColumn;
     return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
         React.createElement("tr", __assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }),

package/table/thead.js.map

@@ -1 +1 @@
-{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAA2C,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AAyBxE,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,UACE,EAqBa,EACb,QAAwC;QArBtC,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,8BAA8B,oCAAA,EAC9B,qBAAoB,EAApB,aAAa,mBAAG,IAAI,KAAA,EACpB,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA;IAIf,IAAM,eAAe,GAAG,IAAI,CAC1B,gBAAgB,CAAC,aAAa,CAAC,EAC/B,gBAAgB,CAAC,8BAAuB,OAAO,CAAE,CAAC,EAClD,MAAM,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,EAChD,KAAK,IAAI,gBAAgB,CAAC,mBAAmB,CAAC,CAC/C,CAAC;IACF,IAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAC3F,IAAA,KAA6C,eAAe,EAAE,EAA5D,YAAY,kBAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAsB,CAAC;IAErE,OAAO,CACL,+BAAO,SAAS,EAAE,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;QACvD,uCAAQ,YAAY,CAAC,GAAG,IAAE,GAAG,EAAE,QAAQ,mBAAiB,CAAC;YACtD,aAAa,KAAK,OAAO,IAAI,CAC5B,4BACE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,EAAE,MAAM,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,EACtG,KAAK,EAAC,KAAK;gBAEX,oBAAC,gBAAgB,aACf,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,WAAY,CAAC,KAAK,CAAC,MAAqB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAjD,CAAiD,IACnE,cAAc,EACd,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpC,CACC,CACN;YACA,aAAa,KAAK,QAAQ,IAAI,CAC7B,4BACE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,EAAE,MAAM,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,EACtG,KAAK,EAAC,KAAK;gBAEX,oBAAC,gBAAgB,QAAE,8BAA8B,CAAoB,CAClE,CACN;YACA,iBAAiB,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,QAAQ;gBACtC,IAAI,aAAa,CAAC;gBAClB,IAAI,gBAAgB,EAAE;oBACpB,IAAI,YAAY,EAAE;wBAChB,kCAAkC;wBAClC,aAAa,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;qBAC9D;oBACD,IAAI,QAAQ,KAAK,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,IAAI,cAAc,GAAG,UAAU,EAAE;wBAC9F,wDAAwD;wBACxD,aAAa,GAAG,MAAM,CAAC;qBACxB;iBACF;gBACD,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,EACnC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;wBACL,KAAK,EAAE,aAAa,IAAI,MAAM,CAAC,KAAK;wBACpC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;wBAC9C,QAAQ,EAAE,gBAAgB,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;qBACnE,EACD,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,aAAa,EAAE,QAAQ,KAAK,aAAa,EACzC,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,aAAa,EAClC,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAM,OAAA,cAAc,CAAC,YAAY,CAAC,EAA5B,CAA4B,EAClD,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,UAAA,MAAM,IAAI,OAAA,sBAAsB,CAAC,eAAe,EAAE,MAAM,CAAC,EAA/C,CAA+C,EAClE,OAAO,EAAE,cAAM,OAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,QAAQ,CAAC,EAAvB,CAAuB,EACtC,MAAM,EAAE,UAAU,GAClB,CACH,CAAC;YACJ,CAAC,CAAC,CACC,CACC,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onCellFocus?: (colIndex: number) => void;\n  onCellBlur?: () => void;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  showFocusRing?: number | null;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n  singleSelectionHeaderAriaLabel?: string;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onCellFocus,\n      onCellBlur,\n      onSortingChange,\n      onResizeFinish,\n      singleSelectionHeaderAriaLabel,\n      showFocusRing = null,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck']\n    );\n    const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1}>\n          {selectionType === 'multi' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <SelectionControl\n                onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n                {...selectAllProps}\n                {...(hidden ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                showFocusRing={colIndex === showFocusRing}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                hidden={hidden}\n                colIndex={colIndex}\n                updateColumn={updateColumn}\n                onResizeFinish={() => onResizeFinish(columnWidths)}\n                resizableColumns={resizableColumns}\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                onFocus={() => onCellFocus?.(colIndex)}\n                onBlur={onCellBlur}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}
+{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 clsx from 'clsx';\nimport React from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n  containerWidth: number | null;\n  selectionType: TableProps.SelectionType | undefined;\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  sortingColumn: TableProps.SortingColumn<any> | undefined;\n  sortingDescending: boolean | undefined;\n  sortingDisabled: boolean | undefined;\n  variant: TableProps.Variant;\n  wrapLines: boolean | undefined;\n  resizableColumns: boolean | undefined;\n  selectAllProps: SelectionControlProps;\n  onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n  onCellFocus?: (colIndex: number) => void;\n  onCellBlur?: () => void;\n  onResizeFinish: (newWidths: Record<string, number>) => void;\n  showFocusRing?: number | null;\n  onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n  sticky?: boolean;\n  hidden?: boolean;\n  stuck?: boolean;\n  singleSelectionHeaderAriaLabel?: string;\n  stripedRows?: boolean;\n}\n\nconst Thead = React.forwardRef(\n  (\n    {\n      containerWidth,\n      selectionType,\n      selectAllProps,\n      columnDefinitions,\n      sortingColumn,\n      sortingDisabled,\n      sortingDescending,\n      resizableColumns,\n      variant,\n      wrapLines,\n      onFocusMove,\n      onCellFocus,\n      onCellBlur,\n      onSortingChange,\n      onResizeFinish,\n      singleSelectionHeaderAriaLabel,\n      stripedRows,\n      showFocusRing = null,\n      sticky = false,\n      hidden = false,\n      stuck = false,\n    }: TheadProps,\n    outerRef: React.Ref<HTMLTableRowElement>\n  ) => {\n    const isVisualRefresh = useVisualRefresh();\n\n    const headerCellClass = clsx(\n      headerCellStyles['header-cell'],\n      headerCellStyles[`header-cell-variant-${variant}`],\n      sticky && headerCellStyles['header-cell-sticky'],\n      stuck && headerCellStyles['header-cell-stuck'],\n      stripedRows && headerCellStyles['has-striped-rows'],\n      isVisualRefresh && headerCellStyles['is-visual-refresh']\n    );\n\n    const selectionCellClass = clsx(\n      styles['selection-control'],\n      styles['selection-control-header'],\n      isVisualRefresh && styles['is-visual-refresh']\n    );\n\n    const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n    return (\n      <thead className={clsx(!hidden && styles['thead-active'])}>\n        <tr {...focusMarkers.all} ref={outerRef} aria-rowindex={1}>\n          {selectionType === 'multi' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <SelectionControl\n                onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n                {...selectAllProps}\n                {...(hidden ? { tabIndex: -1 } : {})}\n              />\n            </th>\n          )}\n          {selectionType === 'single' && (\n            <th\n              className={clsx(headerCellClass, selectionCellClass, hidden && headerCellStyles['header-cell-hidden'])}\n              scope=\"col\"\n            >\n              <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n            </th>\n          )}\n          {columnDefinitions.map((column, colIndex) => {\n            let widthOverride;\n            if (resizableColumns) {\n              if (columnWidths) {\n                // use stateful value if available\n                widthOverride = columnWidths[getColumnKey(column, colIndex)];\n              }\n              if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n                // let the last column grow and fill the container width\n                widthOverride = 'auto';\n              }\n            }\n            return (\n              <TableHeaderCell\n                key={getColumnKey(column, colIndex)}\n                className={headerCellClass}\n                style={{\n                  width: widthOverride || column.width,\n                  minWidth: sticky ? undefined : column.minWidth,\n                  maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n                }}\n                tabIndex={sticky ? -1 : 0}\n                showFocusRing={colIndex === showFocusRing}\n                column={column}\n                activeSortingColumn={sortingColumn}\n                sortingDescending={sortingDescending}\n                sortingDisabled={sortingDisabled}\n                wrapLines={wrapLines}\n                hidden={hidden}\n                colIndex={colIndex}\n                updateColumn={updateColumn}\n                onResizeFinish={() => onResizeFinish(columnWidths)}\n                resizableColumns={resizableColumns}\n                onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n                onFocus={() => onCellFocus?.(colIndex)}\n                onBlur={onCellBlur}\n              />\n            );\n          })}\n        </tr>\n      </thead>\n    );\n  }\n);\n\nexport default Thead;\n"]}

package/table/use-sticky-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAe,MAAM,OAAO,CAAC;AAkBhE,eAAO,MAAM,eAAe,aAChB,UAAU,WAAW,CAAC,YACtB,UAAU,WAAW,CAAC,qBACb,UAAU,WAAW,CAAC,qBACtB,UAAU,WAAW,CAAC,mBACxB,UAAU,WAAW,CAAC;4BAgDR,WAAW,GAAG,IAAI;;CAMlD,CAAC"}
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAe,MAAM,OAAO,CAAC;AAkBhE,eAAO,MAAM,eAAe,aAChB,UAAU,WAAW,CAAC,YACtB,UAAU,WAAW,CAAC,qBACb,UAAU,WAAW,CAAC,qBACtB,UAAU,WAAW,CAAC,mBACxB,UAAU,WAAW,CAAC;4BAmCR,WAAW,GAAG,IAAI;;CAMlD,CAAC"}

package/table/use-sticky-header.js

@@ -35,19 +35,6 @@ export var useStickyHeader = function (tableRef, theadRef, secondaryTheadRef, se
     }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);
     useLayoutEffect(function () {
         syncColumnHeaderWidths();
-        // Content is not going to be layed out until the next frame in angular,
-        // so we need to sync the column headers again.
-        setTimeout(function () { return syncColumnHeaderWidths(); }, 0);
-        var secondaryTable = secondaryTableRef.current;
-        var primaryTable = tableWrapperRef.current;
-        return function () {
-            if (secondaryTable) {
-                secondaryTable.style.width = '';
-            }
-            if (primaryTable) {
-                primaryTable.style.marginTop = '';
-            }
-        };
     });
     useResizeObserver(theadRef, syncColumnHeaderWidths);
     var scrollToTop = function () {

package/table/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"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 { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n  const fromCells = Array.prototype.slice.apply(from.children);\n  const toCells = Array.prototype.slice.apply(to.children);\n  for (let i = 0; i < fromCells.length; i++) {\n    let width = fromCells[i].style.width;\n    // use auto if it is set by resizable columns or real size otherwise\n    if (width !== 'auto') {\n      width = `${fromCells[i].offsetWidth}px`;\n    }\n    toCells[i].style.width = width;\n  }\n}\n\nexport const useStickyHeader = (\n  tableRef: RefObject<HTMLElement>,\n  theadRef: RefObject<HTMLElement>,\n  secondaryTheadRef: RefObject<HTMLElement>,\n  secondaryTableRef: RefObject<HTMLElement>,\n  tableWrapperRef: RefObject<HTMLElement>\n) => {\n  const isMobile = useMobile();\n  // Sync the sizes of the column header copies in the sticky header with the originals\n  const syncColumnHeaderWidths = useCallback(() => {\n    if (\n      tableRef.current &&\n      theadRef.current &&\n      secondaryTheadRef.current &&\n      secondaryTableRef.current &&\n      tableWrapperRef.current\n    ) {\n      syncSizes(theadRef.current, secondaryTheadRef.current);\n\n      // Using the tableRef offsetWidth instead of the theadRef because in VR\n      // the tableRef adds extra padding to the table and by default the theadRef will have a width\n      // without the padding and will make the sticky header width incorrect.\n      secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n      tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n    }\n  }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n  useLayoutEffect(() => {\n    syncColumnHeaderWidths();\n    // Content is not going to be layed out until the next frame in angular,\n    // so we need to sync the column headers again.\n    setTimeout(() => syncColumnHeaderWidths(), 0);\n    const secondaryTable = secondaryTableRef.current;\n    const primaryTable = tableWrapperRef.current;\n    return () => {\n      if (secondaryTable) {\n        secondaryTable.style.width = '';\n      }\n      if (primaryTable) {\n        primaryTable.style.marginTop = '';\n      }\n    };\n  });\n  useResizeObserver(theadRef, syncColumnHeaderWidths);\n  const scrollToTop = () => {\n    if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n      const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n      if (scrollDist > 0) {\n        scrollUpBy(scrollDist, tableWrapperRef.current);\n      }\n    }\n  };\n  const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n  const scrollToRow = (itemNode: HTMLElement | null) => {\n    if (!isMobile) {\n      scrollToItem(itemNode);\n    }\n  };\n  return { scrollToRow, scrollToTop };\n};\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"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 { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n  const fromCells = Array.prototype.slice.apply(from.children);\n  const toCells = Array.prototype.slice.apply(to.children);\n  for (let i = 0; i < fromCells.length; i++) {\n    let width = fromCells[i].style.width;\n    // use auto if it is set by resizable columns or real size otherwise\n    if (width !== 'auto') {\n      width = `${fromCells[i].offsetWidth}px`;\n    }\n    toCells[i].style.width = width;\n  }\n}\n\nexport const useStickyHeader = (\n  tableRef: RefObject<HTMLElement>,\n  theadRef: RefObject<HTMLElement>,\n  secondaryTheadRef: RefObject<HTMLElement>,\n  secondaryTableRef: RefObject<HTMLElement>,\n  tableWrapperRef: RefObject<HTMLElement>\n) => {\n  const isMobile = useMobile();\n  // Sync the sizes of the column header copies in the sticky header with the originals\n  const syncColumnHeaderWidths = useCallback(() => {\n    if (\n      tableRef.current &&\n      theadRef.current &&\n      secondaryTheadRef.current &&\n      secondaryTableRef.current &&\n      tableWrapperRef.current\n    ) {\n      syncSizes(theadRef.current, secondaryTheadRef.current);\n\n      // Using the tableRef offsetWidth instead of the theadRef because in VR\n      // the tableRef adds extra padding to the table and by default the theadRef will have a width\n      // without the padding and will make the sticky header width incorrect.\n      secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n      tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n    }\n  }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n  useLayoutEffect(() => {\n    syncColumnHeaderWidths();\n  });\n  useResizeObserver(theadRef, syncColumnHeaderWidths);\n  const scrollToTop = () => {\n    if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n      const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n      if (scrollDist > 0) {\n        scrollUpBy(scrollDist, tableWrapperRef.current);\n      }\n    }\n  };\n  const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n  const scrollToRow = (itemNode: HTMLElement | null) => {\n    if (!isMobile) {\n      scrollToItem(itemNode);\n    }\n  };\n  return { scrollToRow, scrollToTop };\n};\n"]}

package/tabs/styles.css.js

@@ -1,26 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_17xev_186",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_17xev_192",
-  "pagination-button": "awsui_pagination-button_14rmt_17xev_207",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_17xev_212",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_17xev_215",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_17xev_219",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_17xev_222",
-  "tabs-tab": "awsui_tabs-tab_14rmt_17xev_227",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_17xev_238",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_17xev_254",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_17xev_311",
-  "refresh": "awsui_refresh_14rmt_17xev_329",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_17xev_343",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_17xev_350",
-  "root": "awsui_root_14rmt_17xev_354",
-  "tabs": "awsui_tabs_14rmt_17xev_186",
-  "tabs-content": "awsui_tabs-content_14rmt_17xev_371",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_17xev_375",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_17xev_385",
-  "with-paddings": "awsui_with-paddings_14rmt_17xev_385",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_17xev_389"
+  "tabs-header": "awsui_tabs-header_14rmt_1reve_186",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_1reve_192",
+  "pagination-button": "awsui_pagination-button_14rmt_1reve_207",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_1reve_212",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1reve_215",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_1reve_219",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1reve_222",
+  "tabs-tab": "awsui_tabs-tab_14rmt_1reve_227",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1reve_238",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1reve_254",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1reve_311",
+  "refresh": "awsui_refresh_14rmt_1reve_329",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1reve_343",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1reve_350",
+  "root": "awsui_root_14rmt_1reve_354",
+  "tabs": "awsui_tabs_14rmt_1reve_186",
+  "tabs-content": "awsui_tabs-content_14rmt_1reve_371",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_1reve_375",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1reve_385",
+  "with-paddings": "awsui_with-paddings_14rmt_1reve_385",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1reve_389"
 };
   

package/tabs/styles.scoped.css

@@ -183,13 +183,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-max-type */
-.awsui_tabs-header_14rmt_17xev_186:not(#\9) {
+.awsui_tabs-header_14rmt_1reve_186:not(#\9) {
   margin: 0;
   padding: 0;
   display: flex;
 }
 
-.awsui_tabs-header-list_14rmt_17xev_192:not(#\9) {
+.awsui_tabs-header-list_14rmt_1reve_192:not(#\9) {
   margin: 0;
   padding: 0;
   display: flex;
@@ -200,42 +200,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
 }
-.awsui_tabs-header-list_14rmt_17xev_192:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_1reve_192:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
 
-.awsui_pagination-button_14rmt_17xev_207:not(#\9) {
+.awsui_pagination-button_14rmt_1reve_207:not(#\9) {
   margin: var(--space-scaled-s-cu1hzn, 12px) 0;
   padding: 0 var(--space-xxs-ynfts5, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_17xev_212:not(#\9) {
+.awsui_pagination-button-left_14rmt_1reve_212:not(#\9) {
   border-right: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-control-disabled-vx8bco, #d1d5db);
 }
-.awsui_pagination-button-left-scrollable_14rmt_17xev_215:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_1reve_215:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-4lmh2z, rgba(0, 7, 22, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-4lmh2z, rgba(0, 7, 22, 0.12));
 }
-.awsui_pagination-button-right_14rmt_17xev_219:not(#\9) {
+.awsui_pagination-button-right_14rmt_1reve_219:not(#\9) {
   border-left: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-control-disabled-vx8bco, #d1d5db);
 }
-.awsui_pagination-button-right-scrollable_14rmt_17xev_222:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_1reve_222:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-4lmh2z, rgba(0, 7, 22, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-4lmh2z, rgba(0, 7, 22, 0.12));
 }
 
-.awsui_tabs-tab_14rmt_17xev_227:not(#\9) {
+.awsui_tabs-tab_14rmt_1reve_227:not(#\9) {
   list-style: none;
   padding: 0;
   flex-shrink: 0;
   display: flex;
   max-width: calc(90% - var(--space-l-4vl6xu, 20px));
 }
-.awsui_tabs-tab_14rmt_17xev_227 > button:not(#\9) {
+.awsui_tabs-tab_14rmt_1reve_227 > button:not(#\9) {
   background-color: transparent;
 }
 
-.awsui_tabs-tab-label_14rmt_17xev_238:not(#\9) {
+.awsui_tabs-tab-label_14rmt_1reve_238:not(#\9) {
   display: flex;
   align-items: center;
   padding: var(--space-scaled-2x-xxs-t5qzmf, 4px) var(--space-l-4vl6xu, 20px);
@@ -246,12 +246,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
 
-.awsui_tabs-tab_14rmt_17xev_227:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_17xev_238, .awsui_tabs-tab_14rmt_17xev_227:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_17xev_238 {
+.awsui_tabs-tab_14rmt_1reve_227:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_1reve_238, .awsui_tabs-tab_14rmt_1reve_227:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_1reve_238 {
   margin-right: calc(-1 * var(--border-divider-section-width-4wm2it, 2px));
   border-right: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-tabs-divider-69fx5i, #e9ebed);
 }
 
-.awsui_tabs-tab-link_14rmt_17xev_254:not(#\9) {
+.awsui_tabs-tab-link_14rmt_1reve_254:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -265,21 +265,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-wayfinding-link-active-weight-l3fid7, 800);
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
 }
-.awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):hover {
   color: var(--color-text-accent-s1eqko, #0972d3);
 }
-.awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):focus {
   outline: none;
 }
-.awsui_tabs-tab-link_14rmt_17xev_254[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_1reve_254[data-awsui-focus-visible=true]:not(#\9):focus {
   z-index: 1;
   position: relative;
 }
-.awsui_tabs-tab-link_14rmt_17xev_254[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_1reve_254[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-64zu5e, -8px) - 1px);
 }
-.awsui_tabs-tab-link_14rmt_17xev_254[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_tabs-tab-link_14rmt_1reve_254[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -290,32 +290,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_tabs-tab-link_14rmt_17xev_254[data-awsui-focus-visible=true]:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_17xev_238, .awsui_tabs-tab-link_14rmt_17xev_254[data-awsui-focus-visible=true]:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_17xev_238 {
+.awsui_tabs-tab-link_14rmt_1reve_254[data-awsui-focus-visible=true]:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_1reve_238, .awsui_tabs-tab-link_14rmt_1reve_254[data-awsui-focus-visible=true]:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_1reve_238 {
   border-right-color: transparent;
 }
 
-.awsui_tabs-tab_14rmt_17xev_227:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_1reve_227:not(#\9):first-child {
   margin-left: 1px;
 }
-.awsui_tabs-tab_14rmt_17xev_227:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_17xev_238, .awsui_tabs-tab_14rmt_17xev_227:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_17xev_238 {
+.awsui_tabs-tab_14rmt_1reve_227:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_1reve_238, .awsui_tabs-tab_14rmt_1reve_227:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_1reve_238 {
   padding-left: calc(var(--space-l-4vl6xu, 20px) - 1px);
 }
 
-.awsui_tabs-tab_14rmt_17xev_227:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_1reve_227:not(#\9):last-child {
   margin-right: 1px;
 }
-.awsui_tabs-tab_14rmt_17xev_227:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_17xev_238, .awsui_tabs-tab_14rmt_17xev_227:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_17xev_238 {
+.awsui_tabs-tab_14rmt_1reve_227:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_1reve_238, .awsui_tabs-tab_14rmt_1reve_227:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_1reve_238 {
   padding-right: calc(var(--space-l-4vl6xu, 20px) - 1px);
 }
 
-.awsui_tabs-tab-disabled_14rmt_17xev_311:not(#\9), .awsui_tabs-tab-disabled_14rmt_17xev_311:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_1reve_311:not(#\9), .awsui_tabs-tab-disabled_14rmt_1reve_311:not(#\9):hover {
   pointer-events: none;
   cursor: default;
   color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
   font-weight: var(--font-tabs-disabled-weight-imwq16, 800);
 }
 
-.awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311):after {
+.awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311):after {
   content: "";
   position: absolute;
   left: 0;
@@ -326,36 +326,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: var(--color-border-tabs-underline-9bcfzu, #0972d3);
   opacity: 0;
 }
-.awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311).awsui_refresh_14rmt_17xev_329:after {
+.awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311).awsui_refresh_14rmt_1reve_329:after {
   transition: opacity var(--motion-duration-refresh-only-medium-5flen2, 165ms) var(--motion-easing-refresh-only-c-ic6jr0, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311).awsui_refresh_14rmt_17xev_329:after {
+  .awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311).awsui_refresh_14rmt_1reve_329:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311).awsui_refresh_14rmt_17xev_329:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_17xev_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311).awsui_refresh_14rmt_17xev_329:after {
+.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311).awsui_refresh_14rmt_1reve_329:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_1reve_254:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311).awsui_refresh_14rmt_1reve_329:after {
   animation: none;
   transition: none;
 }
 
-.awsui_tabs-tab-active_14rmt_17xev_343:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311) {
+.awsui_tabs-tab-active_14rmt_1reve_343:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311) {
   color: var(--color-text-accent-s1eqko, #0972d3);
 }
-.awsui_tabs-tab-active_14rmt_17xev_343:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_17xev_311):after {
+.awsui_tabs-tab-active_14rmt_1reve_343:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1reve_311):after {
   opacity: 1;
 }
 
-.awsui_tabs-header-with-divider_14rmt_17xev_350:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_1reve_350:not(#\9) {
   border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-tabs-divider-69fx5i, #e9ebed);
 }
 
-.awsui_root_14rmt_17xev_354:not(#\9) {
+.awsui_root_14rmt_1reve_354:not(#\9) {
   /* used in test-utils or tests */
 }
 
-.awsui_tabs_14rmt_17xev_186:not(#\9) {
+.awsui_tabs_14rmt_1reve_186:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -394,24 +394,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 100%;
 }
 
-.awsui_tabs-content_14rmt_17xev_371:not(#\9) {
+.awsui_tabs-content_14rmt_1reve_371:not(#\9) {
   display: none;
 }
 
-.awsui_tabs-content-active_14rmt_17xev_375:not(#\9) {
+.awsui_tabs-content-active_14rmt_1reve_375:not(#\9) {
   display: block;
 }
-.awsui_tabs-content-active_14rmt_17xev_375[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_tabs-content-active_14rmt_1reve_375[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-container-gh9ysk, 16px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_tabs-content-wrapper_14rmt_17xev_385.awsui_with-paddings_14rmt_17xev_385 > .awsui_tabs-content_14rmt_17xev_371:not(#\9) {
+.awsui_tabs-content-wrapper_14rmt_1reve_385.awsui_with-paddings_14rmt_1reve_385 > .awsui_tabs-content_14rmt_1reve_371:not(#\9) {
   padding: var(--space-scaled-m-pv0fmt, 16px) 0;
 }
 
-.awsui_tabs-container-content-wrapper_14rmt_17xev_389.awsui_with-paddings_14rmt_17xev_385 > .awsui_tabs-content_14rmt_17xev_371:not(#\9) {
-  padding: var(--space-tabs-content-top-mn4c9x, 12px) var(--space-container-horizontal-ddrezg, 24px) var(--space-scaled-l-t03y3z, 20px);
+.awsui_tabs-container-content-wrapper_14rmt_1reve_389.awsui_with-paddings_14rmt_1reve_385 > .awsui_tabs-content_14rmt_1reve_371:not(#\9) {
+  padding: var(--space-tabs-content-top-mn4c9x, 12px) var(--space-container-horizontal-tlw03i, 20px) var(--space-scaled-l-t03y3z, 20px);
 }

package/tabs/styles.selectors.js

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_17xev_186",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_17xev_192",
-  "pagination-button": "awsui_pagination-button_14rmt_17xev_207",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_17xev_212",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_17xev_215",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_17xev_219",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_17xev_222",
-  "tabs-tab": "awsui_tabs-tab_14rmt_17xev_227",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_17xev_238",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_17xev_254",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_17xev_311",
-  "refresh": "awsui_refresh_14rmt_17xev_329",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_17xev_343",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_17xev_350",
-  "root": "awsui_root_14rmt_17xev_354",
-  "tabs": "awsui_tabs_14rmt_17xev_186",
-  "tabs-content": "awsui_tabs-content_14rmt_17xev_371",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_17xev_375",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_17xev_385",
-  "with-paddings": "awsui_with-paddings_14rmt_17xev_385",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_17xev_389"
+  "tabs-header": "awsui_tabs-header_14rmt_1reve_186",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_1reve_192",
+  "pagination-button": "awsui_pagination-button_14rmt_1reve_207",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_1reve_212",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1reve_215",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_1reve_219",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1reve_222",
+  "tabs-tab": "awsui_tabs-tab_14rmt_1reve_227",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1reve_238",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1reve_254",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1reve_311",
+  "refresh": "awsui_refresh_14rmt_1reve_329",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1reve_343",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1reve_350",
+  "root": "awsui_root_14rmt_1reve_354",
+  "tabs": "awsui_tabs_14rmt_1reve_186",
+  "tabs-content": "awsui_tabs-content_14rmt_1reve_371",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_1reve_375",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1reve_385",
+  "with-paddings": "awsui_with-paddings_14rmt_1reve_385",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1reve_389"
 };