@cloudscape-design/components 3.0.905 → 3.0.906

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 (17) hide show
  1. package/internal/base-component/styles.scoped.css +21 -14
  2. package/internal/environment.js +1 -1
  3. package/internal/environment.json +1 -1
  4. package/internal/generated/styles/tokens.js +3 -3
  5. package/internal/generated/theming/index.cjs +35 -35
  6. package/internal/generated/theming/index.js +35 -35
  7. package/internal/manifest.json +1 -1
  8. package/package.json +1 -1
  9. package/segmented-control/internal-segmented-control.d.ts.map +1 -1
  10. package/segmented-control/internal-segmented-control.js +5 -1
  11. package/segmented-control/internal-segmented-control.js.map +1 -1
  12. package/segmented-control/segment.d.ts.map +1 -1
  13. package/segmented-control/segment.js +3 -1
  14. package/segmented-control/segment.js.map +1 -1
  15. package/segmented-control/styles.css.js +16 -15
  16. package/segmented-control/styles.scoped.css +104 -81
  17. package/segmented-control/styles.selectors.js +16 -15
package/internal/base-component/styles.scoped.css CHANGED
@@ -233,7 +233,7 @@
233
233
  --color-background-segment-active-bkvyiy:#006ce0;
234
234
  --color-background-segment-default-voaiuw:#ffffff;
235
235
  --color-background-segment-disabled-9tsgp1:#ffffff;
236
- --color-background-segment-hover-jbzuvp:#ffffff;
236
+ --color-background-segment-hover-jancts:#f0fbff;
237
237
  --color-background-slider-handle-default-94lnn1:#006ce0;
238
238
  --color-background-slider-handle-active-7w7xg0:#004a9e;
239
239
  --color-background-slider-track-uhckut:#8c8c94;
@@ -399,7 +399,7 @@
399
399
  --color-text-pagination-page-number-default-s25kr0:#424650;
400
400
  --color-text-segment-active-fc6owc:#ffffff;
401
401
  --color-text-segment-default-iib3us:#424650;
402
- --color-text-segment-hover-88u58t:#006ce0;
402
+ --color-text-segment-hover-yckzgd:#002b66;
403
403
  --color-text-small-nzfntg:#656871;
404
404
  --color-text-status-error-5676bj:#db0000;
405
405
  --color-text-status-inactive-5megna:#656871;
@@ -600,7 +600,7 @@
600
600
  --space-panel-side-right-xofg51:24px;
601
601
  --space-panel-split-top-q1pux4:20px;
602
602
  --space-panel-split-bottom-qwdduf:20px;
603
- --space-segmented-control-focus-outline-gutter-gbye20:4px;
603
+ --space-segmented-control-focus-outline-gutter-ublqj7:6px;
604
604
  --space-tabs-content-top-dedu0k:12px;
605
605
  --space-tabs-focus-outline-gutter-xm37ly:-8px;
606
606
  --space-table-content-bottom-9yr834:4px;
@@ -868,7 +868,7 @@
868
868
  --color-background-segment-active-bkvyiy:#42b4ff;
869
869
  --color-background-segment-default-voaiuw:#161d26;
870
870
  --color-background-segment-disabled-9tsgp1:#161d26;
871
- --color-background-segment-hover-jbzuvp:#161d26;
871
+ --color-background-segment-hover-jancts:#1b232d;
872
872
  --color-background-slider-handle-default-94lnn1:#42b4ff;
873
873
  --color-background-slider-handle-active-7w7xg0:#75cfff;
874
874
  --color-background-slider-track-uhckut:#656871;
@@ -1006,7 +1006,7 @@
1006
1006
  --color-text-pagination-page-number-default-s25kr0:#b4b4bb;
1007
1007
  --color-text-segment-active-fc6owc:#0f141a;
1008
1008
  --color-text-segment-default-iib3us:#dedee3;
1009
- --color-text-segment-hover-88u58t:#42b4ff;
1009
+ --color-text-segment-hover-yckzgd:#75cfff;
1010
1010
  --color-text-small-nzfntg:#a4a4ad;
1011
1011
  --color-text-status-error-5676bj:#ff7a7a;
1012
1012
  --color-text-status-inactive-5megna:#a4a4ad;
@@ -1176,7 +1176,7 @@
1176
1176
  --color-background-segment-active-bkvyiy:#42b4ff;
1177
1177
  --color-background-segment-default-voaiuw:#161d26;
1178
1178
  --color-background-segment-disabled-9tsgp1:#161d26;
1179
- --color-background-segment-hover-jbzuvp:#161d26;
1179
+ --color-background-segment-hover-jancts:#1b232d;
1180
1180
  --color-background-slider-handle-default-94lnn1:#42b4ff;
1181
1181
  --color-background-slider-handle-active-7w7xg0:#75cfff;
1182
1182
  --color-background-slider-track-uhckut:#656871;
@@ -1314,7 +1314,7 @@
1314
1314
  --color-text-pagination-page-number-default-s25kr0:#b4b4bb;
1315
1315
  --color-text-segment-active-fc6owc:#0f141a;
1316
1316
  --color-text-segment-default-iib3us:#dedee3;
1317
- --color-text-segment-hover-88u58t:#42b4ff;
1317
+ --color-text-segment-hover-yckzgd:#75cfff;
1318
1318
  --color-text-small-nzfntg:#a4a4ad;
1319
1319
  --color-text-status-error-5676bj:#ff7a7a;
1320
1320
  --color-text-status-inactive-5megna:#a4a4ad;
@@ -1381,7 +1381,7 @@
1381
1381
  --color-background-segment-active-bkvyiy:#42b4ff;
1382
1382
  --color-background-segment-default-voaiuw:#0f141a;
1383
1383
  --color-background-segment-disabled-9tsgp1:#0f141a;
1384
- --color-background-segment-hover-jbzuvp:#0f141a;
1384
+ --color-background-segment-hover-jancts:#1b232d;
1385
1385
  --color-background-slider-handle-default-94lnn1:#42b4ff;
1386
1386
  --color-background-slider-handle-active-7w7xg0:#75cfff;
1387
1387
  --color-background-slider-track-uhckut:#656871;
@@ -1519,7 +1519,7 @@
1519
1519
  --color-text-pagination-page-number-default-s25kr0:#b4b4bb;
1520
1520
  --color-text-segment-active-fc6owc:#0f141a;
1521
1521
  --color-text-segment-default-iib3us:#dedee3;
1522
- --color-text-segment-hover-88u58t:#42b4ff;
1522
+ --color-text-segment-hover-yckzgd:#75cfff;
1523
1523
  --color-text-small-nzfntg:#a4a4ad;
1524
1524
  --color-text-status-error-5676bj:#ff7a7a;
1525
1525
  --color-text-status-inactive-5megna:#a4a4ad;
@@ -1558,7 +1558,7 @@
1558
1558
  --color-background-button-primary-default-15m72j:#f9f9fa;
1559
1559
  --color-background-button-primary-hover-0qidjj:#ffffff;
1560
1560
  --color-background-segment-default-voaiuw:transparent;
1561
- --color-background-segment-hover-jbzuvp:transparent;
1561
+ --color-background-segment-hover-jancts:rgba(0, 7, 22, 0.15);
1562
1562
  --color-text-chat-bubble-outgoing-bvbr0v:#f9f9fa;
1563
1563
  --color-text-chat-bubble-incoming-x2kig8:#f9f9fa;
1564
1564
  --color-border-button-normal-active-mn0ayd:#ffffff;
@@ -1581,6 +1581,7 @@
1581
1581
  --color-text-expandable-section-default-7w1jwq:#f9f9fa;
1582
1582
  --color-text-expandable-section-hover-lomw6v:#ffffff;
1583
1583
  --color-text-heading-secondary-0myrp3:#f9f9fa;
1584
+ --color-text-segment-hover-yckzgd:#ffffff;
1584
1585
  }
1585
1586
 
1586
1587
  .awsui-context-flashbar-warning:not(#\9) {
@@ -1592,7 +1593,7 @@
1592
1593
  --color-background-progress-bar-content-in-flash-ikihd5:#0f141a;
1593
1594
  --color-background-progress-bar-layout-in-flash-d3q12s:rgba(0, 0, 0, 0.1);
1594
1595
  --color-background-segment-default-voaiuw:transparent;
1595
- --color-background-segment-hover-jbzuvp:transparent;
1596
+ --color-background-segment-hover-jancts:rgba(0, 7, 22, 0.05);
1596
1597
  --color-border-button-normal-active-mn0ayd:#0f141a;
1597
1598
  --color-border-button-normal-default-uzqi0v:#424650;
1598
1599
  --color-border-button-normal-hover-2d2g0m:#0f141a;
@@ -1613,6 +1614,7 @@
1613
1614
  --color-text-interactive-inverted-hover-0r4deg:#0f141a;
1614
1615
  --color-text-link-inverted-hover-zsv0ev:#0f141a;
1615
1616
  --color-text-notification-default-0l2rzu:#0f141a;
1617
+ --color-text-segment-hover-yckzgd:#0f141a;
1616
1618
  }
1617
1619
 
1618
1620
  .awsui-context-alert:not(#\9) {
@@ -1622,7 +1624,7 @@
1622
1624
  --color-background-button-primary-default-15m72j:#424650;
1623
1625
  --color-background-button-primary-hover-0qidjj:#0f141a;
1624
1626
  --color-background-segment-default-voaiuw:transparent;
1625
- --color-background-segment-hover-jbzuvp:transparent;
1627
+ --color-background-segment-hover-jancts:rgba(0, 7, 22, 0.05);
1626
1628
  --color-border-button-normal-active-mn0ayd:#0f141a;
1627
1629
  --color-border-button-normal-default-uzqi0v:#424650;
1628
1630
  --color-border-button-normal-hover-2d2g0m:#0f141a;
@@ -1638,6 +1640,7 @@
1638
1640
  --color-text-link-button-normal-active-awr7yi:#0f141a;
1639
1641
  --color-text-expandable-section-default-7w1jwq:#424650;
1640
1642
  --color-text-expandable-section-hover-lomw6v:#0f141a;
1643
+ --color-text-segment-hover-yckzgd:#0f141a;
1641
1644
  --font-expandable-heading-size-smdiul:14px;
1642
1645
  }
1643
1646
 
@@ -1688,7 +1691,7 @@
1688
1691
  --color-background-segment-active-bkvyiy:#42b4ff;
1689
1692
  --color-background-segment-default-voaiuw:transparent;
1690
1693
  --color-background-segment-disabled-9tsgp1:#161d26;
1691
- --color-background-segment-hover-jbzuvp:transparent;
1694
+ --color-background-segment-hover-jancts:rgba(255, 255, 255, 0.1);
1692
1695
  --color-background-slider-handle-default-94lnn1:#42b4ff;
1693
1696
  --color-background-slider-handle-active-7w7xg0:#75cfff;
1694
1697
  --color-background-slider-track-uhckut:#656871;
@@ -1826,7 +1829,7 @@
1826
1829
  --color-text-pagination-page-number-default-s25kr0:#b4b4bb;
1827
1830
  --color-text-segment-active-fc6owc:#0f141a;
1828
1831
  --color-text-segment-default-iib3us:#dedee3;
1829
- --color-text-segment-hover-88u58t:#42b4ff;
1832
+ --color-text-segment-hover-yckzgd:#ffffff;
1830
1833
  --color-text-small-nzfntg:#a4a4ad;
1831
1834
  --color-text-status-error-5676bj:#ff7a7a;
1832
1835
  --color-text-status-inactive-5megna:#a4a4ad;
@@ -1868,6 +1871,7 @@
1868
1871
  --color-background-button-normal-hover-eqpcl2:rgba(255, 255, 255, 0.1);
1869
1872
  --color-background-button-primary-default-15m72j:#dedee3;
1870
1873
  --color-background-button-primary-hover-0qidjj:#ffffff;
1874
+ --color-background-segment-hover-jancts:rgba(255, 255, 255, 0.1);
1871
1875
  --color-border-button-normal-active-mn0ayd:#ffffff;
1872
1876
  --color-border-button-normal-default-uzqi0v:#dedee3;
1873
1877
  --color-border-button-normal-hover-2d2g0m:#ffffff;
@@ -1884,6 +1888,7 @@
1884
1888
  --color-text-link-button-normal-active-awr7yi:#ffffff;
1885
1889
  --color-text-expandable-section-default-7w1jwq:#dedee3;
1886
1890
  --color-text-expandable-section-hover-lomw6v:#ffffff;
1891
+ --color-text-segment-hover-yckzgd:#ffffff;
1887
1892
  }
1888
1893
  }
1889
1894
  @media not print {
@@ -1892,6 +1897,7 @@
1892
1897
  --color-background-button-normal-hover-eqpcl2:rgba(255, 255, 255, 0.1);
1893
1898
  --color-background-button-primary-default-15m72j:#dedee3;
1894
1899
  --color-background-button-primary-hover-0qidjj:#ffffff;
1900
+ --color-background-segment-hover-jancts:rgba(255, 255, 255, 0.1);
1895
1901
  --color-border-button-normal-active-mn0ayd:#ffffff;
1896
1902
  --color-border-button-normal-default-uzqi0v:#dedee3;
1897
1903
  --color-border-button-normal-hover-2d2g0m:#ffffff;
@@ -1908,6 +1914,7 @@
1908
1914
  --color-text-link-button-normal-active-awr7yi:#ffffff;
1909
1915
  --color-text-expandable-section-default-7w1jwq:#dedee3;
1910
1916
  --color-text-expandable-section-hover-lomw6v:#ffffff;
1917
+ --color-text-segment-hover-yckzgd:#ffffff;
1911
1918
  }
1912
1919
  }
1913
1920
  /*
package/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (22d7bca6)";
2
+ export var PACKAGE_VERSION = "3.0.0 (20d2f3a2)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (22d7bca6)",
3
+ "PACKAGE_VERSION": "3.0.0 (20d2f3a2)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/internal/generated/styles/tokens.js CHANGED
@@ -292,7 +292,7 @@ export var colorBackgroundProgressBarLayoutInFlash = "var(--color-background-pro
292
292
  export var colorBackgroundSegmentActive = "var(--color-background-segment-active-bkvyiy, #006ce0)";
293
293
  export var colorBackgroundSegmentDefault = "var(--color-background-segment-default-voaiuw, #ffffff)";
294
294
  export var colorBackgroundSegmentDisabled = "var(--color-background-segment-disabled-9tsgp1, #ffffff)";
295
- export var colorBackgroundSegmentHover = "var(--color-background-segment-hover-jbzuvp, #ffffff)";
295
+ export var colorBackgroundSegmentHover = "var(--color-background-segment-hover-jancts, #f0fbff)";
296
296
  export var colorBackgroundSliderHandleDefault = "var(--color-background-slider-handle-default-94lnn1, #006ce0)";
297
297
  export var colorBackgroundSliderHandleActive = "var(--color-background-slider-handle-active-7w7xg0, #004a9e)";
298
298
  export var colorBackgroundSliderTrack = "var(--color-background-slider-track-uhckut, #8c8c94)";
@@ -465,7 +465,7 @@ export var colorTextPaginationPageNumberActiveDisabled = "var(--color-text-pagin
465
465
  export var colorTextPaginationPageNumberDefault = "var(--color-text-pagination-page-number-default-s25kr0, #424650)";
466
466
  export var colorTextSegmentActive = "var(--color-text-segment-active-fc6owc, #ffffff)";
467
467
  export var colorTextSegmentDefault = "var(--color-text-segment-default-iib3us, #424650)";
468
- export var colorTextSegmentHover = "var(--color-text-segment-hover-88u58t, #006ce0)";
468
+ export var colorTextSegmentHover = "var(--color-text-segment-hover-yckzgd, #002b66)";
469
469
  export var colorTextSmall = "var(--color-text-small-nzfntg, #656871)";
470
470
  export var colorTextStatusError = "var(--color-text-status-error-5676bj, #db0000)";
471
471
  export var colorTextStatusInactive = "var(--color-text-status-inactive-5megna, #656871)";
@@ -670,7 +670,7 @@ export var spacePanelSideLeft = "var(--space-panel-side-left-5t0who, 28px)";
670
670
  export var spacePanelSideRight = "var(--space-panel-side-right-xofg51, 24px)";
671
671
  export var spacePanelSplitTop = "var(--space-panel-split-top-q1pux4, 20px)";
672
672
  export var spacePanelSplitBottom = "var(--space-panel-split-bottom-qwdduf, 20px)";
673
- export var spaceSegmentedControlFocusOutlineGutter = "var(--space-segmented-control-focus-outline-gutter-gbye20, 4px)";
673
+ export var spaceSegmentedControlFocusOutlineGutter = "var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px)";
674
674
  export var spaceTabsContentTop = "var(--space-tabs-content-top-dedu0k, 12px)";
675
675
  export var spaceTabsFocusOutlineGutter = "var(--space-tabs-focus-outline-gutter-xm37ly, -8px)";
676
676
  export var spaceTableContentBottom = "var(--space-table-content-bottom-9yr834, 4px)";
package/internal/generated/theming/index.cjs CHANGED
@@ -1054,8 +1054,8 @@ module.exports.preset = {
1054
1054
  "dark": "{colorBackgroundButtonNormalDisabled}"
1055
1055
  },
1056
1056
  "colorBackgroundSegmentHover": {
1057
- "light": "{colorBackgroundSegmentDefault}",
1058
- "dark": "{colorBackgroundSegmentDefault}"
1057
+ "light": "{colorBackgroundButtonNormalHover}",
1058
+ "dark": "{colorBackgroundButtonNormalHover}"
1059
1059
  },
1060
1060
  "colorBackgroundSliderHandleDefault": {
1061
1061
  "light": "{colorBlue600}",
@@ -1746,8 +1746,8 @@ module.exports.preset = {
1746
1746
  "dark": "{colorGrey300}"
1747
1747
  },
1748
1748
  "colorTextSegmentHover": {
1749
- "light": "{colorBlue600}",
1750
- "dark": "{colorBlue500}"
1749
+ "light": "{colorTextButtonNormalHover}",
1750
+ "dark": "{colorTextButtonNormalHover}"
1751
1751
  },
1752
1752
  "colorTextSmall": {
1753
1753
  "light": "{colorGrey550}",
@@ -2299,8 +2299,8 @@ module.exports.preset = {
2299
2299
  "compact": "{spaceScaledL}"
2300
2300
  },
2301
2301
  "spaceSegmentedControlFocusOutlineGutter": {
2302
- "comfortable": "4px",
2303
- "compact": "4px"
2302
+ "comfortable": "6px",
2303
+ "compact": "6px"
2304
2304
  },
2305
2305
  "spaceTabsContentTop": {
2306
2306
  "comfortable": "{spaceScaledS}",
@@ -2769,8 +2769,8 @@ module.exports.preset = {
2769
2769
  "compact": "{spaceScaledL}"
2770
2770
  },
2771
2771
  "spaceSegmentedControlFocusOutlineGutter": {
2772
- "comfortable": "4px",
2773
- "compact": "4px"
2772
+ "comfortable": "6px",
2773
+ "compact": "6px"
2774
2774
  },
2775
2775
  "spaceTabsContentTop": {
2776
2776
  "comfortable": "{spaceScaledS}",
@@ -3267,8 +3267,8 @@ module.exports.preset = {
3267
3267
  "dark": "{colorBackgroundButtonNormalDisabled}"
3268
3268
  },
3269
3269
  "colorBackgroundSegmentHover": {
3270
- "light": "{colorBackgroundSegmentDefault}",
3271
- "dark": "{colorBackgroundSegmentDefault}"
3270
+ "light": "{colorBackgroundButtonNormalHover}",
3271
+ "dark": "{colorBackgroundButtonNormalHover}"
3272
3272
  },
3273
3273
  "colorBackgroundSliderHandleDefault": {
3274
3274
  "light": "{colorBlue500}",
@@ -3959,8 +3959,8 @@ module.exports.preset = {
3959
3959
  "dark": "{colorGrey300}"
3960
3960
  },
3961
3961
  "colorTextSegmentHover": {
3962
- "light": "{colorBlue500}",
3963
- "dark": "{colorBlue500}"
3962
+ "light": "{colorTextButtonNormalHover}",
3963
+ "dark": "{colorTextButtonNormalHover}"
3964
3964
  },
3965
3965
  "colorTextSmall": {
3966
3966
  "light": "{colorGrey450}",
@@ -4389,8 +4389,8 @@ module.exports.preset = {
4389
4389
  "dark": "{colorGrey900}"
4390
4390
  },
4391
4391
  "colorBackgroundSegmentHover": {
4392
- "light": "{colorBackgroundSegmentDefault}",
4393
- "dark": "{colorBackgroundSegmentDefault}"
4392
+ "light": "{colorBackgroundButtonNormalHover}",
4393
+ "dark": "{colorBackgroundButtonNormalHover}"
4394
4394
  },
4395
4395
  "colorBackgroundSliderHandleDefault": {
4396
4396
  "light": "{colorBlue500}",
@@ -5081,8 +5081,8 @@ module.exports.preset = {
5081
5081
  "dark": "{colorGrey300}"
5082
5082
  },
5083
5083
  "colorTextSegmentHover": {
5084
- "light": "{colorBlue500}",
5085
- "dark": "{colorBlue500}"
5084
+ "light": "{colorTextButtonNormalHover}",
5085
+ "dark": "{colorTextButtonNormalHover}"
5086
5086
  },
5087
5087
  "colorTextSmall": {
5088
5088
  "light": "{colorGrey450}",
@@ -5443,8 +5443,8 @@ module.exports.preset = {
5443
5443
  "dark": "{colorBackgroundButtonNormalDisabled}"
5444
5444
  },
5445
5445
  "colorBackgroundSegmentHover": {
5446
- "light": "{colorBackgroundSegmentDefault}",
5447
- "dark": "{colorBackgroundSegmentDefault}"
5446
+ "light": "{colorBackgroundButtonNormalHover}",
5447
+ "dark": "{colorBackgroundButtonNormalHover}"
5448
5448
  },
5449
5449
  "colorBackgroundSliderHandleDefault": {
5450
5450
  "light": "{colorBlue600}",
@@ -6135,8 +6135,8 @@ module.exports.preset = {
6135
6135
  "dark": "{colorGrey300}"
6136
6136
  },
6137
6137
  "colorTextSegmentHover": {
6138
- "light": "{colorBlue600}",
6139
- "dark": "{colorBlue500}"
6138
+ "light": "{colorTextButtonNormalHover}",
6139
+ "dark": "{colorTextButtonNormalHover}"
6140
6140
  },
6141
6141
  "colorTextSmall": {
6142
6142
  "light": "{colorGrey550}",
@@ -6497,8 +6497,8 @@ module.exports.preset = {
6497
6497
  "dark": "{colorBackgroundButtonNormalDisabled}"
6498
6498
  },
6499
6499
  "colorBackgroundSegmentHover": {
6500
- "light": "{colorBackgroundSegmentDefault}",
6501
- "dark": "{colorBackgroundSegmentDefault}"
6500
+ "light": "{colorBackgroundButtonNormalHover}",
6501
+ "dark": "{colorBackgroundButtonNormalHover}"
6502
6502
  },
6503
6503
  "colorBackgroundSliderHandleDefault": {
6504
6504
  "light": "{colorBlue600}",
@@ -7189,8 +7189,8 @@ module.exports.preset = {
7189
7189
  "dark": "{colorGrey300}"
7190
7190
  },
7191
7191
  "colorTextSegmentHover": {
7192
- "light": "{colorBlue600}",
7193
- "dark": "{colorBlue500}"
7192
+ "light": "{colorTextButtonNormalHover}",
7193
+ "dark": "{colorTextButtonNormalHover}"
7194
7194
  },
7195
7195
  "colorTextSmall": {
7196
7196
  "light": "{colorGrey550}",
@@ -7551,8 +7551,8 @@ module.exports.preset = {
7551
7551
  "dark": "{colorBackgroundButtonNormalDisabled}"
7552
7552
  },
7553
7553
  "colorBackgroundSegmentHover": {
7554
- "light": "{colorBackgroundSegmentDefault}",
7555
- "dark": "{colorBackgroundSegmentDefault}"
7554
+ "light": "{colorBackgroundButtonNormalHover}",
7555
+ "dark": "{colorBackgroundButtonNormalHover}"
7556
7556
  },
7557
7557
  "colorBackgroundSliderHandleDefault": {
7558
7558
  "light": "{colorBlue600}",
@@ -8243,8 +8243,8 @@ module.exports.preset = {
8243
8243
  "dark": "{colorGrey300}"
8244
8244
  },
8245
8245
  "colorTextSegmentHover": {
8246
- "light": "{colorBlue600}",
8247
- "dark": "{colorBlue500}"
8246
+ "light": "{colorTextButtonNormalHover}",
8247
+ "dark": "{colorTextButtonNormalHover}"
8248
8248
  },
8249
8249
  "colorTextSmall": {
8250
8250
  "light": "{colorGrey550}",
@@ -8607,8 +8607,8 @@ module.exports.preset = {
8607
8607
  "dark": "{colorBackgroundButtonNormalDisabled}"
8608
8608
  },
8609
8609
  "colorBackgroundSegmentHover": {
8610
- "light": "{colorBackgroundSegmentDefault}",
8611
- "dark": "{colorBackgroundSegmentDefault}"
8610
+ "light": "{colorBackgroundButtonNormalHover}",
8611
+ "dark": "{colorBackgroundButtonNormalHover}"
8612
8612
  },
8613
8613
  "colorBackgroundSliderHandleDefault": {
8614
8614
  "light": "{colorBlue500}",
@@ -9299,8 +9299,8 @@ module.exports.preset = {
9299
9299
  "dark": "{colorGrey300}"
9300
9300
  },
9301
9301
  "colorTextSegmentHover": {
9302
- "light": "{colorBlue500}",
9303
- "dark": "{colorBlue500}"
9302
+ "light": "{colorTextButtonNormalHover}",
9303
+ "dark": "{colorTextButtonNormalHover}"
9304
9304
  },
9305
9305
  "colorTextSmall": {
9306
9306
  "light": "{colorGrey450}",
@@ -11639,7 +11639,7 @@ module.exports.preset = {
11639
11639
  "colorBackgroundSegmentActive": "--color-background-segment-active-bkvyiy",
11640
11640
  "colorBackgroundSegmentDefault": "--color-background-segment-default-voaiuw",
11641
11641
  "colorBackgroundSegmentDisabled": "--color-background-segment-disabled-9tsgp1",
11642
- "colorBackgroundSegmentHover": "--color-background-segment-hover-jbzuvp",
11642
+ "colorBackgroundSegmentHover": "--color-background-segment-hover-jancts",
11643
11643
  "colorBackgroundSliderHandleDefault": "--color-background-slider-handle-default-94lnn1",
11644
11644
  "colorBackgroundSliderHandleActive": "--color-background-slider-handle-active-7w7xg0",
11645
11645
  "colorBackgroundSliderTrack": "--color-background-slider-track-uhckut",
@@ -11812,7 +11812,7 @@ module.exports.preset = {
11812
11812
  "colorTextPaginationPageNumberDefault": "--color-text-pagination-page-number-default-s25kr0",
11813
11813
  "colorTextSegmentActive": "--color-text-segment-active-fc6owc",
11814
11814
  "colorTextSegmentDefault": "--color-text-segment-default-iib3us",
11815
- "colorTextSegmentHover": "--color-text-segment-hover-88u58t",
11815
+ "colorTextSegmentHover": "--color-text-segment-hover-yckzgd",
11816
11816
  "colorTextSmall": "--color-text-small-nzfntg",
11817
11817
  "colorTextStatusError": "--color-text-status-error-5676bj",
11818
11818
  "colorTextStatusInactive": "--color-text-status-inactive-5megna",
@@ -12017,7 +12017,7 @@ module.exports.preset = {
12017
12017
  "spacePanelSideRight": "--space-panel-side-right-xofg51",
12018
12018
  "spacePanelSplitTop": "--space-panel-split-top-q1pux4",
12019
12019
  "spacePanelSplitBottom": "--space-panel-split-bottom-qwdduf",
12020
- "spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-gbye20",
12020
+ "spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-ublqj7",
12021
12021
  "spaceTabsContentTop": "--space-tabs-content-top-dedu0k",
12022
12022
  "spaceTabsFocusOutlineGutter": "--space-tabs-focus-outline-gutter-xm37ly",
12023
12023
  "spaceTableContentBottom": "--space-table-content-bottom-9yr834",
package/internal/generated/theming/index.js CHANGED
@@ -1054,8 +1054,8 @@ export var preset = {
1054
1054
  "dark": "{colorBackgroundButtonNormalDisabled}"
1055
1055
  },
1056
1056
  "colorBackgroundSegmentHover": {
1057
- "light": "{colorBackgroundSegmentDefault}",
1058
- "dark": "{colorBackgroundSegmentDefault}"
1057
+ "light": "{colorBackgroundButtonNormalHover}",
1058
+ "dark": "{colorBackgroundButtonNormalHover}"
1059
1059
  },
1060
1060
  "colorBackgroundSliderHandleDefault": {
1061
1061
  "light": "{colorBlue600}",
@@ -1746,8 +1746,8 @@ export var preset = {
1746
1746
  "dark": "{colorGrey300}"
1747
1747
  },
1748
1748
  "colorTextSegmentHover": {
1749
- "light": "{colorBlue600}",
1750
- "dark": "{colorBlue500}"
1749
+ "light": "{colorTextButtonNormalHover}",
1750
+ "dark": "{colorTextButtonNormalHover}"
1751
1751
  },
1752
1752
  "colorTextSmall": {
1753
1753
  "light": "{colorGrey550}",
@@ -2299,8 +2299,8 @@ export var preset = {
2299
2299
  "compact": "{spaceScaledL}"
2300
2300
  },
2301
2301
  "spaceSegmentedControlFocusOutlineGutter": {
2302
- "comfortable": "4px",
2303
- "compact": "4px"
2302
+ "comfortable": "6px",
2303
+ "compact": "6px"
2304
2304
  },
2305
2305
  "spaceTabsContentTop": {
2306
2306
  "comfortable": "{spaceScaledS}",
@@ -2769,8 +2769,8 @@ export var preset = {
2769
2769
  "compact": "{spaceScaledL}"
2770
2770
  },
2771
2771
  "spaceSegmentedControlFocusOutlineGutter": {
2772
- "comfortable": "4px",
2773
- "compact": "4px"
2772
+ "comfortable": "6px",
2773
+ "compact": "6px"
2774
2774
  },
2775
2775
  "spaceTabsContentTop": {
2776
2776
  "comfortable": "{spaceScaledS}",
@@ -3267,8 +3267,8 @@ export var preset = {
3267
3267
  "dark": "{colorBackgroundButtonNormalDisabled}"
3268
3268
  },
3269
3269
  "colorBackgroundSegmentHover": {
3270
- "light": "{colorBackgroundSegmentDefault}",
3271
- "dark": "{colorBackgroundSegmentDefault}"
3270
+ "light": "{colorBackgroundButtonNormalHover}",
3271
+ "dark": "{colorBackgroundButtonNormalHover}"
3272
3272
  },
3273
3273
  "colorBackgroundSliderHandleDefault": {
3274
3274
  "light": "{colorBlue500}",
@@ -3959,8 +3959,8 @@ export var preset = {
3959
3959
  "dark": "{colorGrey300}"
3960
3960
  },
3961
3961
  "colorTextSegmentHover": {
3962
- "light": "{colorBlue500}",
3963
- "dark": "{colorBlue500}"
3962
+ "light": "{colorTextButtonNormalHover}",
3963
+ "dark": "{colorTextButtonNormalHover}"
3964
3964
  },
3965
3965
  "colorTextSmall": {
3966
3966
  "light": "{colorGrey450}",
@@ -4389,8 +4389,8 @@ export var preset = {
4389
4389
  "dark": "{colorGrey900}"
4390
4390
  },
4391
4391
  "colorBackgroundSegmentHover": {
4392
- "light": "{colorBackgroundSegmentDefault}",
4393
- "dark": "{colorBackgroundSegmentDefault}"
4392
+ "light": "{colorBackgroundButtonNormalHover}",
4393
+ "dark": "{colorBackgroundButtonNormalHover}"
4394
4394
  },
4395
4395
  "colorBackgroundSliderHandleDefault": {
4396
4396
  "light": "{colorBlue500}",
@@ -5081,8 +5081,8 @@ export var preset = {
5081
5081
  "dark": "{colorGrey300}"
5082
5082
  },
5083
5083
  "colorTextSegmentHover": {
5084
- "light": "{colorBlue500}",
5085
- "dark": "{colorBlue500}"
5084
+ "light": "{colorTextButtonNormalHover}",
5085
+ "dark": "{colorTextButtonNormalHover}"
5086
5086
  },
5087
5087
  "colorTextSmall": {
5088
5088
  "light": "{colorGrey450}",
@@ -5443,8 +5443,8 @@ export var preset = {
5443
5443
  "dark": "{colorBackgroundButtonNormalDisabled}"
5444
5444
  },
5445
5445
  "colorBackgroundSegmentHover": {
5446
- "light": "{colorBackgroundSegmentDefault}",
5447
- "dark": "{colorBackgroundSegmentDefault}"
5446
+ "light": "{colorBackgroundButtonNormalHover}",
5447
+ "dark": "{colorBackgroundButtonNormalHover}"
5448
5448
  },
5449
5449
  "colorBackgroundSliderHandleDefault": {
5450
5450
  "light": "{colorBlue600}",
@@ -6135,8 +6135,8 @@ export var preset = {
6135
6135
  "dark": "{colorGrey300}"
6136
6136
  },
6137
6137
  "colorTextSegmentHover": {
6138
- "light": "{colorBlue600}",
6139
- "dark": "{colorBlue500}"
6138
+ "light": "{colorTextButtonNormalHover}",
6139
+ "dark": "{colorTextButtonNormalHover}"
6140
6140
  },
6141
6141
  "colorTextSmall": {
6142
6142
  "light": "{colorGrey550}",
@@ -6497,8 +6497,8 @@ export var preset = {
6497
6497
  "dark": "{colorBackgroundButtonNormalDisabled}"
6498
6498
  },
6499
6499
  "colorBackgroundSegmentHover": {
6500
- "light": "{colorBackgroundSegmentDefault}",
6501
- "dark": "{colorBackgroundSegmentDefault}"
6500
+ "light": "{colorBackgroundButtonNormalHover}",
6501
+ "dark": "{colorBackgroundButtonNormalHover}"
6502
6502
  },
6503
6503
  "colorBackgroundSliderHandleDefault": {
6504
6504
  "light": "{colorBlue600}",
@@ -7189,8 +7189,8 @@ export var preset = {
7189
7189
  "dark": "{colorGrey300}"
7190
7190
  },
7191
7191
  "colorTextSegmentHover": {
7192
- "light": "{colorBlue600}",
7193
- "dark": "{colorBlue500}"
7192
+ "light": "{colorTextButtonNormalHover}",
7193
+ "dark": "{colorTextButtonNormalHover}"
7194
7194
  },
7195
7195
  "colorTextSmall": {
7196
7196
  "light": "{colorGrey550}",
@@ -7551,8 +7551,8 @@ export var preset = {
7551
7551
  "dark": "{colorBackgroundButtonNormalDisabled}"
7552
7552
  },
7553
7553
  "colorBackgroundSegmentHover": {
7554
- "light": "{colorBackgroundSegmentDefault}",
7555
- "dark": "{colorBackgroundSegmentDefault}"
7554
+ "light": "{colorBackgroundButtonNormalHover}",
7555
+ "dark": "{colorBackgroundButtonNormalHover}"
7556
7556
  },
7557
7557
  "colorBackgroundSliderHandleDefault": {
7558
7558
  "light": "{colorBlue600}",
@@ -8243,8 +8243,8 @@ export var preset = {
8243
8243
  "dark": "{colorGrey300}"
8244
8244
  },
8245
8245
  "colorTextSegmentHover": {
8246
- "light": "{colorBlue600}",
8247
- "dark": "{colorBlue500}"
8246
+ "light": "{colorTextButtonNormalHover}",
8247
+ "dark": "{colorTextButtonNormalHover}"
8248
8248
  },
8249
8249
  "colorTextSmall": {
8250
8250
  "light": "{colorGrey550}",
@@ -8607,8 +8607,8 @@ export var preset = {
8607
8607
  "dark": "{colorBackgroundButtonNormalDisabled}"
8608
8608
  },
8609
8609
  "colorBackgroundSegmentHover": {
8610
- "light": "{colorBackgroundSegmentDefault}",
8611
- "dark": "{colorBackgroundSegmentDefault}"
8610
+ "light": "{colorBackgroundButtonNormalHover}",
8611
+ "dark": "{colorBackgroundButtonNormalHover}"
8612
8612
  },
8613
8613
  "colorBackgroundSliderHandleDefault": {
8614
8614
  "light": "{colorBlue500}",
@@ -9299,8 +9299,8 @@ export var preset = {
9299
9299
  "dark": "{colorGrey300}"
9300
9300
  },
9301
9301
  "colorTextSegmentHover": {
9302
- "light": "{colorBlue500}",
9303
- "dark": "{colorBlue500}"
9302
+ "light": "{colorTextButtonNormalHover}",
9303
+ "dark": "{colorTextButtonNormalHover}"
9304
9304
  },
9305
9305
  "colorTextSmall": {
9306
9306
  "light": "{colorGrey450}",
@@ -11639,7 +11639,7 @@ export var preset = {
11639
11639
  "colorBackgroundSegmentActive": "--color-background-segment-active-bkvyiy",
11640
11640
  "colorBackgroundSegmentDefault": "--color-background-segment-default-voaiuw",
11641
11641
  "colorBackgroundSegmentDisabled": "--color-background-segment-disabled-9tsgp1",
11642
- "colorBackgroundSegmentHover": "--color-background-segment-hover-jbzuvp",
11642
+ "colorBackgroundSegmentHover": "--color-background-segment-hover-jancts",
11643
11643
  "colorBackgroundSliderHandleDefault": "--color-background-slider-handle-default-94lnn1",
11644
11644
  "colorBackgroundSliderHandleActive": "--color-background-slider-handle-active-7w7xg0",
11645
11645
  "colorBackgroundSliderTrack": "--color-background-slider-track-uhckut",
@@ -11812,7 +11812,7 @@ export var preset = {
11812
11812
  "colorTextPaginationPageNumberDefault": "--color-text-pagination-page-number-default-s25kr0",
11813
11813
  "colorTextSegmentActive": "--color-text-segment-active-fc6owc",
11814
11814
  "colorTextSegmentDefault": "--color-text-segment-default-iib3us",
11815
- "colorTextSegmentHover": "--color-text-segment-hover-88u58t",
11815
+ "colorTextSegmentHover": "--color-text-segment-hover-yckzgd",
11816
11816
  "colorTextSmall": "--color-text-small-nzfntg",
11817
11817
  "colorTextStatusError": "--color-text-status-error-5676bj",
11818
11818
  "colorTextStatusInactive": "--color-text-status-inactive-5megna",
@@ -12017,7 +12017,7 @@ export var preset = {
12017
12017
  "spacePanelSideRight": "--space-panel-side-right-xofg51",
12018
12018
  "spacePanelSplitTop": "--space-panel-split-top-q1pux4",
12019
12019
  "spacePanelSplitBottom": "--space-panel-split-bottom-qwdduf",
12020
- "spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-gbye20",
12020
+ "spaceSegmentedControlFocusOutlineGutter": "--space-segmented-control-focus-outline-gutter-ublqj7",
12021
12021
  "spaceTabsContentTop": "--space-tabs-content-top-dedu0k",
12022
12022
  "spaceTabsFocusOutlineGutter": "--space-tabs-focus-outline-gutter-xm37ly",
12023
12023
  "spaceTableContentBottom": "--space-table-content-bottom-9yr834",
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "22d7bca68beb73bf264475ec9ae2f7989a9515d6"
2
+ "commit": "20d2f3a28812cf4f2266f2a402b5365e7ea20a1b"
3
3
  }
package/package.json CHANGED
@@ -132,7 +132,7 @@
132
132
  "./internal/base-component/index.js",
133
133
  "./internal/base-component/styles.css.js"
134
134
  ],
135
- "version": "3.0.905",
135
+ "version": "3.0.906",
136
136
  "repository": {
137
137
  "type": "git",
138
138
  "url": "https://github.com/cloudscape-design/components.git"
package/segmented-control/internal-segmented-control.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,eA4EvB"}
1
+ {"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,eA+EvB"}
package/segmented-control/internal-segmented-control.js CHANGED
@@ -3,6 +3,7 @@
3
3
  import React, { useRef } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { fireNonCancelableEvent } from '../internal/events';
6
+ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
6
7
  import { KeyCode } from '../internal/keycode';
7
8
  import handleKey from '../internal/utils/handle-key';
8
9
  import { Segment } from './segment';
@@ -27,7 +28,10 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
27
28
  const nextSegmentId = focusableSegments[nextIndex].id;
28
29
  (_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
29
30
  };
30
- return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`]), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
31
+ const isVisualRefresh = useVisualRefresh();
32
+ return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
33
+ [styles.refresh]: isVisualRefresh,
34
+ }), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
31
35
  options.map((option, index) => {
32
36
  const isActive = selectedId === option.id;
33
37
  const focusableSegmentIndex = focusableSegments.indexOf(option);
package/segmented-control/internal-segmented-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n}: SegmentedControlProps) {\n const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n const selectedOptions = (options || []).filter(option => {\n return option.id === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n const focusableSegments = (options || []).filter(\n option => !option.disabled || (option.disabled && !!option.disabledReason)\n );\n\n const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n return;\n }\n\n let nextIndex = activeIndex;\n\n handleKey(event, {\n onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n });\n\n const nextSegmentId = focusableSegments[nextIndex].id;\n segmentByIdRef.current[nextSegmentId]?.focus();\n };\n\n return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`])}\n aria-label={label}\n aria-labelledby={ariaLabelledby}\n role=\"toolbar\"\n >\n {options &&\n options.map((option: SegmentedControlProps.Option, index) => {\n const isActive = selectedId === option.id;\n const focusableSegmentIndex = focusableSegments.indexOf(option);\n let tabIndex = isActive ? 0 : -1;\n if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n tabIndex = 0;\n }\n return (\n <Segment\n key={index}\n id={option.id}\n disabled={!!option.disabled}\n disabledReason={option.disabledReason}\n iconName={option.iconName}\n iconAlt={option.iconAlt}\n iconUrl={option.iconUrl}\n iconSvg={option.iconSvg}\n text={option.text}\n isActive={isActive}\n tabIndex={tabIndex}\n ref={node => {\n if (node) {\n segmentByIdRef.current[option.id] = node;\n } else {\n delete segmentByIdRef.current[option.id];\n }\n }}\n onClick={() => {\n if (option.disabled) {\n return;\n }\n\n if (selectedId !== option.id) {\n fireNonCancelableEvent(onChange, { selectedId: option.id });\n }\n }}\n onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n />\n );\n })}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n}: SegmentedControlProps) {\n const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n const selectedOptions = (options || []).filter(option => {\n return option.id === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n const focusableSegments = (options || []).filter(\n option => !option.disabled || (option.disabled && !!option.disabledReason)\n );\n\n const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n return;\n }\n\n let nextIndex = activeIndex;\n\n handleKey(event, {\n onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n });\n\n const nextSegmentId = focusableSegments[nextIndex].id;\n segmentByIdRef.current[nextSegmentId]?.focus();\n };\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], {\n [styles.refresh]: isVisualRefresh,\n })}\n aria-label={label}\n aria-labelledby={ariaLabelledby}\n role=\"toolbar\"\n >\n {options &&\n options.map((option: SegmentedControlProps.Option, index) => {\n const isActive = selectedId === option.id;\n const focusableSegmentIndex = focusableSegments.indexOf(option);\n let tabIndex = isActive ? 0 : -1;\n if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n tabIndex = 0;\n }\n return (\n <Segment\n key={index}\n id={option.id}\n disabled={!!option.disabled}\n disabledReason={option.disabledReason}\n iconName={option.iconName}\n iconAlt={option.iconAlt}\n iconUrl={option.iconUrl}\n iconSvg={option.iconSvg}\n text={option.text}\n isActive={isActive}\n tabIndex={tabIndex}\n ref={node => {\n if (node) {\n segmentByIdRef.current[option.id] = node;\n } else {\n delete segmentByIdRef.current[option.id];\n }\n }}\n onClick={() => {\n if (option.disabled) {\n return;\n }\n\n if (selectedId !== option.id) {\n fireNonCancelableEvent(onChange, { selectedId: option.id });\n }\n }}\n onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n />\n );\n })}\n </div>\n );\n}\n"]}
package/segmented-control/segment.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFAuEnB,CAAC"}
1
+ {"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFA6EnB,CAAC"}
package/segmented-control/segment.js CHANGED
@@ -6,13 +6,15 @@ import InternalIcon from '../icon/internal';
6
6
  import Tooltip from '../internal/components/tooltip';
7
7
  import useHiddenDescription from '../internal/hooks/use-hidden-description';
8
8
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
9
+ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
9
10
  import styles from './styles.css.js';
10
11
  export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, }, ref) => {
11
12
  const buttonRef = useRef(null);
12
13
  const [showTooltip, setShowTooltip] = useState(false);
13
14
  const isDisabledWithReason = disabled && !!disabledReason;
14
15
  const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
15
- return (React.createElement("button", Object.assign({ className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined }, (isDisabledWithReason ? targetProps : {}), { "data-testid": id }),
16
+ const isVisualRefresh = useVisualRefresh();
17
+ return (React.createElement("button", Object.assign({ className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined }, (isDisabledWithReason ? targetProps : {}), { "data-testid": id }),
16
18
  (iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
17
19
  React.createElement("span", null, text),
18
20
  isDisabledWithReason && (React.createElement(React.Fragment, null,
package/segmented-control/segment.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../icon/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SegmentedControlProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n isActive: boolean;\n tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n (\n {\n disabled,\n disabledReason,\n text,\n iconName,\n iconAlt,\n iconUrl,\n iconSvg,\n isActive,\n onClick,\n onKeyDown,\n tabIndex,\n id,\n }: SegmentProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const buttonRef = useRef<HTMLElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const isDisabledWithReason = disabled && !!disabledReason;\n\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n\n return (\n <button\n className={clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive })}\n ref={useMergeRefs(ref, buttonRef)}\n onClick={onClick}\n onKeyDown={onKeyDown}\n disabled={disabled && !disabledReason}\n aria-disabled={isDisabledWithReason ? 'true' : undefined}\n type=\"button\"\n tabIndex={tabIndex}\n aria-pressed={isActive ? 'true' : 'false'}\n aria-label={!text ? iconAlt : undefined}\n onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n {...(isDisabledWithReason ? targetProps : {})}\n data-testid={id}\n >\n {(iconName || iconUrl || iconSvg) && (\n <InternalIcon\n className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n name={iconName}\n url={iconUrl}\n svg={iconSvg}\n alt={iconAlt}\n variant={disabled ? 'disabled' : 'normal'}\n />\n )}\n <span>{text}</span>\n\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={buttonRef}\n value={disabledReason!}\n onDismiss={() => setShowTooltip(false)}\n />\n )}\n </>\n )}\n </button>\n );\n }\n);\n"]}
1
+ {"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../icon/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SegmentedControlProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n isActive: boolean;\n tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n (\n {\n disabled,\n disabledReason,\n text,\n iconName,\n iconAlt,\n iconUrl,\n iconSvg,\n isActive,\n onClick,\n onKeyDown,\n tabIndex,\n id,\n }: SegmentProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const buttonRef = useRef<HTMLElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const isDisabledWithReason = disabled && !!disabledReason;\n\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <button\n className={clsx(\n styles.segment,\n { [styles.disabled]: !!disabled },\n { [styles.selected]: isActive },\n { [styles.refresh]: isVisualRefresh }\n )}\n ref={useMergeRefs(ref, buttonRef)}\n onClick={onClick}\n onKeyDown={onKeyDown}\n disabled={disabled && !disabledReason}\n aria-disabled={isDisabledWithReason ? 'true' : undefined}\n type=\"button\"\n tabIndex={tabIndex}\n aria-pressed={isActive ? 'true' : 'false'}\n aria-label={!text ? iconAlt : undefined}\n onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n {...(isDisabledWithReason ? targetProps : {})}\n data-testid={id}\n >\n {(iconName || iconUrl || iconSvg) && (\n <InternalIcon\n className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n name={iconName}\n url={iconUrl}\n svg={iconSvg}\n alt={iconAlt}\n variant={disabled ? 'disabled' : 'normal'}\n />\n )}\n <span>{text}</span>\n\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={buttonRef}\n value={disabledReason!}\n onDismiss={() => setShowTooltip(false)}\n />\n )}\n </>\n )}\n </button>\n );\n }\n);\n"]}
package/segmented-control/styles.css.js CHANGED
@@ -1,20 +1,21 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "segment": "awsui_segment_8cbea_m0ww2_161",
5
- "disabled": "awsui_disabled_8cbea_m0ww2_241",
6
- "selected": "awsui_selected_8cbea_m0ww2_249",
7
- "icon": "awsui_icon_8cbea_m0ww2_270",
8
- "with-text": "awsui_with-text_8cbea_m0ww2_274",
9
- "with-no-text": "awsui_with-no-text_8cbea_m0ww2_280",
10
- "root": "awsui_root_8cbea_m0ww2_285",
11
- "segment-part": "awsui_segment-part_8cbea_m0ww2_317",
12
- "select": "awsui_select_8cbea_m0ww2_249",
13
- "segment-count-2": "awsui_segment-count-2_8cbea_m0ww2_336",
14
- "segment-count-3": "awsui_segment-count-3_8cbea_m0ww2_340",
15
- "segment-count-4": "awsui_segment-count-4_8cbea_m0ww2_344",
16
- "segment-count-5": "awsui_segment-count-5_8cbea_m0ww2_348",
17
- "segment-count-6": "awsui_segment-count-6_8cbea_m0ww2_352",
18
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_m0ww2_356"
4
+ "segment": "awsui_segment_8cbea_iu5r7_161",
5
+ "refresh": "awsui_refresh_8cbea_iu5r7_187",
6
+ "disabled": "awsui_disabled_8cbea_iu5r7_193",
7
+ "selected": "awsui_selected_8cbea_iu5r7_256",
8
+ "icon": "awsui_icon_8cbea_iu5r7_279",
9
+ "with-text": "awsui_with-text_8cbea_iu5r7_283",
10
+ "with-no-text": "awsui_with-no-text_8cbea_iu5r7_289",
11
+ "root": "awsui_root_8cbea_iu5r7_294",
12
+ "segment-part": "awsui_segment-part_8cbea_iu5r7_326",
13
+ "select": "awsui_select_8cbea_iu5r7_256",
14
+ "segment-count-2": "awsui_segment-count-2_8cbea_iu5r7_359",
15
+ "segment-count-3": "awsui_segment-count-3_8cbea_iu5r7_363",
16
+ "segment-count-4": "awsui_segment-count-4_8cbea_iu5r7_367",
17
+ "segment-count-5": "awsui_segment-count-5_8cbea_iu5r7_371",
18
+ "segment-count-6": "awsui_segment-count-6_8cbea_iu5r7_375",
19
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_iu5r7_379"
19
20
  };
20
21
 
package/segmented-control/styles.scoped.css CHANGED
@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
158
158
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
159
159
  SPDX-License-Identifier: Apache-2.0
160
160
  */
161
- .awsui_segment_8cbea_m0ww2_161:not(#\9) {
161
+ .awsui_segment_8cbea_iu5r7_161:not(#\9) {
162
162
  font-size: var(--font-size-body-m-x4okxb, 14px);
163
163
  line-height: var(--line-height-body-m-30ar75, 20px);
164
164
  word-wrap: break-word;
@@ -168,121 +168,130 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
168
168
  -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
169
169
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
170
170
  letter-spacing: 0.25px;
171
- border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-segment-default-qegins, #424650);
172
- border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-segment-default-qegins, #424650);
173
171
  padding-block: var(--space-scaled-xxs-7597g1, 4px);
174
- padding-inline: var(--space-button-horizontal-8jxzea, 20px);
175
- border-inline-end-width: 0;
172
+ padding-inline: calc(var(--space-button-horizontal-8jxzea, 20px) - var(--space-static-xxs-82cdfi, 4px));
176
173
  background: var(--color-background-segment-default-voaiuw, #ffffff);
177
174
  color: var(--color-text-segment-default-iib3us, #424650);
178
175
  overflow: visible;
176
+ border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
177
+ border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
178
+ border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
179
+ border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
180
+ position: relative;
181
+ block-size: calc(100% - var(--space-static-xxs-82cdfi, 4px));
182
+ display: flex;
183
+ align-items: center;
184
+ border-inline: none;
185
+ border-block: none;
179
186
  }
180
- .awsui_segment_8cbea_m0ww2_161:not(#\9):focus {
181
- outline: none;
182
- }
183
- .awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(1) {
184
- grid-column: 1;
185
- -ms-grid-column: 1;
186
- }
187
- .awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(2) {
188
- grid-column: 2;
189
- -ms-grid-column: 2;
190
- }
191
- .awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(3) {
192
- grid-column: 3;
193
- -ms-grid-column: 3;
194
- }
195
- .awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(4) {
196
- grid-column: 4;
197
- -ms-grid-column: 4;
187
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187) {
188
+ block-size: calc(100% - var(--space-static-xxs-82cdfi, 4px) - 2 * var(--border-width-field-h1g7tw, 2px));
198
189
  }
199
- .awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(5) {
200
- grid-column: 5;
201
- -ms-grid-column: 5;
190
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
191
+ outline: none;
202
192
  }
203
- .awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(6) {
204
- grid-column: 6;
205
- -ms-grid-column: 6;
193
+ .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193:not(#\9) {
194
+ background: var(--color-background-segment-disabled-9tsgp1, #ffffff);
195
+ border-color: var(--color-border-segment-disabled-jfhyf7, #424650);
196
+ color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
206
197
  }
207
- body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focus {
198
+ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
208
199
  position: relative;
209
200
  }
210
- body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focus {
201
+ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
211
202
  outline: 2px dotted transparent;
212
- outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-gbye20, 4px) - 1px);
203
+ outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) - 1px);
213
204
  }
214
- body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focus::before {
205
+ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus::before {
215
206
  content: " ";
216
207
  display: block;
217
208
  position: absolute;
218
- inset-inline-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
219
- inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
220
- inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px) + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
221
- block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px) + var(--space-segmented-control-focus-outline-gutter-gbye20, 4px));
209
+ inset-inline-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
210
+ inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
211
+ inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
212
+ block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
222
213
  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
223
214
  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
224
215
  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
225
216
  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
226
217
  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
227
218
  }
228
- .awsui_segment_8cbea_m0ww2_161:not(#\9):last-child {
229
- border-inline-end-width: var(--border-width-field-h1g7tw, 2px);
230
- border-start-start-radius: 0;
231
- border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
232
- border-end-start-radius: 0;
233
- border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
219
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):not(:last-child)::after {
220
+ content: "";
221
+ position: absolute;
222
+ inset-inline-end: calc(-1 * (var(--space-static-xxs-82cdfi, 4px) + 1px));
223
+ block-size: calc(100% - (var(--space-static-xxs-82cdfi, 4px) + var(--space-static-xxxs-3gu9os, 2px)) * 2);
224
+ min-block-size: calc(var(--line-height-body-m-30ar75, 20px) - var(--space-static-xxs-82cdfi, 4px) * 2);
225
+ inline-size: 1px;
226
+ background: var(--color-border-input-default-l7v83d, #8c8c94);
227
+ z-index: 1;
234
228
  }
235
- .awsui_segment_8cbea_m0ww2_161:not(#\9):first-child {
236
- border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
237
- border-start-end-radius: 0;
238
- border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
239
- border-end-end-radius: 0;
229
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187):not(:last-child)::after {
230
+ inset-inline-end: calc(-1 * var(--space-static-xxs-82cdfi, 4px));
240
231
  }
241
- .awsui_segment_8cbea_m0ww2_161.awsui_disabled_8cbea_m0ww2_241:not(#\9) {
242
- background: var(--color-background-segment-disabled-9tsgp1, #ffffff);
243
- border-color: var(--color-border-segment-disabled-jfhyf7, #424650);
244
- color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
232
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(1) {
233
+ grid-column: 1;
234
+ -ms-grid-column: 1;
245
235
  }
246
- .awsui_segment_8cbea_m0ww2_161:not(#\9):not(.awsui_disabled_8cbea_m0ww2_241) + .awsui_segment_8cbea_m0ww2_161.awsui_disabled_8cbea_m0ww2_241 {
247
- border-inline-start-color: var(--color-border-segment-default-qegins, #424650);
236
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(2) {
237
+ grid-column: 2;
238
+ -ms-grid-column: 2;
248
239
  }
249
- .awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249:not(#\9) {
240
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(3) {
241
+ grid-column: 3;
242
+ -ms-grid-column: 3;
243
+ }
244
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(4) {
245
+ grid-column: 4;
246
+ -ms-grid-column: 4;
247
+ }
248
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(5) {
249
+ grid-column: 5;
250
+ -ms-grid-column: 5;
251
+ }
252
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(6) {
253
+ grid-column: 6;
254
+ -ms-grid-column: 6;
255
+ }
256
+ .awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256:not(#\9) {
250
257
  background: var(--color-background-segment-active-bkvyiy, #006ce0);
251
- border-color: var(--color-border-segment-active-0hw1oi, #424650);
252
258
  color: var(--color-text-segment-active-fc6owc, #ffffff);
253
259
  }
254
- .awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249 + .awsui_segment_8cbea_m0ww2_161:not(#\9), .awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249 + .awsui_segment_8cbea_m0ww2_161.awsui_disabled_8cbea_m0ww2_241:not(#\9) {
260
+ .awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161:not(#\9), .awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193:not(#\9) {
255
261
  border-inline-start-color: var(--color-border-segment-active-0hw1oi, #424650);
256
262
  }
257
- .awsui_segment_8cbea_m0ww2_161:not(#\9):hover:not(.awsui_selected_8cbea_m0ww2_249):not(.awsui_disabled_8cbea_m0ww2_241):not(:focus) {
258
- background: var(--color-background-segment-hover-jbzuvp, #ffffff);
259
- color: var(--color-text-segment-hover-88u58t, #006ce0);
263
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_disabled_8cbea_iu5r7_193) + .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193 {
264
+ border-inline-start-color: var(--color-border-segment-default-qegins, #424650);
265
+ }
266
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) {
267
+ background: var(--color-background-segment-hover-jancts, #f0fbff);
268
+ color: var(--color-text-segment-hover-yckzgd, #002b66);
260
269
  border-color: var(--color-border-segment-hover-cs1sac, #424650);
261
270
  cursor: pointer;
262
271
  }
263
- .awsui_segment_8cbea_m0ww2_161:not(#\9):hover:not(.awsui_selected_8cbea_m0ww2_249):not(.awsui_disabled_8cbea_m0ww2_241):not(:focus) + .awsui_segment_8cbea_m0ww2_161:not(.awsui_selected_8cbea_m0ww2_249) {
272
+ .awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) + .awsui_segment_8cbea_iu5r7_161:not(.awsui_selected_8cbea_iu5r7_256) {
264
273
  border-inline-start-color: var(--color-border-segment-hover-cs1sac, #424650);
265
274
  }
266
- .awsui_segment_8cbea_m0ww2_161.awsui_selected_8cbea_m0ww2_249 + .awsui_segment_8cbea_m0ww2_161:not(#\9):hover:not(.awsui_selected_8cbea_m0ww2_249):not(.awsui_disabled_8cbea_m0ww2_241):not(:focus) {
275
+ .awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) {
267
276
  border-inline-start-color: var(--color-border-segment-active-0hw1oi, #424650);
268
277
  }
269
278
 
270
- .awsui_icon_8cbea_m0ww2_270:not(#\9) {
279
+ .awsui_icon_8cbea_iu5r7_279:not(#\9) {
271
280
  /* used in test-utils */
272
281
  }
273
282
 
274
- .awsui_with-text_8cbea_m0ww2_274:not(#\9) {
283
+ .awsui_with-text_8cbea_iu5r7_283:not(#\9) {
275
284
  position: relative;
276
285
  inset-inline-start: calc(-1 * var(--space-xxs-p8yyaw, 4px));
277
286
  margin-inline-end: var(--space-xxs-p8yyaw, 4px);
278
287
  }
279
288
 
280
- .awsui_with-no-text_8cbea_m0ww2_280:not(#\9) {
289
+ .awsui_with-no-text_8cbea_iu5r7_289:not(#\9) {
281
290
  margin-inline: auto;
282
291
  inset-inline: 0;
283
292
  }
284
293
 
285
- .awsui_root_8cbea_m0ww2_285:not(#\9) {
294
+ .awsui_root_8cbea_iu5r7_294:not(#\9) {
286
295
  border-collapse: separate;
287
296
  border-spacing: 0;
288
297
  box-sizing: border-box;
@@ -315,44 +324,58 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focu
315
324
  -moz-osx-font-smoothing: auto;
316
325
  }
317
326
 
318
- .awsui_segment-part_8cbea_m0ww2_317:not(#\9) {
327
+ .awsui_segment-part_8cbea_iu5r7_326:not(#\9) {
319
328
  display: inline-grid;
329
+ border-inline: solid var(--border-width-field-h1g7tw, 2px) var(--color-border-input-default-l7v83d, #8c8c94);
330
+ border-block: solid var(--border-width-field-h1g7tw, 2px) var(--color-border-input-default-l7v83d, #8c8c94);
331
+ border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
332
+ border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
333
+ border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
334
+ border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
335
+ align-items: center;
336
+ min-block-size: calc(var(--line-height-body-m-30ar75, 20px) + var(--space-static-xxs-82cdfi, 4px));
337
+ padding-inline: var(--space-static-xxxs-3gu9os, 2px);
338
+ gap: calc(var(--space-static-xxs-82cdfi, 4px) * 2 + 1px);
339
+ }
340
+ .awsui_segment-part_8cbea_iu5r7_326:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187) {
341
+ padding-inline: calc(var(--space-static-xxxs-3gu9os, 2px) + 1px);
342
+ gap: calc(var(--space-static-xxs-82cdfi, 4px) * 2 - 1px);
320
343
  }
321
344
  @media (max-width: 688px) {
322
- .awsui_segment-part_8cbea_m0ww2_317:not(#\9) {
345
+ .awsui_segment-part_8cbea_iu5r7_326:not(#\9) {
323
346
  display: none;
324
347
  }
325
348
  }
326
349
 
327
- .awsui_select_8cbea_m0ww2_249:not(#\9) {
350
+ .awsui_select_8cbea_iu5r7_256:not(#\9) {
328
351
  display: none;
329
352
  }
330
353
  @media (max-width: 688px) {
331
- .awsui_select_8cbea_m0ww2_249:not(#\9) {
354
+ .awsui_select_8cbea_iu5r7_256:not(#\9) {
332
355
  display: block;
333
356
  }
334
357
  }
335
358
 
336
- .awsui_segment-count-2_8cbea_m0ww2_336:not(#\9) {
337
- grid-template-columns: 1fr 1fr;
359
+ .awsui_segment-count-2_8cbea_iu5r7_359:not(#\9) {
360
+ grid-template-columns: repeat(2, auto);
338
361
  }
339
362
 
340
- .awsui_segment-count-3_8cbea_m0ww2_340:not(#\9) {
341
- grid-template-columns: 1fr 1fr 1fr;
363
+ .awsui_segment-count-3_8cbea_iu5r7_363:not(#\9) {
364
+ grid-template-columns: repeat(3, auto);
342
365
  }
343
366
 
344
- .awsui_segment-count-4_8cbea_m0ww2_344:not(#\9) {
345
- grid-template-columns: 1fr 1fr 1fr 1fr;
367
+ .awsui_segment-count-4_8cbea_iu5r7_367:not(#\9) {
368
+ grid-template-columns: repeat(4, auto);
346
369
  }
347
370
 
348
- .awsui_segment-count-5_8cbea_m0ww2_348:not(#\9) {
349
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
371
+ .awsui_segment-count-5_8cbea_iu5r7_371:not(#\9) {
372
+ grid-template-columns: repeat(5, auto);
350
373
  }
351
374
 
352
- .awsui_segment-count-6_8cbea_m0ww2_352:not(#\9) {
353
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
375
+ .awsui_segment-count-6_8cbea_iu5r7_375:not(#\9) {
376
+ grid-template-columns: repeat(6, auto);
354
377
  }
355
378
 
356
- .awsui_disabled-reason-tooltip_8cbea_m0ww2_356:not(#\9) {
379
+ .awsui_disabled-reason-tooltip_8cbea_iu5r7_379:not(#\9) {
357
380
  /* used in test-utils or tests */
358
381
  }
package/segmented-control/styles.selectors.js CHANGED
@@ -2,20 +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_m0ww2_161",
6
- "disabled": "awsui_disabled_8cbea_m0ww2_241",
7
- "selected": "awsui_selected_8cbea_m0ww2_249",
8
- "icon": "awsui_icon_8cbea_m0ww2_270",
9
- "with-text": "awsui_with-text_8cbea_m0ww2_274",
10
- "with-no-text": "awsui_with-no-text_8cbea_m0ww2_280",
11
- "root": "awsui_root_8cbea_m0ww2_285",
12
- "segment-part": "awsui_segment-part_8cbea_m0ww2_317",
13
- "select": "awsui_select_8cbea_m0ww2_249",
14
- "segment-count-2": "awsui_segment-count-2_8cbea_m0ww2_336",
15
- "segment-count-3": "awsui_segment-count-3_8cbea_m0ww2_340",
16
- "segment-count-4": "awsui_segment-count-4_8cbea_m0ww2_344",
17
- "segment-count-5": "awsui_segment-count-5_8cbea_m0ww2_348",
18
- "segment-count-6": "awsui_segment-count-6_8cbea_m0ww2_352",
19
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_m0ww2_356"
5
+ "segment": "awsui_segment_8cbea_iu5r7_161",
6
+ "refresh": "awsui_refresh_8cbea_iu5r7_187",
7
+ "disabled": "awsui_disabled_8cbea_iu5r7_193",
8
+ "selected": "awsui_selected_8cbea_iu5r7_256",
9
+ "icon": "awsui_icon_8cbea_iu5r7_279",
10
+ "with-text": "awsui_with-text_8cbea_iu5r7_283",
11
+ "with-no-text": "awsui_with-no-text_8cbea_iu5r7_289",
12
+ "root": "awsui_root_8cbea_iu5r7_294",
13
+ "segment-part": "awsui_segment-part_8cbea_iu5r7_326",
14
+ "select": "awsui_select_8cbea_iu5r7_256",
15
+ "segment-count-2": "awsui_segment-count-2_8cbea_iu5r7_359",
16
+ "segment-count-3": "awsui_segment-count-3_8cbea_iu5r7_363",
17
+ "segment-count-4": "awsui_segment-count-4_8cbea_iu5r7_367",
18
+ "segment-count-5": "awsui_segment-count-5_8cbea_iu5r7_371",
19
+ "segment-count-6": "awsui_segment-count-6_8cbea_iu5r7_375",
20
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_iu5r7_379"
20
21
  };
21
22