@primer/react 38.32.1-rc.a11e0a1fc → 38.32.1-rc.ea8470aaa
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.
- package/CHANGELOG.md +2 -0
- package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css +2 -0
- package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css.map +1 -0
- package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
- package/package.json +1 -1
- package/dist/internal/components/UnderlineTabbedInterface-9aca4eac.css +0 -2
- package/dist/internal/components/UnderlineTabbedInterface-9aca4eac.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
- [#8164](https://github.com/primer/react/pull/8164) [`f86e5a6`](https://github.com/primer/react/commit/f86e5a6420e857e7476c3954d419f4e228bdcf1a) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix `UnderlineNav` tab list not filling the full width of the underline nav in Safari
|
|
12
12
|
|
|
13
|
+
- [#8165](https://github.com/primer/react/pull/8165) [`d60d05b`](https://github.com/primer/react/commit/d60d05b2684056b653cb605418d6f1cae0ba38e2) Thanks [@jonrohan](https://github.com/jonrohan)! - Pin the underline tabbed interface wrapper's vertical box model in wrap mode so external border and padding overrides can no longer offset its height and incorrectly trigger the overflow "more" menu
|
|
14
|
+
|
|
13
15
|
## 38.32.0
|
|
14
16
|
|
|
15
17
|
### Minor Changes
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:32px;line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
|
|
2
|
+
/*# sourceMappingURL=UnderlineTabbedInterface-93bd865a.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,qBAAsB,CAHtB,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAEE,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAyCF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-93bd865a.css","sourcesContent":[".UnderlineWrapper {\n display: flex;\n padding-top: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n justify-content: flex-start;\n align-items: flex-start;\n\n /* make space for the underline */\n min-height: var(--control-xlarge-size);\n\n /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 -1px var(--borderColor-muted);\n\n &[data-variant='flush'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: unset;\n }\n\n &[data-overflow-mode='wrap'] {\n /* Wrap items onto hidden next lines */\n overflow: hidden;\n max-height: var(--control-xlarge-size);\n\n /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n box-sizing: border-box;\n border-block: 0 !important;\n padding-block: var(--base-size-8) 0 !important;\n\n .UnderlineItemList {\n flex-grow: 1;\n flex-wrap: wrap;\n overflow: hidden;\n }\n }\n}\n\n.UnderlineItemList {\n position: relative;\n display: flex;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n list-style: none;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.UnderlineItem {\n /* underline tab specific styles */\n position: relative;\n display: inline-flex;\n font: inherit;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n color: var(--fgColor-default);\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium);\n max-width: 100%;\n margin-bottom: var(--base-size-8);\n height: 32px;\n\n /* button resets */\n appearance: none;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n align-items: center;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n transition: background-color 0.12s ease-out;\n }\n }\n}\n\n.UnderlineItem:focus {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n /* where focus-visible is supported, remove the focus box-shadow */\n &:not(:focus-visible) {\n box-shadow: none;\n }\n}\n\n.UnderlineItem:focus-visible {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n white-space: nowrap;\n visibility: hidden;\n content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n display: inline-flex;\n color: var(--fgColor-muted);\n align-items: center;\n margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n}\n\n.UnderlineItem::after {\n position: absolute;\n inset: auto 0 0;\n margin-bottom: calc(-1 * var(--base-size-8));\n height: 2px;\n pointer-events: none;\n content: '';\n background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n @media (forced-colors: active) {\n /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n background-color: LinkText;\n }\n}\n\n.LoadingCounter {\n display: inline-block;\n width: 1.5rem;\n height: 1rem;\n /* 16px */\n background-color: var(--bgColor-neutral-muted);\n border-color: var(--borderColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 20px;\n animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0.2;\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./UnderlineTabbedInterface-
|
|
1
|
+
import "./UnderlineTabbedInterface-93bd865a.css";
|
|
2
2
|
//#region src/internal/components/UnderlineTabbedInterface.module.css.js
|
|
3
3
|
var UnderlineTabbedInterface_module_css_default = {
|
|
4
4
|
"UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{max-height:var(--control-xlarge-size,3rem);overflow:hidden}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:32px;line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
|
|
2
|
-
/*# sourceMappingURL=UnderlineTabbedInterface-9aca4eac.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CA2BF,CAhBE,2DAEE,oBACF,CAEA,gEAGE,0CAAsC,CADtC,eAQF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAEE,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAyCF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-9aca4eac.css","sourcesContent":[".UnderlineWrapper {\n display: flex;\n padding-top: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n justify-content: flex-start;\n align-items: flex-start;\n\n /* make space for the underline */\n min-height: var(--control-xlarge-size);\n\n /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 -1px var(--borderColor-muted);\n\n &[data-variant='flush'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: unset;\n }\n\n &[data-overflow-mode='wrap'] {\n /* Wrap items onto hidden next lines */\n overflow: hidden;\n max-height: var(--control-xlarge-size);\n\n .UnderlineItemList {\n flex-grow: 1;\n flex-wrap: wrap;\n overflow: hidden;\n }\n }\n}\n\n.UnderlineItemList {\n position: relative;\n display: flex;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n list-style: none;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.UnderlineItem {\n /* underline tab specific styles */\n position: relative;\n display: inline-flex;\n font: inherit;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n color: var(--fgColor-default);\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium);\n max-width: 100%;\n margin-bottom: var(--base-size-8);\n height: 32px;\n\n /* button resets */\n appearance: none;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n align-items: center;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n transition: background-color 0.12s ease-out;\n }\n }\n}\n\n.UnderlineItem:focus {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n /* where focus-visible is supported, remove the focus box-shadow */\n &:not(:focus-visible) {\n box-shadow: none;\n }\n}\n\n.UnderlineItem:focus-visible {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n white-space: nowrap;\n visibility: hidden;\n content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n display: inline-flex;\n color: var(--fgColor-muted);\n align-items: center;\n margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n}\n\n.UnderlineItem::after {\n position: absolute;\n inset: auto 0 0;\n margin-bottom: calc(-1 * var(--base-size-8));\n height: 2px;\n pointer-events: none;\n content: '';\n background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n @media (forced-colors: active) {\n /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n background-color: LinkText;\n }\n}\n\n.LoadingCounter {\n display: inline-block;\n width: 1.5rem;\n height: 1rem;\n /* 16px */\n background-color: var(--bgColor-neutral-muted);\n border-color: var(--borderColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 20px;\n animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0.2;\n }\n}\n"]}
|