@cloudscape-design/components 3.0.904 → 3.0.906

package/segmented-control/styles.scoped.css

@@ -158,7 +158,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_segment_8cbea_m0ww2_161:not(#\9) {
+.awsui_segment_8cbea_iu5r7_161:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   word-wrap: break-word;
@@ -168,121 +168,130 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
   letter-spacing: 0.25px;
-  border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-segment-default-qegins, #424650);
-  border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-segment-default-qegins, #424650);
   padding-block: var(--space-scaled-xxs-7597g1, 4px);
-  padding-inline: var(--space-button-horizontal-8jxzea, 20px);
-  border-inline-end-width: 0;
+  padding-inline: calc(var(--space-button-horizontal-8jxzea, 20px) - var(--space-static-xxs-82cdfi, 4px));
   background: var(--color-background-segment-default-voaiuw, #ffffff);
   color: var(--color-text-segment-default-iib3us, #424650);
   overflow: visible;
+  border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
+  border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
+  border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
+  border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
+  position: relative;
+  block-size: calc(100% - var(--space-static-xxs-82cdfi, 4px));
+  display: flex;
+  align-items: center;
+  border-inline: none;
+  border-block: none;
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):focus {
-  outline: none;
-}
-.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(1) {
-  grid-column: 1;
-  -ms-grid-column: 1;
-}
-.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(2) {
-  grid-column: 2;
-  -ms-grid-column: 2;
-}
-.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(3) {
-  grid-column: 3;
-  -ms-grid-column: 3;
-}
-.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(4) {
-  grid-column: 4;
-  -ms-grid-column: 4;
+.awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187) {
+  block-size: calc(100% - var(--space-static-xxs-82cdfi, 4px) - 2 * var(--border-width-field-h1g7tw, 2px));
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(5) {
-  grid-column: 5;
-  -ms-grid-column: 5;
+.awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
+  outline: none;
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(6) {
-  grid-column: 6;
-  -ms-grid-column: 6;
+.awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193:not(#\9) {
+  background: var(--color-background-segment-disabled-9tsgp1, #ffffff);
+  border-color: var(--color-border-segment-disabled-jfhyf7, #424650);
+  color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
   outline: 2px dotted transparent;
-  outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-gbye20, 4px) - 1px);
+  outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
-  inset-inline-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
-  inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
-  inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px) + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
-  block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px) + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
+  inset-inline-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
+  inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
+  inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
+  block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):last-child {
-  border-inline-end-width: var(--border-width-field-h1g7tw, 2px);
-  border-start-start-radius: 0;
-  border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
-  border-end-start-radius: 0;
-  border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
+.awsui_segment_8cbea_iu5r7_161:not(#\9):not(:last-child)::after {
+  content: "";
+  position: absolute;
+  inset-inline-end: calc(-1 * (var(--space-static-xxs-82cdfi, 4px) + 1px));
+  block-size: calc(100% - (var(--space-static-xxs-82cdfi, 4px) + var(--space-static-xxxs-3gu9os, 2px)) * 2);
+  min-block-size: calc(var(--line-height-body-m-30ar75, 20px) - var(--space-static-xxs-82cdfi, 4px) * 2);
+  inline-size: 1px;
+  background: var(--color-border-input-default-l7v83d, #8c8c94);
+  z-index: 1;
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):first-child {
-  border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
-  border-start-end-radius: 0;
-  border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
-  border-end-end-radius: 0;
+.awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187):not(:last-child)::after {
+  inset-inline-end: calc(-1 * var(--space-static-xxs-82cdfi, 4px));
 }
-.awsui_segment_8cbea_m0ww2_161.awsui_disabled_8cbea_m0ww2_241:not(#\9) {
-  background: var(--color-background-segment-disabled-9tsgp1, #ffffff);
-  border-color: var(--color-border-segment-disabled-jfhyf7, #424650);
-  color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
+.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(1) {
+  grid-column: 1;
+  -ms-grid-column: 1;
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):not(.awsui_disabled_8cbea_m0ww2_241) + .awsui_segment_8cbea_m0ww2_161.awsui_disabled_8cbea_m0ww2_241 {
-  border-inline-start-color: var(--color-border-segment-default-qegins, #424650);
+.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(2) {
+  grid-column: 2;
+  -ms-grid-column: 2;
 }
-.awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249:not(#\9) {
+.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(3) {
+  grid-column: 3;
+  -ms-grid-column: 3;
+}
+.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(4) {
+  grid-column: 4;
+  -ms-grid-column: 4;
+}
+.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(5) {
+  grid-column: 5;
+  -ms-grid-column: 5;
+}
+.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(6) {
+  grid-column: 6;
+  -ms-grid-column: 6;
+}
+.awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256:not(#\9) {
   background: var(--color-background-segment-active-bkvyiy, #006ce0);
-  border-color: var(--color-border-segment-active-0hw1oi, #424650);
   color: var(--color-text-segment-active-fc6owc, #ffffff);
 }
-.awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249 + .awsui_segment_8cbea_m0ww2_161:not(#\9), .awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249 + .awsui_segment_8cbea_m0ww2_161.awsui_disabled_8cbea_m0ww2_241:not(#\9) {
+.awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161:not(#\9), .awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193:not(#\9) {
   border-inline-start-color: var(--color-border-segment-active-0hw1oi, #424650);
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):hover:not(.awsui_selected_8cbea_m0ww2_249):not(.awsui_disabled_8cbea_m0ww2_241):not(:focus) {
-  background: var(--color-background-segment-hover-jbzuvp, #ffffff);
-  color: var(--color-text-segment-hover-88u58t, #006ce0);
+.awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_disabled_8cbea_iu5r7_193) + .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193 {
+  border-inline-start-color: var(--color-border-segment-default-qegins, #424650);
+}
+.awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) {
+  background: var(--color-background-segment-hover-jancts, #f0fbff);
+  color: var(--color-text-segment-hover-yckzgd, #002b66);
   border-color: var(--color-border-segment-hover-cs1sac, #424650);
   cursor: pointer;
 }
-.awsui_segment_8cbea_m0ww2_161:not(#\9):hover:not(.awsui_selected_8cbea_m0ww2_249):not(.awsui_disabled_8cbea_m0ww2_241):not(:focus) + .awsui_segment_8cbea_m0ww2_161:not(.awsui_selected_8cbea_m0ww2_249) {
+.awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) + .awsui_segment_8cbea_iu5r7_161:not(.awsui_selected_8cbea_iu5r7_256) {
   border-inline-start-color: var(--color-border-segment-hover-cs1sac, #424650);
 }
-.awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249 + .awsui_segment_8cbea_m0ww2_161:not(#\9):hover:not(.awsui_selected_8cbea_m0ww2_249):not(.awsui_disabled_8cbea_m0ww2_241):not(:focus) {
+.awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) {
   border-inline-start-color: var(--color-border-segment-active-0hw1oi, #424650);
 }
 
-.awsui_icon_8cbea_m0ww2_270:not(#\9) {
+.awsui_icon_8cbea_iu5r7_279:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_with-text_8cbea_m0ww2_274:not(#\9) {
+.awsui_with-text_8cbea_iu5r7_283:not(#\9) {
   position: relative;
   inset-inline-start: calc(-1 * var(--space-xxs-p8yyaw, 4px));
   margin-inline-end: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_with-no-text_8cbea_m0ww2_280:not(#\9) {
+.awsui_with-no-text_8cbea_iu5r7_289:not(#\9) {
   margin-inline: auto;
   inset-inline: 0;
 }
 
-.awsui_root_8cbea_m0ww2_285:not(#\9) {
+.awsui_root_8cbea_iu5r7_294:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -315,44 +324,58 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focu
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_segment-part_8cbea_m0ww2_317:not(#\9) {
+.awsui_segment-part_8cbea_iu5r7_326:not(#\9) {
   display: inline-grid;
+  border-inline: solid var(--border-width-field-h1g7tw, 2px) var(--color-border-input-default-l7v83d, #8c8c94);
+  border-block: solid var(--border-width-field-h1g7tw, 2px) var(--color-border-input-default-l7v83d, #8c8c94);
+  border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
+  border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
+  border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
+  border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
+  align-items: center;
+  min-block-size: calc(var(--line-height-body-m-30ar75, 20px) + var(--space-static-xxs-82cdfi, 4px));
+  padding-inline: var(--space-static-xxxs-3gu9os, 2px);
+  gap: calc(var(--space-static-xxs-82cdfi, 4px) * 2 + 1px);
+}
+.awsui_segment-part_8cbea_iu5r7_326:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187) {
+  padding-inline: calc(var(--space-static-xxxs-3gu9os, 2px) + 1px);
+  gap: calc(var(--space-static-xxs-82cdfi, 4px) * 2 - 1px);
 }
 @media (max-width: 688px) {
-  .awsui_segment-part_8cbea_m0ww2_317:not(#\9) {
+  .awsui_segment-part_8cbea_iu5r7_326:not(#\9) {
     display: none;
   }
 }
 
-.awsui_select_8cbea_m0ww2_249:not(#\9) {
+.awsui_select_8cbea_iu5r7_256:not(#\9) {
   display: none;
 }
 @media (max-width: 688px) {
-  .awsui_select_8cbea_m0ww2_249:not(#\9) {
+  .awsui_select_8cbea_iu5r7_256:not(#\9) {
     display: block;
   }
 }
 
-.awsui_segment-count-2_8cbea_m0ww2_336:not(#\9) {
-  grid-template-columns: 1fr 1fr;
+.awsui_segment-count-2_8cbea_iu5r7_359:not(#\9) {
+  grid-template-columns: repeat(2, auto);
 }
 
-.awsui_segment-count-3_8cbea_m0ww2_340:not(#\9) {
-  grid-template-columns: 1fr 1fr 1fr;
+.awsui_segment-count-3_8cbea_iu5r7_363:not(#\9) {
+  grid-template-columns: repeat(3, auto);
 }
 
-.awsui_segment-count-4_8cbea_m0ww2_344:not(#\9) {
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+.awsui_segment-count-4_8cbea_iu5r7_367:not(#\9) {
+  grid-template-columns: repeat(4, auto);
 }
 
-.awsui_segment-count-5_8cbea_m0ww2_348:not(#\9) {
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+.awsui_segment-count-5_8cbea_iu5r7_371:not(#\9) {
+  grid-template-columns: repeat(5, auto);
 }
 
-.awsui_segment-count-6_8cbea_m0ww2_352:not(#\9) {
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+.awsui_segment-count-6_8cbea_iu5r7_375:not(#\9) {
+  grid-template-columns: repeat(6, auto);
 }
 
-.awsui_disabled-reason-tooltip_8cbea_m0ww2_356:not(#\9) {
+.awsui_disabled-reason-tooltip_8cbea_iu5r7_379:not(#\9) {
   /* used in test-utils or tests */
 }

package/segmented-control/styles.selectors.js

@@ -2,20 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_m0ww2_161",
-  "disabled": "awsui_disabled_8cbea_m0ww2_241",
-  "selected": "awsui_selected_8cbea_m0ww2_249",
-  "icon": "awsui_icon_8cbea_m0ww2_270",
-  "with-text": "awsui_with-text_8cbea_m0ww2_274",
-  "with-no-text": "awsui_with-no-text_8cbea_m0ww2_280",
-  "root": "awsui_root_8cbea_m0ww2_285",
-  "segment-part": "awsui_segment-part_8cbea_m0ww2_317",
-  "select": "awsui_select_8cbea_m0ww2_249",
-  "segment-count-2": "awsui_segment-count-2_8cbea_m0ww2_336",
-  "segment-count-3": "awsui_segment-count-3_8cbea_m0ww2_340",
-  "segment-count-4": "awsui_segment-count-4_8cbea_m0ww2_344",
-  "segment-count-5": "awsui_segment-count-5_8cbea_m0ww2_348",
-  "segment-count-6": "awsui_segment-count-6_8cbea_m0ww2_352",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_m0ww2_356"
+  "segment": "awsui_segment_8cbea_iu5r7_161",
+  "refresh": "awsui_refresh_8cbea_iu5r7_187",
+  "disabled": "awsui_disabled_8cbea_iu5r7_193",
+  "selected": "awsui_selected_8cbea_iu5r7_256",
+  "icon": "awsui_icon_8cbea_iu5r7_279",
+  "with-text": "awsui_with-text_8cbea_iu5r7_283",
+  "with-no-text": "awsui_with-no-text_8cbea_iu5r7_289",
+  "root": "awsui_root_8cbea_iu5r7_294",
+  "segment-part": "awsui_segment-part_8cbea_iu5r7_326",
+  "select": "awsui_select_8cbea_iu5r7_256",
+  "segment-count-2": "awsui_segment-count-2_8cbea_iu5r7_359",
+  "segment-count-3": "awsui_segment-count-3_8cbea_iu5r7_363",
+  "segment-count-4": "awsui_segment-count-4_8cbea_iu5r7_367",
+  "segment-count-5": "awsui_segment-count-5_8cbea_iu5r7_371",
+  "segment-count-6": "awsui_segment-count-6_8cbea_iu5r7_375",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_iu5r7_379"
 };