@primer/react 38.40.1-rc.1028b70d8 → 38.40.1-rc.1b179a1b8

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 (11) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/ActionList/Item.js +116 -115
  3. package/dist/AvatarStack/{AvatarStack-e6a99916.css → AvatarStack-937ec7c1.css} +2 -2
  4. package/dist/AvatarStack/{AvatarStack-e6a99916.css.map → AvatarStack-937ec7c1.css.map} +1 -1
  5. package/dist/AvatarStack/AvatarStack.module.css.js +1 -1
  6. package/dist/SegmentedControl/SegmentedControl-e68d4197.css +2 -0
  7. package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map +1 -0
  8. package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
  9. package/package.json +1 -1
  10. package/dist/SegmentedControl/SegmentedControl-32b3c0ea.css +0 -2
  11. package/dist/SegmentedControl/SegmentedControl-32b3c0ea.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -6,9 +6,11 @@
6
6
 
7
7
  - [#8413](https://github.com/primer/react/pull/8413) [`d4e30ed`](https://github.com/primer/react/commit/d4e30ed186af6ae781b3adcf83278e0c2001a834) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SelectPanel: Announce the filter input label when focus moves into the panel
8
8
 
9
+ - [#8434](https://github.com/primer/react/pull/8434) [`6794582`](https://github.com/primer/react/commit/67945828439898ace865bd5f7417c562033bcbc2) Thanks [@siddharthkp](https://github.com/siddharthkp)! - AvatarStack: Prevent a thin edge from a masked avatar over the next avatar
10
+
9
11
  - [#8443](https://github.com/primer/react/pull/8443) [`e2d6cb9`](https://github.com/primer/react/commit/e2d6cb931bbde9446701056f204b055789b16dd9) Thanks [@siddharthkp](https://github.com/siddharthkp)! - UnderlineNav: Avoid adding a default `href` when items render as custom link components
10
12
 
11
- - [#8442](https://github.com/primer/react/pull/8442) [`68019e8`](https://github.com/primer/react/commit/68019e8945a754bb0f97c9e963b90e2a9ccaaf85) Thanks [@joshfarrant](https://github.com/joshfarrant)! - SegmentedControl: Allow controls to grow vertically and preserve visible labels when they wrap
13
+ - [#8429](https://github.com/primer/react/pull/8429) [`f2c075a`](https://github.com/primer/react/commit/f2c075a5d4d0b51a279c39effa18226ad909929d) Thanks [@tay1orjones](https://github.com/tay1orjones)! - SelectPanel: Prevent console warnings when measuring virtualized items
12
14
 
13
15
  ## 38.40.0
14
16
 
package/dist/ActionList/Item.js CHANGED
@@ -471,33 +471,34 @@ const UnwrappedItem = (t0, forwardedRef) => {
471
471
  $[92] = t35;
472
472
  } else t35 = $[92];
473
473
  const t36 = (_PrivateTooltipText2 = _PrivateTooltipText) !== null && _PrivateTooltipText2 !== void 0 ? _PrivateTooltipText2 : truncatedText;
474
- let t37;
474
+ const t37 = listSemantics ? null : forwardedRef;
475
475
  let t38;
476
+ let t39;
476
477
  if ($[93] === Symbol.for("react.memo_cache_sentinel")) {
477
- t37 = {};
478
- t38 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
479
- $[93] = t37;
480
- $[94] = t38;
478
+ t38 = {};
479
+ t39 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
480
+ $[93] = t38;
481
+ $[94] = t39;
481
482
  } else {
482
- t37 = $[93];
483
- t38 = $[94];
483
+ t38 = $[93];
484
+ t39 = $[94];
484
485
  }
485
- let t39;
486
+ let t40;
486
487
  if ($[95] !== selected) {
487
- t39 = /*#__PURE__*/ jsx(Selection, {
488
+ t40 = /*#__PURE__*/ jsx(Selection, {
488
489
  selected,
489
490
  className: ActionList_module_css_default.LeadingAction
490
491
  });
491
492
  $[95] = selected;
492
- $[96] = t39;
493
- } else t39 = $[96];
494
- const t40 = showInactiveIndicator ? inactiveText : void 0;
495
- const t41 = Boolean(slots.leadingVisual);
496
- let t42;
497
- if ($[97] !== labelId || $[98] !== loading || $[99] !== slots.leadingVisual || $[100] !== t40 || $[101] !== t41) {
498
- t42 = /*#__PURE__*/ jsx(VisualOrIndicator, {
499
- inactiveText: t40,
500
- itemHasLeadingVisual: t41,
493
+ $[96] = t40;
494
+ } else t40 = $[96];
495
+ const t41 = showInactiveIndicator ? inactiveText : void 0;
496
+ const t42 = Boolean(slots.leadingVisual);
497
+ let t43;
498
+ if ($[97] !== labelId || $[98] !== loading || $[99] !== slots.leadingVisual || $[100] !== t41 || $[101] !== t42) {
499
+ t43 = /*#__PURE__*/ jsx(VisualOrIndicator, {
500
+ inactiveText: t41,
501
+ itemHasLeadingVisual: t42,
501
502
  labelId,
502
503
  loading,
503
504
  position: "leading",
@@ -506,52 +507,52 @@ const UnwrappedItem = (t0, forwardedRef) => {
506
507
  $[97] = labelId;
507
508
  $[98] = loading;
508
509
  $[99] = slots.leadingVisual;
509
- $[100] = t40;
510
- $[101] = t41;
511
- $[102] = t42;
512
- } else t42 = $[102];
513
- const t43 = !!slots.description;
514
- let t44;
510
+ $[100] = t41;
511
+ $[101] = t42;
512
+ $[102] = t43;
513
+ } else t43 = $[102];
514
+ const t44 = !!slots.description;
515
+ let t45;
515
516
  if ($[103] !== inactive || $[104] !== loading) {
516
- t44 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
517
+ t45 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
517
518
  $[103] = inactive;
518
519
  $[104] = loading;
519
- $[105] = t44;
520
- } else t44 = $[105];
521
- let t45;
522
- if ($[106] !== childrenWithoutSlots || $[107] !== labelId || $[108] !== t44) {
523
- t45 = /*#__PURE__*/ jsxs("span", {
520
+ $[105] = t45;
521
+ } else t45 = $[105];
522
+ let t46;
523
+ if ($[106] !== childrenWithoutSlots || $[107] !== labelId || $[108] !== t45) {
524
+ t46 = /*#__PURE__*/ jsxs("span", {
524
525
  id: labelId,
525
526
  className: ActionList_module_css_default.ItemLabel,
526
527
  "data-component": "ActionList.Item.Label",
527
- children: [childrenWithoutSlots, t44]
528
+ children: [childrenWithoutSlots, t45]
528
529
  });
529
530
  $[106] = childrenWithoutSlots;
530
531
  $[107] = labelId;
531
- $[108] = t44;
532
- $[109] = t45;
533
- } else t45 = $[109];
534
- let t46;
535
- if ($[110] !== descriptionVariant || $[111] !== slots.description || $[112] !== t43 || $[113] !== t45) {
536
- t46 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
537
- if: t43,
532
+ $[108] = t45;
533
+ $[109] = t46;
534
+ } else t46 = $[109];
535
+ let t47;
536
+ if ($[110] !== descriptionVariant || $[111] !== slots.description || $[112] !== t44 || $[113] !== t46) {
537
+ t47 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
538
+ if: t44,
538
539
  className: ActionList_module_css_default.ItemDescriptionWrap,
539
540
  "data-description-variant": descriptionVariant,
540
- children: [t45, slots.description]
541
+ children: [t46, slots.description]
541
542
  });
542
543
  $[110] = descriptionVariant;
543
544
  $[111] = slots.description;
544
- $[112] = t43;
545
- $[113] = t45;
546
- $[114] = t46;
547
- } else t46 = $[114];
548
- const t47 = showInactiveIndicator ? inactiveText : void 0;
549
- const t48 = Boolean(slots.leadingVisual);
550
- let t49;
551
- if ($[115] !== labelId || $[116] !== loading || $[117] !== t47 || $[118] !== t48 || $[119] !== trailingVisual) {
552
- t49 = /*#__PURE__*/ jsx(VisualOrIndicator, {
553
- inactiveText: t47,
554
- itemHasLeadingVisual: t48,
545
+ $[112] = t44;
546
+ $[113] = t46;
547
+ $[114] = t47;
548
+ } else t47 = $[114];
549
+ const t48 = showInactiveIndicator ? inactiveText : void 0;
550
+ const t49 = Boolean(slots.leadingVisual);
551
+ let t50;
552
+ if ($[115] !== labelId || $[116] !== loading || $[117] !== t48 || $[118] !== t49 || $[119] !== trailingVisual) {
553
+ t50 = /*#__PURE__*/ jsx(VisualOrIndicator, {
554
+ inactiveText: t48,
555
+ itemHasLeadingVisual: t49,
555
556
  labelId,
556
557
  loading,
557
558
  position: "trailing",
@@ -559,14 +560,14 @@ const UnwrappedItem = (t0, forwardedRef) => {
559
560
  });
560
561
  $[115] = labelId;
561
562
  $[116] = loading;
562
- $[117] = t47;
563
- $[118] = t48;
563
+ $[117] = t48;
564
+ $[118] = t49;
564
565
  $[119] = trailingVisual;
565
- $[120] = t49;
566
- } else t49 = $[120];
567
- let t50;
566
+ $[120] = t50;
567
+ } else t50 = $[120];
568
+ let t51;
568
569
  if ($[121] !== inactiveText || $[122] !== inactiveWarningId || $[123] !== showInactiveIndicator) {
569
- t50 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
570
+ t51 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
570
571
  className: ActionList_module_css_default.InactiveWarning,
571
572
  id: inactiveWarningId,
572
573
  children: inactiveText
@@ -574,74 +575,74 @@ const UnwrappedItem = (t0, forwardedRef) => {
574
575
  $[121] = inactiveText;
575
576
  $[122] = inactiveWarningId;
576
577
  $[123] = showInactiveIndicator;
577
- $[124] = t50;
578
- } else t50 = $[124];
579
- let t51;
580
- if ($[125] !== t46 || $[126] !== t49 || $[127] !== t50) {
581
- t51 = /*#__PURE__*/ jsxs("span", {
578
+ $[124] = t51;
579
+ } else t51 = $[124];
580
+ let t52;
581
+ if ($[125] !== t47 || $[126] !== t50 || $[127] !== t51) {
582
+ t52 = /*#__PURE__*/ jsxs("span", {
582
583
  className: ActionList_module_css_default.ActionListSubContent,
583
584
  "data-component": "ActionList.Item--DividerContainer",
584
585
  children: [
585
- t46,
586
- t49,
587
- t50
586
+ t47,
587
+ t50,
588
+ t51
588
589
  ]
589
590
  });
590
- $[125] = t46;
591
- $[126] = t49;
592
- $[127] = t50;
593
- $[128] = t51;
594
- } else t51 = $[128];
595
- let t52;
596
- if ($[129] !== t39 || $[130] !== t42 || $[131] !== t51) {
597
- t52 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
598
- value: t37,
591
+ $[125] = t47;
592
+ $[126] = t50;
593
+ $[127] = t51;
594
+ $[128] = t52;
595
+ } else t52 = $[128];
596
+ let t53;
597
+ if ($[129] !== t40 || $[130] !== t43 || $[131] !== t52) {
598
+ t53 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
599
+ value: t38,
599
600
  children: [
600
- t38,
601
601
  t39,
602
- t42,
603
- t51
602
+ t40,
603
+ t43,
604
+ t52
604
605
  ]
605
606
  });
606
- $[129] = t39;
607
- $[130] = t42;
608
- $[131] = t51;
609
- $[132] = t52;
610
- } else t52 = $[132];
611
- let t53;
612
- if ($[133] !== ItemWrapper || $[134] !== forwardedRef || $[135] !== size || $[136] !== t52 || $[137] !== wrapperProps) {
613
- t53 = /*#__PURE__*/ jsx(ItemWrapper, {
607
+ $[129] = t40;
608
+ $[130] = t43;
609
+ $[131] = t52;
610
+ $[132] = t53;
611
+ } else t53 = $[132];
612
+ let t54;
613
+ if ($[133] !== ItemWrapper || $[134] !== size || $[135] !== t37 || $[136] !== t53 || $[137] !== wrapperProps) {
614
+ t54 = /*#__PURE__*/ jsx(ItemWrapper, {
614
615
  ...wrapperProps,
615
616
  className: ActionList_module_css_default.ActionListContent,
616
617
  "data-size": size,
617
- ref: forwardedRef,
618
- children: t52
618
+ ref: t37,
619
+ children: t53
619
620
  });
620
621
  $[133] = ItemWrapper;
621
- $[134] = forwardedRef;
622
- $[135] = size;
623
- $[136] = t52;
622
+ $[134] = size;
623
+ $[135] = t37;
624
+ $[136] = t53;
624
625
  $[137] = wrapperProps;
625
- $[138] = t53;
626
- } else t53 = $[138];
627
- let t54;
628
- if ($[139] !== buttonSemantics || $[140] !== forwardedRef || $[141] !== t36 || $[142] !== t53) {
629
- t54 = /*#__PURE__*/ jsx(ConditionalTooltip, {
626
+ $[138] = t54;
627
+ } else t54 = $[138];
628
+ let t55;
629
+ if ($[139] !== buttonSemantics || $[140] !== forwardedRef || $[141] !== t36 || $[142] !== t54) {
630
+ t55 = /*#__PURE__*/ jsx(ConditionalTooltip, {
630
631
  ref: forwardedRef,
631
632
  text: t36,
632
633
  enabled: buttonSemantics,
633
- children: t53
634
+ children: t54
634
635
  });
635
636
  $[139] = buttonSemantics;
636
637
  $[140] = forwardedRef;
637
638
  $[141] = t36;
638
- $[142] = t53;
639
- $[143] = t54;
640
- } else t54 = $[143];
641
- const t55 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
642
- let t56;
643
- if ($[144] !== containerProps || $[145] !== slots.subItem || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32 || $[153] !== t33 || $[154] !== t34 || $[155] !== t35 || $[156] !== t54 || $[157] !== t55) {
644
- t56 = /*#__PURE__*/ jsxs("li", {
639
+ $[142] = t54;
640
+ $[143] = t55;
641
+ } else t55 = $[143];
642
+ const t56 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
643
+ let t57;
644
+ if ($[144] !== containerProps || $[145] !== slots.subItem || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32 || $[153] !== t33 || $[154] !== t34 || $[155] !== t35 || $[156] !== t55 || $[157] !== t56) {
645
+ t57 = /*#__PURE__*/ jsxs("li", {
645
646
  ...containerProps,
646
647
  ref: t26,
647
648
  "data-component": "ActionList.Item",
@@ -655,8 +656,8 @@ const UnwrappedItem = (t0, forwardedRef) => {
655
656
  "data-trailing-action-loading": t34,
656
657
  className: t35,
657
658
  children: [
658
- t54,
659
659
  t55,
660
+ t56,
660
661
  slots.subItem
661
662
  ]
662
663
  });
@@ -672,21 +673,21 @@ const UnwrappedItem = (t0, forwardedRef) => {
672
673
  $[153] = t33;
673
674
  $[154] = t34;
674
675
  $[155] = t35;
675
- $[156] = t54;
676
- $[157] = t55;
677
- $[158] = t56;
678
- } else t56 = $[158];
679
- let t57;
680
- if ($[159] !== itemContextValue || $[160] !== t56) {
681
- t57 = /*#__PURE__*/ jsx(ItemContext.Provider, {
676
+ $[156] = t55;
677
+ $[157] = t56;
678
+ $[158] = t57;
679
+ } else t57 = $[158];
680
+ let t58;
681
+ if ($[159] !== itemContextValue || $[160] !== t57) {
682
+ t58 = /*#__PURE__*/ jsx(ItemContext.Provider, {
682
683
  value: itemContextValue,
683
- children: t56
684
+ children: t57
684
685
  });
685
686
  $[159] = itemContextValue;
686
- $[160] = t56;
687
- $[161] = t57;
688
- } else t57 = $[161];
689
- return t57;
687
+ $[160] = t57;
688
+ $[161] = t58;
689
+ } else t58 = $[161];
690
+ return t58;
690
691
  };
691
692
  const Item = Object.assign(fixedForwardRef(UnwrappedItem), {
692
693
  displayName: "ActionList.Item",
package/dist/AvatarStack/{AvatarStack-e6a99916.css → AvatarStack-937ec7c1.css} RENAMED
@@ -1,2 +1,2 @@
1
- .prc-AvatarStack-AvatarStack-vkIK2{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:where([data-component=Avatar]){box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,#1f232826)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-JFK4u{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-JFK4u:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-70eW3{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-70eW3:not([data-component=Avatar]):not(:has([data-square])){border-radius:50%}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square][data-align-right]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:first-child{z-index:5}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(2){z-index:4}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(3){z-index:3}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(4){z-index:2}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+6){opacity:0;position:absolute;visibility:hidden}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover{width:auto}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}
2
- /*# sourceMappingURL=AvatarStack-e6a99916.css.map */
1
+ .prc-AvatarStack-AvatarStack-vkIK2{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:where([data-component=Avatar]){box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,#1f232826)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-JFK4u{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-JFK4u:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-70eW3{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-70eW3:not([data-component=Avatar]):not(:has([data-square])){border-radius:50%}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square][data-align-right]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarItem-70eW3:first-child{z-index:5}.prc-AvatarStack-AvatarItem-70eW3:nth-child(2){z-index:4}.prc-AvatarStack-AvatarItem-70eW3:nth-child(3){z-index:3}.prc-AvatarStack-AvatarItem-70eW3:nth-child(4){z-index:2}.prc-AvatarStack-AvatarItem-70eW3:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+6){opacity:0;position:absolute;visibility:hidden}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover{width:auto}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}
2
+ /*# sourceMappingURL=AvatarStack-937ec7c1.css.map */
package/dist/AvatarStack/{AvatarStack-e6a99916.css.map → AvatarStack-937ec7c1.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css.js"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,sJAEE,+EACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAqHF,CA1GE,mGAEE,uDACF,CAGA,wFACE,iBACF,CAGA,mGAEE,qBACF,CAGA,qHAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GACE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,4GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,iDAGE,SAAU,CAFV,iBAAkB,CAClB,iBAEF,CAGF,uJAEE,UAuBF,CArBE,iHACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CApBA,0GACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CAHE,sHACE,qBACF,CAFA,6HACE,qBACF","file":"AvatarStack-e6a99916.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem:where([data-component='Avatar']) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:not([data-component='Avatar']):not(:has([data-square])) {\n border-radius: 50%;\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(255, 255, 255, 1);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(1) {\n z-index: 5;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(2) {\n z-index: 4;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(3) {\n z-index: 3;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(4) {\n z-index: 2;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */\n\n position: relative;\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css.js"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,sJAEE,+EACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAqHF,CA1GE,mGAEE,uDACF,CAGA,wFACE,iBACF,CAGA,mGAEE,qBACF,CAGA,qHAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GACE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,8CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,iDAGE,SAAU,CAFV,iBAAkB,CAClB,iBAEF,CAGF,uJAEE,UAuBF,CArBE,iHACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CApBA,0GACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CAHE,sHACE,qBACF,CAFA,6HACE,qBACF","file":"AvatarStack-937ec7c1.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem:where([data-component='Avatar']) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:not([data-component='Avatar']):not(:has([data-square])) {\n border-radius: 50%;\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(255, 255, 255, 1);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n &:nth-child(1) {\n z-index: 5;\n }\n\n &:nth-child(2) {\n z-index: 4;\n }\n\n &:nth-child(3) {\n z-index: 3;\n }\n\n &:nth-child(4) {\n z-index: 2;\n }\n\n &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */\n\n position: relative;\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
package/dist/AvatarStack/AvatarStack.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./AvatarStack-e6a99916.css";
1
+ import "./AvatarStack-937ec7c1.css";
2
2
  //#region src/AvatarStack/AvatarStack.module.css.js
3
3
  var AvatarStack_module_css_default = {
4
4
  "AvatarStack": "prc-AvatarStack-AvatarStack-vkIK2",
package/dist/SegmentedControl/SegmentedControl-e68d4197.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-disable-knob-transition]:before{transition:none}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
+ /*# sourceMappingURL=SegmentedControl-e68d4197.css.map */
package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-e68d4197.css","sourcesContent":["@define-mixin subtleVariant {\n --segmented-control-outer-radius: var(--borderRadius-large);\n --segmented-control-button-bg-inset: 0px;\n\n background-color: transparent;\n border: 0;\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: none;\n }\n\n .Item:not(:last-child)::after {\n background-color: transparent;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: block;\n }\n\n .Button {\n padding: 0;\n color: var(--fgColor-muted);\n border: 0;\n border-radius: var(--borderRadius-large);\n\n .Content {\n padding-inline: var(--base-size-12);\n border: 0;\n }\n }\n\n .Button[aria-pressed='true'] {\n color: var(--fgColor-default);\n\n .Content {\n background-color: var(--bgColor-muted);\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--bgColor-muted);\n background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n }\n}\n\n@define-mixin defaultVariant {\n --segmented-control-outer-radius: var(--borderRadius-medium);\n --segmented-control-button-bg-inset: 4px;\n\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: block;\n }\n\n .Item:not(:last-child)::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n }\n\n .Button {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n color: currentColor;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border: var(--borderWidth-thin) solid transparent;\n }\n }\n\n .Button[aria-pressed='true'] {\n padding: 0;\n color: currentColor;\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--segmented-control-button-inner-padding);\n background-color: transparent;\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n}\n\n.SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n\n &[data-disable-knob-transition]::before {\n transition: none;\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n align-self: stretch;\n width: 1px;\n margin-block: var(--base-size-8);\n margin-inline-start: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n margin-inline-end: calc(var(--base-size-8) - 1px);\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n &:where([data-variant='subtle']) {\n @mixin subtleVariant;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-narrow='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-regular='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-wide='subtle']) {\n @mixin subtleVariant;\n }\n\n &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n @mixin defaultVariant;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownGroup {\n --segmented-control-action-size: 32px;\n --segmented-control-list-flex: 0 1 auto;\n\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n\n &[data-full-width='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width='false'] {\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-narrow='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-regular='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-wide='false'] {\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n width: auto;\n\n --segmented-control-list-flex: 0 1 auto;\n }\n }\n\n &[data-size='small'] {\n --segmented-control-action-size: 28px;\n }\n\n > .SegmentedControl {\n min-width: 0;\n flex: var(--segmented-control-list-flex);\n }\n}\n\n.InlineAction {\n display: flex;\n\n &[data-variant='dropdown'] {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([data-selected]))::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.ActionItem {\n display: flex;\n align-items: center;\n margin-inline-start: 0;\n}\n\n.ActionButton {\n width: var(--segmented-control-action-size);\n height: var(--segmented-control-action-size);\n padding: 0;\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
package/dist/SegmentedControl/SegmentedControl.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./SegmentedControl-32b3c0ea.css";
1
+ import "./SegmentedControl-e68d4197.css";
2
2
  //#region src/SegmentedControl/SegmentedControl.module.css.js
3
3
  var SegmentedControl_module_css_default = {
4
4
  "SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.40.1-rc.1028b70d8",
4
+ "version": "38.40.1-rc.1b179a1b8",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/SegmentedControl/SegmentedControl-32b3c0ea.css DELETED
@@ -1,2 +0,0 @@
1
- .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:-moz-fit-content;height:fit-content;margin:0;min-height:32px;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-disable-knob-transition]:before{transition:none}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);min-height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
- /*# sourceMappingURL=SegmentedControl-32b3c0ea.css.map */
package/dist/SegmentedControl/SegmentedControl-32b3c0ea.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-32b3c0ea.css","sourcesContent":["@define-mixin subtleVariant {\n --segmented-control-outer-radius: var(--borderRadius-large);\n --segmented-control-button-bg-inset: 0px;\n\n background-color: transparent;\n border: 0;\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: none;\n }\n\n .Item:not(:last-child)::after {\n background-color: transparent;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: block;\n }\n\n .Button {\n padding: 0;\n color: var(--fgColor-muted);\n border: 0;\n border-radius: var(--borderRadius-large);\n\n .Content {\n padding-inline: var(--base-size-12);\n border: 0;\n }\n }\n\n .Button[aria-pressed='true'] {\n color: var(--fgColor-default);\n\n .Content {\n background-color: var(--bgColor-muted);\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--bgColor-muted);\n background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n }\n}\n\n@define-mixin defaultVariant {\n --segmented-control-outer-radius: var(--borderRadius-medium);\n --segmented-control-button-bg-inset: 4px;\n\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: block;\n }\n\n .Item:not(:last-child)::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n }\n\n .Button {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n color: currentColor;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border: var(--borderWidth-thin) solid transparent;\n }\n }\n\n .Button[aria-pressed='true'] {\n padding: 0;\n color: currentColor;\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--segmented-control-button-inner-padding);\n background-color: transparent;\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n}\n\n.SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: fit-content;\n min-height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n\n &[data-disable-knob-transition]::before {\n transition: none;\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n align-self: stretch;\n width: 1px;\n margin-block: var(--base-size-8);\n margin-inline-start: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n margin-inline-end: calc(var(--base-size-8) - 1px);\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n &:where([data-variant='subtle']) {\n @mixin subtleVariant;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-narrow='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-regular='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-wide='subtle']) {\n @mixin subtleVariant;\n }\n\n &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n @mixin defaultVariant;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n min-height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownGroup {\n --segmented-control-action-size: 32px;\n --segmented-control-list-flex: 0 1 auto;\n\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n\n &[data-full-width='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width='false'] {\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-narrow='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-regular='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-wide='false'] {\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n width: auto;\n\n --segmented-control-list-flex: 0 1 auto;\n }\n }\n\n &[data-size='small'] {\n --segmented-control-action-size: 28px;\n }\n\n > .SegmentedControl {\n min-width: 0;\n flex: var(--segmented-control-list-flex);\n }\n}\n\n.InlineAction {\n display: flex;\n\n &[data-variant='dropdown'] {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([data-selected]))::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.ActionItem {\n display: flex;\n align-items: center;\n margin-inline-start: 0;\n}\n\n.ActionButton {\n width: var(--segmented-control-action-size);\n height: var(--segmented-control-action-size);\n padding: 0;\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}