@cloudscape-design/components-themeable 3.0.1353 → 3.0.1355

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 (28) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  3. package/lib/internal/scss/segmented-control/segment.scss +2 -2
  4. package/lib/internal/scss/spinner/mixins.scss +6 -0
  5. package/lib/internal/scss/spinner/styles.scss +13 -0
  6. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  7. package/lib/internal/template/internal/base-theme/styles.scoped.css +7 -0
  8. package/lib/internal/template/internal/environment.js +2 -2
  9. package/lib/internal/template/internal/environment.json +2 -2
  10. package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
  11. package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
  12. package/lib/internal/template/internal/generated/theming/index.cjs +33 -0
  13. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +9 -0
  14. package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
  15. package/lib/internal/template/internal/generated/theming/index.js +33 -0
  16. package/lib/internal/template/segmented-control/styles.css.js +16 -16
  17. package/lib/internal/template/segmented-control/styles.scoped.css +37 -37
  18. package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
  19. package/lib/internal/template/spinner/internal.d.ts +3 -1
  20. package/lib/internal/template/spinner/internal.d.ts.map +1 -1
  21. package/lib/internal/template/spinner/internal.js.map +1 -1
  22. package/lib/internal/template/spinner/styles.css.js +14 -13
  23. package/lib/internal/template/spinner/styles.scoped.css +27 -19
  24. package/lib/internal/template/spinner/styles.selectors.js +14 -13
  25. package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
  26. package/lib/internal/template/status-indicator/internal.js +17 -12
  27. package/lib/internal/template/status-indicator/internal.js.map +1 -1
  28. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "4194984bedd0518b6a2b33f8e30f4f4c0112017a"
2
+ "commit": "8ca13603c7f891ce74d343a0caffd6cff0bcab00"
3
3
  }
package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Build environment
3
- $awsui-commit-hash: "4194984b";
3
+ $awsui-commit-hash: "8ca13603";
4
4
  // Manually managed CSS-variables
5
5
  $maxContentWidth: --awsui-max-content-width-esndbs;
6
6
  $minContentWidth: --awsui-min-content-width-esndbs;
package/lib/internal/scss/segmented-control/segment.scss CHANGED
@@ -21,7 +21,7 @@ $selected-background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-b
21
21
  $selected-color: var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active);
22
22
  $segment-gap: awsui.$space-static-xxs;
23
23
  $segment-divider-width: 1px;
24
- $segment-radius: calc(awsui.$border-radius-button - 3px);
24
+ $segment-radius: calc(awsui.$border-radius-button - (#{awsui.$border-width-field} + #{awsui.$border-width-button}));
25
25
 
26
26
  .segment {
27
27
  @include styles.font-body-m;
@@ -81,7 +81,7 @@ $segment-radius: calc(awsui.$border-radius-button - 3px);
81
81
  block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2));
82
82
  min-block-size: calc(awsui.$line-height-body-m - $segment-gap * 2);
83
83
  inline-size: $segment-divider-width;
84
- background: awsui.$color-border-input-default;
84
+ background: awsui.$color-border-segment-divider;
85
85
  z-index: 1;
86
86
  }
87
87
  &:not(.refresh):not(:last-child)::after {
package/lib/internal/scss/spinner/mixins.scss CHANGED
@@ -8,6 +8,12 @@
8
8
  @use '../internal/styles/tokens' as awsui;
9
9
 
10
10
  $_spinner-sizes: (
11
+ (
12
+ name: 'x-small',
13
+ size: styles.$base-size,
14
+ iconSizeMap: 12px,
15
+ supportedLineHeight: awsui.$line-height-body-s,
16
+ ),
11
17
  (
12
18
  name: 'normal',
13
19
  size: 1.2 * styles.$base-size,
package/lib/internal/scss/spinner/styles.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  @use './mixins' as mixins;
8
8
  @use '../internal/styles/tokens' as awsui;
9
9
  @use '../internal/generated/custom-css-properties/index' as custom-props;
10
+ @use '../internal/styles/utils/theming' as theming;
10
11
 
11
12
  @keyframes spinner-rotator {
12
13
  0% {
@@ -115,3 +116,15 @@
115
116
  animation-name: spinner-line-right;
116
117
  }
117
118
  }
119
+
120
+ // One Theme renders x-small/normal status icons with a 1.5px stroke.
121
+ // Match the spinner ring for those sizes only; big/large keep 2px.
122
+ .root.size-x-small,
123
+ .root.size-normal {
124
+ @include theming.one-theme-only {
125
+ & > .circle::after {
126
+ border-block-width: awsui.$border-width-icon-x-small;
127
+ border-inline-width: awsui.$border-width-icon-x-small;
128
+ }
129
+ }
130
+ }
package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED
@@ -64,5 +64,5 @@
64
64
  }
65
65
  }
66
66
  :root {
67
- --awsui-version-info-4194984b: true;
67
+ --awsui-version-info-8ca13603: true;
68
68
  }
package/lib/internal/template/internal/base-theme/styles.scoped.css CHANGED
@@ -462,6 +462,7 @@
462
462
  --color-border-segment-active-y8x5lr:var(--color-border-segment-hover-3wvhit);
463
463
  --color-border-segment-default-7wdd7x:var(--color-neutral-600-3y2c6w);
464
464
  --color-border-segment-disabled-ht9qft:var(--color-border-button-normal-disabled-cr5kw0);
465
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
465
466
  --color-border-segment-hover-3wvhit:var(--color-neutral-950-qa1l7j);
466
467
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
467
468
  --color-border-status-error-nczvil:var(--color-error-600-tub94v);
@@ -1717,6 +1718,7 @@
1717
1718
  --color-border-panel-header-sqy0v4:var(--color-border-divider-default-diwd4w);
1718
1719
  --color-border-segment-active-y8x5lr:var(--color-border-segment-hover-3wvhit);
1719
1720
  --color-border-segment-disabled-ht9qft:var(--color-border-button-normal-disabled-cr5kw0);
1721
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
1720
1722
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
1721
1723
  --color-border-dialog-c9wxm6:var(--color-border-status-info-e5c14y);
1722
1724
  --color-border-tabs-underline-yipmio:var(--color-text-interactive-hover-zj1911);
@@ -2384,6 +2386,7 @@
2384
2386
  --color-border-notification-stack-bar-iua5tr:var(--color-neutral-750-a0y7ng);
2385
2387
  --color-border-notification-stack-bar-focused-6lgllw:var(--color-neutral-100-1tq0gf);
2386
2388
  --color-border-panel-header-sqy0v4:var(--color-border-divider-default-diwd4w);
2389
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
2387
2390
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
2388
2391
  --color-border-status-error-nczvil:var(--color-error-600-tub94v);
2389
2392
  --color-border-status-info-e5c14y:var(--color-info-600-14lpnx);
@@ -2870,6 +2873,7 @@
2870
2873
  --color-border-item-placeholder-ipp92l:var(--color-border-item-selected-7104rh);
2871
2874
  --color-border-layout-side-navigation-a02vgs:var(--color-border-layout-h5yp20);
2872
2875
  --color-border-panel-header-sqy0v4:var(--color-border-divider-default-diwd4w);
2876
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
2873
2877
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
2874
2878
  --color-border-tabs-shadow-egq8wq:var(--color-grey-transparent-3dqrf2);
2875
2879
  --color-shadow-default-ihj2rf:var(--color-grey-transparent-heavy-80huim);
@@ -3117,6 +3121,7 @@
3117
3121
  --color-border-popover-e8qomr:var(--color-border-dropdown-container-zmsfa8);
3118
3122
  --color-border-segment-active-y8x5lr:var(--color-border-segment-default-7wdd7x);
3119
3123
  --color-border-segment-disabled-ht9qft:var(--color-border-segment-default-7wdd7x);
3124
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
3120
3125
  --color-border-segment-hover-3wvhit:var(--color-border-segment-default-7wdd7x);
3121
3126
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
3122
3127
  --color-border-dialog-c9wxm6:var(--color-border-status-info-e5c14y);
@@ -3453,6 +3458,7 @@
3453
3458
  --color-border-popover-e8qomr:var(--color-border-dropdown-container-zmsfa8);
3454
3459
  --color-border-segment-active-y8x5lr:var(--color-border-segment-default-7wdd7x);
3455
3460
  --color-border-segment-disabled-ht9qft:var(--color-border-segment-default-7wdd7x);
3461
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
3456
3462
  --color-border-segment-hover-3wvhit:var(--color-border-segment-default-7wdd7x);
3457
3463
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
3458
3464
  --color-border-dialog-c9wxm6:var(--color-border-status-info-e5c14y);
@@ -4074,6 +4080,7 @@
4074
4080
  --color-border-popover-e8qomr:var(--color-border-dropdown-container-zmsfa8);
4075
4081
  --color-border-segment-active-y8x5lr:var(--color-border-segment-default-7wdd7x);
4076
4082
  --color-border-segment-disabled-ht9qft:var(--color-border-segment-default-7wdd7x);
4083
+ --color-border-segment-divider-mq01bu:var(--color-border-input-default-jtkw9d);
4077
4084
  --color-border-segment-hover-3wvhit:var(--color-border-segment-default-7wdd7x);
4078
4085
  --color-border-segment-wrapper-ofstpm:var(--color-border-input-default-jtkw9d);
4079
4086
  --color-border-dialog-c9wxm6:var(--color-border-status-info-e5c14y);
package/lib/internal/template/internal/environment.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (4194984b)";
3
- export var GIT_SHA = "4194984b";
2
+ export var PACKAGE_VERSION = "3.0.0 (8ca13603)";
3
+ export var GIT_SHA = "8ca13603";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "core";
6
6
  export var ALWAYS_VISUAL_REFRESH = true;
package/lib/internal/template/internal/environment.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (4194984b)",
4
- "GIT_SHA": "4194984b",
3
+ "PACKAGE_VERSION": "3.0.0 (8ca13603)",
4
+ "GIT_SHA": "8ca13603",
5
5
  "THEME": "default",
6
6
  "SYSTEM": "core",
7
7
  "ALWAYS_VISUAL_REFRESH": false,
package/lib/internal/template/internal/generated/styles/tokens.d.ts CHANGED
@@ -583,6 +583,7 @@ export const colorBorderPopover: string;
583
583
  export const colorBorderSegmentActive: string;
584
584
  export const colorBorderSegmentDefault: string;
585
585
  export const colorBorderSegmentDisabled: string;
586
+ export const colorBorderSegmentDivider: string;
586
587
  export const colorBorderSegmentHover: string;
587
588
  export const colorBorderSegmentWrapper: string;
588
589
  export const colorBorderStatusError: string;
package/lib/internal/template/internal/generated/styles/tokens.js CHANGED
@@ -583,6 +583,7 @@ export var colorBorderPopover = "var(--color-border-popover-5yl4uc, #b4b4bb)";
583
583
  export var colorBorderSegmentActive = "var(--color-border-segment-active-trxbfe, #424650)";
584
584
  export var colorBorderSegmentDefault = "var(--color-border-segment-default-8mo02x, #424650)";
585
585
  export var colorBorderSegmentDisabled = "var(--color-border-segment-disabled-8j0zwo, #424650)";
586
+ export var colorBorderSegmentDivider = "var(--color-border-segment-divider-9k3spl, #8c8c94)";
586
587
  export var colorBorderSegmentHover = "var(--color-border-segment-hover-epoe83, #424650)";
587
588
  export var colorBorderSegmentWrapper = "var(--color-border-segment-wrapper-qq00qv, #8c8c94)";
588
589
  export var colorBorderStatusError = "var(--color-border-status-error-vxvfad, #db0000)";
package/lib/internal/template/internal/generated/theming/index.cjs CHANGED
@@ -2379,6 +2379,10 @@ module.exports.preset = {
2379
2379
  "light": "{colorBorderSegmentDefault}",
2380
2380
  "dark": "{colorBorderSegmentDefault}"
2381
2381
  },
2382
+ "colorBorderSegmentDivider": {
2383
+ "light": "{colorBorderInputDefault}",
2384
+ "dark": "{colorBorderInputDefault}"
2385
+ },
2382
2386
  "colorBorderSegmentHover": {
2383
2387
  "light": "{colorBorderSegmentDefault}",
2384
2388
  "dark": "{colorBorderSegmentDefault}"
@@ -5505,6 +5509,10 @@ module.exports.preset = {
5505
5509
  "light": "{colorBorderSegmentDefault}",
5506
5510
  "dark": "{colorBorderSegmentDefault}"
5507
5511
  },
5512
+ "colorBorderSegmentDivider": {
5513
+ "light": "{colorBorderInputDefault}",
5514
+ "dark": "{colorBorderInputDefault}"
5515
+ },
5508
5516
  "colorBorderSegmentHover": {
5509
5517
  "light": "{colorBorderSegmentDefault}",
5510
5518
  "dark": "{colorBorderSegmentDefault}"
@@ -7409,6 +7417,10 @@ module.exports.preset = {
7409
7417
  "light": "{colorBorderSegmentDefault}",
7410
7418
  "dark": "{colorBorderSegmentDefault}"
7411
7419
  },
7420
+ "colorBorderSegmentDivider": {
7421
+ "light": "{colorBorderInputDefault}",
7422
+ "dark": "{colorBorderInputDefault}"
7423
+ },
7412
7424
  "colorBorderSegmentHover": {
7413
7425
  "light": "{colorBorderSegmentDefault}",
7414
7426
  "dark": "{colorBorderSegmentDefault}"
@@ -9251,6 +9263,10 @@ module.exports.preset = {
9251
9263
  "light": "{colorBorderSegmentDefault}",
9252
9264
  "dark": "{colorBorderSegmentDefault}"
9253
9265
  },
9266
+ "colorBorderSegmentDivider": {
9267
+ "light": "{colorBorderInputDefault}",
9268
+ "dark": "{colorBorderInputDefault}"
9269
+ },
9254
9270
  "colorBorderSegmentHover": {
9255
9271
  "light": "{colorBorderSegmentDefault}",
9256
9272
  "dark": "{colorBorderSegmentDefault}"
@@ -10929,6 +10945,10 @@ module.exports.preset = {
10929
10945
  "light": "{colorBorderSegmentDefault}",
10930
10946
  "dark": "{colorBorderSegmentDefault}"
10931
10947
  },
10948
+ "colorBorderSegmentDivider": {
10949
+ "light": "{colorBorderInputDefault}",
10950
+ "dark": "{colorBorderInputDefault}"
10951
+ },
10932
10952
  "colorBorderSegmentHover": {
10933
10953
  "light": "{colorBorderSegmentDefault}",
10934
10954
  "dark": "{colorBorderSegmentDefault}"
@@ -12607,6 +12627,10 @@ module.exports.preset = {
12607
12627
  "light": "{colorBorderSegmentDefault}",
12608
12628
  "dark": "{colorBorderSegmentDefault}"
12609
12629
  },
12630
+ "colorBorderSegmentDivider": {
12631
+ "light": "{colorBorderInputDefault}",
12632
+ "dark": "{colorBorderInputDefault}"
12633
+ },
12610
12634
  "colorBorderSegmentHover": {
12611
12635
  "light": "{colorBorderSegmentDefault}",
12612
12636
  "dark": "{colorBorderSegmentDefault}"
@@ -14287,6 +14311,10 @@ module.exports.preset = {
14287
14311
  "light": "{colorBorderSegmentDefault}",
14288
14312
  "dark": "{colorBorderSegmentDefault}"
14289
14313
  },
14314
+ "colorBorderSegmentDivider": {
14315
+ "light": "{colorBorderInputDefault}",
14316
+ "dark": "{colorBorderInputDefault}"
14317
+ },
14290
14318
  "colorBorderSegmentHover": {
14291
14319
  "light": "{colorBorderSegmentDefault}",
14292
14320
  "dark": "{colorBorderSegmentDefault}"
@@ -15728,6 +15756,7 @@ module.exports.preset = {
15728
15756
  "colorBorderSegmentActive": "color",
15729
15757
  "colorBorderSegmentDefault": "color",
15730
15758
  "colorBorderSegmentDisabled": "color",
15759
+ "colorBorderSegmentDivider": "color",
15731
15760
  "colorBorderSegmentHover": "color",
15732
15761
  "colorBorderSegmentWrapper": "color",
15733
15762
  "colorBorderStatusError": "color",
@@ -16639,6 +16668,7 @@ module.exports.preset = {
16639
16668
  "colorBorderSegmentActive",
16640
16669
  "colorBorderSegmentDefault",
16641
16670
  "colorBorderSegmentDisabled",
16671
+ "colorBorderSegmentDivider",
16642
16672
  "colorBorderSegmentHover",
16643
16673
  "colorBorderSegmentWrapper",
16644
16674
  "colorBorderStatusError",
@@ -17186,6 +17216,7 @@ module.exports.preset = {
17186
17216
  "colorBorderSegmentActive",
17187
17217
  "colorBorderSegmentDefault",
17188
17218
  "colorBorderSegmentDisabled",
17219
+ "colorBorderSegmentDivider",
17189
17220
  "colorBorderSegmentHover",
17190
17221
  "colorBorderSegmentWrapper",
17191
17222
  "colorBorderStatusError",
@@ -18048,6 +18079,7 @@ module.exports.preset = {
18048
18079
  "colorBorderSegmentActive": "color-border-segment-active",
18049
18080
  "colorBorderSegmentDefault": "color-border-segment-default",
18050
18081
  "colorBorderSegmentDisabled": "color-border-segment-disabled",
18082
+ "colorBorderSegmentDivider": "color-border-segment-divider",
18051
18083
  "colorBorderSegmentHover": "color-border-segment-hover",
18052
18084
  "colorBorderSegmentWrapper": "color-border-segment-wrapper",
18053
18085
  "colorBorderStatusError": "color-border-status-error",
@@ -19202,6 +19234,7 @@ module.exports.preset = {
19202
19234
  "colorBorderSegmentActive": "--color-border-segment-active-trxbfe",
19203
19235
  "colorBorderSegmentDefault": "--color-border-segment-default-8mo02x",
19204
19236
  "colorBorderSegmentDisabled": "--color-border-segment-disabled-8j0zwo",
19237
+ "colorBorderSegmentDivider": "--color-border-segment-divider-9k3spl",
19205
19238
  "colorBorderSegmentHover": "--color-border-segment-hover-epoe83",
19206
19239
  "colorBorderSegmentWrapper": "--color-border-segment-wrapper-qq00qv",
19207
19240
  "colorBorderStatusError": "--color-border-status-error-vxvfad",
package/lib/internal/template/internal/generated/theming/index.cjs.d.ts CHANGED
@@ -204,6 +204,7 @@ export declare interface TypedOverride {
204
204
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
205
205
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
206
206
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
207
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
207
208
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
208
209
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
209
210
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -666,6 +667,7 @@ export declare interface TypedOverride {
666
667
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
667
668
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
668
669
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
670
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
669
671
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
670
672
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
671
673
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1128,6 +1130,7 @@ export declare interface TypedOverride {
1128
1130
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1129
1131
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1130
1132
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1133
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1131
1134
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1132
1135
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1133
1136
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1590,6 +1593,7 @@ export declare interface TypedOverride {
1590
1593
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1591
1594
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1592
1595
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1596
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1593
1597
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1594
1598
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1595
1599
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2052,6 +2056,7 @@ export declare interface TypedOverride {
2052
2056
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2053
2057
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2054
2058
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2059
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2055
2060
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2056
2061
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2057
2062
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2514,6 +2519,7 @@ export declare interface TypedOverride {
2514
2519
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2515
2520
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2516
2521
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2522
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2517
2523
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2518
2524
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2519
2525
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2976,6 +2982,7 @@ export declare interface TypedOverride {
2976
2982
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2977
2983
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2978
2984
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2985
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2979
2986
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2980
2987
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2981
2988
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3438,6 +3445,7 @@ export declare interface TypedOverride {
3438
3445
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3439
3446
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3440
3447
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3448
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3441
3449
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3442
3450
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3443
3451
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3900,6 +3908,7 @@ export declare interface TypedOverride {
3900
3908
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3901
3909
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3902
3910
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3911
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3903
3912
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3904
3913
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3905
3914
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
package/lib/internal/template/internal/generated/theming/index.d.ts CHANGED
@@ -204,6 +204,7 @@ export declare interface TypedOverride {
204
204
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
205
205
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
206
206
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
207
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
207
208
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
208
209
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
209
210
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -666,6 +667,7 @@ export declare interface TypedOverride {
666
667
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
667
668
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
668
669
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
670
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
669
671
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
670
672
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
671
673
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1128,6 +1130,7 @@ export declare interface TypedOverride {
1128
1130
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1129
1131
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1130
1132
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1133
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1131
1134
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1132
1135
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1133
1136
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -1590,6 +1593,7 @@ export declare interface TypedOverride {
1590
1593
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1591
1594
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1592
1595
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1596
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1593
1597
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1594
1598
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1595
1599
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2052,6 +2056,7 @@ export declare interface TypedOverride {
2052
2056
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2053
2057
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2054
2058
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2059
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2055
2060
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2056
2061
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2057
2062
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2514,6 +2519,7 @@ export declare interface TypedOverride {
2514
2519
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2515
2520
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2516
2521
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2522
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2517
2523
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2518
2524
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2519
2525
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -2976,6 +2982,7 @@ export declare interface TypedOverride {
2976
2982
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2977
2983
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2978
2984
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2985
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2979
2986
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2980
2987
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2981
2988
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3438,6 +3445,7 @@ export declare interface TypedOverride {
3438
3445
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3439
3446
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3440
3447
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3448
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3441
3449
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3442
3450
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3443
3451
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -3900,6 +3908,7 @@ export declare interface TypedOverride {
3900
3908
  colorBorderSegmentActive?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3901
3909
  colorBorderSegmentDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3902
3910
  colorBorderSegmentDisabled?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3911
+ colorBorderSegmentDivider?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3903
3912
  colorBorderSegmentHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3904
3913
  colorBorderSegmentWrapper?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
3905
3914
  colorBorderStatusError?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
package/lib/internal/template/internal/generated/theming/index.js CHANGED
@@ -2379,6 +2379,10 @@ export var preset = {
2379
2379
  "light": "{colorBorderSegmentDefault}",
2380
2380
  "dark": "{colorBorderSegmentDefault}"
2381
2381
  },
2382
+ "colorBorderSegmentDivider": {
2383
+ "light": "{colorBorderInputDefault}",
2384
+ "dark": "{colorBorderInputDefault}"
2385
+ },
2382
2386
  "colorBorderSegmentHover": {
2383
2387
  "light": "{colorBorderSegmentDefault}",
2384
2388
  "dark": "{colorBorderSegmentDefault}"
@@ -5505,6 +5509,10 @@ export var preset = {
5505
5509
  "light": "{colorBorderSegmentDefault}",
5506
5510
  "dark": "{colorBorderSegmentDefault}"
5507
5511
  },
5512
+ "colorBorderSegmentDivider": {
5513
+ "light": "{colorBorderInputDefault}",
5514
+ "dark": "{colorBorderInputDefault}"
5515
+ },
5508
5516
  "colorBorderSegmentHover": {
5509
5517
  "light": "{colorBorderSegmentDefault}",
5510
5518
  "dark": "{colorBorderSegmentDefault}"
@@ -7409,6 +7417,10 @@ export var preset = {
7409
7417
  "light": "{colorBorderSegmentDefault}",
7410
7418
  "dark": "{colorBorderSegmentDefault}"
7411
7419
  },
7420
+ "colorBorderSegmentDivider": {
7421
+ "light": "{colorBorderInputDefault}",
7422
+ "dark": "{colorBorderInputDefault}"
7423
+ },
7412
7424
  "colorBorderSegmentHover": {
7413
7425
  "light": "{colorBorderSegmentDefault}",
7414
7426
  "dark": "{colorBorderSegmentDefault}"
@@ -9251,6 +9263,10 @@ export var preset = {
9251
9263
  "light": "{colorBorderSegmentDefault}",
9252
9264
  "dark": "{colorBorderSegmentDefault}"
9253
9265
  },
9266
+ "colorBorderSegmentDivider": {
9267
+ "light": "{colorBorderInputDefault}",
9268
+ "dark": "{colorBorderInputDefault}"
9269
+ },
9254
9270
  "colorBorderSegmentHover": {
9255
9271
  "light": "{colorBorderSegmentDefault}",
9256
9272
  "dark": "{colorBorderSegmentDefault}"
@@ -10929,6 +10945,10 @@ export var preset = {
10929
10945
  "light": "{colorBorderSegmentDefault}",
10930
10946
  "dark": "{colorBorderSegmentDefault}"
10931
10947
  },
10948
+ "colorBorderSegmentDivider": {
10949
+ "light": "{colorBorderInputDefault}",
10950
+ "dark": "{colorBorderInputDefault}"
10951
+ },
10932
10952
  "colorBorderSegmentHover": {
10933
10953
  "light": "{colorBorderSegmentDefault}",
10934
10954
  "dark": "{colorBorderSegmentDefault}"
@@ -12607,6 +12627,10 @@ export var preset = {
12607
12627
  "light": "{colorBorderSegmentDefault}",
12608
12628
  "dark": "{colorBorderSegmentDefault}"
12609
12629
  },
12630
+ "colorBorderSegmentDivider": {
12631
+ "light": "{colorBorderInputDefault}",
12632
+ "dark": "{colorBorderInputDefault}"
12633
+ },
12610
12634
  "colorBorderSegmentHover": {
12611
12635
  "light": "{colorBorderSegmentDefault}",
12612
12636
  "dark": "{colorBorderSegmentDefault}"
@@ -14287,6 +14311,10 @@ export var preset = {
14287
14311
  "light": "{colorBorderSegmentDefault}",
14288
14312
  "dark": "{colorBorderSegmentDefault}"
14289
14313
  },
14314
+ "colorBorderSegmentDivider": {
14315
+ "light": "{colorBorderInputDefault}",
14316
+ "dark": "{colorBorderInputDefault}"
14317
+ },
14290
14318
  "colorBorderSegmentHover": {
14291
14319
  "light": "{colorBorderSegmentDefault}",
14292
14320
  "dark": "{colorBorderSegmentDefault}"
@@ -15728,6 +15756,7 @@ export var preset = {
15728
15756
  "colorBorderSegmentActive": "color",
15729
15757
  "colorBorderSegmentDefault": "color",
15730
15758
  "colorBorderSegmentDisabled": "color",
15759
+ "colorBorderSegmentDivider": "color",
15731
15760
  "colorBorderSegmentHover": "color",
15732
15761
  "colorBorderSegmentWrapper": "color",
15733
15762
  "colorBorderStatusError": "color",
@@ -16639,6 +16668,7 @@ export var preset = {
16639
16668
  "colorBorderSegmentActive",
16640
16669
  "colorBorderSegmentDefault",
16641
16670
  "colorBorderSegmentDisabled",
16671
+ "colorBorderSegmentDivider",
16642
16672
  "colorBorderSegmentHover",
16643
16673
  "colorBorderSegmentWrapper",
16644
16674
  "colorBorderStatusError",
@@ -17186,6 +17216,7 @@ export var preset = {
17186
17216
  "colorBorderSegmentActive",
17187
17217
  "colorBorderSegmentDefault",
17188
17218
  "colorBorderSegmentDisabled",
17219
+ "colorBorderSegmentDivider",
17189
17220
  "colorBorderSegmentHover",
17190
17221
  "colorBorderSegmentWrapper",
17191
17222
  "colorBorderStatusError",
@@ -18048,6 +18079,7 @@ export var preset = {
18048
18079
  "colorBorderSegmentActive": "color-border-segment-active",
18049
18080
  "colorBorderSegmentDefault": "color-border-segment-default",
18050
18081
  "colorBorderSegmentDisabled": "color-border-segment-disabled",
18082
+ "colorBorderSegmentDivider": "color-border-segment-divider",
18051
18083
  "colorBorderSegmentHover": "color-border-segment-hover",
18052
18084
  "colorBorderSegmentWrapper": "color-border-segment-wrapper",
18053
18085
  "colorBorderStatusError": "color-border-status-error",
@@ -19202,6 +19234,7 @@ export var preset = {
19202
19234
  "colorBorderSegmentActive": "--color-border-segment-active-trxbfe",
19203
19235
  "colorBorderSegmentDefault": "--color-border-segment-default-8mo02x",
19204
19236
  "colorBorderSegmentDisabled": "--color-border-segment-disabled-8j0zwo",
19237
+ "colorBorderSegmentDivider": "--color-border-segment-divider-9k3spl",
19205
19238
  "colorBorderSegmentHover": "--color-border-segment-hover-epoe83",
19206
19239
  "colorBorderSegmentWrapper": "--color-border-segment-wrapper-qq00qv",
19207
19240
  "colorBorderStatusError": "--color-border-status-error-vxvfad",
package/lib/internal/template/segmented-control/styles.css.js CHANGED
@@ -1,21 +1,21 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "segment": "awsui_segment_8cbea_19fri_157",
5
- "refresh": "awsui_refresh_8cbea_19fri_184",
6
- "disabled": "awsui_disabled_8cbea_19fri_190",
7
- "selected": "awsui_selected_8cbea_19fri_247",
8
- "icon": "awsui_icon_8cbea_19fri_257",
9
- "with-text": "awsui_with-text_8cbea_19fri_261",
10
- "with-no-text": "awsui_with-no-text_8cbea_19fri_267",
11
- "root": "awsui_root_8cbea_19fri_272",
12
- "segment-part": "awsui_segment-part_8cbea_19fri_304",
13
- "select": "awsui_select_8cbea_19fri_247",
14
- "segment-count-2": "awsui_segment-count-2_8cbea_19fri_339",
15
- "segment-count-3": "awsui_segment-count-3_8cbea_19fri_343",
16
- "segment-count-4": "awsui_segment-count-4_8cbea_19fri_347",
17
- "segment-count-5": "awsui_segment-count-5_8cbea_19fri_351",
18
- "segment-count-6": "awsui_segment-count-6_8cbea_19fri_355",
19
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_19fri_359"
4
+ "segment": "awsui_segment_8cbea_10amm_157",
5
+ "refresh": "awsui_refresh_8cbea_10amm_184",
6
+ "disabled": "awsui_disabled_8cbea_10amm_190",
7
+ "selected": "awsui_selected_8cbea_10amm_247",
8
+ "icon": "awsui_icon_8cbea_10amm_257",
9
+ "with-text": "awsui_with-text_8cbea_10amm_261",
10
+ "with-no-text": "awsui_with-no-text_8cbea_10amm_267",
11
+ "root": "awsui_root_8cbea_10amm_272",
12
+ "segment-part": "awsui_segment-part_8cbea_10amm_304",
13
+ "select": "awsui_select_8cbea_10amm_247",
14
+ "segment-count-2": "awsui_segment-count-2_8cbea_10amm_339",
15
+ "segment-count-3": "awsui_segment-count-3_8cbea_10amm_343",
16
+ "segment-count-4": "awsui_segment-count-4_8cbea_10amm_347",
17
+ "segment-count-5": "awsui_segment-count-5_8cbea_10amm_351",
18
+ "segment-count-6": "awsui_segment-count-6_8cbea_10amm_355",
19
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_10amm_359"
20
20
  };
21
21
 
package/lib/internal/template/segmented-control/styles.scoped.css CHANGED
@@ -154,7 +154,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
154
154
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
155
155
  SPDX-License-Identifier: Apache-2.0
156
156
  */
157
- .awsui_segment_8cbea_19fri_157:not(#\9) {
157
+ .awsui_segment_8cbea_10amm_157:not(#\9) {
158
158
  font-size: var(--font-size-body-m-tq5a14, 14px);
159
159
  line-height: var(--line-height-body-m-5xw6xo, 22px);
160
160
  word-wrap: break-word;
@@ -169,10 +169,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
169
169
  background: var(--awsui-style-background-default-esndbs, var(--color-background-segment-default-6rgn11, #ffffff));
170
170
  color: var(--awsui-style-color-default-esndbs, var(--color-text-segment-default-nk7mbi, #545b64));
171
171
  overflow: visible;
172
- border-start-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - 3px);
173
- border-start-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - 3px);
174
- border-end-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - 3px);
175
- border-end-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - 3px);
172
+ border-start-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
173
+ border-start-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
174
+ border-end-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
175
+ border-end-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
176
176
  position: relative;
177
177
  block-size: calc(100% - var(--space-static-xxs-vzto3j, 4px));
178
178
  display: flex;
@@ -181,24 +181,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
181
181
  border-block: none;
182
182
  --awsui-style-focus-ring-box-shadow-esndbs: 0 0 0 var(--awsui-style-focus-ring-border-width-esndbs, 2px) var(--awsui-style-focus-ring-border-color-esndbs, var(--color-border-item-focused-sewkzn, #0073bb));
183
183
  }
184
- .awsui_segment_8cbea_19fri_157:not(#\9):not(.awsui_refresh_8cbea_19fri_184) {
184
+ .awsui_segment_8cbea_10amm_157:not(#\9):not(.awsui_refresh_8cbea_10amm_184) {
185
185
  block-size: calc(100% - var(--space-static-xxs-vzto3j, 4px) - 2 * var(--border-width-field-2365x3, 1px));
186
186
  }
187
- .awsui_segment_8cbea_19fri_157:not(#\9):focus {
187
+ .awsui_segment_8cbea_10amm_157:not(#\9):focus {
188
188
  outline: none;
189
189
  }
190
- .awsui_segment_8cbea_19fri_157.awsui_disabled_8cbea_19fri_190:not(#\9) {
190
+ .awsui_segment_8cbea_10amm_157.awsui_disabled_8cbea_10amm_190:not(#\9) {
191
191
  background: var(--awsui-style-background-disabled-esndbs, var(--color-background-segment-disabled-mjubn7, #ffffff));
192
192
  color: var(--awsui-style-color-disabled-esndbs, var(--color-text-interactive-disabled-tuxgxq, #aab7b8));
193
193
  }
194
- body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19fri_157:not(#\9):focus {
194
+ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_10amm_157:not(#\9):focus {
195
195
  position: relative;
196
196
  }
197
- body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19fri_157:not(#\9):focus {
197
+ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_10amm_157:not(#\9):focus {
198
198
  outline: 2px dotted transparent;
199
199
  outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) - 1px);
200
200
  }
201
- body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19fri_157:not(#\9):focus::before {
201
+ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_10amm_157:not(#\9):focus::before {
202
202
  content: " ";
203
203
  display: block;
204
204
  position: absolute;
@@ -213,63 +213,63 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19fri_157:not(#\9):focu
213
213
  box-shadow: var(--awsui-style-focus-ring-box-shadow-esndbs);
214
214
  z-index: 1;
215
215
  }
216
- .awsui_segment_8cbea_19fri_157:not(#\9):not(:last-child)::after {
216
+ .awsui_segment_8cbea_10amm_157:not(#\9):not(:last-child)::after {
217
217
  content: "";
218
218
  position: absolute;
219
219
  inset-inline-end: calc(-1 * (var(--space-static-xxs-vzto3j, 4px) + 1px));
220
220
  block-size: calc(100% - (var(--space-static-xxs-vzto3j, 4px) + var(--space-static-xxxs-opeihl, 2px)) * 2);
221
221
  min-block-size: calc(var(--line-height-body-m-5xw6xo, 22px) - var(--space-static-xxs-vzto3j, 4px) * 2);
222
222
  inline-size: 1px;
223
- background: var(--color-border-input-default-jtkw9d, #687078);
223
+ background: var(--color-border-segment-divider-mq01bu, #687078);
224
224
  z-index: 1;
225
225
  }
226
- .awsui_segment_8cbea_19fri_157:not(#\9):not(.awsui_refresh_8cbea_19fri_184):not(:last-child)::after {
226
+ .awsui_segment_8cbea_10amm_157:not(#\9):not(.awsui_refresh_8cbea_10amm_184):not(:last-child)::after {
227
227
  inset-inline-end: calc(-1 * var(--space-static-xxs-vzto3j, 4px));
228
228
  }
229
- .awsui_segment_8cbea_19fri_157:not(#\9):nth-child(1) {
229
+ .awsui_segment_8cbea_10amm_157:not(#\9):nth-child(1) {
230
230
  grid-column: 1;
231
231
  }
232
- .awsui_segment_8cbea_19fri_157:not(#\9):nth-child(2) {
232
+ .awsui_segment_8cbea_10amm_157:not(#\9):nth-child(2) {
233
233
  grid-column: 2;
234
234
  }
235
- .awsui_segment_8cbea_19fri_157:not(#\9):nth-child(3) {
235
+ .awsui_segment_8cbea_10amm_157:not(#\9):nth-child(3) {
236
236
  grid-column: 3;
237
237
  }
238
- .awsui_segment_8cbea_19fri_157:not(#\9):nth-child(4) {
238
+ .awsui_segment_8cbea_10amm_157:not(#\9):nth-child(4) {
239
239
  grid-column: 4;
240
240
  }
241
- .awsui_segment_8cbea_19fri_157:not(#\9):nth-child(5) {
241
+ .awsui_segment_8cbea_10amm_157:not(#\9):nth-child(5) {
242
242
  grid-column: 5;
243
243
  }
244
- .awsui_segment_8cbea_19fri_157:not(#\9):nth-child(6) {
244
+ .awsui_segment_8cbea_10amm_157:not(#\9):nth-child(6) {
245
245
  grid-column: 6;
246
246
  }
247
- .awsui_segment_8cbea_19fri_157.awsui_selected_8cbea_19fri_247:not(#\9) {
247
+ .awsui_segment_8cbea_10amm_157.awsui_selected_8cbea_10amm_247:not(#\9) {
248
248
  background: var(--awsui-style-background-active-esndbs, var(--color-background-segment-active-ns5rt6, #0073bb));
249
249
  color: var(--awsui-style-color-active-esndbs, var(--color-text-segment-active-hbbf1h, #ffffff));
250
250
  }
251
- .awsui_segment_8cbea_19fri_157:not(#\9):hover:not(.awsui_selected_8cbea_19fri_247):not(.awsui_disabled_8cbea_19fri_190):not(:focus) {
251
+ .awsui_segment_8cbea_10amm_157:not(#\9):hover:not(.awsui_selected_8cbea_10amm_247):not(.awsui_disabled_8cbea_10amm_190):not(:focus) {
252
252
  background: var(--awsui-style-background-hover-esndbs, var(--color-background-segment-hover-el4hte, #fafafa));
253
253
  color: var(--awsui-style-color-hover-esndbs, var(--color-text-segment-hover-qq2b2e, #16191f));
254
254
  cursor: pointer;
255
255
  }
256
256
 
257
- .awsui_icon_8cbea_19fri_257:not(#\9) {
257
+ .awsui_icon_8cbea_10amm_257:not(#\9) {
258
258
  /* used in test-utils */
259
259
  }
260
260
 
261
- .awsui_with-text_8cbea_19fri_261:not(#\9) {
261
+ .awsui_with-text_8cbea_10amm_261:not(#\9) {
262
262
  position: relative;
263
263
  inset-inline-start: calc(-1 * var(--space-xxs-3o1yoq, 4px));
264
264
  margin-inline-end: var(--space-xxs-3o1yoq, 4px);
265
265
  }
266
266
 
267
- .awsui_with-no-text_8cbea_19fri_267:not(#\9) {
267
+ .awsui_with-no-text_8cbea_10amm_267:not(#\9) {
268
268
  margin-inline: auto;
269
269
  inset-inline: 0;
270
270
  }
271
271
 
272
- .awsui_root_8cbea_19fri_272:not(#\9) {
272
+ .awsui_root_8cbea_10amm_272:not(#\9) {
273
273
  border-collapse: separate;
274
274
  border-spacing: 0;
275
275
  box-sizing: border-box;
@@ -301,7 +301,7 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19fri_157:not(#\9):focu
301
301
  -moz-osx-font-smoothing: auto;
302
302
  }
303
303
 
304
- .awsui_segment-part_8cbea_19fri_304:not(#\9) {
304
+ .awsui_segment-part_8cbea_10amm_304:not(#\9) {
305
305
  display: inline-grid;
306
306
  border-inline: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-ofstpm, #687078);
307
307
  border-block: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-ofstpm, #687078);
@@ -316,46 +316,46 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19fri_157:not(#\9):focu
316
316
  padding-inline: calc(var(--space-static-xxs-vzto3j, 4px) - var(--border-width-field-2365x3, 1px));
317
317
  gap: calc(var(--space-static-xxs-vzto3j, 4px) * 2 + 1px);
318
318
  }
319
- .awsui_segment-part_8cbea_19fri_304:not(#\9):not(.awsui_refresh_8cbea_19fri_184) {
319
+ .awsui_segment-part_8cbea_10amm_304:not(#\9):not(.awsui_refresh_8cbea_10amm_184) {
320
320
  padding-inline: calc(var(--space-static-xxxs-opeihl, 2px) + var(--border-width-field-2365x3, 1px));
321
321
  padding-block: 0;
322
322
  gap: calc(var(--space-static-xxs-vzto3j, 4px) * 2 - 1px);
323
323
  }
324
324
  @media (max-width: 688px) {
325
- .awsui_segment-part_8cbea_19fri_304:not(#\9) {
325
+ .awsui_segment-part_8cbea_10amm_304:not(#\9) {
326
326
  display: none;
327
327
  }
328
328
  }
329
329
 
330
- .awsui_select_8cbea_19fri_247:not(#\9) {
330
+ .awsui_select_8cbea_10amm_247:not(#\9) {
331
331
  display: none;
332
332
  }
333
333
  @media (max-width: 688px) {
334
- .awsui_select_8cbea_19fri_247:not(#\9) {
334
+ .awsui_select_8cbea_10amm_247:not(#\9) {
335
335
  display: block;
336
336
  }
337
337
  }
338
338
 
339
- .awsui_segment-count-2_8cbea_19fri_339:not(#\9) {
339
+ .awsui_segment-count-2_8cbea_10amm_339:not(#\9) {
340
340
  grid-template-columns: repeat(2, auto);
341
341
  }
342
342
 
343
- .awsui_segment-count-3_8cbea_19fri_343:not(#\9) {
343
+ .awsui_segment-count-3_8cbea_10amm_343:not(#\9) {
344
344
  grid-template-columns: repeat(3, auto);
345
345
  }
346
346
 
347
- .awsui_segment-count-4_8cbea_19fri_347:not(#\9) {
347
+ .awsui_segment-count-4_8cbea_10amm_347:not(#\9) {
348
348
  grid-template-columns: repeat(4, auto);
349
349
  }
350
350
 
351
- .awsui_segment-count-5_8cbea_19fri_351:not(#\9) {
351
+ .awsui_segment-count-5_8cbea_10amm_351:not(#\9) {
352
352
  grid-template-columns: repeat(5, auto);
353
353
  }
354
354
 
355
- .awsui_segment-count-6_8cbea_19fri_355:not(#\9) {
355
+ .awsui_segment-count-6_8cbea_10amm_355:not(#\9) {
356
356
  grid-template-columns: repeat(6, auto);
357
357
  }
358
358
 
359
- .awsui_disabled-reason-tooltip_8cbea_19fri_359:not(#\9) {
359
+ .awsui_disabled-reason-tooltip_8cbea_10amm_359:not(#\9) {
360
360
  /* used in test-utils or tests */
361
361
  }
package/lib/internal/template/segmented-control/styles.selectors.js CHANGED
@@ -2,21 +2,21 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "segment": "awsui_segment_8cbea_19fri_157",
6
- "refresh": "awsui_refresh_8cbea_19fri_184",
7
- "disabled": "awsui_disabled_8cbea_19fri_190",
8
- "selected": "awsui_selected_8cbea_19fri_247",
9
- "icon": "awsui_icon_8cbea_19fri_257",
10
- "with-text": "awsui_with-text_8cbea_19fri_261",
11
- "with-no-text": "awsui_with-no-text_8cbea_19fri_267",
12
- "root": "awsui_root_8cbea_19fri_272",
13
- "segment-part": "awsui_segment-part_8cbea_19fri_304",
14
- "select": "awsui_select_8cbea_19fri_247",
15
- "segment-count-2": "awsui_segment-count-2_8cbea_19fri_339",
16
- "segment-count-3": "awsui_segment-count-3_8cbea_19fri_343",
17
- "segment-count-4": "awsui_segment-count-4_8cbea_19fri_347",
18
- "segment-count-5": "awsui_segment-count-5_8cbea_19fri_351",
19
- "segment-count-6": "awsui_segment-count-6_8cbea_19fri_355",
20
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_19fri_359"
5
+ "segment": "awsui_segment_8cbea_10amm_157",
6
+ "refresh": "awsui_refresh_8cbea_10amm_184",
7
+ "disabled": "awsui_disabled_8cbea_10amm_190",
8
+ "selected": "awsui_selected_8cbea_10amm_247",
9
+ "icon": "awsui_icon_8cbea_10amm_257",
10
+ "with-text": "awsui_with-text_8cbea_10amm_261",
11
+ "with-no-text": "awsui_with-no-text_8cbea_10amm_267",
12
+ "root": "awsui_root_8cbea_10amm_272",
13
+ "segment-part": "awsui_segment-part_8cbea_10amm_304",
14
+ "select": "awsui_select_8cbea_10amm_247",
15
+ "segment-count-2": "awsui_segment-count-2_8cbea_10amm_339",
16
+ "segment-count-3": "awsui_segment-count-3_8cbea_10amm_343",
17
+ "segment-count-4": "awsui_segment-count-4_8cbea_10amm_347",
18
+ "segment-count-5": "awsui_segment-count-5_8cbea_10amm_351",
19
+ "segment-count-6": "awsui_segment-count-6_8cbea_10amm_355",
20
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_10amm_359"
21
21
  };
22
22
 
package/lib/internal/template/spinner/internal.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
2
2
  import { SpinnerProps } from './interfaces';
3
- interface InternalSpinnerProps extends SpinnerProps, InternalBaseComponentProps {
3
+ type InternalSpinnerSize = SpinnerProps.Size | 'x-small';
4
+ interface InternalSpinnerProps extends Omit<SpinnerProps, 'size'>, InternalBaseComponentProps {
5
+ size?: InternalSpinnerSize;
4
6
  }
5
7
  export default function InternalSpinner({ size, variant, nativeAttributes, __internalRootRef, ...props }: InternalSpinnerProps): JSX.Element;
6
8
  export {};
package/lib/internal/template/spinner/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,UAAU,oBAAqB,SAAQ,YAAY,EAAE,0BAA0B;CAAG;AAElF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAe,EACf,OAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,oBAAoB,eAgBtB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAK5C,KAAK,mBAAmB,GAAG,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;AAEzD,UAAU,oBAAqB,SAAQ,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,EAAE,0BAA0B;IAC3F,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAe,EACf,OAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,oBAAoB,eAgBtB"}
package/lib/internal/template/spinner/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,iDAAiD,CAAC;AAClG,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACa;IACrB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,+BAA+B,EAAE,CAAC;IAClC,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,SAAS,EACvB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,EACvG,GAAG,EAAE,iBAAiB;QAEtB,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,GAAI;QAC/D,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,GAAI,CAC3C,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useModalContextLoadingComponent } from '../internal/hooks/use-modal-component-analytics';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { SpinnerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalSpinnerProps extends SpinnerProps, InternalBaseComponentProps {}\n\nexport default function InternalSpinner({\n size = 'normal',\n variant = 'normal',\n nativeAttributes,\n __internalRootRef,\n ...props\n}: InternalSpinnerProps) {\n const baseProps = getBaseProps(props);\n useModalContextLoadingComponent();\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"Spinner\"\n nativeAttributes={nativeAttributes}\n className={clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`])}\n ref={__internalRootRef}\n >\n <span className={clsx(styles.circle, styles['circle-left'])} />\n <span className={clsx(styles.circle, styles['circle-right'])} />\n </WithNativeAttributes>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/spinner/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,iDAAiD,CAAC;AAClG,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACa;IACrB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,+BAA+B,EAAE,CAAC;IAClC,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,MAAM,EACV,aAAa,EAAC,SAAS,EACvB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,EACvG,GAAG,EAAE,iBAAiB;QAEtB,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,GAAI;QAC/D,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,GAAI,CAC3C,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useModalContextLoadingComponent } from '../internal/hooks/use-modal-component-analytics';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { SpinnerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\n// `x-small` is intentionally internal-only: it matches One Theme's x-small status icons and is not part of the public Spinner API\ntype InternalSpinnerSize = SpinnerProps.Size | 'x-small';\n\ninterface InternalSpinnerProps extends Omit<SpinnerProps, 'size'>, InternalBaseComponentProps {\n size?: InternalSpinnerSize;\n}\n\nexport default function InternalSpinner({\n size = 'normal',\n variant = 'normal',\n nativeAttributes,\n __internalRootRef,\n ...props\n}: InternalSpinnerProps) {\n const baseProps = getBaseProps(props);\n useModalContextLoadingComponent();\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"Spinner\"\n nativeAttributes={nativeAttributes}\n className={clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`])}\n ref={__internalRootRef}\n >\n <span className={clsx(styles.circle, styles['circle-left'])} />\n <span className={clsx(styles.circle, styles['circle-right'])} />\n </WithNativeAttributes>\n );\n}\n"]}
package/lib/internal/template/spinner/styles.css.js CHANGED
@@ -1,18 +1,19 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_1612d_1h9m8_179",
5
- "spinner-rotator": "awsui_spinner-rotator_1612d_1h9m8_1",
6
- "size-normal": "awsui_size-normal_1612d_1h9m8_194",
7
- "size-big": "awsui_size-big_1612d_1h9m8_202",
8
- "size-large": "awsui_size-large_1612d_1h9m8_210",
9
- "variant-normal": "awsui_variant-normal_1612d_1h9m8_218",
10
- "variant-disabled": "awsui_variant-disabled_1612d_1h9m8_221",
11
- "variant-inverted": "awsui_variant-inverted_1612d_1h9m8_224",
12
- "circle": "awsui_circle_1612d_1h9m8_236",
13
- "circle-left": "awsui_circle-left_1612d_1h9m8_264",
14
- "spinner-line-left": "awsui_spinner-line-left_1612d_1h9m8_1",
15
- "circle-right": "awsui_circle-right_1612d_1h9m8_269",
16
- "spinner-line-right": "awsui_spinner-line-right_1612d_1h9m8_1"
4
+ "root": "awsui_root_1612d_w14dj_179",
5
+ "spinner-rotator": "awsui_spinner-rotator_1612d_w14dj_1",
6
+ "size-x-small": "awsui_size-x-small_1612d_w14dj_194",
7
+ "size-normal": "awsui_size-normal_1612d_w14dj_202",
8
+ "size-big": "awsui_size-big_1612d_w14dj_210",
9
+ "size-large": "awsui_size-large_1612d_w14dj_218",
10
+ "variant-normal": "awsui_variant-normal_1612d_w14dj_226",
11
+ "variant-disabled": "awsui_variant-disabled_1612d_w14dj_229",
12
+ "variant-inverted": "awsui_variant-inverted_1612d_w14dj_232",
13
+ "circle": "awsui_circle_1612d_w14dj_244",
14
+ "circle-left": "awsui_circle-left_1612d_w14dj_272",
15
+ "spinner-line-left": "awsui_spinner-line-left_1612d_w14dj_1",
16
+ "circle-right": "awsui_circle-right_1612d_w14dj_277",
17
+ "spinner-line-right": "awsui_spinner-line-right_1612d_w14dj_1"
17
18
  };
18
19
 
package/lib/internal/template/spinner/styles.scoped.css CHANGED
@@ -146,7 +146,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
146
146
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
147
147
  SPDX-License-Identifier: Apache-2.0
148
148
  */
149
- @keyframes awsui_spinner-rotator_1612d_1h9m8_1 {
149
+ @keyframes awsui_spinner-rotator_1612d_w14dj_1 {
150
150
  0% {
151
151
  transform: rotate(var(--awsui-spinner-rotator-from-esndbs));
152
152
  }
@@ -154,7 +154,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
154
154
  transform: rotate(var(--awsui-spinner-rotator-to-esndbs));
155
155
  }
156
156
  }
157
- @keyframes awsui_spinner-line-left_1612d_1h9m8_1 {
157
+ @keyframes awsui_spinner-line-left_1612d_w14dj_1 {
158
158
  0% {
159
159
  transform: rotate(var(--awsui-spinner-line-left-from-esndbs));
160
160
  }
@@ -165,7 +165,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
165
165
  transform: rotate(var(--awsui-spinner-line-left-from-esndbs));
166
166
  }
167
167
  }
168
- @keyframes awsui_spinner-line-right_1612d_1h9m8_1 {
168
+ @keyframes awsui_spinner-line-right_1612d_w14dj_1 {
169
169
  0% {
170
170
  transform: rotate(var(--awsui-spinner-line-right-from-esndbs));
171
171
  }
@@ -176,7 +176,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
176
176
  transform: rotate(var(--awsui-spinner-line-right-from-esndbs));
177
177
  }
178
178
  }
179
- .awsui_root_1612d_1h9m8_179:not(#\9) {
179
+ .awsui_root_1612d_w14dj_179:not(#\9) {
180
180
  --awsui-spinner-rotator-from-esndbs: 0deg;
181
181
  --awsui-spinner-rotator-to-esndbs: 360deg;
182
182
  --awsui-spinner-line-left-from-esndbs: 0deg;
@@ -186,12 +186,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
186
186
  display: inline-block;
187
187
  vertical-align: top;
188
188
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
189
- animation: awsui_spinner-rotator_1612d_1h9m8_1 0.7s linear infinite;
189
+ animation: awsui_spinner-rotator_1612d_w14dj_1 0.7s linear infinite;
190
190
  box-sizing: border-box;
191
191
  line-height: 0;
192
192
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
193
193
  }
194
- .awsui_root_1612d_1h9m8_179.awsui_size-normal_1612d_1h9m8_194:not(#\9) {
194
+ .awsui_root_1612d_w14dj_179.awsui_size-x-small_1612d_w14dj_194:not(#\9) {
195
+ inline-size: 12px;
196
+ block-size: 12px;
197
+ padding-block: calc((12px - 10px) / 2);
198
+ padding-inline: calc((12px - 10px) / 2);
199
+ margin-block: calc((var(--line-height-body-s-gako33, 16px) - 12px) / 2);
200
+ box-sizing: border-box;
201
+ }
202
+ .awsui_root_1612d_w14dj_179.awsui_size-normal_1612d_w14dj_202:not(#\9) {
195
203
  inline-size: var(--size-icon-normal-311gry, 16px);
196
204
  block-size: var(--size-icon-normal-311gry, 16px);
197
205
  padding-block: calc((var(--size-icon-normal-311gry, 16px) - 12px) / 2);
@@ -199,7 +207,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
199
207
  margin-block: calc((var(--line-height-body-m-5xw6xo, 22px) - var(--size-icon-normal-311gry, 16px)) / 2);
200
208
  box-sizing: border-box;
201
209
  }
202
- .awsui_root_1612d_1h9m8_179.awsui_size-big_1612d_1h9m8_202:not(#\9) {
210
+ .awsui_root_1612d_w14dj_179.awsui_size-big_1612d_w14dj_210:not(#\9) {
203
211
  inline-size: var(--size-icon-big-z6z1yl, 32px);
204
212
  block-size: var(--size-icon-big-z6z1yl, 32px);
205
213
  padding-block: calc((var(--size-icon-big-z6z1yl, 32px) - 24px) / 2);
@@ -207,7 +215,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
207
215
  margin-block: calc((var(--line-height-heading-xl-pi61pg, 36px) - var(--size-icon-big-z6z1yl, 32px)) / 2);
208
216
  box-sizing: border-box;
209
217
  }
210
- .awsui_root_1612d_1h9m8_179.awsui_size-large_1612d_1h9m8_210:not(#\9) {
218
+ .awsui_root_1612d_w14dj_179.awsui_size-large_1612d_w14dj_218:not(#\9) {
211
219
  inline-size: var(--size-icon-large-uba15s, 48px);
212
220
  block-size: var(--size-icon-large-uba15s, 48px);
213
221
  padding-block: calc((var(--size-icon-large-uba15s, 48px) - 36px) / 2);
@@ -215,16 +223,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
215
223
  margin-block: calc((var(--line-height-display-l-tjudur, 56px) - var(--size-icon-large-uba15s, 48px)) / 2);
216
224
  box-sizing: border-box;
217
225
  }
218
- .awsui_root_1612d_1h9m8_179.awsui_variant-normal_1612d_1h9m8_218:not(#\9) {
226
+ .awsui_root_1612d_w14dj_179.awsui_variant-normal_1612d_w14dj_226:not(#\9) {
219
227
  color: currentColor;
220
228
  }
221
- .awsui_root_1612d_1h9m8_179.awsui_variant-disabled_1612d_1h9m8_221:not(#\9) {
229
+ .awsui_root_1612d_w14dj_179.awsui_variant-disabled_1612d_w14dj_229:not(#\9) {
222
230
  color: var(--color-text-status-inactive-fqjc97, #687078);
223
231
  }
224
- .awsui_root_1612d_1h9m8_179.awsui_variant-inverted_1612d_1h9m8_224:not(#\9) {
232
+ .awsui_root_1612d_w14dj_179.awsui_variant-inverted_1612d_w14dj_232:not(#\9) {
225
233
  color: var(--color-text-inverted-fflnsl, #ffffff);
226
234
  }
227
- .awsui_root_1612d_1h9m8_179:not(#\9):dir(rtl) {
235
+ .awsui_root_1612d_w14dj_179:not(#\9):dir(rtl) {
228
236
  --awsui-spinner-rotator-from-esndbs: 360deg;
229
237
  --awsui-spinner-rotator-to-esndbs: 0deg;
230
238
  --awsui-spinner-line-left-from-esndbs: 0deg;
@@ -233,14 +241,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
233
241
  --awsui-spinner-line-right-to-esndbs: 30deg;
234
242
  }
235
243
 
236
- .awsui_circle_1612d_1h9m8_236:not(#\9) {
244
+ .awsui_circle_1612d_w14dj_244:not(#\9) {
237
245
  display: inline-block;
238
246
  inline-size: 50%;
239
247
  block-size: 100%;
240
248
  overflow: hidden;
241
249
  position: relative;
242
250
  }
243
- .awsui_circle_1612d_1h9m8_236:not(#\9):after {
251
+ .awsui_circle_1612d_w14dj_244:not(#\9):after {
244
252
  position: absolute;
245
253
  box-sizing: border-box;
246
254
  content: "";
@@ -253,7 +261,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
253
261
  border-inline-end-color: transparent;
254
262
  border-block-end-color: transparent;
255
263
  }
256
- .awsui_circle_1612d_1h9m8_236:not(#\9):after {
264
+ .awsui_circle_1612d_w14dj_244:not(#\9):after {
257
265
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
258
266
  animation: 1.5s ease-in-out infinite;
259
267
  inset-block-start: 0;
@@ -261,13 +269,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
261
269
  block-size: 100%;
262
270
  inline-size: 200%;
263
271
  }
264
- .awsui_circle_1612d_1h9m8_236.awsui_circle-left_1612d_1h9m8_264:not(#\9):after {
272
+ .awsui_circle_1612d_w14dj_244.awsui_circle-left_1612d_w14dj_272:not(#\9):after {
265
273
  inset-inline-start: 0;
266
274
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
267
- animation-name: awsui_spinner-line-left_1612d_1h9m8_1;
275
+ animation-name: awsui_spinner-line-left_1612d_w14dj_1;
268
276
  }
269
- .awsui_circle_1612d_1h9m8_236.awsui_circle-right_1612d_1h9m8_269:not(#\9):after {
277
+ .awsui_circle_1612d_w14dj_244.awsui_circle-right_1612d_w14dj_277:not(#\9):after {
270
278
  inset-inline-start: -100%;
271
279
  /*stylelint-disable-next-line @cloudscape-design/no-motion-outside-of-mixin */
272
- animation-name: awsui_spinner-line-right_1612d_1h9m8_1;
280
+ animation-name: awsui_spinner-line-right_1612d_w14dj_1;
273
281
  }
package/lib/internal/template/spinner/styles.selectors.js CHANGED
@@ -2,18 +2,19 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_1612d_1h9m8_179",
6
- "spinner-rotator": "awsui_spinner-rotator_1612d_1h9m8_1",
7
- "size-normal": "awsui_size-normal_1612d_1h9m8_194",
8
- "size-big": "awsui_size-big_1612d_1h9m8_202",
9
- "size-large": "awsui_size-large_1612d_1h9m8_210",
10
- "variant-normal": "awsui_variant-normal_1612d_1h9m8_218",
11
- "variant-disabled": "awsui_variant-disabled_1612d_1h9m8_221",
12
- "variant-inverted": "awsui_variant-inverted_1612d_1h9m8_224",
13
- "circle": "awsui_circle_1612d_1h9m8_236",
14
- "circle-left": "awsui_circle-left_1612d_1h9m8_264",
15
- "spinner-line-left": "awsui_spinner-line-left_1612d_1h9m8_1",
16
- "circle-right": "awsui_circle-right_1612d_1h9m8_269",
17
- "spinner-line-right": "awsui_spinner-line-right_1612d_1h9m8_1"
5
+ "root": "awsui_root_1612d_w14dj_179",
6
+ "spinner-rotator": "awsui_spinner-rotator_1612d_w14dj_1",
7
+ "size-x-small": "awsui_size-x-small_1612d_w14dj_194",
8
+ "size-normal": "awsui_size-normal_1612d_w14dj_202",
9
+ "size-big": "awsui_size-big_1612d_w14dj_210",
10
+ "size-large": "awsui_size-large_1612d_w14dj_218",
11
+ "variant-normal": "awsui_variant-normal_1612d_w14dj_226",
12
+ "variant-disabled": "awsui_variant-disabled_1612d_w14dj_229",
13
+ "variant-inverted": "awsui_variant-inverted_1612d_w14dj_232",
14
+ "circle": "awsui_circle_1612d_w14dj_244",
15
+ "circle-left": "awsui_circle-left_1612d_w14dj_272",
16
+ "spinner-line-left": "awsui_spinner-line-left_1612d_w14dj_1",
17
+ "circle-right": "awsui_circle-right_1612d_w14dj_277",
18
+ "spinner-line-right": "awsui_spinner-line-right_1612d_w14dj_1"
18
19
  };
19
20
 
package/lib/internal/template/status-indicator/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/status-indicator/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,4BACf,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAChD,0BAA0B;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;CACvC;AAeD,UAAU,uBAAwB,SAAQ,IAAI,CAAC,4BAA4B,EAAE,MAAM,GAAG,eAAe,CAAC;IACpG,OAAO,CAAC,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,aAAa,EACb,OAAO,EACP,OAAO,EACP,IAAe,GAChB,EAAE,uBAAuB,eAWzB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAe,EACf,gBAAgB,EAChB,SAAiB,EACjB,iBAAiB,EACjB,MAA6D,EAC7D,SAA0B,EAC1B,GAAG,IAAI,EACR,EAAE,4BAA4B,eAqC9B"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/status-indicator/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,4BACf,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAChD,0BAA0B;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;CACvC;AAoBD,UAAU,uBAAwB,SAAQ,IAAI,CAAC,4BAA4B,EAAE,MAAM,GAAG,eAAe,CAAC;IACpG,OAAO,CAAC,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,aAAa,EACb,OAAO,EACP,OAAO,EACP,IAAe,GAChB,EAAE,uBAAuB,eAWzB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAe,EACf,gBAAgB,EAChB,SAAiB,EACjB,iBAAiB,EACjB,MAA6D,EAC7D,SAA0B,EAC1B,GAAG,IAAI,EACR,EAAE,4BAA4B,eAqC9B"}
package/lib/internal/template/status-indicator/internal.js CHANGED
@@ -11,18 +11,23 @@ import { getBaseProps } from '../internal/base-component';
11
11
  import WithNativeAttributes from '../internal/utils/with-native-attributes';
12
12
  import InternalSpinner from '../spinner/internal';
13
13
  import styles from './styles.css.js';
14
- const typeToIcon = size => ({
15
- error: React.createElement(InternalIcon, { name: "status-negative", size: size }),
16
- warning: React.createElement(InternalIcon, { name: "status-warning", size: size }),
17
- success: React.createElement(InternalIcon, { name: "status-positive", size: size }),
18
- info: React.createElement(InternalIcon, { name: "status-info", size: size }),
19
- stopped: React.createElement(InternalIcon, { name: "status-stopped", size: size }),
20
- pending: React.createElement(InternalIcon, { name: "status-pending", size: size }),
21
- 'in-progress': React.createElement(InternalIcon, { name: "status-in-progress", size: size }),
22
- loading: React.createElement(InternalSpinner, null),
23
- 'not-started': React.createElement(InternalIcon, { name: "status-not-started", size: size }),
24
- log: React.createElement(InternalIcon, { name: "dot", size: size }),
25
- });
14
+ const typeToIcon = size => {
15
+ // Spinner supports a narrower size set than icons (no 'small'/'medium'/'inherit'); map to a valid
16
+ // spinner size so the loading spinner matches the sibling status icons.
17
+ const spinnerSize = size === 'x-small' ? 'x-small' : 'normal';
18
+ return {
19
+ error: React.createElement(InternalIcon, { name: "status-negative", size: size }),
20
+ warning: React.createElement(InternalIcon, { name: "status-warning", size: size }),
21
+ success: React.createElement(InternalIcon, { name: "status-positive", size: size }),
22
+ info: React.createElement(InternalIcon, { name: "status-info", size: size }),
23
+ stopped: React.createElement(InternalIcon, { name: "status-stopped", size: size }),
24
+ pending: React.createElement(InternalIcon, { name: "status-pending", size: size }),
25
+ 'in-progress': React.createElement(InternalIcon, { name: "status-in-progress", size: size }),
26
+ loading: React.createElement(InternalSpinner, { size: spinnerSize }),
27
+ 'not-started': React.createElement(InternalIcon, { name: "status-not-started", size: size }),
28
+ log: React.createElement(InternalIcon, { name: "dot", size: size }),
29
+ };
30
+ };
26
31
  export function InternalStatusIcon({ type, iconAriaLabel, animate, display, size = 'normal', }) {
27
32
  return (React.createElement("span", { className: clsx(styles.icon, animate && styles['icon-shake']), "aria-label": iconAriaLabel, role: iconAriaLabel ? 'img' : undefined },
28
33
  typeToIcon(size)[type],
package/lib/internal/template/status-indicator/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/status-indicator/internal.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 from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n/**\n * @awsuiSystem core\n */\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport InternalSpinner from '../spinner/internal';\nimport { StatusIndicatorProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalStatusIndicatorProps\n extends SomeRequired<StatusIndicatorProps, 'type'>,\n InternalBaseComponentProps {\n /**\n * Play an animation on the error icon when first rendered\n */\n __animate?: boolean;\n\n /**\n * Size of icon.\n */\n __size?: IconProps.Size;\n\n /**\n * The CSS behavior of the status indicator container element.\n */\n __display?: 'inline' | 'inline-block';\n}\n\nconst typeToIcon: (size: IconProps.Size) => Record<StatusIndicatorProps.Type, JSX.Element> = size => ({\n error: <InternalIcon name=\"status-negative\" size={size} />,\n warning: <InternalIcon name=\"status-warning\" size={size} />,\n success: <InternalIcon name=\"status-positive\" size={size} />,\n info: <InternalIcon name=\"status-info\" size={size} />,\n stopped: <InternalIcon name=\"status-stopped\" size={size} />,\n pending: <InternalIcon name=\"status-pending\" size={size} />,\n 'in-progress': <InternalIcon name=\"status-in-progress\" size={size} />,\n loading: <InternalSpinner />,\n 'not-started': <InternalIcon name=\"status-not-started\" size={size} />,\n log: <InternalIcon name=\"dot\" size={size} />,\n});\n\ninterface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {\n animate?: InternalStatusIndicatorProps['__animate'];\n size?: InternalStatusIndicatorProps['__size'];\n display?: InternalStatusIndicatorProps['__display'];\n}\n\nexport function InternalStatusIcon({\n type,\n iconAriaLabel,\n animate,\n display,\n size = 'normal',\n}: InternalStatusIconProps) {\n return (\n <span\n className={clsx(styles.icon, animate && styles['icon-shake'])}\n aria-label={iconAriaLabel}\n role={iconAriaLabel ? 'img' : undefined}\n >\n {typeToIcon(size)[type]}\n {display === 'inline' && <>&nbsp;</>}\n </span>\n );\n}\n\nexport default function StatusIndicator({\n type,\n children,\n iconAriaLabel,\n colorOverride,\n wrapText = true,\n nativeAttributes,\n __animate = false,\n __internalRootRef,\n __size = isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal',\n __display = 'inline-block',\n ...rest\n}: InternalStatusIndicatorProps) {\n const baseProps = getBaseProps(rest);\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"StatusIndicator\"\n nativeAttributes={nativeAttributes}\n className={clsx(\n styles.root,\n styles[`status-${type}`],\n {\n [styles[`color-override-${colorOverride}`]]: colorOverride,\n },\n baseProps.className\n )}\n ref={__internalRootRef}\n >\n <span\n className={clsx(\n styles.container,\n styles[`display-${__display}`],\n wrapText === false && styles['overflow-ellipsis'],\n __animate && styles['container-fade-in']\n )}\n >\n <InternalStatusIcon\n type={type}\n iconAriaLabel={iconAriaLabel}\n animate={__animate}\n display={__display}\n size={__size}\n />\n <span>{children}</span>\n </span>\n </WithNativeAttributes>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/status-indicator/internal.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 from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n/**\n * @awsuiSystem core\n */\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport InternalSpinner from '../spinner/internal';\nimport { StatusIndicatorProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalStatusIndicatorProps\n extends SomeRequired<StatusIndicatorProps, 'type'>,\n InternalBaseComponentProps {\n /**\n * Play an animation on the error icon when first rendered\n */\n __animate?: boolean;\n\n /**\n * Size of icon.\n */\n __size?: IconProps.Size;\n\n /**\n * The CSS behavior of the status indicator container element.\n */\n __display?: 'inline' | 'inline-block';\n}\n\nconst typeToIcon: (size: IconProps.Size) => Record<StatusIndicatorProps.Type, JSX.Element> = size => {\n // Spinner supports a narrower size set than icons (no 'small'/'medium'/'inherit'); map to a valid\n // spinner size so the loading spinner matches the sibling status icons.\n const spinnerSize = size === 'x-small' ? 'x-small' : 'normal';\n return {\n error: <InternalIcon name=\"status-negative\" size={size} />,\n warning: <InternalIcon name=\"status-warning\" size={size} />,\n success: <InternalIcon name=\"status-positive\" size={size} />,\n info: <InternalIcon name=\"status-info\" size={size} />,\n stopped: <InternalIcon name=\"status-stopped\" size={size} />,\n pending: <InternalIcon name=\"status-pending\" size={size} />,\n 'in-progress': <InternalIcon name=\"status-in-progress\" size={size} />,\n loading: <InternalSpinner size={spinnerSize} />,\n 'not-started': <InternalIcon name=\"status-not-started\" size={size} />,\n log: <InternalIcon name=\"dot\" size={size} />,\n };\n};\n\ninterface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {\n animate?: InternalStatusIndicatorProps['__animate'];\n size?: InternalStatusIndicatorProps['__size'];\n display?: InternalStatusIndicatorProps['__display'];\n}\n\nexport function InternalStatusIcon({\n type,\n iconAriaLabel,\n animate,\n display,\n size = 'normal',\n}: InternalStatusIconProps) {\n return (\n <span\n className={clsx(styles.icon, animate && styles['icon-shake'])}\n aria-label={iconAriaLabel}\n role={iconAriaLabel ? 'img' : undefined}\n >\n {typeToIcon(size)[type]}\n {display === 'inline' && <>&nbsp;</>}\n </span>\n );\n}\n\nexport default function StatusIndicator({\n type,\n children,\n iconAriaLabel,\n colorOverride,\n wrapText = true,\n nativeAttributes,\n __animate = false,\n __internalRootRef,\n __size = isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal',\n __display = 'inline-block',\n ...rest\n}: InternalStatusIndicatorProps) {\n const baseProps = getBaseProps(rest);\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"span\"\n componentName=\"StatusIndicator\"\n nativeAttributes={nativeAttributes}\n className={clsx(\n styles.root,\n styles[`status-${type}`],\n {\n [styles[`color-override-${colorOverride}`]]: colorOverride,\n },\n baseProps.className\n )}\n ref={__internalRootRef}\n >\n <span\n className={clsx(\n styles.container,\n styles[`display-${__display}`],\n wrapText === false && styles['overflow-ellipsis'],\n __animate && styles['container-fade-in']\n )}\n >\n <InternalStatusIcon\n type={type}\n iconAriaLabel={iconAriaLabel}\n animate={__animate}\n display={__display}\n size={__size}\n />\n <span>{children}</span>\n </span>\n </WithNativeAttributes>\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/components-themeable",
3
- "version": "3.0.1353",
3
+ "version": "3.0.1355",
4
4
  "files": [
5
5
  "lib"
6
6
  ],