npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1328 → 3.0.1330 - Mend

@cloudscape-design/components-themeable 3.0.1328 → 3.0.1330

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 (416) hide show

package/lib/internal/template/internal/components/menu-dropdown/styles.selectors.js CHANGED Viewed

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button": "awsui_button_m5h9f_1cya0_145",
-  "expanded": "awsui_expanded_m5h9f_1cya0_197",
-  "offset-right-none": "awsui_offset-right-none_m5h9f_1cya0_208",
-  "offset-right-l": "awsui_offset-right-l_m5h9f_1cya0_211",
-  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_1cya0_214",
-  "text": "awsui_text_m5h9f_1cya0_239",
-  "icon": "awsui_icon_m5h9f_1cya0_243"
+  "button": "awsui_button_m5h9f_svp5j_145",
+  "expanded": "awsui_expanded_m5h9f_svp5j_197",
+  "offset-right-none": "awsui_offset-right-none_m5h9f_svp5j_208",
+  "offset-right-l": "awsui_offset-right-l_m5h9f_svp5j_211",
+  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_svp5j_214",
+  "text": "awsui_text_m5h9f_svp5j_239",
+  "icon": "awsui_icon_m5h9f_svp5j_243"
 };

package/lib/internal/template/internal/components/option/styles.css.js CHANGED Viewed

@@ -1,22 +1,22 @@
     import './styles.scoped.css';
     export default {
-  "option": "awsui_option_1p2cx_bi4jo_153",
-  "disabled": "awsui_disabled_1p2cx_bi4jo_190",
-  "parent": "awsui_parent_1p2cx_bi4jo_193",
-  "highlighted": "awsui_highlighted_1p2cx_bi4jo_196",
-  "content": "awsui_content_1p2cx_bi4jo_200",
-  "label-content": "awsui_label-content_1p2cx_bi4jo_207",
-  "label": "awsui_label_1p2cx_bi4jo_207",
-  "tag": "awsui_tag_1p2cx_bi4jo_214",
-  "label-tag": "awsui_label-tag_1p2cx_bi4jo_215",
-  "label-prefix": "awsui_label-prefix_1p2cx_bi4jo_225",
-  "tags": "awsui_tags_1p2cx_bi4jo_238",
-  "description": "awsui_description_1p2cx_bi4jo_239",
-  "selected": "awsui_selected_1p2cx_bi4jo_250",
-  "icon": "awsui_icon_1p2cx_bi4jo_264",
-  "filtering-match-highlight": "awsui_filtering-match-highlight_1p2cx_bi4jo_271",
-  "trigger-variant": "awsui_trigger-variant_1p2cx_bi4jo_286",
-  "custom-content": "awsui_custom-content_1p2cx_bi4jo_292"
+  "option": "awsui_option_1p2cx_1c6rt_153",
+  "disabled": "awsui_disabled_1p2cx_1c6rt_190",
+  "parent": "awsui_parent_1p2cx_1c6rt_193",
+  "highlighted": "awsui_highlighted_1p2cx_1c6rt_196",
+  "content": "awsui_content_1p2cx_1c6rt_200",
+  "label-content": "awsui_label-content_1p2cx_1c6rt_207",
+  "label": "awsui_label_1p2cx_1c6rt_207",
+  "tag": "awsui_tag_1p2cx_1c6rt_214",
+  "label-tag": "awsui_label-tag_1p2cx_1c6rt_215",
+  "label-prefix": "awsui_label-prefix_1p2cx_1c6rt_225",
+  "tags": "awsui_tags_1p2cx_1c6rt_238",
+  "description": "awsui_description_1p2cx_1c6rt_239",
+  "selected": "awsui_selected_1p2cx_1c6rt_250",
+  "icon": "awsui_icon_1p2cx_1c6rt_264",
+  "filtering-match-highlight": "awsui_filtering-match-highlight_1p2cx_1c6rt_271",
+  "trigger-variant": "awsui_trigger-variant_1p2cx_1c6rt_286",
+  "custom-content": "awsui_custom-content_1p2cx_1c6rt_292"
 };

package/lib/internal/template/internal/components/option/styles.scoped.css CHANGED Viewed

@@ -150,7 +150,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_option_1p2cx_bi4jo_153:not(#\9) {
+.awsui_option_1p2cx_1c6rt_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -187,108 +187,108 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
   color: inherit;
 }
-.awsui_option_1p2cx_bi4jo_153:not(#\9):not(.awsui_disabled_1p2cx_bi4jo_190) {
+.awsui_option_1p2cx_1c6rt_153:not(#\9):not(.awsui_disabled_1p2cx_1c6rt_190) {
   cursor: inherit;
 }
-.awsui_option_1p2cx_bi4jo_153.awsui_parent_1p2cx_bi4jo_193:not(#\9) {
+.awsui_option_1p2cx_1c6rt_153.awsui_parent_1p2cx_1c6rt_193:not(#\9) {
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_option_1p2cx_bi4jo_153.awsui_parent_1p2cx_bi4jo_193:not(#\9):not(.awsui_disabled_1p2cx_bi4jo_190):not(.awsui_highlighted_1p2cx_bi4jo_196) {
+.awsui_option_1p2cx_1c6rt_153.awsui_parent_1p2cx_1c6rt_193:not(#\9):not(.awsui_disabled_1p2cx_1c6rt_190):not(.awsui_highlighted_1p2cx_1c6rt_196) {
   color: var(--color-text-dropdown-group-label-m31yo5, #545b64);
 }
-.awsui_content_1p2cx_bi4jo_200:not(#\9) {
+.awsui_content_1p2cx_1c6rt_200:not(#\9) {
   inline-size: 100%;
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
 }
-.awsui_label-content_1p2cx_bi4jo_207:not(#\9) {
+.awsui_label-content_1p2cx_1c6rt_207:not(#\9) {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
-.awsui_label_1p2cx_bi4jo_207:not(#\9),
-.awsui_tag_1p2cx_bi4jo_214:not(#\9),
-.awsui_label-tag_1p2cx_bi4jo_215:not(#\9) {
+.awsui_label_1p2cx_1c6rt_207:not(#\9),
+.awsui_tag_1p2cx_1c6rt_214:not(#\9),
+.awsui_label-tag_1p2cx_1c6rt_215:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
-.awsui_label_1p2cx_bi4jo_207:not(#\9),
-.awsui_tag_1p2cx_bi4jo_214:not(#\9) {
+.awsui_label_1p2cx_1c6rt_207:not(#\9),
+.awsui_tag_1p2cx_1c6rt_214:not(#\9) {
   flex-wrap: wrap;
 }
-.awsui_label-prefix_1p2cx_bi4jo_225:not(#\9) {
+.awsui_label-prefix_1p2cx_1c6rt_225:not(#\9) {
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_label-tag_1p2cx_bi4jo_215:not(#\9) {
+.awsui_label-tag_1p2cx_1c6rt_215:not(#\9) {
   padding-inline-start: var(--space-s-4a5hs8, 12px);
   flex: auto;
   text-align: end;
 }
-.awsui_label-tag_1p2cx_bi4jo_215:not(#\9):empty {
+.awsui_label-tag_1p2cx_1c6rt_215:not(#\9):empty {
   display: none;
 }
-.awsui_tags_1p2cx_bi4jo_238:not(#\9),
-.awsui_description_1p2cx_bi4jo_239:not(#\9) {
+.awsui_tags_1p2cx_1c6rt_238:not(#\9),
+.awsui_description_1p2cx_1c6rt_239:not(#\9) {
   font-size: var(--font-size-body-s-psgqn2, 12px);
   line-height: var(--line-height-body-s-otgtsr, 16px);
   letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
   color: var(--color-text-dropdown-item-secondary-fi0yxi, #687078);
   flex-wrap: wrap;
 }
-.awsui_tags_1p2cx_bi4jo_238.awsui_highlighted_1p2cx_bi4jo_196:not(#\9),
-.awsui_description_1p2cx_bi4jo_239.awsui_highlighted_1p2cx_bi4jo_196:not(#\9) {
+.awsui_tags_1p2cx_1c6rt_238.awsui_highlighted_1p2cx_1c6rt_196:not(#\9),
+.awsui_description_1p2cx_1c6rt_239.awsui_highlighted_1p2cx_1c6rt_196:not(#\9) {
   color: var(--color-text-dropdown-item-secondary-hover-p5zsls, #687078);
 }
-.awsui_tags_1p2cx_bi4jo_238.awsui_selected_1p2cx_bi4jo_250:not(#\9),
-.awsui_description_1p2cx_bi4jo_239.awsui_selected_1p2cx_bi4jo_250:not(#\9) {
+.awsui_tags_1p2cx_1c6rt_238.awsui_selected_1p2cx_1c6rt_250:not(#\9),
+.awsui_description_1p2cx_1c6rt_239.awsui_selected_1p2cx_1c6rt_250:not(#\9) {
   color: var(--color-text-dropdown-item-secondary-fi0yxi, #687078);
 }
-.awsui_tags_1p2cx_bi4jo_238:not(#\9) {
+.awsui_tags_1p2cx_1c6rt_238:not(#\9) {
   display: flex;
   align-items: stretch;
 }
-.awsui_tag_1p2cx_bi4jo_214:not(#\9):not(:last-child) {
+.awsui_tag_1p2cx_1c6rt_214:not(#\9):not(:last-child) {
   padding-inline-end: var(--space-m-n2lypl, 16px);
 }
-.awsui_icon_1p2cx_bi4jo_264:not(#\9) {
+.awsui_icon_1p2cx_1c6rt_264:not(#\9) {
   padding-inline-end: var(--space-xs-kw7k3v, 8px);
   align-content: center;
   display: flex;
   flex-shrink: 0;
 }
-.awsui_filtering-match-highlight_1p2cx_bi4jo_271:not(#\9) {
-  background-color: var(--color-background-dropdown-item-filter-match-eq1r00, #f1faff);
-  color: var(--color-text-dropdown-item-filter-match-5ifrfz, #0073bb);
+.awsui_filtering-match-highlight_1p2cx_1c6rt_271:not(#\9) {
+  background-color: var(--awsui-option-filter-match-background-z17rmd, var(--color-background-dropdown-item-filter-match-eq1r00, #f1faff));
+  color: var(--awsui-option-filter-match-color-z17rmd, var(--color-text-dropdown-item-filter-match-5ifrfz, #0073bb));
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_disabled_1p2cx_bi4jo_190:not(#\9) {
+.awsui_disabled_1p2cx_1c6rt_190:not(#\9) {
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
   pointer-events: none;
 }
-.awsui_disabled_1p2cx_bi4jo_190 > .awsui_content_1p2cx_bi4jo_200 > .awsui_tags_1p2cx_bi4jo_238:not(#\9),
-.awsui_disabled_1p2cx_bi4jo_190 > .awsui_content_1p2cx_bi4jo_200 > .awsui_description_1p2cx_bi4jo_239:not(#\9) {
+.awsui_disabled_1p2cx_1c6rt_190 > .awsui_content_1p2cx_1c6rt_200 > .awsui_tags_1p2cx_1c6rt_238:not(#\9),
+.awsui_disabled_1p2cx_1c6rt_190 > .awsui_content_1p2cx_1c6rt_200 > .awsui_description_1p2cx_1c6rt_239:not(#\9) {
   color: currentColor;
 }
-.awsui_trigger-variant_1p2cx_bi4jo_286:not(#\9) {
+.awsui_trigger-variant_1p2cx_1c6rt_286:not(#\9) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_custom-content_1p2cx_bi4jo_292:not(#\9) {
+.awsui_custom-content_1p2cx_1c6rt_292:not(#\9) {
   inline-size: 100%;
 }

package/lib/internal/template/internal/components/option/styles.selectors.js CHANGED Viewed

@@ -2,22 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "option": "awsui_option_1p2cx_bi4jo_153",
-  "disabled": "awsui_disabled_1p2cx_bi4jo_190",
-  "parent": "awsui_parent_1p2cx_bi4jo_193",
-  "highlighted": "awsui_highlighted_1p2cx_bi4jo_196",
-  "content": "awsui_content_1p2cx_bi4jo_200",
-  "label-content": "awsui_label-content_1p2cx_bi4jo_207",
-  "label": "awsui_label_1p2cx_bi4jo_207",
-  "tag": "awsui_tag_1p2cx_bi4jo_214",
-  "label-tag": "awsui_label-tag_1p2cx_bi4jo_215",
-  "label-prefix": "awsui_label-prefix_1p2cx_bi4jo_225",
-  "tags": "awsui_tags_1p2cx_bi4jo_238",
-  "description": "awsui_description_1p2cx_bi4jo_239",
-  "selected": "awsui_selected_1p2cx_bi4jo_250",
-  "icon": "awsui_icon_1p2cx_bi4jo_264",
-  "filtering-match-highlight": "awsui_filtering-match-highlight_1p2cx_bi4jo_271",
-  "trigger-variant": "awsui_trigger-variant_1p2cx_bi4jo_286",
-  "custom-content": "awsui_custom-content_1p2cx_bi4jo_292"
+  "option": "awsui_option_1p2cx_1c6rt_153",
+  "disabled": "awsui_disabled_1p2cx_1c6rt_190",
+  "parent": "awsui_parent_1p2cx_1c6rt_193",
+  "highlighted": "awsui_highlighted_1p2cx_1c6rt_196",
+  "content": "awsui_content_1p2cx_1c6rt_200",
+  "label-content": "awsui_label-content_1p2cx_1c6rt_207",
+  "label": "awsui_label_1p2cx_1c6rt_207",
+  "tag": "awsui_tag_1p2cx_1c6rt_214",
+  "label-tag": "awsui_label-tag_1p2cx_1c6rt_215",
+  "label-prefix": "awsui_label-prefix_1p2cx_1c6rt_225",
+  "tags": "awsui_tags_1p2cx_1c6rt_238",
+  "description": "awsui_description_1p2cx_1c6rt_239",
+  "selected": "awsui_selected_1p2cx_1c6rt_250",
+  "icon": "awsui_icon_1p2cx_1c6rt_264",
+  "filtering-match-highlight": "awsui_filtering-match-highlight_1p2cx_1c6rt_271",
+  "trigger-variant": "awsui_trigger-variant_1p2cx_1c6rt_286",
+  "custom-content": "awsui_custom-content_1p2cx_1c6rt_292"
 };

package/lib/internal/template/internal/components/options-list/index.d.ts CHANGED Viewed

@@ -32,6 +32,8 @@ export interface OptionsListProps extends BaseComponentProps {
     embedded?: boolean;
     stickyItemBlockSize?: number | null;
     isMultiSelect?: boolean;
+    /** Internal: custom CSS properties set on the list root; inherited by the option rows. */
+    customProperties?: React.CSSProperties;
 }
 declare const _default: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/internal/template/internal/components/options-list/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAMzG,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,mBAAmB,CAAC,UAAU,CAAC;IAC3C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;~~CACzB~~;;~~AA6FD~~,wBAA6C"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAMzG,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,mBAAmB,CAAC,UAAU,CAAC;IAC3C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACxC;;AA8FD,wBAA6C"}

package/lib/internal/template/internal/components/options-list/index.js CHANGED Viewed

@@ -13,7 +13,7 @@ const getItemIndex = (containerRef, event) => {
     const mouseTarget = target === null || target === void 0 ? void 0 : target.dataset.mouseTarget;
     return mouseTarget ? parseInt(mouseTarget) : -1;
 };
-const OptionsList = ({ open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', tagOverride: Tag = 'div', decreaseBlockMargin = false, ariaLabel, ariaLabelledby, ariaDescribedby, ariaRequired, embedded, stickyItemBlockSize, isMultiSelect, ...restProps }, ref) => {
+const OptionsList = ({ open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', tagOverride: Tag = 'div', decreaseBlockMargin = false, ariaLabel, ariaLabelledby, ariaDescribedby, ariaRequired, embedded, stickyItemBlockSize, isMultiSelect, customProperties, ...restProps }, ref) => {
     const baseProps = getBaseProps(restProps);
     const menuRef = useRef(null);
     const handleScroll = useStableCallback(() => {
@@ -36,7 +36,7 @@ const OptionsList = ({ open, statusType, children, nativeAttributes = {}, onKeyD
         [styles['options-list-embedded']]: embedded,
     });
     const mergedRef = useMergeRefs(ref, menuRef);
-    return (React.createElement(Tag, { ...baseProps, ...nativeAttributes, className: className, ref: mergedRef, style: { position, scrollPaddingBlockStart: stickyItemBlockSize !== null && stickyItemBlockSize !== void 0 ? stickyItemBlockSize : undefined }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-multiselectable": role === 'listbox' && isMultiSelect ? true : undefined, "aria-required": ariaRequired }, open && children));
+    return (React.createElement(Tag, { ...baseProps, ...nativeAttributes, className: className, ref: mergedRef, style: { ...customProperties, position, scrollPaddingBlockStart: stickyItemBlockSize !== null && stickyItemBlockSize !== void 0 ? stickyItemBlockSize : undefined }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-multiselectable": role === 'listbox' && isMultiSelect ? true : undefined, "aria-required": ariaRequired }, open && children));
 };
 export default React.forwardRef(OptionsList);
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/options-list/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAKhG,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,MAAM,MAAM,iBAAiB,CAAC;~~AAgCrC~~,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,YAAY,GAAG,CAAC,YAA0C,EAAE,KAAuB,EAAE,EAAE;IAC3F,MAAM,MAAM,GAAG,WAAW,CACxB,KAAK,CAAC,MAAqB,EAC3B,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAC7E,CAAC;IACF,MAAM,WAAW,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,WAAW,CAAC;IAChD,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAClB,EACE,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,gBAAgB,GAAG,EAAE,EACrB,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,SAAS,EAChB,WAAW,EAAE,GAAG,GAAG,KAAK,EACxB,mBAAmB,GAAG,KAAK,EAC3B,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,GAAG,SAAS,EACK,EACnB,GAA8B,EAC9B,EAAE;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE1C,MAAM,YAAY,GAAG,iBAAiB,CAAC,GAAG,EAAE;QAC1C,MAAM,eAAe,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QACzC,IAAI,eAAe,EAAE,CAAC;YACpB,MAAM,kBAAkB,GAAG,eAAe,CAAC,SAAS,GAAG,eAAe,CAAC,YAAY,CAAC;YACpF,MAAM,qBAAqB,GAAG,eAAe,CAAC,YAAY,GAAG,kBAAkB,CAAC;YAChF,IAAI,qBAAqB,GAAG,qBAAqB,EAAE,CAAC;gBAClD,sBAAsB,CAAC,UAAU,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YACrC,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAErC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE;QAC7C,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;QACtD,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,QAAQ;KAC5C,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE7C,OAAO,CACL,oBAAC,GAAG,OACE,SAAS,KACT,gBAAgB,EACpB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,QAAQ,EAAE,uBAAuB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,SAAS,EAAE,~~EAC9E~~,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACvD,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EACjE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAC7D,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,0BACX,IAAI,KAAK,SAAS,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,mBAC7D,YAAY,IAE1B,IAAI,IAAI,QAAQ,CACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { DropdownStatusProps } from '../../../types/dropdown-status';\nimport { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { fireKeyboardEvent, fireNonCancelableEvent } from '../../events';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n open?: boolean;\n statusType: DropdownStatusProps.StatusType;\n /*\n Options list\n /\n children: React.ReactNode;\n nativeAttributes?: Record<string, any>;\n /\n Called when more items need to be loaded.\n */\n onLoadMore?: NonCancelableEventHandler;\n onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n onBlur?: NonCancelableEventHandler<{ relatedTarget: Node \| null }>;\n onFocus?: NonCancelableEventHandler;\n onMouseUp?: (itemIndex: number) => void;\n onMouseMove?: (itemIndex: number) => void;\n position?: React.CSSProperties['position'];\n tagOverride?: 'div' \| 'ul';\n role?: 'listbox' \| 'list' \| 'menu';\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n ariaRequired?: boolean;\n decreaseBlockMargin?: boolean;\n embedded?: boolean;\n stickyItemBlockSize?: number \| null;\n isMultiSelect?: boolean;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n const target = findUpUntil(\n event.target as HTMLElement,\n element => element === containerRef.current \|\| !!element.dataset.mouseTarget\n );\n const mouseTarget = target?.dataset.mouseTarget;\n return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n {\n open,\n statusType,\n children,\n nativeAttributes = {},\n onKeyDown,\n onBlur,\n onFocus,\n onLoadMore,\n onMouseUp,\n onMouseMove,\n position = 'relative',\n role = 'listbox',\n tagOverride: Tag = 'div',\n decreaseBlockMargin = false,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n ariaRequired,\n embedded,\n stickyItemBlockSize,\n isMultiSelect,\n ...restProps\n }: OptionsListProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const baseProps = getBaseProps(restProps);\n const menuRef = useRef<HTMLElement>(null);\n\n const handleScroll = useStableCallback(() => {\n const scrollContainer = menuRef?.current;\n if (scrollContainer) {\n const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n fireNonCancelableEvent(onLoadMore);\n }\n }\n });\n\n useEffect(() => {\n if (open && statusType === 'pending') {\n handleScroll();\n }\n }, [open, statusType, handleScroll]);\n\n const className = clsx(styles['options-list'], {\n [styles['decrease-block-margin']]: decreaseBlockMargin,\n [styles['options-list-embedded']]: embedded,\n });\n\n const mergedRef = useMergeRefs(ref, menuRef);\n\n return (\n <Tag\n {...baseProps}\n {...nativeAttributes}\n className={className}\n ref={mergedRef}\n style={{ position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}\n role={role}\n onScroll={handleScroll}\n onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}\n onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n tabIndex={embedded ? 0 : -1}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-multiselectable={role === 'listbox' && isMultiSelect ? true : undefined}\n aria-required={ariaRequired}\n >\n {open && children}\n </Tag>\n );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { DropdownStatusProps } from '../../../types/dropdown-status';\nimport { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { fireKeyboardEvent, fireNonCancelableEvent } from '../../events';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n open?: boolean;\n statusType: DropdownStatusProps.StatusType;\n /*\n Options list\n /\n children: React.ReactNode;\n nativeAttributes?: Record<string, any>;\n /\n Called when more items need to be loaded.\n /\n onLoadMore?: NonCancelableEventHandler;\n onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n onBlur?: NonCancelableEventHandler<{ relatedTarget: Node \| null }>;\n onFocus?: NonCancelableEventHandler;\n onMouseUp?: (itemIndex: number) => void;\n onMouseMove?: (itemIndex: number) => void;\n position?: React.CSSProperties['position'];\n tagOverride?: 'div' \| 'ul';\n role?: 'listbox' \| 'list' \| 'menu';\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n ariaRequired?: boolean;\n decreaseBlockMargin?: boolean;\n embedded?: boolean;\n stickyItemBlockSize?: number \| null;\n isMultiSelect?: boolean;\n /* Internal: custom CSS properties set on the list root; inherited by the option rows. */\n customProperties?: React.CSSProperties;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n const target = findUpUntil(\n event.target as HTMLElement,\n element => element === containerRef.current \|\| !!element.dataset.mouseTarget\n );\n const mouseTarget = target?.dataset.mouseTarget;\n return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n {\n open,\n statusType,\n children,\n nativeAttributes = {},\n onKeyDown,\n onBlur,\n onFocus,\n onLoadMore,\n onMouseUp,\n onMouseMove,\n position = 'relative',\n role = 'listbox',\n tagOverride: Tag = 'div',\n decreaseBlockMargin = false,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n ariaRequired,\n embedded,\n stickyItemBlockSize,\n isMultiSelect,\n customProperties,\n ...restProps\n }: OptionsListProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const baseProps = getBaseProps(restProps);\n const menuRef = useRef<HTMLElement>(null);\n\n const handleScroll = useStableCallback(() => {\n const scrollContainer = menuRef?.current;\n if (scrollContainer) {\n const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n fireNonCancelableEvent(onLoadMore);\n }\n }\n });\n\n useEffect(() => {\n if (open && statusType === 'pending') {\n handleScroll();\n }\n }, [open, statusType, handleScroll]);\n\n const className = clsx(styles['options-list'], {\n [styles['decrease-block-margin']]: decreaseBlockMargin,\n [styles['options-list-embedded']]: embedded,\n });\n\n const mergedRef = useMergeRefs(ref, menuRef);\n\n return (\n <Tag\n {...baseProps}\n {...nativeAttributes}\n className={className}\n ref={mergedRef}\n style={{ ...customProperties, position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}\n role={role}\n onScroll={handleScroll}\n onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}\n onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n tabIndex={embedded ? 0 : -1}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-multiselectable={role === 'listbox' && isMultiSelect ? true : undefined}\n aria-required={ariaRequired}\n >\n {open && children}\n </Tag>\n );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}

package/lib/internal/template/internal/components/options-list/styles.css.js CHANGED Viewed

@@ -1,8 +1,8 @@
     import './styles.scoped.css';
     export default {
-  "options-list": "awsui_options-list_19gcf_16z54_145",
-  "options-list-embedded": "awsui_options-list-embedded_19gcf_16z54_192",
-  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_16z54_199"
+  "options-list": "awsui_options-list_19gcf_s75x4_145",
+  "options-list-embedded": "awsui_options-list-embedded_19gcf_s75x4_192",
+  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_s75x4_199"
 };

package/lib/internal/template/internal/components/options-list/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_options-list_19gcf_16z54_145:not(#\9) {
+.awsui_options-list_19gcf_s75x4_145:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
@@ -183,20 +183,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow-y: auto;
   flex: 1 1 auto;
   min-block-size: 0;
-  border-start-start-radius: var(--border-radius-dropdown-oaxffg, 0px);
-  border-start-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
-  border-end-start-radius: var(--border-radius-dropdown-oaxffg, 0px);
-  border-end-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
+  border-start-start-radius: var(--border-radius-dropdown-azs8zp, 0px);
+  border-start-end-radius: var(--border-radius-dropdown-azs8zp, 0px);
+  border-end-start-radius: var(--border-radius-dropdown-azs8zp, 0px);
+  border-end-end-radius: var(--border-radius-dropdown-azs8zp, 0px);
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_options-list-embedded_19gcf_16z54_192:not(#\9) {
+.awsui_options-list-embedded_19gcf_s75x4_192:not(#\9) {
   border-start-start-radius: 0px;
   border-start-end-radius: 0px;
   border-end-start-radius: 0px;
   border-end-end-radius: 0px;
 }
-.awsui_decrease-block-margin_19gcf_16z54_199:not(#\9) {
+.awsui_decrease-block-margin_19gcf_s75x4_199:not(#\9) {
   margin-block: -1px;
 }

package/lib/internal/template/internal/components/options-list/styles.selectors.js CHANGED Viewed

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "options-list": "awsui_options-list_19gcf_16z54_145",
-  "options-list-embedded": "awsui_options-list-embedded_19gcf_16z54_192",
-  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_16z54_199"
+  "options-list": "awsui_options-list_19gcf_s75x4_145",
+  "options-list-embedded": "awsui_options-list-embedded_19gcf_s75x4_192",
+  "decrease-block-margin": "awsui_decrease-block-margin_19gcf_s75x4_199"
 };

package/lib/internal/template/internal/components/panel-resize-handle/styles.css.js CHANGED Viewed

@@ -1,8 +1,8 @@
     import './styles.scoped.css';
     export default {
-  "slider": "awsui_slider_cqzlk_1oyzh_145",
-  "slider-side": "awsui_slider-side_cqzlk_1oyzh_179",
-  "slider-side-start": "awsui_slider-side-start_cqzlk_1oyzh_180"
+  "slider": "awsui_slider_cqzlk_1u58i_145",
+  "slider-side": "awsui_slider-side_cqzlk_1u58i_179",
+  "slider-side-start": "awsui_slider-side-start_cqzlk_1u58i_180"
 };

package/lib/internal/template/internal/components/panel-resize-handle/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_slider_cqzlk_1oyzh_145:not(#\9) {
+.awsui_slider_cqzlk_1u58i_145:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   cursor: ns-resize;
@@ -151,17 +151,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 18px;
   touch-action: none;
 }
-.awsui_slider_cqzlk_1oyzh_145:not(#\9):focus {
+.awsui_slider_cqzlk_1u58i_145:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1oyzh_145:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1u58i_145:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1oyzh_145:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1u58i_145:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1oyzh_145:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1u58i_145:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -169,15 +169,15 @@ body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1oyzh_145:not(#\9):focus
   inset-block-start: calc(-1 * 0px);
   inline-size: calc(100% + 0px + 0px);
   block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_slider-side_cqzlk_1oyzh_179:not(#\9),
-.awsui_slider-side-start_cqzlk_1oyzh_180:not(#\9) {
+.awsui_slider-side_cqzlk_1u58i_179:not(#\9),
+.awsui_slider-side-start_cqzlk_1u58i_180:not(#\9) {
   cursor: ew-resize;
   margin-block: 0;
   margin-inline-end: 0;

package/lib/internal/template/internal/components/panel-resize-handle/styles.selectors.js CHANGED Viewed

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "slider": "awsui_slider_cqzlk_1oyzh_145",
-  "slider-side": "awsui_slider-side_cqzlk_1oyzh_179",
-  "slider-side-start": "awsui_slider-side-start_cqzlk_1oyzh_180"
+  "slider": "awsui_slider_cqzlk_1u58i_145",
+  "slider-side": "awsui_slider-side_cqzlk_1u58i_179",
+  "slider-side-start": "awsui_slider-side-start_cqzlk_1u58i_180"
 };

package/lib/internal/template/internal/components/radio-button/styles.css.js CHANGED Viewed

@@ -1,12 +1,12 @@
     import './styles.scoped.css';
     export default {
-  "radio-control": "awsui_radio-control_1v1hk_1rp4y_145",
-  "outline": "awsui_outline_1v1hk_1rp4y_153",
-  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1rp4y_176",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1rp4y_180",
-  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1rp4y_180",
-  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1rp4y_185",
-  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1rp4y_201"
+  "radio-control": "awsui_radio-control_1v1hk_1f3dm_145",
+  "outline": "awsui_outline_1v1hk_1f3dm_153",
+  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1f3dm_176",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1f3dm_180",
+  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1f3dm_180",
+  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1f3dm_185",
+  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1f3dm_201"
 };

package/lib/internal/template/internal/components/radio-button/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_radio-control_1v1hk_1rp4y_145:not(#\9) {
+.awsui_radio-control_1v1hk_1f3dm_145:not(#\9) {
   margin-block-start: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-control-lkpwjy, 14px)) / 2);
   min-block-size: var(--size-control-lkpwjy, 14px);
   min-inline-size: var(--size-control-lkpwjy, 14px);
@@ -150,15 +150,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: var(--size-control-lkpwjy, 14px);
 }
-.awsui_outline_1v1hk_1rp4y_153:not(#\9) {
-  --awsui-style-focus-ring-box-shadow-6b9ypa: 0 0 0 var(--awsui-style-focus-ring-border-width-6b9ypa, 2px) var(--awsui-style-focus-ring-border-color-6b9ypa, var(--color-border-item-focused-r5f6xl, #0073bb));
+.awsui_outline_1v1hk_1f3dm_153:not(#\9) {
+  --awsui-style-focus-ring-box-shadow-z17rmd: 0 0 0 var(--awsui-style-focus-ring-border-width-z17rmd, 2px) var(--awsui-style-focus-ring-border-color-z17rmd, var(--color-border-item-focused-r5f6xl, #0073bb));
   position: relative;
 }
-.awsui_outline_1v1hk_1rp4y_153:not(#\9) {
+.awsui_outline_1v1hk_1f3dm_153:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_outline_1v1hk_1rp4y_153:not(#\9)::before {
+.awsui_outline_1v1hk_1f3dm_153:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -166,46 +166,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: calc(-1 * 2px);
   inline-size: calc(100% + 2px + 2px);
   block-size: calc(100% + 2px + 2px);
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-6b9ypa);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-z17rmd);
 }
-.awsui_styled-circle-border_1v1hk_1rp4y_176:not(#\9) {
+.awsui_styled-circle-border_1v1hk_1f3dm_176:not(#\9) {
   stroke: var(--color-border-control-default-e686ow, #687078);
   fill: var(--color-background-control-default-wjdczs, #ffffff);
 }
-.awsui_styled-circle-border_1v1hk_1rp4y_176.awsui_styled-circle-disabled_1v1hk_1rp4y_180:not(#\9), .awsui_styled-circle-border_1v1hk_1rp4y_176.awsui_styled-circle-readonly_1v1hk_1rp4y_180:not(#\9) {
+.awsui_styled-circle-border_1v1hk_1f3dm_176.awsui_styled-circle-disabled_1v1hk_1f3dm_180:not(#\9), .awsui_styled-circle-border_1v1hk_1f3dm_176.awsui_styled-circle-readonly_1v1hk_1f3dm_180:not(#\9) {
   fill: var(--color-background-control-disabled-2ixett, #d5dbdb);
   stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }
-.awsui_styled-circle-fill_1v1hk_1rp4y_185:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1f3dm_185:not(#\9) {
   stroke: var(--color-background-control-checked-se0x0e, #0073bb);
   fill: var(--color-foreground-control-default-rf7v4a, #ffffff);
   opacity: 0;
   transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_styled-circle-fill_1v1hk_1rp4y_185:not(#\9) {
+  .awsui_styled-circle-fill_1v1hk_1f3dm_185:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_1rp4y_185:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_1rp4y_185:not(#\9) {
+.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_1f3dm_185:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_1f3dm_185:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_styled-circle-fill_1v1hk_1rp4y_185.awsui_styled-circle-checked_1v1hk_1rp4y_201:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1f3dm_185.awsui_styled-circle-checked_1v1hk_1f3dm_201:not(#\9) {
   opacity: 1;
 }
-.awsui_styled-circle-fill_1v1hk_1rp4y_185.awsui_styled-circle-disabled_1v1hk_1rp4y_180:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1f3dm_185.awsui_styled-circle-disabled_1v1hk_1f3dm_180:not(#\9) {
   fill: var(--color-foreground-control-disabled-kj751b, #ffffff);
   stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }
-.awsui_styled-circle-fill_1v1hk_1rp4y_185.awsui_styled-circle-readonly_1v1hk_1rp4y_180:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1f3dm_185.awsui_styled-circle-readonly_1v1hk_1f3dm_180:not(#\9) {
   fill: var(--color-foreground-control-read-only-cgy3yn, #687078);
   stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }

package/lib/internal/template/internal/components/radio-button/styles.selectors.js CHANGED Viewed

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "radio-control": "awsui_radio-control_1v1hk_1rp4y_145",
-  "outline": "awsui_outline_1v1hk_1rp4y_153",
-  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1rp4y_176",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1rp4y_180",
-  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1rp4y_180",
-  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1rp4y_185",
-  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1rp4y_201"
+  "radio-control": "awsui_radio-control_1v1hk_1f3dm_145",
+  "outline": "awsui_outline_1v1hk_1f3dm_153",
+  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1f3dm_176",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1f3dm_180",
+  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1f3dm_180",
+  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1f3dm_185",
+  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1f3dm_201"
 };