@primer/react 0.0.0-20260324024141 → 0.0.0-20260324024849
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 +3 -1
- package/dist/FilteredActionList/FilteredActionList-6808e67a.css +2 -0
- package/dist/FilteredActionList/FilteredActionList-6808e67a.css.map +1 -0
- package/dist/FilteredActionList/FilteredActionList.module.css.js +1 -1
- package/dist/SegmentedControl/SegmentedControl-6389d0da.css +2 -0
- package/dist/SegmentedControl/SegmentedControl-6389d0da.css.map +1 -0
- package/dist/SegmentedControl/SegmentedControl.module.css.js +2 -2
- package/package.json +1 -1
- package/dist/FilteredActionList/FilteredActionList-02db90c6.css +0 -2
- package/dist/FilteredActionList/FilteredActionList-02db90c6.css.map +0 -1
- package/dist/SegmentedControl/SegmentedControl-2e8dcc34.css +0 -4
- package/dist/SegmentedControl/SegmentedControl-2e8dcc34.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
3
|
+
## 0.0.0-20260324024849
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
|
|
16
16
|
### Patch Changes
|
|
17
17
|
|
|
18
|
+
- [#7696](https://github.com/primer/react/pull/7696) [`40d7163`](https://github.com/primer/react/commit/40d7163ea42ee239582f0a08586320c72c07e57f) Thanks [@francinelucca](https://github.com/francinelucca)! - Fix item dividers not visible in SelectPanel and FilteredActionList when `showItemDividers` is enabled, caused by `content-visibility: auto` clipping the absolutely-positioned divider pseudo-elements.
|
|
19
|
+
|
|
18
20
|
- Fake entry to force publishing
|
|
19
21
|
|
|
20
22
|
- [#7510](https://github.com/primer/react/pull/7510) [`8fa988b`](https://github.com/primer/react/commit/8fa988ba613117874657af722ef6de768b0e0eb8) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu under feature flag
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-Container-647gF [data-dividers=true] .prc-FilteredActionList-ActionListItem-RSinr{content-visibility:visible}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
|
|
2
|
+
/*# sourceMappingURL=FilteredActionList-6808e67a.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAiBF,CAXE,gKAEE,gCAAiC,CADjC,uBAEF,CAKA,0GACE,0BACF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDCjCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDuCA,CAGF,mGACE,wGAKF,CAHE,yGCzCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BD+CA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-6808e67a.css","sourcesContent":[".Root {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.Header {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n z-index: 1;\n}\n\n.Container {\n display: flex;\n height: 100%;\n overflow: auto;\n flex-grow: 1;\n\n /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n content-visibility: auto;\n contain-intrinsic-size: auto 32px;\n }\n\n /* When showDividers is enabled, divider ::before pseudo-elements on ActionListSubContent are\n positioned outside the item bounds (top: -7px). content-visibility: auto applies paint containment\n which clips these, so we must disable it for items in lists with dividers. */\n & [data-dividers='true'] .ActionListItem {\n content-visibility: visible;\n }\n}\n\n.ActionList {\n flex-grow: 1;\n}\n\n.ActionListItem:focus {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.FullScreenTextInput {\n @media screen and (--viewportRange-narrow) {\n /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n @supports (-webkit-touch-callout: none) {\n font-size: var(--text-title-size-small);\n }\n }\n}\n\n.SelectAllContainer {\n display: flex;\n align-items: center;\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-16);\n background: var(--bgColor-muted);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n /* -1px hack to offset 1px border-bottom causing uneven alignment */\n /* stylelint-disable-next-line primer/spacing */\n margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n position: absolute;\n top: var(--base-size-4);\n left: calc(-1 * var(--base-size-8));\n width: var(--base-size-4);\n height: calc(100% - var(--base-size-8));\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './FilteredActionList-
|
|
1
|
+
import './FilteredActionList-6808e67a.css';
|
|
2
2
|
|
|
3
3
|
var classes = {"Root":"prc-FilteredActionList-Root-QgIk1","Header":"prc-FilteredActionList-Header-y6ihu","Container":"prc-FilteredActionList-Container-647gF","ActionListItem":"prc-FilteredActionList-ActionListItem-RSinr","ActionList":"prc-FilteredActionList-ActionList-3-Bxb","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-CJvWO","SelectAllContainer":"prc-FilteredActionList-SelectAllContainer-X2ij0","SelectAllCheckbox":"prc-FilteredActionList-SelectAllCheckbox-Axs5l","SelectAllLabel":"prc-FilteredActionList-SelectAllLabel-Bi-PZ"};
|
|
4
4
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));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}.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}@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],.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}}@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}}@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-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.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,var(--color-border-default));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(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:focus-within:has(:focus-visible){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{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);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,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));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,var(--color-accent-fg));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-current=true]){background-color:transparent;color:var(--fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-current=true]) svg{fill:var(--fgColor-disabled,var(--color-primer-fg-disabled));color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}@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;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))}.prc-SegmentedControl-Button-E48xz[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-current=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}.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-6389d0da.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,6DAA8B,CAD9B,kBAQF,CAJE,oFACE,4DAA6B,CAC7B,6DACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,2HACE,qFACF,CAEA,4HACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-6389d0da.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\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\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 @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 /* 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\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\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\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.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 &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:focus-within:has(:focus-visible) {\n background-color: transparent;\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.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 --segmented-control-outer-radius: var(--borderRadius-medium);\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-current='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\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-current='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 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.Button:not([aria-current='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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './SegmentedControl-
|
|
1
|
+
import './SegmentedControl-6389d0da.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"SegmentedControl":"prc-SegmentedControl-SegmentedControl-lqIXp","
|
|
3
|
+
var classes = {"SegmentedControl":"prc-SegmentedControl-SegmentedControl-lqIXp","Text":"prc-SegmentedControl-Text-7S2y2","DropdownContainer":"prc-SegmentedControl-DropdownContainer-ZaPMn","Item":"prc-SegmentedControl-Item-tSCQh","Counter":"prc-SegmentedControl-Counter-GmZOI","Button":"prc-SegmentedControl-Button-E48xz","IconButton":"prc-SegmentedControl-IconButton-tlzDE","Content":"prc-SegmentedControl-Content-1COlk","LeadingIcon":"prc-SegmentedControl-LeadingIcon-74n5s"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
|
|
2
|
-
/*# sourceMappingURL=FilteredActionList-02db90c6.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAUF,CAJE,gKAEE,gCAAiC,CADjC,uBAEF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDC1BA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDgCA,CAGF,mGACE,wGAKF,CAHE,yGClCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDwCA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-02db90c6.css","sourcesContent":[".Root {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.Header {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n z-index: 1;\n}\n\n.Container {\n display: flex;\n height: 100%;\n overflow: auto;\n flex-grow: 1;\n\n /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n content-visibility: auto;\n contain-intrinsic-size: auto 32px;\n }\n}\n\n.ActionList {\n flex-grow: 1;\n}\n\n.ActionListItem:focus {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.FullScreenTextInput {\n @media screen and (--viewportRange-narrow) {\n /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n @supports (-webkit-touch-callout: none) {\n font-size: var(--text-title-size-small);\n }\n }\n}\n\n.SelectAllContainer {\n display: flex;\n align-items: center;\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-16);\n background: var(--bgColor-muted);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n /* -1px hack to offset 1px border-bottom causing uneven alignment */\n /* stylelint-disable-next-line primer/spacing */\n margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n position: absolute;\n top: var(--base-size-4);\n left: calc(-1 * var(--base-size-8));\n width: var(--base-size-4);\n height: calc(100% - var(--base-size-8));\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
.prc-SegmentedControl-SegmentedControl-lqIXp{background-color:var(--segmentedControl-bgColor,var(--controlTrack-bgColor-rest,var(--color-switch-track-bg)));border:var(--borderWidth-thin,.0625rem) solid var(--segmentedControl-borderColor,var(--controlTrack-borderColor-rest,transparent));border-radius:var(--segmentedControl-borderRadius,var(--borderRadius-medium,.375rem));color:var(--segmentedControl-fgColor,currentColor);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true] .prc-SegmentedControl-IconButton-tlzDE{width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true] .prc-SegmentedControl-IconButton-tlzDE{width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true] .prc-SegmentedControl-IconButton-tlzDE{width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true] .prc-SegmentedControl-IconButton-tlzDE{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}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.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}}@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}}@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-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.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,var(--color-border-default));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(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:focus-within:has(:focus-visible){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{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{background-color:transparent;border-color:transparent;border-radius:var(--segmentedControl-borderRadius,var(--borderRadius-medium,.375rem));border-width:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--segmentedControl-fontWeight,var(--base-text-weight-normal,400));height:100%;padding:var(--segmentedControl-trackPadding,4px);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--segmentedControl-iconColor,var(--fgColor-muted,var(--color-fg-muted)));color:var(--segmentedControl-iconColor,var(--fgColor-muted,var(--color-fg-muted)))}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));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,var(--color-accent-fg));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-current=true]){background-color:transparent;color:var(--fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-current=true]) svg{fill:var(--fgColor-disabled,var(--color-primer-fg-disabled));color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}@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:32px}.prc-SegmentedControl-Content-1COlk{align-items:center;border-color:transparent;border-radius:calc(var(--segmentedControl-borderRadius, var(--borderRadius-medium,.375rem)) - var(--segmentedControl-trackPadding, 4px)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmentedControl-innerPadding, 12px) - var(--segmentedControl-trackPadding, 4px));padding-right:calc(var(--segmentedControl-innerPadding, 12px) - var(--segmentedControl-trackPadding, 4px))}.prc-SegmentedControl-Button-E48xz[aria-current=true]{color:var(--segmentedControl-selected-fgColor,inherit);font-weight:var(--segmentedControl-selected-fontWeight,var(--base-text-weight-semibold,600));padding:0}.prc-SegmentedControl-Button-E48xz[aria-current=true] svg{fill:var(--segmentedControl-selected-iconColor,inherit);color:var(--segmentedControl-selected-iconColor,inherit)}.prc-SegmentedControl-Button-E48xz[aria-current=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--segmentedControl-selected-bgColor,var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg)));border-color:var(--segmentedControl-selected-borderColor,var(--controlKnob-borderColor-rest,var(--color-switch-knob-border)));border-radius:var(
|
|
2
|
-
--segmentedControl-selected-borderRadius,var(--segmentedControl-borderRadius,var(--borderRadius-medium,.375rem))
|
|
3
|
-
);padding-left:var(--segmentedControl-innerPadding,12px);padding-right:var(--segmentedControl-innerPadding,12px)}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):hover{color:var(--segmentedControl-fgColor-hover,inherit)}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):hover svg{fill:var(--segmentedControl-iconColor-hover,var(--segmentedControl-iconColor,var(--fgColor-muted,var(--color-fg-muted))));color:var(--segmentedControl-iconColor-hover,var(--segmentedControl-iconColor,var(--fgColor-muted,var(--color-fg-muted))))}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--segmentedControl-bgColor-hover,var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg)))}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--segmentedControl-bgColor-active,var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg)))}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--segmentedControl-selected-fontWeight,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)}
|
|
4
|
-
/*# sourceMappingURL=SegmentedControl-2e8dcc34.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAAA,6CAWE,8GAAmF,CAEnF,kIACwF,CAGxF,qFAA+E,CAR/E,kDAAoD,CARpD,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA+HF,CAhHE,mEACE,YAAa,CACb,UAKF,CAHE,0GACE,UACF,CAGF,oEACE,mBAAoB,CACpB,UACF,CAEA,wCACE,0EACE,YAAa,CACb,UAKF,CAHE,iHACE,UACF,CAGF,2EACE,mBAAoB,CACpB,UACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAKF,CAHE,kHACE,UACF,CAGF,4EACE,mBAAoB,CACpB,UACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAKF,CAHE,+GACE,UACF,CAQF,qLACE,mBAAoB,CACpB,UACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAUE,4BAA6B,CAC7B,wBAAyB,CAGzB,qFAA+E,CAF/E,cAAe,CAJf,aAAc,CACd,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,iFAA+E,CAL/E,WAAY,CAEZ,gDAAkD,CAHlD,UAqEF,CAtDE,uCAEE,iFAA6D,CAE7D,kFACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,6DAA8B,CAD9B,kBAQF,CAJE,oFACE,4DAA6B,CAC7B,6DACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCAEE,UACF,CAEA,oCAoBE,kBAAmB,CAbnB,wBAAyB,CASzB,0IAEC,CAVD,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAmBZ,sBAAuB,CAhBvB,yGAA0G,CAD1G,0GAkBF,CAEA,sDAIE,sDAAwD,CAFxD,4FAA0F,CAD1F,SA4BF,CAvBE,0DAEE,uDAAyD,CAEzD,wDACF,CAEA,0FAME,qHAA2F,CAE3F,6HAA+F,CAE/F;;KAGC,CATD,sDAAwD,CAFxD,uDAaF,CAIA,uFAEE,mDAQF,CANE,2FAEE,yHAAsG,CAEtG,0HACF,CAGF,2HAEE,2HACF,CAEA,4HAEE,8HACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,4FAA0F,CAF1F,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-2e8dcc34.css","sourcesContent":[".SegmentedControl {\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 /* stylelint-disable-next-line primer/colors */\n color: var(--segmentedControl-fgColor, currentColor);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--segmentedControl-bgColor, var(--controlTrack-bgColor-rest));\n /* stylelint-disable primer/colors */\n border: var(--borderWidth-thin) solid\n var(--segmentedControl-borderColor, var(--controlTrack-borderColor-rest, transparent));\n /* stylelint-enable primer/colors */\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmentedControl-borderRadius, var(--borderRadius-medium));\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n & .IconButton {\n width: 100%;\n }\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n & .IconButton {\n width: 100%;\n }\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n & .IconButton {\n width: 100%;\n }\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n & .IconButton {\n width: 100%;\n }\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\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\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\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\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.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 &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:focus-within:has(:focus-visible) {\n background-color: transparent;\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.Button {\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmentedControl-trackPadding, 4px);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--segmentedControl-fontWeight, var(--base-text-weight-normal));\n color: inherit;\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(--segmentedControl-borderRadius, var(--borderRadius-medium));\n\n & svg {\n /* stylelint-disable-next-line primer/colors */\n fill: var(--segmentedControl-iconColor, var(--fgColor-muted));\n /* stylelint-disable-next-line primer/colors */\n color: var(--segmentedControl-iconColor, 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-current='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 /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n width: 32px;\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable primer/spacing */\n padding-right: calc(var(--segmentedControl-innerPadding, 12px) - var(--segmentedControl-trackPadding, 4px));\n padding-left: calc(var(--segmentedControl-innerPadding, 12px) - var(--segmentedControl-trackPadding, 4px));\n /* stylelint-enable primer/spacing */\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\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 primer/borders */\n border-radius: calc(\n var(--segmentedControl-borderRadius, var(--borderRadius-medium)) - var(--segmentedControl-trackPadding, 4px) / 2\n );\n /* stylelint-enable primer/borders */\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-current='true'] {\n padding: 0;\n font-weight: var(--segmentedControl-selected-fontWeight, var(--base-text-weight-semibold));\n /* stylelint-disable-next-line primer/colors */\n color: var(--segmentedControl-selected-fgColor, inherit);\n\n & svg {\n /* stylelint-disable-next-line primer/colors */\n fill: var(--segmentedControl-selected-iconColor, inherit);\n /* stylelint-disable-next-line primer/colors */\n color: var(--segmentedControl-selected-iconColor, inherit);\n }\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmentedControl-innerPadding, 12px);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmentedControl-innerPadding, 12px);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--segmentedControl-selected-bgColor, var(--controlKnob-bgColor-rest));\n /* stylelint-disable-next-line primer/colors */\n border-color: var(--segmentedControl-selected-borderColor, var(--controlKnob-borderColor-rest));\n /* stylelint-disable primer/borders */\n border-radius: var(\n --segmentedControl-selected-borderRadius,\n var(--segmentedControl-borderRadius, var(--borderRadius-medium))\n );\n /* stylelint-enable primer/borders */\n }\n}\n\n.Button:not([aria-current='true'], [aria-disabled='true']) {\n &:hover {\n /* stylelint-disable-next-line primer/colors */\n color: var(--segmentedControl-fgColor-hover, inherit);\n\n & svg {\n /* stylelint-disable-next-line primer/colors */\n fill: var(--segmentedControl-iconColor-hover, var(--segmentedControl-iconColor, var(--fgColor-muted)));\n /* stylelint-disable-next-line primer/colors */\n color: var(--segmentedControl-iconColor-hover, var(--segmentedControl-iconColor, var(--fgColor-muted)));\n }\n }\n\n &:hover .Content {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--segmentedControl-bgColor-hover, var(--controlTrack-bgColor-hover));\n }\n\n &:active .Content {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--segmentedControl-bgColor-active, var(--controlTrack-bgColor-active));\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--segmentedControl-selected-fontWeight, 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"]}
|