@cloudscape-design/components-themeable 3.0.1151 → 3.0.1153

package/lib/internal/template/segmented-control/style.js

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getSegmentedControlRootStyles(style) {
+    var _a;
+    if (SYSTEM !== 'core') {
+        return {};
+    }
+    return {
+        borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
+    };
+}
+export function getSegmentedControlSegmentStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    if (SYSTEM !== 'core') {
+        return {};
+    }
+    return {
+        borderRadius: (_a = style === null || style === void 0 ? void 0 : style.segment) === null || _a === void 0 ? void 0 : _a.borderRadius,
+        fontSize: (_b = style === null || style === void 0 ? void 0 : style.segment) === null || _b === void 0 ? void 0 : _b.fontSize,
+        paddingBlock: (_c = style === null || style === void 0 ? void 0 : style.segment) === null || _c === void 0 ? void 0 : _c.paddingBlock,
+        paddingInline: (_d = style === null || style === void 0 ? void 0 : style.segment) === null || _d === void 0 ? void 0 : _d.paddingInline,
+        [customCssProps.styleBackgroundActive]: (_f = (_e = style === null || style === void 0 ? void 0 : style.segment) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.active,
+        [customCssProps.styleBackgroundDefault]: (_h = (_g = style === null || style === void 0 ? void 0 : style.segment) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.default,
+        [customCssProps.styleBackgroundDisabled]: (_k = (_j = style === null || style === void 0 ? void 0 : style.segment) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k.disabled,
+        [customCssProps.styleBackgroundHover]: (_m = (_l = style === null || style === void 0 ? void 0 : style.segment) === null || _l === void 0 ? void 0 : _l.background) === null || _m === void 0 ? void 0 : _m.hover,
+        [customCssProps.styleColorActive]: (_p = (_o = style === null || style === void 0 ? void 0 : style.segment) === null || _o === void 0 ? void 0 : _o.color) === null || _p === void 0 ? void 0 : _p.active,
+        [customCssProps.styleColorDefault]: (_r = (_q = style === null || style === void 0 ? void 0 : style.segment) === null || _q === void 0 ? void 0 : _q.color) === null || _r === void 0 ? void 0 : _r.default,
+        [customCssProps.styleColorDisabled]: (_t = (_s = style === null || style === void 0 ? void 0 : style.segment) === null || _s === void 0 ? void 0 : _s.color) === null || _t === void 0 ? void 0 : _t.disabled,
+        [customCssProps.styleColorHover]: (_v = (_u = style === null || style === void 0 ? void 0 : style.segment) === null || _u === void 0 ? void 0 : _u.color) === null || _v === void 0 ? void 0 : _v.hover,
+        [customCssProps.styleFocusRingBorderColor]: (_x = (_w = style === null || style === void 0 ? void 0 : style.segment) === null || _w === void 0 ? void 0 : _w.focusRing) === null || _x === void 0 ? void 0 : _x.borderColor,
+        [customCssProps.styleFocusRingBorderRadius]: (_z = (_y = style === null || style === void 0 ? void 0 : style.segment) === null || _y === void 0 ? void 0 : _y.focusRing) === null || _z === void 0 ? void 0 : _z.borderRadius,
+        [customCssProps.styleFocusRingBorderWidth]: (_1 = (_0 = style === null || style === void 0 ? void 0 : style.segment) === null || _0 === void 0 ? void 0 : _0.focusRing) === null || _1 === void 0 ? void 0 : _1.borderWidth,
+    };
+}
+//# sourceMappingURL=style.js.map

package/lib/internal/template/segmented-control/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/segmented-control/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,6BAA6B,CAAC,KAAqC;;IACjF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,YAAY;KACxC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gCAAgC,CAAC,KAAqC;;IACpF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,YAAY;QAC1C,QAAQ,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ;QAClC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,YAAY;QAC1C,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,aAAa;QAC5C,CAAC,cAAc,CAAC,qBAAqB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,MAAM;QAC1E,CAAC,cAAc,CAAC,sBAAsB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,OAAO;QAC5E,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,QAAQ;QAC9E,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,KAAK;QACxE,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,MAAM;QAChE,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,OAAO;QAClE,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,QAAQ;QACpE,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,KAAK;QAC9D,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,SAAS,0CAAE,WAAW;QAClF,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,SAAS,0CAAE,YAAY;QACpF,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,SAAS,0CAAE,WAAW;KACnF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { SegmentedControlProps } from './interfaces';\n\nexport function getSegmentedControlRootStyles(style: SegmentedControlProps['style']) {\n  if (SYSTEM !== 'core') {\n    return {};\n  }\n\n  return {\n    borderRadius: style?.root?.borderRadius,\n  };\n}\n\nexport function getSegmentedControlSegmentStyles(style: SegmentedControlProps['style']) {\n  if (SYSTEM !== 'core') {\n    return {};\n  }\n\n  return {\n    borderRadius: style?.segment?.borderRadius,\n    fontSize: style?.segment?.fontSize,\n    paddingBlock: style?.segment?.paddingBlock,\n    paddingInline: style?.segment?.paddingInline,\n    [customCssProps.styleBackgroundActive]: style?.segment?.background?.active,\n    [customCssProps.styleBackgroundDefault]: style?.segment?.background?.default,\n    [customCssProps.styleBackgroundDisabled]: style?.segment?.background?.disabled,\n    [customCssProps.styleBackgroundHover]: style?.segment?.background?.hover,\n    [customCssProps.styleColorActive]: style?.segment?.color?.active,\n    [customCssProps.styleColorDefault]: style?.segment?.color?.default,\n    [customCssProps.styleColorDisabled]: style?.segment?.color?.disabled,\n    [customCssProps.styleColorHover]: style?.segment?.color?.hover,\n    [customCssProps.styleFocusRingBorderColor]: style?.segment?.focusRing?.borderColor,\n    [customCssProps.styleFocusRingBorderRadius]: style?.segment?.focusRing?.borderRadius,\n    [customCssProps.styleFocusRingBorderWidth]: style?.segment?.focusRing?.borderWidth,\n  };\n}\n"]}

package/lib/internal/template/segmented-control/styles.css.js

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "segment": "awsui_segment_8cbea_1hbsn_161",
-  "refresh": "awsui_refresh_8cbea_1hbsn_187",
-  "disabled": "awsui_disabled_8cbea_1hbsn_193",
-  "selected": "awsui_selected_8cbea_1hbsn_250",
-  "icon": "awsui_icon_8cbea_1hbsn_273",
-  "with-text": "awsui_with-text_8cbea_1hbsn_277",
-  "with-no-text": "awsui_with-no-text_8cbea_1hbsn_283",
-  "root": "awsui_root_8cbea_1hbsn_288",
-  "segment-part": "awsui_segment-part_8cbea_1hbsn_320",
-  "select": "awsui_select_8cbea_1hbsn_250",
-  "segment-count-2": "awsui_segment-count-2_8cbea_1hbsn_355",
-  "segment-count-3": "awsui_segment-count-3_8cbea_1hbsn_359",
-  "segment-count-4": "awsui_segment-count-4_8cbea_1hbsn_363",
-  "segment-count-5": "awsui_segment-count-5_8cbea_1hbsn_367",
-  "segment-count-6": "awsui_segment-count-6_8cbea_1hbsn_371",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1hbsn_375"
+  "segment": "awsui_segment_8cbea_qjer1_161",
+  "refresh": "awsui_refresh_8cbea_qjer1_188",
+  "disabled": "awsui_disabled_8cbea_qjer1_194",
+  "selected": "awsui_selected_8cbea_qjer1_251",
+  "icon": "awsui_icon_8cbea_qjer1_261",
+  "with-text": "awsui_with-text_8cbea_qjer1_265",
+  "with-no-text": "awsui_with-no-text_8cbea_qjer1_271",
+  "root": "awsui_root_8cbea_qjer1_276",
+  "segment-part": "awsui_segment-part_8cbea_qjer1_308",
+  "select": "awsui_select_8cbea_qjer1_251",
+  "segment-count-2": "awsui_segment-count-2_8cbea_qjer1_343",
+  "segment-count-3": "awsui_segment-count-3_8cbea_qjer1_347",
+  "segment-count-4": "awsui_segment-count-4_8cbea_qjer1_351",
+  "segment-count-5": "awsui_segment-count-5_8cbea_qjer1_355",
+  "segment-count-6": "awsui_segment-count-6_8cbea_qjer1_359",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_qjer1_363"
 };
   

package/lib/internal/template/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_1hbsn_161:not(#\9) {
+.awsui_segment_8cbea_qjer1_161:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   word-wrap: break-word;
@@ -170,8 +170,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: 0.25px;
   padding-block: var(--space-scaled-xxs-jatbiv, 4px);
   padding-inline: calc(var(--space-button-horizontal-v8ywmo, 20px) - var(--space-static-xxs-0cgyf1, 4px));
-  background: var(--color-background-segment-default-c0s956, #ffffff);
-  color: var(--color-text-segment-default-fj1v75, #545b64);
+  background: var(--awsui-style-background-default-d43v8n, var(--color-background-segment-default-c0s956, #ffffff));
+  color: var(--awsui-style-color-default-d43v8n, var(--color-text-segment-default-fj1v75, #545b64));
   overflow: visible;
   border-start-start-radius: var(--border-radius-button-vm1lh4, 2px);
   border-start-end-radius: var(--border-radius-button-vm1lh4, 2px);
@@ -183,26 +183,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   border-inline: none;
   border-block: none;
+  --awsui-style-focus-ring-box-shadow-d43v8n: 0 0 0 var(--awsui-style-focus-ring-border-width-d43v8n, 2px) var(--awsui-style-focus-ring-border-color-d43v8n, var(--color-border-item-focused-r5f6xl, #0073bb));
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):not(.awsui_refresh_8cbea_1hbsn_187) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):not(.awsui_refresh_8cbea_qjer1_188) {
   block-size: calc(100% - var(--space-static-xxs-0cgyf1, 4px) - 2 * var(--border-width-field-9k1tdz, 1px));
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):focus {
+.awsui_segment_8cbea_qjer1_161:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_8cbea_1hbsn_161.awsui_disabled_8cbea_1hbsn_193:not(#\9) {
-  background: var(--color-background-segment-disabled-etp65k, #ffffff);
-  border-color: var(--color-border-segment-disabled-lhc94s, #d5dbdb);
-  color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
+.awsui_segment_8cbea_qjer1_161.awsui_disabled_8cbea_qjer1_194:not(#\9) {
+  background: var(--awsui-style-background-disabled-d43v8n, var(--color-background-segment-disabled-etp65k, #ffffff));
+  color: var(--awsui-style-color-disabled-d43v8n, var(--color-text-interactive-disabled-xwt2jl, #aab7b8));
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_qjer1_161:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_qjer1_161:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_qjer1_161:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -210,13 +210,14 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focu
   inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px));
   inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px));
   block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px));
-  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);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-d43v8n, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-d43v8n);
+  z-index: 1;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):not(:last-child)::after {
+.awsui_segment_8cbea_qjer1_161:not(#\9):not(:last-child)::after {
   content: "";
   position: absolute;
   inset-inline-end: calc(-1 * (var(--space-static-xxs-0cgyf1, 4px) + 1px));
@@ -226,66 +227,53 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focu
   background: var(--color-border-input-default-txli8y, #687078);
   z-index: 1;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):not(.awsui_refresh_8cbea_1hbsn_187):not(:last-child)::after {
+.awsui_segment_8cbea_qjer1_161:not(#\9):not(.awsui_refresh_8cbea_qjer1_188):not(:last-child)::after {
   inset-inline-end: calc(-1 * var(--space-static-xxs-0cgyf1, 4px));
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):nth-child(1) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):nth-child(1) {
   grid-column: 1;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):nth-child(2) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):nth-child(2) {
   grid-column: 2;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):nth-child(3) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):nth-child(3) {
   grid-column: 3;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):nth-child(4) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):nth-child(4) {
   grid-column: 4;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):nth-child(5) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):nth-child(5) {
   grid-column: 5;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):nth-child(6) {
+.awsui_segment_8cbea_qjer1_161:not(#\9):nth-child(6) {
   grid-column: 6;
 }
-.awsui_segment_8cbea_1hbsn_161.awsui_selected_8cbea_1hbsn_250:not(#\9) {
-  background: var(--color-background-segment-active-pvua4h, #0073bb);
-  color: var(--color-text-segment-active-q50mlg, #ffffff);
-}
-.awsui_segment_8cbea_1hbsn_161.awsui_selected_8cbea_1hbsn_250 + .awsui_segment_8cbea_1hbsn_161:not(#\9), .awsui_segment_8cbea_1hbsn_161.awsui_selected_8cbea_1hbsn_250 + .awsui_segment_8cbea_1hbsn_161.awsui_disabled_8cbea_1hbsn_193:not(#\9) {
-  border-inline-start-color: var(--color-border-segment-active-kbwjy5, #16191f);
-}
-.awsui_segment_8cbea_1hbsn_161:not(#\9):not(.awsui_disabled_8cbea_1hbsn_193) + .awsui_segment_8cbea_1hbsn_161.awsui_disabled_8cbea_1hbsn_193 {
-  border-inline-start-color: var(--color-border-segment-default-29y0lr, #687078);
+.awsui_segment_8cbea_qjer1_161.awsui_selected_8cbea_qjer1_251:not(#\9) {
+  background: var(--awsui-style-background-active-d43v8n, var(--color-background-segment-active-pvua4h, #0073bb));
+  color: var(--awsui-style-color-active-d43v8n, var(--color-text-segment-active-q50mlg, #ffffff));
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):hover:not(.awsui_selected_8cbea_1hbsn_250):not(.awsui_disabled_8cbea_1hbsn_193):not(:focus) {
-  background: var(--color-background-segment-hover-e4h2ea, #fafafa);
-  color: var(--color-text-segment-hover-qyb2p1, #16191f);
-  border-color: var(--color-border-segment-hover-dneu56, #16191f);
+.awsui_segment_8cbea_qjer1_161:not(#\9):hover:not(.awsui_selected_8cbea_qjer1_251):not(.awsui_disabled_8cbea_qjer1_194):not(:focus) {
+  background: var(--awsui-style-background-hover-d43v8n, var(--color-background-segment-hover-e4h2ea, #fafafa));
+  color: var(--awsui-style-color-hover-d43v8n, var(--color-text-segment-hover-qyb2p1, #16191f));
   cursor: pointer;
 }
-.awsui_segment_8cbea_1hbsn_161:not(#\9):hover:not(.awsui_selected_8cbea_1hbsn_250):not(.awsui_disabled_8cbea_1hbsn_193):not(:focus) + .awsui_segment_8cbea_1hbsn_161:not(.awsui_selected_8cbea_1hbsn_250) {
-  border-inline-start-color: var(--color-border-segment-hover-dneu56, #16191f);
-}
-.awsui_segment_8cbea_1hbsn_161.awsui_selected_8cbea_1hbsn_250 + .awsui_segment_8cbea_1hbsn_161:not(#\9):hover:not(.awsui_selected_8cbea_1hbsn_250):not(.awsui_disabled_8cbea_1hbsn_193):not(:focus) {
-  border-inline-start-color: var(--color-border-segment-active-kbwjy5, #16191f);
-}
 
-.awsui_icon_8cbea_1hbsn_273:not(#\9) {
+.awsui_icon_8cbea_qjer1_261:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_with-text_8cbea_1hbsn_277:not(#\9) {
+.awsui_with-text_8cbea_qjer1_265:not(#\9) {
   position: relative;
   inset-inline-start: calc(-1 * var(--space-xxs-jnczic, 4px));
   margin-inline-end: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_with-no-text_8cbea_1hbsn_283:not(#\9) {
+.awsui_with-no-text_8cbea_qjer1_271:not(#\9) {
   margin-inline: auto;
   inset-inline: 0;
 }
 
-.awsui_root_8cbea_1hbsn_288:not(#\9) {
+.awsui_root_8cbea_qjer1_276:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -317,7 +305,7 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focu
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_segment-part_8cbea_1hbsn_320:not(#\9) {
+.awsui_segment-part_8cbea_qjer1_308:not(#\9) {
   display: inline-grid;
   border-inline: solid var(--border-width-field-9k1tdz, 1px) var(--color-border-input-default-txli8y, #687078);
   border-block: solid var(--border-width-field-9k1tdz, 1px) var(--color-border-input-default-txli8y, #687078);
@@ -332,46 +320,46 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1hbsn_161:not(#\9):focu
   padding-inline: calc(var(--space-static-xxs-0cgyf1, 4px) - var(--border-width-field-9k1tdz, 1px));
   gap: calc(var(--space-static-xxs-0cgyf1, 4px) * 2 + 1px);
 }
-.awsui_segment-part_8cbea_1hbsn_320:not(#\9):not(.awsui_refresh_8cbea_1hbsn_187) {
+.awsui_segment-part_8cbea_qjer1_308:not(#\9):not(.awsui_refresh_8cbea_qjer1_188) {
   padding-inline: calc(var(--space-static-xxxs-zckw10, 2px) + var(--border-width-field-9k1tdz, 1px));
   padding-block: 0;
   gap: calc(var(--space-static-xxs-0cgyf1, 4px) * 2 - 1px);
 }
 @media (max-width: 688px) {
-  .awsui_segment-part_8cbea_1hbsn_320:not(#\9) {
+  .awsui_segment-part_8cbea_qjer1_308:not(#\9) {
     display: none;
   }
 }
 
-.awsui_select_8cbea_1hbsn_250:not(#\9) {
+.awsui_select_8cbea_qjer1_251:not(#\9) {
   display: none;
 }
 @media (max-width: 688px) {
-  .awsui_select_8cbea_1hbsn_250:not(#\9) {
+  .awsui_select_8cbea_qjer1_251:not(#\9) {
     display: block;
   }
 }
 
-.awsui_segment-count-2_8cbea_1hbsn_355:not(#\9) {
+.awsui_segment-count-2_8cbea_qjer1_343:not(#\9) {
   grid-template-columns: repeat(2, auto);
 }
 
-.awsui_segment-count-3_8cbea_1hbsn_359:not(#\9) {
+.awsui_segment-count-3_8cbea_qjer1_347:not(#\9) {
   grid-template-columns: repeat(3, auto);
 }
 
-.awsui_segment-count-4_8cbea_1hbsn_363:not(#\9) {
+.awsui_segment-count-4_8cbea_qjer1_351:not(#\9) {
   grid-template-columns: repeat(4, auto);
 }
 
-.awsui_segment-count-5_8cbea_1hbsn_367:not(#\9) {
+.awsui_segment-count-5_8cbea_qjer1_355:not(#\9) {
   grid-template-columns: repeat(5, auto);
 }
 
-.awsui_segment-count-6_8cbea_1hbsn_371:not(#\9) {
+.awsui_segment-count-6_8cbea_qjer1_359:not(#\9) {
   grid-template-columns: repeat(6, auto);
 }
 
-.awsui_disabled-reason-tooltip_8cbea_1hbsn_375:not(#\9) {
+.awsui_disabled-reason-tooltip_8cbea_qjer1_363:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/segmented-control/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_1hbsn_161",
-  "refresh": "awsui_refresh_8cbea_1hbsn_187",
-  "disabled": "awsui_disabled_8cbea_1hbsn_193",
-  "selected": "awsui_selected_8cbea_1hbsn_250",
-  "icon": "awsui_icon_8cbea_1hbsn_273",
-  "with-text": "awsui_with-text_8cbea_1hbsn_277",
-  "with-no-text": "awsui_with-no-text_8cbea_1hbsn_283",
-  "root": "awsui_root_8cbea_1hbsn_288",
-  "segment-part": "awsui_segment-part_8cbea_1hbsn_320",
-  "select": "awsui_select_8cbea_1hbsn_250",
-  "segment-count-2": "awsui_segment-count-2_8cbea_1hbsn_355",
-  "segment-count-3": "awsui_segment-count-3_8cbea_1hbsn_359",
-  "segment-count-4": "awsui_segment-count-4_8cbea_1hbsn_363",
-  "segment-count-5": "awsui_segment-count-5_8cbea_1hbsn_367",
-  "segment-count-6": "awsui_segment-count-6_8cbea_1hbsn_371",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1hbsn_375"
+  "segment": "awsui_segment_8cbea_qjer1_161",
+  "refresh": "awsui_refresh_8cbea_qjer1_188",
+  "disabled": "awsui_disabled_8cbea_qjer1_194",
+  "selected": "awsui_selected_8cbea_qjer1_251",
+  "icon": "awsui_icon_8cbea_qjer1_261",
+  "with-text": "awsui_with-text_8cbea_qjer1_265",
+  "with-no-text": "awsui_with-no-text_8cbea_qjer1_271",
+  "root": "awsui_root_8cbea_qjer1_276",
+  "segment-part": "awsui_segment-part_8cbea_qjer1_308",
+  "select": "awsui_select_8cbea_qjer1_251",
+  "segment-count-2": "awsui_segment-count-2_8cbea_qjer1_343",
+  "segment-count-3": "awsui_segment-count-3_8cbea_qjer1_347",
+  "segment-count-4": "awsui_segment-count-4_8cbea_qjer1_351",
+  "segment-count-5": "awsui_segment-count-5_8cbea_qjer1_355",
+  "segment-count-6": "awsui_segment-count-6_8cbea_qjer1_359",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_qjer1_363"
 };
   

package/lib/internal/template/test-utils/dom/radio-group/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-
 import RadioButtonWrapper from '../radio-button';
 export default class RadioGroupWrapper extends ComponentWrapper {
     static rootSelector: string;
+    static legacyRootSelector: string;
     findButtons(): Array<RadioButtonWrapper>;
     findInputByValue(value: string): ElementWrapper<HTMLInputElement> | null;
 }

package/lib/internal/template/test-utils/dom/radio-group/index.js

@@ -6,16 +6,18 @@ const dom_1 = require("@cloudscape-design/test-utils-core/dom");
 const utils_1 = require("@cloudscape-design/test-utils-core/utils");
 const radio_button_1 = require("../radio-button");
 const styles_selectors_js_1 = require("../../../internal/components/radio-button/test-classes/styles.selectors.js");
-const styles_selectors_js_2 = require("../../../radio-group/test-classes/styles.selectors.js");
+const styles_selectors_js_2 = require("../../../radio-group/styles.selectors.js");
+const styles_selectors_js_3 = require("../../../radio-group/test-classes/styles.selectors.js");
 class RadioGroupWrapper extends dom_1.ComponentWrapper {
     findButtons() {
-        return this.findAllByClassName(styles_selectors_js_1.default.root).map(r => new radio_button_1.default(r.getElement()));
+        return this.findAll(`:is(.${styles_selectors_js_1.default.root}, .${styles_selectors_js_2.default.radio})`).map(r => new radio_button_1.default(r.getElement()));
     }
     findInputByValue(value) {
         const safeValue = (0, utils_1.escapeSelector)(value);
         return this.find(`input[value="${safeValue}"]`);
     }
 }
-RadioGroupWrapper.rootSelector = styles_selectors_js_2.default.root;
+RadioGroupWrapper.rootSelector = styles_selectors_js_3.default.root;
+RadioGroupWrapper.legacyRootSelector = styles_selectors_js_2.default.root;
 exports.default = RadioGroupWrapper;
 //# sourceMappingURL=index.js.map

package/lib/internal/template/test-utils/dom/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAC1F,oEAA0E;AAE1E,kDAAiD;AAEjD,oHAA2G;AAC3G,+FAA2E;AAE3E,MAAqB,iBAAkB,SAAQ,sBAAgB;IAG7D,WAAW;QACT,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,sBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC1G,CAAC;IAED,gBAAgB,CAAC,KAAa;QAC5B,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,SAAS,IAAI,CAAC,CAAC;IAClD,CAAC;;AATM,8BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;kBADvB,iBAAiB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAC1F,oEAA0E;AAE1E,kDAAiD;AAEjD,oHAA2G;AAC3G,kFAAoE;AACpE,+FAA2E;AAE3E,MAAqB,iBAAkB,SAAQ,sBAAgB;IAI7D,WAAW;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,6BAAiB,CAAC,IAAI,MAAM,6BAAY,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAChF,CAAC,CAAC,EAAE,CAAC,IAAI,sBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAC5C,CAAC;IACJ,CAAC;IAED,gBAAgB,CAAC,KAAa;QAC5B,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,SAAS,IAAI,CAAC,CAAC;IAClD,CAAC;;AAZM,8BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;AACnC,oCAAkB,GAAW,6BAAY,CAAC,IAAI,CAAC;kBAFnC,iBAAiB"}

package/lib/internal/template/test-utils/selectors/radio-group/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-
 import RadioButtonWrapper from '../radio-button';
 export default class RadioGroupWrapper extends ComponentWrapper {
     static rootSelector: string;
+    static legacyRootSelector: string;
     findButtons(): import("@cloudscape-design/test-utils-core/selectors").MultiElementWrapper<RadioButtonWrapper>;
     findInputByValue(value: string): ElementWrapper;
 }

package/lib/internal/template/test-utils/selectors/radio-group/index.js

@@ -6,16 +6,18 @@ const selectors_1 = require("@cloudscape-design/test-utils-core/selectors");
 const utils_1 = require("@cloudscape-design/test-utils-core/utils");
 const radio_button_1 = require("../radio-button");
 const styles_selectors_js_1 = require("../../../internal/components/radio-button/test-classes/styles.selectors.js");
-const styles_selectors_js_2 = require("../../../radio-group/test-classes/styles.selectors.js");
+const styles_selectors_js_2 = require("../../../radio-group/styles.selectors.js");
+const styles_selectors_js_3 = require("../../../radio-group/test-classes/styles.selectors.js");
 class RadioGroupWrapper extends selectors_1.ComponentWrapper {
     findButtons() {
-        return this.findAllByClassName(styles_selectors_js_1.default.root).map(r => new radio_button_1.default(r.getElement()));
+        return this.findAll(`:is(.${styles_selectors_js_1.default.root}, .${styles_selectors_js_2.default.radio})`).map(r => new radio_button_1.default(r.getElement()));
     }
     findInputByValue(value) {
         const safeValue = (0, utils_1.escapeSelector)(value);
         return this.find(`input[value="${safeValue}"]`);
     }
 }
-RadioGroupWrapper.rootSelector = styles_selectors_js_2.default.root;
+RadioGroupWrapper.rootSelector = styles_selectors_js_3.default.root;
+RadioGroupWrapper.legacyRootSelector = styles_selectors_js_2.default.root;
 exports.default = RadioGroupWrapper;
 //# sourceMappingURL=index.js.map

package/lib/internal/template/test-utils/selectors/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,oEAA0E;AAC1E,kDAAiD;AACjD,oHAA2G;AAC3G,+FAA2E;AAC3E,MAAqB,iBAAkB,SAAQ,4BAAgB;IAE7D,WAAW;QACT,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,sBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAC1G,CAAC;IACD,gBAAgB,CAAC,KAAa;QAC5B,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,SAAS,IAAI,CAAC,CAAC;IAClD,CAAC;;AAPM,8BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;kBADvB,iBAAiB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/selectors/radio-group/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,4EAAgG;AAChG,oEAA0E;AAC1E,kDAAiD;AACjD,oHAA2G;AAC3G,kFAAoE;AACpE,+FAA2E;AAC3E,MAAqB,iBAAkB,SAAQ,4BAAgB;IAG7D,WAAW;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,6BAAiB,CAAC,IAAI,MAAM,6BAAY,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,sBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAClI,CAAC;IACD,gBAAgB,CAAC,KAAa;QAC5B,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,SAAS,IAAI,CAAC,CAAC;IAClD,CAAC;;AARM,8BAAY,GAAW,6BAAM,CAAC,IAAI,CAAC;AACnC,oCAAkB,GAAW,6BAAY,CAAC,IAAI,CAAC;kBAFnC,iBAAiB"}

package/lib/internal/template/tree-view/vertical-connector/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "vertical-connector": "awsui_vertical-connector_1r2pu_1f9ek_9",
-  "grid": "awsui_grid_1r2pu_1f9ek_13",
-  "absolute": "awsui_absolute_1r2pu_1f9ek_20"
+  "vertical-connector": "awsui_vertical-connector_1r2pu_5k3hj_9",
+  "grid": "awsui_grid_1r2pu_5k3hj_13",
+  "absolute": "awsui_absolute_1r2pu_5k3hj_20"
 };
   

package/lib/internal/template/tree-view/vertical-connector/styles.scoped.css

@@ -6,20 +6,20 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_vertical-connector_1r2pu_1f9ek_9:not(#\9) {
+.awsui_vertical-connector_1r2pu_5k3hj_9:not(#\9) {
   background-color: var(--color-tree-view-connector-line-ao4t04, #879596);
   inline-size: var(--border-divider-list-width-8ggz94, 1px);
 }
-.awsui_vertical-connector_1r2pu_1f9ek_9.awsui_grid_1r2pu_1f9ek_13:not(#\9) {
+.awsui_vertical-connector_1r2pu_5k3hj_9.awsui_grid_1r2pu_5k3hj_13:not(#\9) {
   grid-row: 2/span 3;
   grid-column: 1;
   block-size: 100%;
   position: relative;
-  inset-inline-start: 14px;
+  inset-inline-start: calc((28px - var(--border-divider-list-width-8ggz94, 1px)) / 2);
 }
-.awsui_vertical-connector_1r2pu_1f9ek_9.awsui_absolute_1r2pu_1f9ek_20:not(#\9) {
+.awsui_vertical-connector_1r2pu_5k3hj_9.awsui_absolute_1r2pu_5k3hj_20:not(#\9) {
   position: absolute;
   inset: 0;
   inset-block-end: var(--space-scaled-xs-sppte9, 8px);
-  inset-inline-start: 14px;
+  inset-inline-start: calc((28px - var(--border-divider-list-width-8ggz94, 1px)) / 2);
 }

package/lib/internal/template/tree-view/vertical-connector/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "vertical-connector": "awsui_vertical-connector_1r2pu_1f9ek_9",
-  "grid": "awsui_grid_1r2pu_1f9ek_13",
-  "absolute": "awsui_absolute_1r2pu_1f9ek_20"
+  "vertical-connector": "awsui_vertical-connector_1r2pu_5k3hj_9",
+  "grid": "awsui_grid_1r2pu_5k3hj_13",
+  "absolute": "awsui_absolute_1r2pu_5k3hj_20"
 };
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1151",
+  "version": "3.0.1153",
   "files": [
     "lib"
   ],

package/lib/internal/scss/annotation-context/annotation/arrow.scss

@@ -1,113 +0,0 @@
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-
-@use '../../internal/styles' as styles;
-@use '../../internal/styles/tokens' as awsui;
-
-.arrow {
-  // Arrow design:
-  // - A wrapper component for positioning.
-  //   - A background triangle with border color and box-shadow
-  //   - A foreground triangle with popover background color overlapping
-  //     the outer triangle 1 pixel in
-  //
-  // For the sake of accurate positioning, the arrow box has to be an even integer (in px, not rem)
-  // The box-shadow rotates with the arrow, so we need different shadows for each direction
-
-  // Based on $awsui-box-shadow-inner shadow, but rotated based on x and y multipliers.
-  @mixin awsui-box-shadow-inner-rotated($x, $y) {
-    $box-shadow-size: 0.71px; // Box shadow is actually 1px, but rotating the arrow changes this to sqrt(1/2)
-    box-shadow: ($box-shadow-size * $x) ($box-shadow-size * $y) 4px -2px awsui.$color-shadow-default;
-  }
-
-  $arrow-edge-length: 1.4 * styles.$base-size;
-  $arrow-width: 2 * styles.$base-size;
-  $arrow-height: $arrow-width * 0.5;
-
-  inline-size: $arrow-width;
-  block-size: $arrow-height;
-
-  &-outer,
-  &-inner {
-    position: absolute;
-    overflow: hidden;
-    inline-size: $arrow-width;
-    block-size: $arrow-height;
-
-    inset-block-start: 0;
-    inset-inline-start: 0;
-
-    &::after {
-      content: '';
-      box-sizing: border-box;
-      display: inline-block;
-      position: absolute;
-      border-start-start-radius: 2px;
-      border-start-end-radius: 0;
-      border-end-start-radius: 0;
-      border-end-end-radius: 0;
-      inset-block-end: 0;
-      inset-inline-start: 0;
-
-      inline-size: $arrow-edge-length;
-      block-size: $arrow-edge-length;
-      transform: rotate(45deg);
-      transform-origin: 0 100%;
-    }
-
-    @include styles.with-direction('rtl') {
-      &::after {
-        transform: rotate(-45deg);
-        transform-origin: 100% 100%;
-      }
-    }
-  }
-
-  &-outer {
-    &::after {
-      background-color: awsui.$color-border-status-info;
-    }
-  }
-
-  &-inner {
-    inset-block-start: 2px;
-
-    &::after {
-      border-start-start-radius: 1px;
-      border-start-end-radius: 0;
-      border-end-start-radius: 0;
-      border-end-end-radius: 0;
-      background-color: awsui.$color-background-status-info;
-    }
-  }
-
-  &-position-right-top,
-  &-position-right-bottom {
-    > .arrow-outer::after {
-      @include awsui-box-shadow-inner-rotated(-1, 1);
-    }
-  }
-
-  &-position-left-top,
-  &-position-left-bottom {
-    > .arrow-outer::after {
-      @include awsui-box-shadow-inner-rotated(1, -1);
-    }
-  }
-
-  &-position-top-center,
-  &-position-top-responsive {
-    > .arrow-outer::after {
-      @include awsui-box-shadow-inner-rotated(-1, -1);
-    }
-  }
-
-  &-position-bottom-center,
-  &-position-bottom-responsive {
-    > .arrow-outer::after {
-      @include awsui-box-shadow-inner-rotated(1, 1);
-    }
-  }
-}