@primer/react 38.3.0-rc.12ec8986e → 38.3.0-rc.159403365

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.

Potentially problematic release.

This version of @primer/react might be problematic. Click here for more details.

Files changed (69) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/ActionBar/ActionBar-a41224b2.css +2 -0
  3. package/dist/ActionBar/ActionBar-a41224b2.css.map +1 -0
  4. package/dist/ActionBar/ActionBar.module.css.js +2 -2
  5. package/dist/ActionList/ActionList-370a46b8.css +2 -0
  6. package/dist/ActionList/ActionList-370a46b8.css.map +1 -0
  7. package/dist/ActionList/ActionList.module.css.js +2 -2
  8. package/dist/Banner/Banner-c1744c4b.css +1 -1
  9. package/dist/Banner/Banner-c1744c4b.css.map +1 -1
  10. package/dist/Banner/Banner.d.ts +10 -0
  11. package/dist/Banner/Banner.d.ts.map +1 -1
  12. package/dist/Banner/Banner.js +4 -2
  13. package/dist/Banner/index.d.ts +1 -0
  14. package/dist/Banner/index.d.ts.map +1 -1
  15. package/dist/Blankslate/Blankslate-2be5efdc.css +1 -1
  16. package/dist/Blankslate/Blankslate-2be5efdc.css.map +1 -1
  17. package/dist/Button/ButtonBase-781fba8b.css +1 -1
  18. package/dist/Button/ButtonBase-781fba8b.css.map +1 -1
  19. package/dist/FilteredActionList/FilteredActionList.d.ts +19 -1
  20. package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
  21. package/dist/FilteredActionList/FilteredActionList.js +9 -5
  22. package/dist/KeybindingHint/key-names.js +1 -1
  23. package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css +2 -0
  24. package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css.map +1 -0
  25. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  26. package/dist/SegmentedControl/SegmentedControl.js +115 -52
  27. package/dist/SegmentedControl/SegmentedControl.module.css.js +2 -2
  28. package/dist/SkeletonText/SkeletonText-5cf908c1.css +1 -1
  29. package/dist/SkeletonText/SkeletonText-5cf908c1.css.map +1 -1
  30. package/dist/Text/Text-ca7603b7.css +1 -1
  31. package/dist/Text/Text-ca7603b7.css.map +1 -1
  32. package/dist/ThemeProvider.js +1 -1
  33. package/dist/Tooltip/Tooltip-fffa9948.css +1 -1
  34. package/dist/Tooltip/Tooltip-fffa9948.css.map +1 -1
  35. package/dist/TooltipV2/Tooltip-5a80d7b2.css +1 -1
  36. package/dist/TooltipV2/Tooltip-5a80d7b2.css.map +1 -1
  37. package/dist/TopicTag/TopicTag-955c0fbf.css +2 -0
  38. package/dist/TopicTag/TopicTag-955c0fbf.css.map +1 -0
  39. package/dist/TopicTag/TopicTag.d.ts +15 -0
  40. package/dist/TopicTag/TopicTag.d.ts.map +1 -0
  41. package/dist/TopicTag/TopicTag.js +58 -0
  42. package/dist/TopicTag/TopicTag.module.css.js +5 -0
  43. package/dist/TopicTag/TopicTagGroup-785f4d65.css +2 -0
  44. package/dist/TopicTag/TopicTagGroup-785f4d65.css.map +1 -0
  45. package/dist/TopicTag/TopicTagGroup.d.ts +6 -0
  46. package/dist/TopicTag/TopicTagGroup.d.ts.map +1 -0
  47. package/dist/TopicTag/TopicTagGroup.js +51 -0
  48. package/dist/TopicTag/TopicTagGroup.module.css.js +5 -0
  49. package/dist/TopicTag/index.d.ts +10 -0
  50. package/dist/TopicTag/index.d.ts.map +1 -0
  51. package/dist/TopicTag/index.js +8 -0
  52. package/dist/VisuallyHidden/VisuallyHidden.d.ts +1 -1
  53. package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css +1 -1
  54. package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css.map +1 -1
  55. package/dist/experimental/index.d.ts +2 -0
  56. package/dist/experimental/index.d.ts.map +1 -1
  57. package/dist/experimental/index.js +1 -0
  58. package/dist/internal/components/{UnderlineTabbedInterface-addc90dd.css → UnderlineTabbedInterface-20c3ba3d.css} +1 -1
  59. package/dist/internal/components/UnderlineTabbedInterface-20c3ba3d.css.map +1 -0
  60. package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
  61. package/generated/components.json +80 -2
  62. package/package.json +2 -1
  63. package/dist/ActionBar/ActionBar-8ed12fe7.css +0 -2
  64. package/dist/ActionBar/ActionBar-8ed12fe7.css.map +0 -1
  65. package/dist/ActionList/ActionList-46e9c2db.css +0 -2
  66. package/dist/ActionList/ActionList-46e9c2db.css.map +0 -1
  67. package/dist/SegmentedControl/SegmentedControl-7f79ab74.css +0 -2
  68. package/dist/SegmentedControl/SegmentedControl-7f79ab74.css.map +0 -1
  69. package/dist/internal/components/UnderlineTabbedInterface-addc90dd.css.map +0 -1
package/dist/Tooltip/Tooltip-fffa9948.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Tooltip/Tooltip.module.css"],"names":[],"mappings":"AAEA,2BAEE,oBAAqB,CADrB,iBAEF,CAEA,iCAGE,YAAa,CAGb,+OAA2G,CAD3G,kBAAqB,CAJrB,iBAAkB,CAClB,eAAgB,CAKhB,2CAA4C,CAC5C,kFAAwD,CAKxD,qBAAsB,CAJtB,iBAAkB,CAClB,4BAAqB,CAArB,oBAAqB,CACrB,gBAAiB,CACjB,mBAAoB,CAEpB,oBAAqB,CAIrB,4FAA2D,CAC3D,gDAAyC,CAFzC,wBAAyB,CAGzB,SAAU,CAJV,mBAAoB,CADpB,eAMF,CAGA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,oKAUE,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,+CAA8B,CAG9B,iCAAkC,CALlC,oBAAqB,CACrB,4BAAqB,CAArB,oBAMF,CAEA,wMAIE,kBACF,CAEA,gNAIE,kBACF,CAGA,8GAME,cAAe,CAFf,SAAU,CADV,QAIF,CAEA,qCAEE,QAAS,CACT,6CAA2C,CAF3C,UAGF,CAEA,qCACE,8CACF,CAGA,8GAIE,WAAY,CAEZ,iBAAkB,CAHlB,SAIF,CAEA,qCAEE,QAAS,CACT,6CAA2C,CAF3C,UAGF,CAEA,qCACE,8CACF,CAGA,wEAEE,yBACF,CAGA,oCAIE,gBAAiB,CAHjB,UAKF,CAGA,wEAPE,UAAW,CAGX,yBAUF,CANA,oCAEE,SAAU,CAEV,eAEF,CAEA,4CAEE,eAAgB,CADhB,iBAAkB,CAElB,oBAAqB,CAErB,wBAAyB,CADzB,oBAEF,CAEA,kJAGE,QAAS,CADT,UAAW,CAEX,0BACF,CAEA,kJAEE,UACF,CAEA,6CAEE,cAAe,CADf,OAEF,CAEA,4CACE,MAAO,CACP,aACF","file":"Tooltip-fffa9948.css","sourcesContent":["/* stylelint-disable primer/typography, primer/borders, selector-class-pattern */\n\n.Tooltip {\n position: relative;\n display: inline-block;\n}\n\n.Tooltip::after {\n position: absolute;\n z-index: 1000000;\n display: none;\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.5em 0.75em;\n font: normal normal var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-system);\n -webkit-font-smoothing: subpixel-antialiased;\n color: var(--tooltip-fgColor, var(--fgColor-onEmphasis));\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: break-word;\n white-space: pre;\n pointer-events: none;\n content: attr(aria-label);\n background: var(--tooltip-bgColor, var(--bgColor-emphasis));\n border-radius: var(--borderRadius-medium);\n opacity: 0;\n}\n\n/* delay animation for tooltip */\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Tooltip:hover::after,\n.Tooltip:active::after,\n.Tooltip:focus::after,\n.Tooltip:focus-within::after {\n display: inline-block;\n text-decoration: none;\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n}\n\n.Tooltip--noDelay:hover::after,\n.Tooltip--noDelay:active::after,\n.Tooltip--noDelay:focus::after,\n.Tooltip--noDelay:focus-within::after {\n animation-delay: 0s;\n}\n\n.Tooltip--multiline:hover::after,\n.Tooltip--multiline:active::after,\n.Tooltip--multiline:focus::after,\n.Tooltip--multiline:focus-within::after {\n display: table-cell;\n}\n\n/* Tooltipped south */\n.Tooltip--s::after,\n.Tooltip--se::after,\n.Tooltip--sw::after {\n top: 100%;\n right: 50%;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 6px;\n}\n\n.Tooltip--se::after {\n right: auto;\n left: 50%;\n margin-left: calc(-1 * var(--base-size-16));\n}\n\n.Tooltip--sw::after {\n margin-right: calc(-1 * var(--base-size-16));\n}\n\n/* Tooltips above the object */\n.Tooltip--n::after,\n.Tooltip--ne::after,\n.Tooltip--nw::after {\n right: 50%;\n bottom: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: 6px;\n}\n\n.Tooltip--ne::after {\n right: auto;\n left: 50%;\n margin-left: calc(-1 * var(--base-size-16));\n}\n\n.Tooltip--nw::after {\n margin-right: calc(-1 * var(--base-size-16));\n}\n\n/* Move the tooltip body to the center of the object. */\n.Tooltip--s::after,\n.Tooltip--n::after {\n transform: translateX(50%);\n}\n\n/* Tooltipped to the left */\n.Tooltip--w::after {\n right: 100%;\n bottom: 50%;\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 6px;\n transform: translateY(50%);\n}\n\n/* tooltipped to the right */\n.Tooltip--e::after {\n bottom: 50%;\n left: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: 6px;\n transform: translateY(50%);\n}\n\n.Tooltip--multiline::after {\n width: max-content;\n max-width: 250px;\n word-wrap: break-word;\n white-space: pre-line;\n border-collapse: separate;\n}\n\n.Tooltip--multiline.Tooltip--s::after,\n.Tooltip--multiline.Tooltip--n::after {\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.Tooltip--multiline.Tooltip--w::after,\n.Tooltip--multiline.Tooltip--e::after {\n right: 100%;\n}\n\n.Tooltip--alignRight::after {\n right: 0;\n margin-right: 0;\n}\n\n.Tooltip--alignLeft::after {\n left: 0;\n margin-left: 0;\n}\n"]}
1
+ {"version":3,"sources":["../src/Tooltip/Tooltip.module.css"],"names":[],"mappings":"AAEA,2BAEE,oBAAqB,CADrB,iBAEF,CAEA,iCAGE,YAAa,CAGb,gPAA2G,CAD3G,kBAAqB,CAJrB,iBAAkB,CAClB,eAAgB,CAKhB,2CAA4C,CAC5C,kFAAwD,CAKxD,qBAAsB,CAJtB,iBAAkB,CAClB,4BAAqB,CAArB,oBAAqB,CACrB,gBAAiB,CACjB,mBAAoB,CAEpB,oBAAqB,CAIrB,4FAA2D,CAC3D,gDAAyC,CAFzC,wBAAyB,CAGzB,SAAU,CAJV,mBAAoB,CADpB,eAMF,CAGA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,oKAUE,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,+CAA8B,CAG9B,iCAAkC,CALlC,oBAAqB,CACrB,4BAAqB,CAArB,oBAMF,CAEA,wMAIE,kBACF,CAEA,gNAIE,kBACF,CAGA,8GAME,cAAe,CAFf,SAAU,CADV,QAIF,CAEA,qCAEE,QAAS,CACT,6CAA2C,CAF3C,UAGF,CAEA,qCACE,8CACF,CAGA,8GAIE,WAAY,CAEZ,iBAAkB,CAHlB,SAIF,CAEA,qCAEE,QAAS,CACT,6CAA2C,CAF3C,UAGF,CAEA,qCACE,8CACF,CAGA,wEAEE,yBACF,CAGA,oCAIE,gBAAiB,CAHjB,UAKF,CAGA,wEAPE,UAAW,CAGX,yBAUF,CANA,oCAEE,SAAU,CAEV,eAEF,CAEA,4CAEE,eAAgB,CADhB,iBAAkB,CAElB,oBAAqB,CAErB,wBAAyB,CADzB,oBAEF,CAEA,kJAGE,QAAS,CADT,UAAW,CAEX,0BACF,CAEA,kJAEE,UACF,CAEA,6CAEE,cAAe,CADf,OAEF,CAEA,4CACE,MAAO,CACP,aACF","file":"Tooltip-fffa9948.css","sourcesContent":["/* stylelint-disable primer/typography, primer/borders, selector-class-pattern */\n\n.Tooltip {\n position: relative;\n display: inline-block;\n}\n\n.Tooltip::after {\n position: absolute;\n z-index: 1000000;\n display: none;\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.5em 0.75em;\n font: normal normal var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-system);\n -webkit-font-smoothing: subpixel-antialiased;\n color: var(--tooltip-fgColor, var(--fgColor-onEmphasis));\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: break-word;\n white-space: pre;\n pointer-events: none;\n content: attr(aria-label);\n background: var(--tooltip-bgColor, var(--bgColor-emphasis));\n border-radius: var(--borderRadius-medium);\n opacity: 0;\n}\n\n/* delay animation for tooltip */\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Tooltip:hover::after,\n.Tooltip:active::after,\n.Tooltip:focus::after,\n.Tooltip:focus-within::after {\n display: inline-block;\n text-decoration: none;\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n}\n\n.Tooltip--noDelay:hover::after,\n.Tooltip--noDelay:active::after,\n.Tooltip--noDelay:focus::after,\n.Tooltip--noDelay:focus-within::after {\n animation-delay: 0s;\n}\n\n.Tooltip--multiline:hover::after,\n.Tooltip--multiline:active::after,\n.Tooltip--multiline:focus::after,\n.Tooltip--multiline:focus-within::after {\n display: table-cell;\n}\n\n/* Tooltipped south */\n.Tooltip--s::after,\n.Tooltip--se::after,\n.Tooltip--sw::after {\n top: 100%;\n right: 50%;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 6px;\n}\n\n.Tooltip--se::after {\n right: auto;\n left: 50%;\n margin-left: calc(-1 * var(--base-size-16));\n}\n\n.Tooltip--sw::after {\n margin-right: calc(-1 * var(--base-size-16));\n}\n\n/* Tooltips above the object */\n.Tooltip--n::after,\n.Tooltip--ne::after,\n.Tooltip--nw::after {\n right: 50%;\n bottom: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: 6px;\n}\n\n.Tooltip--ne::after {\n right: auto;\n left: 50%;\n margin-left: calc(-1 * var(--base-size-16));\n}\n\n.Tooltip--nw::after {\n margin-right: calc(-1 * var(--base-size-16));\n}\n\n/* Move the tooltip body to the center of the object. */\n.Tooltip--s::after,\n.Tooltip--n::after {\n transform: translateX(50%);\n}\n\n/* Tooltipped to the left */\n.Tooltip--w::after {\n right: 100%;\n bottom: 50%;\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 6px;\n transform: translateY(50%);\n}\n\n/* tooltipped to the right */\n.Tooltip--e::after {\n bottom: 50%;\n left: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: 6px;\n transform: translateY(50%);\n}\n\n.Tooltip--multiline::after {\n width: max-content;\n max-width: 250px;\n word-wrap: break-word;\n white-space: pre-line;\n border-collapse: separate;\n}\n\n.Tooltip--multiline.Tooltip--s::after,\n.Tooltip--multiline.Tooltip--n::after {\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.Tooltip--multiline.Tooltip--w::after,\n.Tooltip--multiline.Tooltip--e::after {\n right: 100%;\n}\n\n.Tooltip--alignRight::after {\n right: 0;\n margin-right: 0;\n}\n\n.Tooltip--alignLeft::after {\n left: 0;\n margin-left: 0;\n}\n"]}
package/dist/TooltipV2/Tooltip-5a80d7b2.css CHANGED
@@ -1,2 +1,2 @@
1
- @keyframes prc-TooltipV2-tooltip-appear-hLf77{0%{opacity:0}to{opacity:1}}.prc-TooltipV2-Tooltip-cYMVY{display:none}.prc-TooltipV2-Tooltip-cYMVY[popover]{margin:auto;max-width:250px;overflow:visible;padding:var(--overlay-paddingBlock-condensed,.25rem) var(--overlay-padding-condensed,.5rem);position:absolute;width:max-content;clip:auto;color:var(--tooltip-fgColor,#fff);font:var(--text-body-shorthand-small,400 .75rem/1.6666 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");text-align:center;word-wrap:break-word;background:var(--tooltip-bgColor,#25292e);border:0;border-radius:var(--borderRadius-medium,.375rem);white-space:normal;-webkit-font-smoothing:subpixel-antialiased;inset:auto;text-wrap:balance}.prc-TooltipV2-Tooltip-cYMVY[popover]:popover-open{display:block}.prc-TooltipV2-Tooltip-cYMVY[popover].\\:popover-open{display:block}@media (forced-colors:active){.prc-TooltipV2-Tooltip-cYMVY{outline:1px solid transparent}}.prc-TooltipV2-Tooltip-cYMVY:after{content:"";display:block;height:var(--overlay-offset,.25rem);left:0;position:absolute;right:0}.prc-TooltipV2-Tooltip-cYMVY[data-direction=n]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=ne]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=nw]:after{top:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=s]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=se]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=sw]:after{bottom:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=w]:after{left:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=e]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=w]:after{bottom:0;content:"";display:block;height:100%;position:absolute;width:8px}.prc-TooltipV2-Tooltip-cYMVY[data-direction=e]:after{margin-left:-8px;right:100%}@media screen and (prefers-reduced-motion:no-preference){.prc-TooltipV2-Tooltip-cYMVY:popover-open,.prc-TooltipV2-Tooltip-cYMVY:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-hLf77;animation-timing-function:ease-in}.prc-TooltipV2-Tooltip-cYMVY.\\:popover-open,.prc-TooltipV2-Tooltip-cYMVY.\\:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-hLf77;animation-timing-function:ease-in}}.prc-TooltipV2-KeybindingHintContainer-iabqv.prc-TooltipV2-HasTextBefore-cCzYC{margin-left:var(--base-size-6,.375rem)}
1
+ @keyframes prc-TooltipV2-tooltip-appear-hLf77{0%{opacity:0}to{opacity:1}}.prc-TooltipV2-Tooltip-cYMVY{display:none}.prc-TooltipV2-Tooltip-cYMVY[popover]{margin:auto;max-width:250px;overflow:visible;padding:var(--overlay-paddingBlock-condensed,.25rem) var(--overlay-padding-condensed,.5rem);position:absolute;width:max-content;clip:auto;color:var(--tooltip-fgColor,#fff);font:var(--text-body-shorthand-small,400 .75rem/1.66667 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");text-align:center;word-wrap:break-word;background:var(--tooltip-bgColor,#25292e);border:0;border-radius:var(--borderRadius-medium,.375rem);white-space:normal;-webkit-font-smoothing:subpixel-antialiased;inset:auto;text-wrap:balance}.prc-TooltipV2-Tooltip-cYMVY[popover]:popover-open{display:block}.prc-TooltipV2-Tooltip-cYMVY[popover].\\:popover-open{display:block}@media (forced-colors:active){.prc-TooltipV2-Tooltip-cYMVY{outline:1px solid transparent}}.prc-TooltipV2-Tooltip-cYMVY:after{content:"";display:block;height:var(--overlay-offset,.25rem);left:0;position:absolute;right:0}.prc-TooltipV2-Tooltip-cYMVY[data-direction=n]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=ne]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=nw]:after{top:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=s]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=se]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=sw]:after{bottom:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=w]:after{left:100%}.prc-TooltipV2-Tooltip-cYMVY[data-direction=e]:after,.prc-TooltipV2-Tooltip-cYMVY[data-direction=w]:after{bottom:0;content:"";display:block;height:100%;position:absolute;width:8px}.prc-TooltipV2-Tooltip-cYMVY[data-direction=e]:after{margin-left:-8px;right:100%}@media screen and (prefers-reduced-motion:no-preference){.prc-TooltipV2-Tooltip-cYMVY:popover-open,.prc-TooltipV2-Tooltip-cYMVY:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-hLf77;animation-timing-function:ease-in}.prc-TooltipV2-Tooltip-cYMVY.\\:popover-open,.prc-TooltipV2-Tooltip-cYMVY.\\:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-hLf77;animation-timing-function:ease-in}}.prc-TooltipV2-KeybindingHintContainer-iabqv.prc-TooltipV2-HasTextBefore-cCzYC{margin-left:var(--base-size-6,.375rem)}
2
2
  /*# sourceMappingURL=Tooltip-5a80d7b2.css.map */
package/dist/TooltipV2/Tooltip-5a80d7b2.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/TooltipV2/Tooltip.module.css"],"names":[],"mappings":"AACA,8CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,6BAEE,YA6GF,CA3GE,sCAME,WAAY,CAHZ,eAAgB,CAMhB,gBAAiB,CAJjB,2FAA+E,CAJ/E,iBAAkB,CAClB,iBAAkB,CAQlB,SAAU,CAEV,iCAA6B,CAD7B,+KAAsC,CAEtC,iBAAkB,CAClB,oBAAqB,CAErB,yCAAkC,CAClC,QAAS,CACT,gDAAyC,CAHzC,kBAAmB,CAInB,2CAA4C,CAC5C,UAAW,CACX,iBACF,CAGA,mDACE,aACF,CAIA,sDACE,aACF,CAEA,8BAvCF,6BAwCI,6BAuEJ,CAtEE,CAGA,mCAME,UAAW,CAFX,aAAc,CACd,mCAA6B,CAF7B,MAAO,CAFP,iBAAkB,CAClB,OAKF,CAGA,iKAGE,QACF,CAEA,iKAGE,WACF,CAEA,qDAGE,SAKF,CAGA,0GATE,QAAS,CAKT,UAAW,CAHX,aAAc,CAEd,WAAY,CALZ,iBAAkB,CAIlB,SAgBF,CAVA,qDAQE,gBAAiB,CANjB,UAQF,CAGA,yDAEE,2FAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CAGA,iGAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CACF,CAGF,+EACE,sCACF","file":"Tooltip-5a80d7b2.css","sourcesContent":["/* Animation definition */\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Tooltip {\n /* Overriding the default popover styles */\n display: none;\n\n &[popover] {\n position: absolute;\n width: max-content;\n max-width: 250px;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);\n margin: auto;\n\n /* for scrollbar */\n overflow: visible;\n clip: auto;\n font: var(--text-body-shorthand-small);\n color: var(--tooltip-fgColor);\n text-align: center;\n word-wrap: break-word;\n white-space: normal;\n background: var(--tooltip-bgColor);\n border: 0;\n border-radius: var(--borderRadius-medium);\n -webkit-font-smoothing: subpixel-antialiased;\n inset: auto;\n text-wrap: balance;\n }\n\n /* class name in chrome is :popover-open */\n &[popover]:popover-open {\n display: block;\n }\n\n /* class name in firefox and safari is \\:popover-open */\n /* stylelint-disable-next-line selector-class-pattern */\n &[popover]:global(.\\\\:popover-open) {\n display: block;\n }\n\n @media (forced-colors: active) {\n outline: 1px solid transparent;\n }\n\n /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n &::after {\n position: absolute;\n right: 0;\n left: 0;\n display: block;\n height: var(--overlay-offset);\n content: '';\n }\n\n /* South, East, Southeast, Southwest after */\n &[data-direction='n']::after,\n &[data-direction='ne']::after,\n &[data-direction='nw']::after {\n top: 100%;\n }\n\n &[data-direction='s']::after,\n &[data-direction='se']::after,\n &[data-direction='sw']::after {\n bottom: 100%;\n }\n\n &[data-direction='w']::after {\n position: absolute;\n bottom: 0;\n left: 100%;\n display: block;\n width: 8px;\n height: 100%;\n content: '';\n }\n\n /* East before and after */\n &[data-direction='e']::after {\n position: absolute;\n right: 100%;\n bottom: 0;\n display: block;\n width: 8px;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -8px;\n content: '';\n }\n\n /* Only show animations if users don't have a preference for reduced motion */\n @media screen and (prefers-reduced-motion: no-preference) {\n /* Animation styles */\n &:popover-open,\n &:popover-open::before {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n\n /* Animation styles */\n &:global(.\\\\:popover-open) /* stylelint-disable-line selector-class-pattern */,\n &:global(.\\\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n }\n}\n\n.KeybindingHintContainer.HasTextBefore {\n margin-left: var(--base-size-6);\n}\n"]}
1
+ {"version":3,"sources":["../src/TooltipV2/Tooltip.module.css"],"names":[],"mappings":"AACA,8CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,6BAEE,YA6GF,CA3GE,sCAME,WAAY,CAHZ,eAAgB,CAMhB,gBAAiB,CAJjB,2FAA+E,CAJ/E,iBAAkB,CAClB,iBAAkB,CAQlB,SAAU,CAEV,iCAA6B,CAD7B,gLAAsC,CAEtC,iBAAkB,CAClB,oBAAqB,CAErB,yCAAkC,CAClC,QAAS,CACT,gDAAyC,CAHzC,kBAAmB,CAInB,2CAA4C,CAC5C,UAAW,CACX,iBACF,CAGA,mDACE,aACF,CAIA,sDACE,aACF,CAEA,8BAvCF,6BAwCI,6BAuEJ,CAtEE,CAGA,mCAME,UAAW,CAFX,aAAc,CACd,mCAA6B,CAF7B,MAAO,CAFP,iBAAkB,CAClB,OAKF,CAGA,iKAGE,QACF,CAEA,iKAGE,WACF,CAEA,qDAGE,SAKF,CAGA,0GATE,QAAS,CAKT,UAAW,CAHX,aAAc,CAEd,WAAY,CALZ,iBAAkB,CAIlB,SAgBF,CAVA,qDAQE,gBAAiB,CANjB,UAQF,CAGA,yDAEE,2FAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CAGA,iGAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CACF,CAGF,+EACE,sCACF","file":"Tooltip-5a80d7b2.css","sourcesContent":["/* Animation definition */\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Tooltip {\n /* Overriding the default popover styles */\n display: none;\n\n &[popover] {\n position: absolute;\n width: max-content;\n max-width: 250px;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);\n margin: auto;\n\n /* for scrollbar */\n overflow: visible;\n clip: auto;\n font: var(--text-body-shorthand-small);\n color: var(--tooltip-fgColor);\n text-align: center;\n word-wrap: break-word;\n white-space: normal;\n background: var(--tooltip-bgColor);\n border: 0;\n border-radius: var(--borderRadius-medium);\n -webkit-font-smoothing: subpixel-antialiased;\n inset: auto;\n text-wrap: balance;\n }\n\n /* class name in chrome is :popover-open */\n &[popover]:popover-open {\n display: block;\n }\n\n /* class name in firefox and safari is \\:popover-open */\n /* stylelint-disable-next-line selector-class-pattern */\n &[popover]:global(.\\\\:popover-open) {\n display: block;\n }\n\n @media (forced-colors: active) {\n outline: 1px solid transparent;\n }\n\n /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n &::after {\n position: absolute;\n right: 0;\n left: 0;\n display: block;\n height: var(--overlay-offset);\n content: '';\n }\n\n /* South, East, Southeast, Southwest after */\n &[data-direction='n']::after,\n &[data-direction='ne']::after,\n &[data-direction='nw']::after {\n top: 100%;\n }\n\n &[data-direction='s']::after,\n &[data-direction='se']::after,\n &[data-direction='sw']::after {\n bottom: 100%;\n }\n\n &[data-direction='w']::after {\n position: absolute;\n bottom: 0;\n left: 100%;\n display: block;\n width: 8px;\n height: 100%;\n content: '';\n }\n\n /* East before and after */\n &[data-direction='e']::after {\n position: absolute;\n right: 100%;\n bottom: 0;\n display: block;\n width: 8px;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -8px;\n content: '';\n }\n\n /* Only show animations if users don't have a preference for reduced motion */\n @media screen and (prefers-reduced-motion: no-preference) {\n /* Animation styles */\n &:popover-open,\n &:popover-open::before {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n\n /* Animation styles */\n &:global(.\\\\:popover-open) /* stylelint-disable-line selector-class-pattern */,\n &:global(.\\\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n }\n}\n\n.KeybindingHintContainer.HasTextBefore {\n margin-left: var(--base-size-6);\n}\n"]}
package/dist/TopicTag/TopicTag-955c0fbf.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-TopicTag-TopicTag-FOkf8:where(a){-webkit-text-decoration:none;text-decoration:none}.prc-TopicTag-TopicTag-FOkf8:where(button){align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.prc-TopicTag-TopicTag-FOkf8:where(button)::-moz-focus-inner{border:0}.prc-TopicTag-TopicTag-FOkf8{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border:var(--borderWidth-thin,.0625rem) solid var(--topicTag-borderColor,transparent);border-radius:var(--borderRadius-full,624.9375rem);color:var(--fgColor-accent,var(--color-accent-fg));display:inline-flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);padding:var(--base-size-2,.125rem) var(--base-size-12,.75rem);white-space:nowrap}.prc-TopicTag-TopicTag-FOkf8:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-TopicTag-TopicTag-FOkf8:where(a,button){cursor:pointer;-webkit-user-select:none;user-select:none}
2
+ /*# sourceMappingURL=TopicTag-955c0fbf.css.map */
package/dist/TopicTag/TopicTag-955c0fbf.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/TopicTag/TopicTag.module.css","../../postcss-preset-primer/src/mixins/buttonReset.css"],"names":[],"mappings":"AACA,sCACE,4BAAqB,CAArB,oBACF,CAGA,2CCKE,kBAAmB,CANnB,eAAgB,CAChB,eAAgB,CAFhB,QAAS,CAMT,aAAc,CAHd,cAAe,CALf,mBAAoB,CAOpB,YAAa,CARb,QAAS,CAET,SAAU,CAKV,gBDAF,CCKE,6DACE,QACF,CDLF,6BACE,uEAA6C,CAO7C,qFAA8E,CAF9E,kDAAuC,CAJvC,kDAA4B,CAO5B,mBAAoB,CANpB,4CAAsC,CACtC,gDAA6C,CAC7C,qDAA8C,CAE9C,6DAA+C,CAG/C,kBAWF,CATE,mCACE,4EAAgD,CAChD,2DACF,CAEA,6CACE,cAAe,CACf,wBAAiB,CAAjB,gBACF","file":"TopicTag-955c0fbf.css","sourcesContent":["/* Add a reset for when TopicTag is an <a> element since our link styles apply an underline text-decoration by default */\n.TopicTag:where(a) {\n text-decoration: none;\n}\n\n/* Add a reset for when TopicTag is a <button> element */\n.TopicTag:where(button) {\n @mixin buttonReset;\n}\n\n.TopicTag {\n background-color: var(--bgColor-accent-muted);\n color: var(--fgColor-accent);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n border-radius: var(--borderRadius-full);\n padding: var(--base-size-2) var(--base-size-12);\n border: var(--borderWidth-thin) solid var(--topicTag-borderColor, transparent);\n display: inline-flex;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--bgColor-accent-emphasis);\n color: var(--fgColor-onEmphasis);\n }\n\n &:where(a, button) {\n cursor: pointer;\n user-select: none;\n }\n}\n","@define-mixin buttonReset {\n margin: 0;\n display: inline-flex;\n padding: 0;\n border: 0;\n appearance: none;\n background: none;\n cursor: pointer;\n text-align: start;\n font: inherit;\n color: inherit;\n align-items: center;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n"]}
package/dist/TopicTag/TopicTag.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { ElementType } from 'react';
2
+ type TopicTagProps<As extends ElementType> = {
3
+ /**
4
+ * The HTML element or React component to render as the root element
5
+ */
6
+ as?: As;
7
+ /**
8
+ * Provide a class name for styling on the outermost element
9
+ */
10
+ className?: string;
11
+ } & Omit<React.ComponentPropsWithoutRef<As>, 'as' | 'className'>;
12
+ declare function TopicTag<As extends ElementType = 'a'>({ as, children, className, ...rest }: TopicTagProps<As>): import("react").JSX.Element;
13
+ export { TopicTag };
14
+ export type { TopicTagProps };
15
+ //# sourceMappingURL=TopicTag.d.ts.map
package/dist/TopicTag/TopicTag.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TopicTag.d.ts","sourceRoot":"","sources":["../../src/TopicTag/TopicTag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AAGtC,KAAK,aAAa,CAAC,EAAE,SAAS,WAAW,IAAI;IAC3C;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IAEP;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC,CAAA;AAEhE,iBAAS,QAAQ,CAAC,EAAE,SAAS,WAAW,GAAG,GAAG,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,aAAa,CAAC,EAAE,CAAC,+BAOpG;AAED,OAAO,EAAC,QAAQ,EAAC,CAAA;AACjB,YAAY,EAAC,aAAa,EAAC,CAAA"}
package/dist/TopicTag/TopicTag.js ADDED
@@ -0,0 +1,58 @@
1
+ import { c } from 'react-compiler-runtime';
2
+ import { clsx } from 'clsx';
3
+ import classes from './TopicTag.module.css.js';
4
+ import { jsx } from 'react/jsx-runtime';
5
+
6
+ function TopicTag(t0) {
7
+ var _as;
8
+ const $ = c(12);
9
+ let as;
10
+ let children;
11
+ let className;
12
+ let rest;
13
+ if ($[0] !== t0) {
14
+ ({
15
+ as,
16
+ children,
17
+ className,
18
+ ...rest
19
+ } = t0);
20
+ $[0] = t0;
21
+ $[1] = as;
22
+ $[2] = children;
23
+ $[3] = className;
24
+ $[4] = rest;
25
+ } else {
26
+ as = $[1];
27
+ children = $[2];
28
+ className = $[3];
29
+ rest = $[4];
30
+ }
31
+ const BaseComponent = (_as = as) !== null && _as !== void 0 ? _as : "a";
32
+ let t1;
33
+ if ($[5] !== className) {
34
+ t1 = clsx(className, classes.TopicTag);
35
+ $[5] = className;
36
+ $[6] = t1;
37
+ } else {
38
+ t1 = $[6];
39
+ }
40
+ let t2;
41
+ if ($[7] !== BaseComponent || $[8] !== children || $[9] !== rest || $[10] !== t1) {
42
+ t2 = /*#__PURE__*/jsx(BaseComponent, {
43
+ ...rest,
44
+ className: t1,
45
+ children: children
46
+ });
47
+ $[7] = BaseComponent;
48
+ $[8] = children;
49
+ $[9] = rest;
50
+ $[10] = t1;
51
+ $[11] = t2;
52
+ } else {
53
+ t2 = $[11];
54
+ }
55
+ return t2;
56
+ }
57
+
58
+ export { TopicTag };
package/dist/TopicTag/TopicTag.module.css.js ADDED
@@ -0,0 +1,5 @@
1
+ import './TopicTag-955c0fbf.css';
2
+
3
+ var classes = {"TopicTag":"prc-TopicTag-TopicTag-FOkf8"};
4
+
5
+ export { classes as default };
package/dist/TopicTag/TopicTagGroup-785f4d65.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-TopicTag-TopicTagGroup-rXgAj{column-gap:var(--base-size-2,.125rem);display:flex;flex-wrap:wrap;row-gap:var(--base-size-8,.5rem)}
2
+ /*# sourceMappingURL=TopicTagGroup-785f4d65.css.map */
package/dist/TopicTag/TopicTagGroup-785f4d65.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/TopicTag/TopicTagGroup.module.css"],"names":[],"mappings":"AAAA,kCAGE,qCAA8B,CAF9B,YAAa,CACb,cAAe,CAEf,gCACF","file":"TopicTagGroup-785f4d65.css","sourcesContent":[".TopicTagGroup {\n display: flex;\n flex-wrap: wrap;\n column-gap: var(--base-size-2);\n row-gap: var(--base-size-8);\n}\n"]}
package/dist/TopicTag/TopicTagGroup.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type React from 'react';
2
+ type TopicTagGroupProps = React.HTMLAttributes<HTMLElement>;
3
+ declare function TopicTagGroup({ children, className, ...rest }: TopicTagGroupProps): React.JSX.Element;
4
+ export { TopicTagGroup };
5
+ export type { TopicTagGroupProps };
6
+ //# sourceMappingURL=TopicTagGroup.d.ts.map
package/dist/TopicTag/TopicTagGroup.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TopicTagGroup.d.ts","sourceRoot":"","sources":["../../src/TopicTag/TopicTagGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAE3D,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,qBAMxE;AAED,OAAO,EAAC,aAAa,EAAC,CAAA;AACtB,YAAY,EAAC,kBAAkB,EAAC,CAAA"}
package/dist/TopicTag/TopicTagGroup.js ADDED
@@ -0,0 +1,51 @@
1
+ import { c } from 'react-compiler-runtime';
2
+ import { clsx } from 'clsx';
3
+ import classes from './TopicTagGroup.module.css.js';
4
+ import { jsx } from 'react/jsx-runtime';
5
+
6
+ function TopicTagGroup(t0) {
7
+ const $ = c(10);
8
+ let children;
9
+ let className;
10
+ let rest;
11
+ if ($[0] !== t0) {
12
+ ({
13
+ children,
14
+ className,
15
+ ...rest
16
+ } = t0);
17
+ $[0] = t0;
18
+ $[1] = children;
19
+ $[2] = className;
20
+ $[3] = rest;
21
+ } else {
22
+ children = $[1];
23
+ className = $[2];
24
+ rest = $[3];
25
+ }
26
+ let t1;
27
+ if ($[4] !== className) {
28
+ t1 = clsx(className, classes.TopicTagGroup);
29
+ $[4] = className;
30
+ $[5] = t1;
31
+ } else {
32
+ t1 = $[5];
33
+ }
34
+ let t2;
35
+ if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
36
+ t2 = /*#__PURE__*/jsx("div", {
37
+ ...rest,
38
+ className: t1,
39
+ children: children
40
+ });
41
+ $[6] = children;
42
+ $[7] = rest;
43
+ $[8] = t1;
44
+ $[9] = t2;
45
+ } else {
46
+ t2 = $[9];
47
+ }
48
+ return t2;
49
+ }
50
+
51
+ export { TopicTagGroup };
package/dist/TopicTag/TopicTagGroup.module.css.js ADDED
@@ -0,0 +1,5 @@
1
+ import './TopicTagGroup-785f4d65.css';
2
+
3
+ var classes = {"TopicTagGroup":"prc-TopicTag-TopicTagGroup-rXgAj"};
4
+
5
+ export { classes as default };
package/dist/TopicTag/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { TopicTag as TopicTagImpl } from './TopicTag';
2
+ import type { TopicTagProps } from './TopicTag';
3
+ import { TopicTagGroup } from './TopicTagGroup';
4
+ import type { TopicTagGroupProps } from './TopicTagGroup';
5
+ declare const TopicTag: typeof TopicTagImpl & {
6
+ Group: typeof TopicTagGroup;
7
+ };
8
+ export { TopicTag };
9
+ export type { TopicTagProps, TopicTagGroupProps };
10
+ //# sourceMappingURL=index.d.ts.map
package/dist/TopicTag/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TopicTag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,IAAI,YAAY,EAAC,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AAC7C,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAA;AAC7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAA;AAEvD,QAAA,MAAM,QAAQ;;CAEZ,CAAA;AAEF,OAAO,EAAC,QAAQ,EAAC,CAAA;AACjB,YAAY,EAAC,aAAa,EAAE,kBAAkB,EAAC,CAAA"}
package/dist/TopicTag/index.js ADDED
@@ -0,0 +1,8 @@
1
+ import { TopicTag as TopicTag$1 } from './TopicTag.js';
2
+ import { TopicTagGroup } from './TopicTagGroup.js';
3
+
4
+ const TopicTag = Object.assign(TopicTag$1, {
5
+ Group: TopicTagGroup
6
+ });
7
+
8
+ export { TopicTag };
package/dist/VisuallyHidden/VisuallyHidden.d.ts CHANGED
@@ -2,7 +2,7 @@ import type React from 'react';
2
2
  import { type HTMLAttributes } from 'react';
3
3
  /**
4
4
  * Provides a component that implements the "visually hidden" technique. This is
5
- * analagous to the common `sr-only` class. Children that are rendered inside
5
+ * analogous to the common `sr-only` class. Children that are rendered inside
6
6
  * this component will not be visible but will be available to screen readers.
7
7
  *
8
8
  * Note: if this component, or a descendant, has focus then this component will
package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer primer.components.IssueLabel{.prc-IssueLabel-IssueLabel-WJ5y-{align-items:center;background-color:var(--label-bgColor-rest);border:0;border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--boxShadow-thin,inset 0 0 0 .0625rem) transparent;color:var(--label-fgColor);display:inline-flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);min-height:var(--base-size-20,1.25rem);padding-block:0;padding-inline:var(--base-size-8,.5rem);white-space:nowrap}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a){-webkit-text-decoration:none;text-decoration:none}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):hover{background-color:var(--label-bgColor-hover);color:var(--label-fgColor-hover);cursor:pointer}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):active{background-color:var(--label-bgColor-active);color:var(--label-fgColor-active)}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pink]{--label-bgColor-rest:var(--label-pink-bgColor-rest,#ffe5f1);--label-bgColor-hover:var(--label-pink-bgColor-hover,#fdc9e2);--label-bgColor-active:var(--label-pink-bgColor-active,#f8a5cf);--label-fgColor:var(--label-pink-fgColor-rest,#b12f79);--label-fgColor-hover:var(--label-pink-fgColor-hover,#8e2e66);--label-fgColor-active:var(--label-pink-fgColor-active,#6e2b53)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=plum]{--label-bgColor-rest:var(--label-plum-bgColor-rest,#f8e5ff);--label-bgColor-hover:var(--label-plum-bgColor-hover,#f0cdfe);--label-bgColor-active:var(--label-plum-bgColor-active,#e2a7fb);--label-fgColor:var(--label-plum-fgColor-rest,#961edc);--label-fgColor-hover:var(--label-plum-fgColor-hover,#7d1eb8);--label-fgColor-active:var(--label-plum-fgColor-active,#651d96)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=purple]{--label-bgColor-rest:var(--label-purple-bgColor-rest,#f1e5ff);--label-bgColor-hover:var(--label-purple-bgColor-hover,#e6d2fe);--label-bgColor-active:var(--label-purple-bgColor-active,#d1b1fc);--label-fgColor:var(--label-purple-fgColor-rest,#783ae4);--label-fgColor-hover:var(--label-purple-fgColor-hover,#6223d7);--label-fgColor-active:var(--label-purple-fgColor-active,#4f21ab)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=indigo]{--label-bgColor-rest:var(--label-indigo-bgColor-rest,#e5e9ff);--label-bgColor-hover:var(--label-indigo-bgColor-hover,#d2d7fe);--label-bgColor-active:var(--label-indigo-bgColor-active,#b1b9fb);--label-fgColor:var(--label-indigo-fgColor-rest,#494edf);--label-fgColor-hover:var(--label-indigo-fgColor-hover,#393cd5);--label-fgColor-active:var(--label-indigo-fgColor-active,#2d2db4)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=blue]{--label-bgColor-rest:var(--label-blue-bgColor-rest,#d1f0ff);--label-bgColor-hover:var(--label-blue-bgColor-hover,#ade1ff);--label-bgColor-active:var(--label-blue-bgColor-active,#75c8ff);--label-fgColor:var(--label-blue-fgColor-rest,#005fcc);--label-fgColor-hover:var(--label-blue-fgColor-hover,#004db3);--label-fgColor-active:var(--label-blue-fgColor-active,#003d99)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=cyan]{--label-bgColor-rest:var(--label-cyan-bgColor-rest,#bdf4ff);--label-bgColor-hover:var(--label-cyan-bgColor-hover,#7ae9ff);--label-bgColor-active:var(--label-cyan-bgColor-active,#00d0fa);--label-fgColor:var(--label-cyan-fgColor-rest,#006a80);--label-fgColor-hover:var(--label-cyan-fgColor-hover,#00596b);--label-fgColor-active:var(--label-cyan-fgColor-active,#004857)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=teal]{--label-bgColor-rest:var(--label-teal-bgColor-rest,#c7f5ef);--label-bgColor-hover:var(--label-teal-bgColor-hover,#89ebe1);--label-bgColor-active:var(--label-teal-bgColor-active,#22d3c7);--label-fgColor:var(--label-teal-fgColor-rest,#106e75);--label-fgColor-hover:var(--label-teal-fgColor-hover,#0d5b63);--label-fgColor-active:var(--label-teal-fgColor-active,#0a4852)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pine]{--label-bgColor-rest:var(--label-pine-bgColor-rest,#bff8db);--label-bgColor-hover:var(--label-pine-bgColor-hover,#80efb9);--label-bgColor-active:var(--label-pine-bgColor-active,#1dd781);--label-fgColor:var(--label-pine-fgColor-rest,#156f4b);--label-fgColor-hover:var(--label-pine-fgColor-hover,#135d41);--label-fgColor-active:var(--label-pine-fgColor-active,#114b36)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=green]{--label-bgColor-rest:var(--label-green-bgColor-rest,#caf7ca);--label-bgColor-hover:var(--label-green-bgColor-hover,#9ceda0);--label-bgColor-active:var(--label-green-bgColor-active,#54d961);--label-fgColor:var(--label-green-fgColor-rest,#2b6e3f);--label-fgColor-hover:var(--label-green-fgColor-hover,#285c3b);--label-fgColor-active:var(--label-green-fgColor-active,#254b34)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lime]{--label-bgColor-rest:var(--label-lime-bgColor-rest,#e3f2b5);--label-bgColor-hover:var(--label-lime-bgColor-hover,#c7e580);--label-bgColor-active:var(--label-lime-bgColor-active,#9bd039);--label-fgColor:var(--label-lime-fgColor-rest,#476c28);--label-fgColor-hover:var(--label-lime-fgColor-hover,#3a5b25);--label-fgColor-active:var(--label-lime-fgColor-active,#2f4a21)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=olive]{--label-bgColor-rest:var(--label-olive-bgColor-rest,#f0f0ad);--label-bgColor-hover:var(--label-olive-bgColor-hover,#dbe170);--label-bgColor-active:var(--label-olive-bgColor-active,#b9c832);--label-fgColor:var(--label-olive-fgColor-rest,#56682c);--label-fgColor-hover:var(--label-olive-fgColor-hover,#495a2b);--label-fgColor-active:var(--label-olive-fgColor-active,#3b4927)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lemon]{--label-bgColor-rest:var(--label-lemon-bgColor-rest,#f7eea1);--label-bgColor-hover:var(--label-lemon-bgColor-hover,#f0db3d);--label-bgColor-active:var(--label-lemon-bgColor-active,#d8bd0e);--label-fgColor:var(--label-lemon-fgColor-rest,#786002);--label-fgColor-hover:var(--label-lemon-fgColor-hover,#654f01);--label-fgColor-active:var(--label-lemon-fgColor-active,#523f00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=yellow]{--label-bgColor-rest:var(--label-yellow-bgColor-rest,#ffec9e);--label-bgColor-hover:var(--label-yellow-bgColor-hover,#ffd642);--label-bgColor-active:var(--label-yellow-bgColor-active,#ebb400);--label-fgColor:var(--label-yellow-fgColor-rest,#805900);--label-fgColor-hover:var(--label-yellow-fgColor-hover,#704d00);--label-fgColor-active:var(--label-yellow-fgColor-active,#5c3d00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=orange]{--label-bgColor-rest:var(--label-orange-bgColor-rest,#ffe7d1);--label-bgColor-hover:var(--label-orange-bgColor-hover,#fecfaa);--label-bgColor-active:var(--label-orange-bgColor-active,#fbaf74);--label-fgColor:var(--label-orange-fgColor-rest,#a24610);--label-fgColor-hover:var(--label-orange-fgColor-hover,#8d3c11);--label-fgColor-active:var(--label-orange-fgColor-active,#70300f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=red]{--label-bgColor-rest:var(--label-red-bgColor-rest,#ffe2e0);--label-bgColor-hover:var(--label-red-bgColor-hover,#fecdcd);--label-bgColor-active:var(--label-red-bgColor-active,#fda5a7);--label-fgColor:var(--label-red-fgColor-rest,#c50d28);--label-fgColor-hover:var(--label-red-fgColor-hover,#a60c29);--label-fgColor-active:var(--label-red-fgColor-active,#880c27)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=coral]{--label-bgColor-rest:var(--label-coral-bgColor-rest,#ffe5db);--label-bgColor-hover:var(--label-coral-bgColor-hover,#fecebe);--label-bgColor-active:var(--label-coral-bgColor-active,#fcab92);--label-fgColor:var(--label-coral-fgColor-rest,#ba2e12);--label-fgColor-hover:var(--label-coral-fgColor-hover,#9b2712);--label-fgColor-active:var(--label-coral-fgColor-active,#7e2011)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=gray]{--label-bgColor-rest:var(--label-gray-bgColor-rest,#e8ecf2);--label-bgColor-hover:var(--label-gray-bgColor-hover,#d2dae4);--label-bgColor-active:var(--label-gray-bgColor-active,#b4c0cf);--label-fgColor:var(--label-gray-fgColor-rest,#5c6570);--label-fgColor-hover:var(--label-gray-fgColor-hover,#4e535a);--label-fgColor-active:var(--label-gray-fgColor-active,#424448)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=brown]{--label-bgColor-rest:var(--label-brown-bgColor-rest,#eeeae2);--label-bgColor-hover:var(--label-brown-bgColor-hover,#dfd7c8);--label-bgColor-active:var(--label-brown-bgColor-active,#cbbda4);--label-fgColor:var(--label-brown-fgColor-rest,#755f43);--label-fgColor-hover:var(--label-brown-fgColor-hover,#64513a);--label-fgColor-active:var(--label-brown-fgColor-active,#51412f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=auburn]{--label-bgColor-rest:var(--label-auburn-bgColor-rest,#f2e9e9);--label-bgColor-hover:var(--label-auburn-bgColor-hover,#e6d6d5);--label-bgColor-active:var(--label-auburn-bgColor-active,#d4b7b5);--label-fgColor:var(--label-auburn-fgColor-rest,#8a5551);--label-fgColor-hover:var(--label-auburn-fgColor-hover,#744744);--label-fgColor-active:var(--label-auburn-fgColor-active,#5d3937)}[data-color-mode=dark] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-dark-rest);--label-bgColor-hover:var(--label-bgColor-dark-hover);--label-bgColor-active:var(--label-bgColor-dark-active);--label-fgColor:var(--label-fgColor-dark);--label-fgColor-hover:var(--label-fgColor-dark-hover);--label-fgColor-active:var(--label-fgColor-dark-active)}[data-color-mode=light] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-light-rest);--label-bgColor-hover:var(--label-bgColor-light-hover);--label-bgColor-active:var(--label-bgColor-light-active);--label-fgColor:var(--label-fgColor-light);--label-fgColor-hover:var(--label-fgColor-light-hover);--label-fgColor-active:var(--label-fgColor-light-active)}@media (prefers-color-scheme:light){[data-color-mode=auto][data-light-theme*=light] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-light-rest);--label-bgColor-hover:var(--label-bgColor-light-hover);--label-bgColor-active:var(--label-bgColor-light-active);--label-fgColor:var(--label-fgColor-light);--label-fgColor-hover:var(--label-fgColor-light-hover);--label-fgColor-active:var(--label-fgColor-light-active)}[data-color-mode=auto][data-light-theme*=dark] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-dark-rest);--label-bgColor-hover:var(--label-bgColor-dark-hover);--label-bgColor-active:var(--label-bgColor-dark-active);--label-fgColor:var(--label-fgColor-dark);--label-fgColor-hover:var(--label-fgColor-dark-hover);--label-fgColor-active:var(--label-fgColor-dark-active)}}@media (prefers-color-scheme:dark){[data-color-mode=auto][data-dark-theme*=light] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-light-rest);--label-bgColor-hover:var(--label-bgColor-light-hover);--label-bgColor-active:var(--label-bgColor-light-active);--label-fgColor:var(--label-fgColor-light);--label-fgColor-hover:var(--label-fgColor-light-hover);--label-fgColor-active:var(--label-fgColor-light-active)}[data-color-mode=auto][data-dark-theme*=dark] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-dark-rest);--label-bgColor-hover:var(--label-bgColor-dark-hover);--label-bgColor-active:var(--label-bgColor-dark-active);--label-fgColor:var(--label-fgColor-dark);--label-fgColor-hover:var(--label-fgColor-dark-hover);--label-fgColor-active:var(--label-fgColor-dark-active)}}}
1
+ @layer primer.components.IssueLabel{.prc-IssueLabel-IssueLabel-WJ5y-{align-items:center;background-color:var(--label-bgColor-rest);border:0;border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--boxShadow-thin,inset 0 0 0 .0625rem) transparent;color:var(--label-fgColor);display:inline-flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);min-height:var(--base-size-20,1.25rem);padding-block:0;padding-inline:var(--base-size-8,.5rem);white-space:nowrap}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a){-webkit-text-decoration:none;text-decoration:none}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):hover{background-color:var(--label-bgColor-hover);color:var(--label-fgColor-hover);cursor:pointer}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):active{background-color:var(--label-bgColor-active);color:var(--label-fgColor-active)}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pink]{--label-bgColor-rest:var(--label-pink-bgColor-rest,#ffe5f1);--label-bgColor-hover:var(--label-pink-bgColor-hover,#fdc9e2);--label-bgColor-active:var(--label-pink-bgColor-active,#f8a5cf);--label-fgColor:var(--label-pink-fgColor-rest,#b12f79);--label-fgColor-hover:var(--label-pink-fgColor-hover,#8e2e66);--label-fgColor-active:var(--label-pink-fgColor-active,#6e2b53)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=plum]{--label-bgColor-rest:var(--label-plum-bgColor-rest,#f8e5ff);--label-bgColor-hover:var(--label-plum-bgColor-hover,#f0cdfe);--label-bgColor-active:var(--label-plum-bgColor-active,#e2a7fb);--label-fgColor:var(--label-plum-fgColor-rest,#961edc);--label-fgColor-hover:var(--label-plum-fgColor-hover,#7d1eb8);--label-fgColor-active:var(--label-plum-fgColor-active,#651d96)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=purple]{--label-bgColor-rest:var(--label-purple-bgColor-rest,#f1e5ff);--label-bgColor-hover:var(--label-purple-bgColor-hover,#e6d2fe);--label-bgColor-active:var(--label-purple-bgColor-active,#d1b1fc);--label-fgColor:var(--label-purple-fgColor-rest,#783ae4);--label-fgColor-hover:var(--label-purple-fgColor-hover,#6223d7);--label-fgColor-active:var(--label-purple-fgColor-active,#4f21ab)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=indigo]{--label-bgColor-rest:var(--label-indigo-bgColor-rest,#e5e9ff);--label-bgColor-hover:var(--label-indigo-bgColor-hover,#d2d7fe);--label-bgColor-active:var(--label-indigo-bgColor-active,#b1b9fb);--label-fgColor:var(--label-indigo-fgColor-rest,#494edf);--label-fgColor-hover:var(--label-indigo-fgColor-hover,#393cd5);--label-fgColor-active:var(--label-indigo-fgColor-active,#2d2db4)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=blue]{--label-bgColor-rest:var(--label-blue-bgColor-rest,#d1f0ff);--label-bgColor-hover:var(--label-blue-bgColor-hover,#ade1ff);--label-bgColor-active:var(--label-blue-bgColor-active,#75c8ff);--label-fgColor:var(--label-blue-fgColor-rest,#005fcc);--label-fgColor-hover:var(--label-blue-fgColor-hover,#004db3);--label-fgColor-active:var(--label-blue-fgColor-active,#003d99)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=cyan]{--label-bgColor-rest:var(--label-cyan-bgColor-rest,#bdf4ff);--label-bgColor-hover:var(--label-cyan-bgColor-hover,#7ae9ff);--label-bgColor-active:var(--label-cyan-bgColor-active,#00d0fa);--label-fgColor:var(--label-cyan-fgColor-rest,#006a80);--label-fgColor-hover:var(--label-cyan-fgColor-hover,#00596b);--label-fgColor-active:var(--label-cyan-fgColor-active,#004857)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=teal]{--label-bgColor-rest:var(--label-teal-bgColor-rest,#c7f5ef);--label-bgColor-hover:var(--label-teal-bgColor-hover,#89ebe1);--label-bgColor-active:var(--label-teal-bgColor-active,#22d3c7);--label-fgColor:var(--label-teal-fgColor-rest,#106e75);--label-fgColor-hover:var(--label-teal-fgColor-hover,#0d5b63);--label-fgColor-active:var(--label-teal-fgColor-active,#0a4852)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pine]{--label-bgColor-rest:var(--label-pine-bgColor-rest,#bff8db);--label-bgColor-hover:var(--label-pine-bgColor-hover,#80efb9);--label-bgColor-active:var(--label-pine-bgColor-active,#1dd781);--label-fgColor:var(--label-pine-fgColor-rest,#156f4b);--label-fgColor-hover:var(--label-pine-fgColor-hover,#135d41);--label-fgColor-active:var(--label-pine-fgColor-active,#114b36)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=green]{--label-bgColor-rest:var(--label-green-bgColor-rest,#caf7ca);--label-bgColor-hover:var(--label-green-bgColor-hover,#9ceda0);--label-bgColor-active:var(--label-green-bgColor-active,#54d961);--label-fgColor:var(--label-green-fgColor-rest,#2b6e3f);--label-fgColor-hover:var(--label-green-fgColor-hover,#285c3b);--label-fgColor-active:var(--label-green-fgColor-active,#254b34)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lime]{--label-bgColor-rest:var(--label-lime-bgColor-rest,#e3f2b5);--label-bgColor-hover:var(--label-lime-bgColor-hover,#c7e580);--label-bgColor-active:var(--label-lime-bgColor-active,#9bd039);--label-fgColor:var(--label-lime-fgColor-rest,#476c28);--label-fgColor-hover:var(--label-lime-fgColor-hover,#3a5b25);--label-fgColor-active:var(--label-lime-fgColor-active,#2f4a21)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=olive]{--label-bgColor-rest:var(--label-olive-bgColor-rest,#f0f0ad);--label-bgColor-hover:var(--label-olive-bgColor-hover,#dbe170);--label-bgColor-active:var(--label-olive-bgColor-active,#b9c832);--label-fgColor:var(--label-olive-fgColor-rest,#56682c);--label-fgColor-hover:var(--label-olive-fgColor-hover,#495a2b);--label-fgColor-active:var(--label-olive-fgColor-active,#3b4927)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lemon]{--label-bgColor-rest:var(--label-lemon-bgColor-rest,#f7eea1);--label-bgColor-hover:var(--label-lemon-bgColor-hover,#f0db3d);--label-bgColor-active:var(--label-lemon-bgColor-active,#d8bd0e);--label-fgColor:var(--label-lemon-fgColor-rest,#786002);--label-fgColor-hover:var(--label-lemon-fgColor-hover,#654f01);--label-fgColor-active:var(--label-lemon-fgColor-active,#523f00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=yellow]{--label-bgColor-rest:var(--label-yellow-bgColor-rest,#ffec9e);--label-bgColor-hover:var(--label-yellow-bgColor-hover,#ffd642);--label-bgColor-active:var(--label-yellow-bgColor-active,#ebb400);--label-fgColor:var(--label-yellow-fgColor-rest,#805900);--label-fgColor-hover:var(--label-yellow-fgColor-hover,#704d00);--label-fgColor-active:var(--label-yellow-fgColor-active,#5c3d00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=orange]{--label-bgColor-rest:var(--label-orange-bgColor-rest,#ffe7d1);--label-bgColor-hover:var(--label-orange-bgColor-hover,#fecfaa);--label-bgColor-active:var(--label-orange-bgColor-active,#fbaf74);--label-fgColor:var(--label-orange-fgColor-rest,#a24610);--label-fgColor-hover:var(--label-orange-fgColor-hover,#8d3c11);--label-fgColor-active:var(--label-orange-fgColor-active,#70300f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=red]{--label-bgColor-rest:var(--label-red-bgColor-rest,#ffe2e0);--label-bgColor-hover:var(--label-red-bgColor-hover,#fecdcd);--label-bgColor-active:var(--label-red-bgColor-active,#fda5a7);--label-fgColor:var(--label-red-fgColor-rest,#c50d28);--label-fgColor-hover:var(--label-red-fgColor-hover,#a60c29);--label-fgColor-active:var(--label-red-fgColor-active,#880c27)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=coral]{--label-bgColor-rest:var(--label-coral-bgColor-rest,#ffe5db);--label-bgColor-hover:var(--label-coral-bgColor-hover,#fecebe);--label-bgColor-active:var(--label-coral-bgColor-active,#fcab92);--label-fgColor:var(--label-coral-fgColor-rest,#ba2e12);--label-fgColor-hover:var(--label-coral-fgColor-hover,#9b2712);--label-fgColor-active:var(--label-coral-fgColor-active,#7e2011)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=gray]{--label-bgColor-rest:var(--label-gray-bgColor-rest,#e8ecf2);--label-bgColor-hover:var(--label-gray-bgColor-hover,#d2dae4);--label-bgColor-active:var(--label-gray-bgColor-active,#b4c0cf);--label-fgColor:var(--label-gray-fgColor-rest,#5c6570);--label-fgColor-hover:var(--label-gray-fgColor-hover,#4e535a);--label-fgColor-active:var(--label-gray-fgColor-active,#424448)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=brown]{--label-bgColor-rest:var(--label-brown-bgColor-rest,#eeeae2);--label-bgColor-hover:var(--label-brown-bgColor-hover,#dfd7c8);--label-bgColor-active:var(--label-brown-bgColor-active,#cbbda4);--label-fgColor:var(--label-brown-fgColor-rest,#755f43);--label-fgColor-hover:var(--label-brown-fgColor-hover,#64513a);--label-fgColor-active:var(--label-brown-fgColor-active,#51412f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=auburn]{--label-bgColor-rest:var(--label-auburn-bgColor-rest,#f2e9e9);--label-bgColor-hover:var(--label-auburn-bgColor-hover,#e6d6d5);--label-bgColor-active:var(--label-auburn-bgColor-active,#d4b7b5);--label-fgColor:var(--label-auburn-fgColor-rest,#8a5551);--label-fgColor-hover:var(--label-auburn-fgColor-hover,#744744);--label-fgColor-active:var(--label-auburn-fgColor-active,#5d3937)}[data-color-mode=dark] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-dark-rest);--label-bgColor-hover:var(--label-bgColor-dark-hover);--label-bgColor-active:var(--label-bgColor-dark-active);--label-fgColor:var(--label-fgColor-dark);--label-fgColor-hover:var(--label-fgColor-dark-hover);--label-fgColor-active:var(--label-fgColor-dark-active)}[data-color-mode=light] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-light-rest);--label-bgColor-hover:var(--label-bgColor-light-hover);--label-bgColor-active:var(--label-bgColor-light-active);--label-fgColor:var(--label-fgColor-light);--label-fgColor-hover:var(--label-fgColor-light-hover);--label-fgColor-active:var(--label-fgColor-light-active)}@media (prefers-color-scheme:light){[data-color-mode=auto][data-light-theme*=light] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-light-rest);--label-bgColor-hover:var(--label-bgColor-light-hover);--label-bgColor-active:var(--label-bgColor-light-active);--label-fgColor:var(--label-fgColor-light);--label-fgColor-hover:var(--label-fgColor-light-hover);--label-fgColor-active:var(--label-fgColor-light-active)}[data-color-mode=auto][data-light-theme*=dark] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-dark-rest);--label-bgColor-hover:var(--label-bgColor-dark-hover);--label-bgColor-active:var(--label-bgColor-dark-active);--label-fgColor:var(--label-fgColor-dark);--label-fgColor-hover:var(--label-fgColor-dark-hover);--label-fgColor-active:var(--label-fgColor-dark-active)}}@media (prefers-color-scheme:dark){[data-color-mode=auto][data-dark-theme*=light] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-light-rest);--label-bgColor-hover:var(--label-bgColor-light-hover);--label-bgColor-active:var(--label-bgColor-light-active);--label-fgColor:var(--label-fgColor-light);--label-fgColor-hover:var(--label-fgColor-light-hover);--label-fgColor-active:var(--label-fgColor-light-active)}[data-color-mode=auto][data-dark-theme*=dark] .prc-IssueLabel-IssueLabel-WJ5y-:not([data-variant]){--label-bgColor-rest:var(--label-bgColor-dark-rest);--label-bgColor-hover:var(--label-bgColor-dark-hover);--label-bgColor-active:var(--label-bgColor-dark-active);--label-fgColor:var(--label-fgColor-dark);--label-fgColor-hover:var(--label-fgColor-dark-hover);--label-fgColor-active:var(--label-fgColor-dark-active)}}}
2
2
  /*# sourceMappingURL=IssueLabel-d9c2c5cf.css.map */
package/dist/experimental/IssueLabel/IssueLabel-d9c2c5cf.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/experimental/IssueLabel/IssueLabel.module.css","../../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"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","file":"IssueLabel-d9c2c5cf.css","sourcesContent":["@layer primer.components.IssueLabel {\n .IssueLabel {\n display: inline-flex;\n min-height: var(--base-size-20);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor);\n white-space: nowrap;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-rest);\n border: 0;\n border-radius: var(--borderRadius-full);\n\n /* use color var for box-shadow (border) in future for high contrast themes */\n box-shadow: var(--boxShadow-thin) transparent;\n align-items: center;\n padding-inline: var(--base-size-8);\n padding-block: 0;\n\n &:where(button, a) {\n text-decoration: none;\n\n &:hover {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-hover);\n cursor: pointer;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-hover);\n }\n\n &:active {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-active);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-active);\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n }\n\n &[data-variant='pink'] {\n --label-bgColor-rest: var(--label-pink-bgColor-rest);\n --label-bgColor-hover: var(--label-pink-bgColor-hover);\n --label-bgColor-active: var(--label-pink-bgColor-active);\n --label-fgColor: var(--label-pink-fgColor-rest);\n --label-fgColor-hover: var(--label-pink-fgColor-hover);\n --label-fgColor-active: var(--label-pink-fgColor-active);\n }\n\n &[data-variant='plum'] {\n --label-bgColor-rest: var(--label-plum-bgColor-rest);\n --label-bgColor-hover: var(--label-plum-bgColor-hover);\n --label-bgColor-active: var(--label-plum-bgColor-active);\n --label-fgColor: var(--label-plum-fgColor-rest);\n --label-fgColor-hover: var(--label-plum-fgColor-hover);\n --label-fgColor-active: var(--label-plum-fgColor-active);\n }\n\n &[data-variant='purple'] {\n --label-bgColor-rest: var(--label-purple-bgColor-rest);\n --label-bgColor-hover: var(--label-purple-bgColor-hover);\n --label-bgColor-active: var(--label-purple-bgColor-active);\n --label-fgColor: var(--label-purple-fgColor-rest);\n --label-fgColor-hover: var(--label-purple-fgColor-hover);\n --label-fgColor-active: var(--label-purple-fgColor-active);\n }\n\n &[data-variant='indigo'] {\n --label-bgColor-rest: var(--label-indigo-bgColor-rest);\n --label-bgColor-hover: var(--label-indigo-bgColor-hover);\n --label-bgColor-active: var(--label-indigo-bgColor-active);\n --label-fgColor: var(--label-indigo-fgColor-rest);\n --label-fgColor-hover: var(--label-indigo-fgColor-hover);\n --label-fgColor-active: var(--label-indigo-fgColor-active);\n }\n\n &[data-variant='blue'] {\n --label-bgColor-rest: var(--label-blue-bgColor-rest);\n --label-bgColor-hover: var(--label-blue-bgColor-hover);\n --label-bgColor-active: var(--label-blue-bgColor-active);\n --label-fgColor: var(--label-blue-fgColor-rest);\n --label-fgColor-hover: var(--label-blue-fgColor-hover);\n --label-fgColor-active: var(--label-blue-fgColor-active);\n }\n\n &[data-variant='cyan'] {\n --label-bgColor-rest: var(--label-cyan-bgColor-rest);\n --label-bgColor-hover: var(--label-cyan-bgColor-hover);\n --label-bgColor-active: var(--label-cyan-bgColor-active);\n --label-fgColor: var(--label-cyan-fgColor-rest);\n --label-fgColor-hover: var(--label-cyan-fgColor-hover);\n --label-fgColor-active: var(--label-cyan-fgColor-active);\n }\n\n &[data-variant='teal'] {\n --label-bgColor-rest: var(--label-teal-bgColor-rest);\n --label-bgColor-hover: var(--label-teal-bgColor-hover);\n --label-bgColor-active: var(--label-teal-bgColor-active);\n --label-fgColor: var(--label-teal-fgColor-rest);\n --label-fgColor-hover: var(--label-teal-fgColor-hover);\n --label-fgColor-active: var(--label-teal-fgColor-active);\n }\n\n &[data-variant='pine'] {\n --label-bgColor-rest: var(--label-pine-bgColor-rest);\n --label-bgColor-hover: var(--label-pine-bgColor-hover);\n --label-bgColor-active: var(--label-pine-bgColor-active);\n --label-fgColor: var(--label-pine-fgColor-rest);\n --label-fgColor-hover: var(--label-pine-fgColor-hover);\n --label-fgColor-active: var(--label-pine-fgColor-active);\n }\n\n &[data-variant='green'] {\n --label-bgColor-rest: var(--label-green-bgColor-rest);\n --label-bgColor-hover: var(--label-green-bgColor-hover);\n --label-bgColor-active: var(--label-green-bgColor-active);\n --label-fgColor: var(--label-green-fgColor-rest);\n --label-fgColor-hover: var(--label-green-fgColor-hover);\n --label-fgColor-active: var(--label-green-fgColor-active);\n }\n\n &[data-variant='lime'] {\n --label-bgColor-rest: var(--label-lime-bgColor-rest);\n --label-bgColor-hover: var(--label-lime-bgColor-hover);\n --label-bgColor-active: var(--label-lime-bgColor-active);\n --label-fgColor: var(--label-lime-fgColor-rest);\n --label-fgColor-hover: var(--label-lime-fgColor-hover);\n --label-fgColor-active: var(--label-lime-fgColor-active);\n }\n\n &[data-variant='olive'] {\n --label-bgColor-rest: var(--label-olive-bgColor-rest);\n --label-bgColor-hover: var(--label-olive-bgColor-hover);\n --label-bgColor-active: var(--label-olive-bgColor-active);\n --label-fgColor: var(--label-olive-fgColor-rest);\n --label-fgColor-hover: var(--label-olive-fgColor-hover);\n --label-fgColor-active: var(--label-olive-fgColor-active);\n }\n\n &[data-variant='lemon'] {\n --label-bgColor-rest: var(--label-lemon-bgColor-rest);\n --label-bgColor-hover: var(--label-lemon-bgColor-hover);\n --label-bgColor-active: var(--label-lemon-bgColor-active);\n --label-fgColor: var(--label-lemon-fgColor-rest);\n --label-fgColor-hover: var(--label-lemon-fgColor-hover);\n --label-fgColor-active: var(--label-lemon-fgColor-active);\n }\n\n &[data-variant='yellow'] {\n --label-bgColor-rest: var(--label-yellow-bgColor-rest);\n --label-bgColor-hover: var(--label-yellow-bgColor-hover);\n --label-bgColor-active: var(--label-yellow-bgColor-active);\n --label-fgColor: var(--label-yellow-fgColor-rest);\n --label-fgColor-hover: var(--label-yellow-fgColor-hover);\n --label-fgColor-active: var(--label-yellow-fgColor-active);\n }\n\n &[data-variant='orange'] {\n --label-bgColor-rest: var(--label-orange-bgColor-rest);\n --label-bgColor-hover: var(--label-orange-bgColor-hover);\n --label-bgColor-active: var(--label-orange-bgColor-active);\n --label-fgColor: var(--label-orange-fgColor-rest);\n --label-fgColor-hover: var(--label-orange-fgColor-hover);\n --label-fgColor-active: var(--label-orange-fgColor-active);\n }\n\n &[data-variant='red'] {\n --label-bgColor-rest: var(--label-red-bgColor-rest);\n --label-bgColor-hover: var(--label-red-bgColor-hover);\n --label-bgColor-active: var(--label-red-bgColor-active);\n --label-fgColor: var(--label-red-fgColor-rest);\n --label-fgColor-hover: var(--label-red-fgColor-hover);\n --label-fgColor-active: var(--label-red-fgColor-active);\n }\n\n &[data-variant='coral'] {\n --label-bgColor-rest: var(--label-coral-bgColor-rest);\n --label-bgColor-hover: var(--label-coral-bgColor-hover);\n --label-bgColor-active: var(--label-coral-bgColor-active);\n --label-fgColor: var(--label-coral-fgColor-rest);\n --label-fgColor-hover: var(--label-coral-fgColor-hover);\n --label-fgColor-active: var(--label-coral-fgColor-active);\n }\n\n &[data-variant='gray'] {\n --label-bgColor-rest: var(--label-gray-bgColor-rest);\n --label-bgColor-hover: var(--label-gray-bgColor-hover);\n --label-bgColor-active: var(--label-gray-bgColor-active);\n --label-fgColor: var(--label-gray-fgColor-rest);\n --label-fgColor-hover: var(--label-gray-fgColor-hover);\n --label-fgColor-active: var(--label-gray-fgColor-active);\n }\n\n &[data-variant='brown'] {\n --label-bgColor-rest: var(--label-brown-bgColor-rest);\n --label-bgColor-hover: var(--label-brown-bgColor-hover);\n --label-bgColor-active: var(--label-brown-bgColor-active);\n --label-fgColor: var(--label-brown-fgColor-rest);\n --label-fgColor-hover: var(--label-brown-fgColor-hover);\n --label-fgColor-active: var(--label-brown-fgColor-active);\n }\n\n &[data-variant='auburn'] {\n --label-bgColor-rest: var(--label-auburn-bgColor-rest);\n --label-bgColor-hover: var(--label-auburn-bgColor-hover);\n --label-bgColor-active: var(--label-auburn-bgColor-active);\n --label-fgColor: var(--label-auburn-fgColor-rest);\n --label-fgColor-hover: var(--label-auburn-fgColor-hover);\n --label-fgColor-active: var(--label-auburn-fgColor-active);\n }\n }\n\n [data-color-mode='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n\n [data-color-mode='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n @media (prefers-color-scheme: light) {\n [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n\n @media (prefers-color-scheme: dark) {\n [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
1
+ {"version":3,"sources":["../../src/experimental/IssueLabel/IssueLabel.module.css","../../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"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","file":"IssueLabel-d9c2c5cf.css","sourcesContent":["@layer primer.components.IssueLabel {\n .IssueLabel {\n display: inline-flex;\n min-height: var(--base-size-20);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor);\n white-space: nowrap;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-rest);\n border: 0;\n border-radius: var(--borderRadius-full);\n\n /* use color var for box-shadow (border) in future for high contrast themes */\n box-shadow: var(--boxShadow-thin) transparent;\n align-items: center;\n padding-inline: var(--base-size-8);\n padding-block: 0;\n\n &:where(button, a) {\n text-decoration: none;\n\n &:hover {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-hover);\n cursor: pointer;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-hover);\n }\n\n &:active {\n /* stylelint-disable-next-line primer/colors */\n color: var(--label-fgColor-active);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--label-bgColor-active);\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n }\n\n &[data-variant='pink'] {\n --label-bgColor-rest: var(--label-pink-bgColor-rest);\n --label-bgColor-hover: var(--label-pink-bgColor-hover);\n --label-bgColor-active: var(--label-pink-bgColor-active);\n --label-fgColor: var(--label-pink-fgColor-rest);\n --label-fgColor-hover: var(--label-pink-fgColor-hover);\n --label-fgColor-active: var(--label-pink-fgColor-active);\n }\n\n &[data-variant='plum'] {\n --label-bgColor-rest: var(--label-plum-bgColor-rest);\n --label-bgColor-hover: var(--label-plum-bgColor-hover);\n --label-bgColor-active: var(--label-plum-bgColor-active);\n --label-fgColor: var(--label-plum-fgColor-rest);\n --label-fgColor-hover: var(--label-plum-fgColor-hover);\n --label-fgColor-active: var(--label-plum-fgColor-active);\n }\n\n &[data-variant='purple'] {\n --label-bgColor-rest: var(--label-purple-bgColor-rest);\n --label-bgColor-hover: var(--label-purple-bgColor-hover);\n --label-bgColor-active: var(--label-purple-bgColor-active);\n --label-fgColor: var(--label-purple-fgColor-rest);\n --label-fgColor-hover: var(--label-purple-fgColor-hover);\n --label-fgColor-active: var(--label-purple-fgColor-active);\n }\n\n &[data-variant='indigo'] {\n --label-bgColor-rest: var(--label-indigo-bgColor-rest);\n --label-bgColor-hover: var(--label-indigo-bgColor-hover);\n --label-bgColor-active: var(--label-indigo-bgColor-active);\n --label-fgColor: var(--label-indigo-fgColor-rest);\n --label-fgColor-hover: var(--label-indigo-fgColor-hover);\n --label-fgColor-active: var(--label-indigo-fgColor-active);\n }\n\n &[data-variant='blue'] {\n --label-bgColor-rest: var(--label-blue-bgColor-rest);\n --label-bgColor-hover: var(--label-blue-bgColor-hover);\n --label-bgColor-active: var(--label-blue-bgColor-active);\n --label-fgColor: var(--label-blue-fgColor-rest);\n --label-fgColor-hover: var(--label-blue-fgColor-hover);\n --label-fgColor-active: var(--label-blue-fgColor-active);\n }\n\n &[data-variant='cyan'] {\n --label-bgColor-rest: var(--label-cyan-bgColor-rest);\n --label-bgColor-hover: var(--label-cyan-bgColor-hover);\n --label-bgColor-active: var(--label-cyan-bgColor-active);\n --label-fgColor: var(--label-cyan-fgColor-rest);\n --label-fgColor-hover: var(--label-cyan-fgColor-hover);\n --label-fgColor-active: var(--label-cyan-fgColor-active);\n }\n\n &[data-variant='teal'] {\n --label-bgColor-rest: var(--label-teal-bgColor-rest);\n --label-bgColor-hover: var(--label-teal-bgColor-hover);\n --label-bgColor-active: var(--label-teal-bgColor-active);\n --label-fgColor: var(--label-teal-fgColor-rest);\n --label-fgColor-hover: var(--label-teal-fgColor-hover);\n --label-fgColor-active: var(--label-teal-fgColor-active);\n }\n\n &[data-variant='pine'] {\n --label-bgColor-rest: var(--label-pine-bgColor-rest);\n --label-bgColor-hover: var(--label-pine-bgColor-hover);\n --label-bgColor-active: var(--label-pine-bgColor-active);\n --label-fgColor: var(--label-pine-fgColor-rest);\n --label-fgColor-hover: var(--label-pine-fgColor-hover);\n --label-fgColor-active: var(--label-pine-fgColor-active);\n }\n\n &[data-variant='green'] {\n --label-bgColor-rest: var(--label-green-bgColor-rest);\n --label-bgColor-hover: var(--label-green-bgColor-hover);\n --label-bgColor-active: var(--label-green-bgColor-active);\n --label-fgColor: var(--label-green-fgColor-rest);\n --label-fgColor-hover: var(--label-green-fgColor-hover);\n --label-fgColor-active: var(--label-green-fgColor-active);\n }\n\n &[data-variant='lime'] {\n --label-bgColor-rest: var(--label-lime-bgColor-rest);\n --label-bgColor-hover: var(--label-lime-bgColor-hover);\n --label-bgColor-active: var(--label-lime-bgColor-active);\n --label-fgColor: var(--label-lime-fgColor-rest);\n --label-fgColor-hover: var(--label-lime-fgColor-hover);\n --label-fgColor-active: var(--label-lime-fgColor-active);\n }\n\n &[data-variant='olive'] {\n --label-bgColor-rest: var(--label-olive-bgColor-rest);\n --label-bgColor-hover: var(--label-olive-bgColor-hover);\n --label-bgColor-active: var(--label-olive-bgColor-active);\n --label-fgColor: var(--label-olive-fgColor-rest);\n --label-fgColor-hover: var(--label-olive-fgColor-hover);\n --label-fgColor-active: var(--label-olive-fgColor-active);\n }\n\n &[data-variant='lemon'] {\n --label-bgColor-rest: var(--label-lemon-bgColor-rest);\n --label-bgColor-hover: var(--label-lemon-bgColor-hover);\n --label-bgColor-active: var(--label-lemon-bgColor-active);\n --label-fgColor: var(--label-lemon-fgColor-rest);\n --label-fgColor-hover: var(--label-lemon-fgColor-hover);\n --label-fgColor-active: var(--label-lemon-fgColor-active);\n }\n\n &[data-variant='yellow'] {\n --label-bgColor-rest: var(--label-yellow-bgColor-rest);\n --label-bgColor-hover: var(--label-yellow-bgColor-hover);\n --label-bgColor-active: var(--label-yellow-bgColor-active);\n --label-fgColor: var(--label-yellow-fgColor-rest);\n --label-fgColor-hover: var(--label-yellow-fgColor-hover);\n --label-fgColor-active: var(--label-yellow-fgColor-active);\n }\n\n &[data-variant='orange'] {\n --label-bgColor-rest: var(--label-orange-bgColor-rest);\n --label-bgColor-hover: var(--label-orange-bgColor-hover);\n --label-bgColor-active: var(--label-orange-bgColor-active);\n --label-fgColor: var(--label-orange-fgColor-rest);\n --label-fgColor-hover: var(--label-orange-fgColor-hover);\n --label-fgColor-active: var(--label-orange-fgColor-active);\n }\n\n &[data-variant='red'] {\n --label-bgColor-rest: var(--label-red-bgColor-rest);\n --label-bgColor-hover: var(--label-red-bgColor-hover);\n --label-bgColor-active: var(--label-red-bgColor-active);\n --label-fgColor: var(--label-red-fgColor-rest);\n --label-fgColor-hover: var(--label-red-fgColor-hover);\n --label-fgColor-active: var(--label-red-fgColor-active);\n }\n\n &[data-variant='coral'] {\n --label-bgColor-rest: var(--label-coral-bgColor-rest);\n --label-bgColor-hover: var(--label-coral-bgColor-hover);\n --label-bgColor-active: var(--label-coral-bgColor-active);\n --label-fgColor: var(--label-coral-fgColor-rest);\n --label-fgColor-hover: var(--label-coral-fgColor-hover);\n --label-fgColor-active: var(--label-coral-fgColor-active);\n }\n\n &[data-variant='gray'] {\n --label-bgColor-rest: var(--label-gray-bgColor-rest);\n --label-bgColor-hover: var(--label-gray-bgColor-hover);\n --label-bgColor-active: var(--label-gray-bgColor-active);\n --label-fgColor: var(--label-gray-fgColor-rest);\n --label-fgColor-hover: var(--label-gray-fgColor-hover);\n --label-fgColor-active: var(--label-gray-fgColor-active);\n }\n\n &[data-variant='brown'] {\n --label-bgColor-rest: var(--label-brown-bgColor-rest);\n --label-bgColor-hover: var(--label-brown-bgColor-hover);\n --label-bgColor-active: var(--label-brown-bgColor-active);\n --label-fgColor: var(--label-brown-fgColor-rest);\n --label-fgColor-hover: var(--label-brown-fgColor-hover);\n --label-fgColor-active: var(--label-brown-fgColor-active);\n }\n\n &[data-variant='auburn'] {\n --label-bgColor-rest: var(--label-auburn-bgColor-rest);\n --label-bgColor-hover: var(--label-auburn-bgColor-hover);\n --label-bgColor-active: var(--label-auburn-bgColor-active);\n --label-fgColor: var(--label-auburn-fgColor-rest);\n --label-fgColor-hover: var(--label-auburn-fgColor-hover);\n --label-fgColor-active: var(--label-auburn-fgColor-active);\n }\n }\n\n [data-color-mode='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n\n [data-color-mode='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n @media (prefers-color-scheme: light) {\n [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n\n @media (prefers-color-scheme: dark) {\n [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-light-rest);\n --label-bgColor-hover: var(--label-bgColor-light-hover);\n --label-bgColor-active: var(--label-bgColor-light-active);\n --label-fgColor: var(--label-fgColor-light);\n --label-fgColor-hover: var(--label-fgColor-light-hover);\n --label-fgColor-active: var(--label-fgColor-light-active);\n }\n\n [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel:not([data-variant]) {\n --label-bgColor-rest: var(--label-bgColor-dark-rest);\n --label-bgColor-hover: var(--label-bgColor-dark-hover);\n --label-bgColor-active: var(--label-bgColor-dark-active);\n --label-fgColor: var(--label-fgColor-dark);\n --label-fgColor-hover: var(--label-fgColor-dark-hover);\n --label-fgColor-active: var(--label-fgColor-dark-active);\n }\n }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
package/dist/experimental/index.d.ts CHANGED
@@ -46,4 +46,6 @@ export { IssueLabel } from './IssueLabel';
46
46
  export type { IssueLabelProps } from './IssueLabel';
47
47
  export * from '../KeybindingHint';
48
48
  export * from './Tabs';
49
+ export { TopicTag } from '../TopicTag';
50
+ export type { TopicTagProps, TopicTagGroupProps } from '../TopicTag';
49
51
  //# sourceMappingURL=index.d.ts.map
package/dist/experimental/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAC,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAA;AACjE,YAAY,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,GACZ,MAAM,cAAc,CAAA;AAErB,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAA;AAExD,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EACV,eAAe,EACf,UAAU,EACV,UAAU,IAAI,oBAAoB,EAClC,YAAY,IAAI,sBAAsB,GACvC,MAAM,eAAe,CAAA;AAEtB,cAAc,WAAW,CAAA;AAEzB,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAA;AAClC,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,YAAY,EAAC,YAAY,EAAC,MAAM,cAAc,CAAA;AAC9C,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAA;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAA;AAE9D,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAA;AAC9B,YAAY,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,UAAU,CAAA;AAExD,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAC9D,YAAY,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAE,uBAAuB,EAAE,yBAAyB,EAAC,MAAM,mBAAmB,CAAA;AAE/G,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAA;AACvC,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAA;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAA;AACjF,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AACxD,YAAY,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAEjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AAEtB,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AACpC,YAAY,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAA"}
package/dist/experimental/index.js CHANGED
@@ -4,6 +4,7 @@ export { Table } from '../DataTable/index.js';
4
4
  export { Dialog } from '../Dialog/Dialog.js';
5
5
  export { default as ActionBar } from '../ActionBar/index.js';
6
6
  export { Stack } from '../Stack/index.js';
7
+ export { TopicTag } from '../TopicTag/index.js';
7
8
  export { ButtonBase } from '../Button/ButtonBase.js';
8
9
  export { DataTable } from '../DataTable/DataTable.js';
9
10
  export { createColumnHelper } from '../DataTable/column.js';
package/dist/internal/components/{UnderlineTabbedInterface-addc90dd.css → UnderlineTabbedInterface-20c3ba3d.css} RENAMED
@@ -1,2 +1,2 @@
1
1
  .prc-components-UnderlineWrapper-oOh5J{align-items:center;box-shadow:inset 0 -1px var(--borderColor-muted,var(--color-border-muted));display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,48px);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-oOh5J[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineItemList-b23Hf{display:flex;gap:8px;list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-lJsg-,.prc-components-UnderlineItemList-b23Hf{align-items:center;position:relative}.prc-components-UnderlineItem-lJsg-{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,var(--borderRadius-small,.1875rem));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);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-lJsg-:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-lJsg-:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--color-accent-fg));outline:2px solid transparent}.prc-components-UnderlineItem-lJsg-:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-lJsg-:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,var(--color-accent-fg));outline:2px solid transparent}.prc-components-UnderlineItem-lJsg- [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-lJsg- [data-component=icon]{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-lJsg- [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-lJsg-:after{background-color:transparent;border-radius:0;bottom:calc(50% - var(--control-xlarge-size, var(--base-size-48,3rem))/2 - 1px);content:"";height:2px;pointer-events:none;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.prc-components-UnderlineItem-lJsg-[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-lJsg-[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-lJsg-[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-lJsg-[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-lJsg-[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-lJsg-[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-Ps-0Q{animation:prc-components-loadingCounterKeyFrames-wsxQl 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-wsxQl{0%{opacity:1}to{opacity:.2}}
2
- /*# sourceMappingURL=UnderlineTabbedInterface-addc90dd.css.map */
2
+ /*# sourceMappingURL=UnderlineTabbedInterface-20c3ba3d.css.map */
package/dist/internal/components/UnderlineTabbedInterface-20c3ba3d.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css"],"names":[],"mappings":"AAAA,uCAKE,kBAAmB,CAOnB,0EAAiD,CAXjD,YAAa,CAGb,0BAA2B,CAI3B,0CAA4C,CAL5C,+CAeF,CAJE,2DAEE,oBACF,CAGF,wCAEE,YAAa,CAMb,OAAQ,CAFR,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAsCF,CA5BA,oCAgBE,eAAgB,CALhB,4BAA6B,CAC7B,QAAS,CACT,2EAAoE,CANpE,oDAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CACvC,qDAAuD,CAYvD,wCAAiC,CADjC,uCAAkC,CATlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAmBF,CAPE,qBACE,0CAEE,yEAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,uEAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,uEAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,gDAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAaE,4BAA6B,CAC7B,eAAgB,CANhB,+EAAmF,CAInF,UAAW,CAFX,UAAW,CACX,mBAAoB,CAVpB,iBAAkB,CAClB,SAAU,CAaV,6BAA+B,CAN/B,UAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,yEAA8C,CAC9C,mEAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-20c3ba3d.css","sourcesContent":[".UnderlineWrapper {\n display: flex;\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n justify-content: flex-start;\n align-items: center;\n\n /* make space for the underline */\n min-height: var(--control-xlarge-size, 48px);\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\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: 8px;\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, var(--borderRadius-small));\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.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 right: 50%;\n\n /* TODO: see if we can simplify this positioning */\n\n /* 48px total height / 2 (24px) + 1px */\n /* stylelint-disable-next-line primer/spacing */\n bottom: calc(50% - calc(var(--control-xlarge-size, var(--base-size-48)) / 2 + 1px));\n width: 100%;\n height: 2px;\n pointer-events: none;\n content: '';\n background-color: transparent;\n border-radius: 0;\n transform: translate(50%, -50%);\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"]}
package/dist/internal/components/UnderlineTabbedInterface.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import './UnderlineTabbedInterface-addc90dd.css';
1
+ import './UnderlineTabbedInterface-20c3ba3d.css';
2
2
 
3
3
  var classes = {"UnderlineWrapper":"prc-components-UnderlineWrapper-oOh5J","UnderlineItemList":"prc-components-UnderlineItemList-b23Hf","UnderlineItem":"prc-components-UnderlineItem-lJsg-","LoadingCounter":"prc-components-LoadingCounter-Ps-0Q"};
4
4
 
package/generated/components.json CHANGED
@@ -274,6 +274,14 @@
274
274
  "id": "components-actionlist-features--with-custom-trailing-visuals",
275
275
  "code": "() => (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <IssueOpenedIcon />\n </ActionList.LeadingVisual>\n Issues\n <ActionList.TrailingVisual>\n <CounterLabel>20</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <GitPullRequestIcon />\n </ActionList.LeadingVisual>\n PRs\n <ActionList.TrailingVisual>\n <CounterLabel>12</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ProjectIcon />\n </ActionList.LeadingVisual>\n Projects\n <ActionList.TrailingVisual>\n <CounterLabel>2</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
276
276
  },
277
+ {
278
+ "id": "components-actionlist-features--with-keyboard-shortcuts",
279
+ "code": "() => (\n <ActionList>\n <ActionList.Item>\n New file\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+N\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n Open file\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+O\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n Save\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+S\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Divider />\n <ActionList.Item variant=\"danger\">\n Delete\n <ActionList.TrailingVisual>\n <KeybindingHint keys=\"Mod+D\" />\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
280
+ },
281
+ {
282
+ "id": "components-actionlist-features--with-trailing-count",
283
+ "code": "() => (\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <IssueOpenedIcon />\n </ActionList.LeadingVisual>\n Open issues\n <ActionList.TrailingVisual>\n <CounterLabel>24</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <GitPullRequestIcon />\n </ActionList.LeadingVisual>\n Pull requests\n <ActionList.TrailingVisual>\n <CounterLabel>8</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <ProjectIcon />\n </ActionList.LeadingVisual>\n Projects\n <ActionList.TrailingVisual>\n <CounterLabel>3</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n <ActionList.Item variant=\"danger\">\n <ActionList.LeadingVisual>\n <AlertIcon />\n </ActionList.LeadingVisual>\n Alerts\n <ActionList.TrailingVisual>\n <CounterLabel>12</CounterLabel>\n </ActionList.TrailingVisual>\n </ActionList.Item>\n </ActionList>\n)"
284
+ },
277
285
  {
278
286
  "id": "components-actionlist-features--with-trailing-action",
279
287
  "code": "() => {\n const [loadingState, setLoadingState] = React.useState(false)\n\n // Auto-toggle every 2.5 seconds to continuously show transitions\n React.useEffect(() => {\n const interval = setInterval(() => {\n setLoadingState((prev) => !prev)\n }, 2500)\n return () => clearInterval(interval)\n }, [])\n return (\n <FeatureFlags\n flags={{\n primer_react_action_list_item_as_button: true,\n }}\n >\n <ActionList>\n <ActionList.Item>\n <ActionList.LeadingVisual>\n <FileDirectoryIcon />\n </ActionList.LeadingVisual>\n Item 1 (with default TrailingAction)\n <ActionList.TrailingAction\n label=\"Expand sidebar\"\n icon={ArrowLeftIcon}\n />\n </ActionList.Item>\n <ActionList.Item>\n Item 2 (with link TrailingAction)\n <ActionList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action 1\"\n icon={ArrowRightIcon}\n />\n </ActionList.Item>\n <ActionList.Item>\n Item 3\n <ActionList.Description>\n This is an inline description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 2\" icon={BookIcon} />\n </ActionList.Item>\n <ActionList.Item>\n Item 4\n <ActionList.Description variant=\"block\">\n This is a block description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 3\" icon={BookIcon} />\n </ActionList.Item>\n <ActionList.Item>\n Item 5\n <ActionList.Description variant=\"block\">\n This is a block description.\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Some action 4\" />\n </ActionList.Item>\n <ActionList.Item>\n Item 6\n <ActionList.TrailingAction href=\"#\" as=\"a\" label=\"Some action 5\" />\n </ActionList.Item>\n <ActionList.Item>\n Icon button loading state\n <ActionList.Description>\n Shows how IconButton maintains width and centers spinner when\n loading\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Process item\"\n icon={ArrowRightIcon}\n loading\n />\n </ActionList.Item>\n <ActionList.Item>\n Icon button with transitions\n <ActionList.Description>\n Automatically toggles loading state every 2.5 seconds to show\n transitions\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Toggle loading\"\n icon={ArrowRightIcon}\n loading={loadingState}\n />\n </ActionList.Item>\n <ActionList.Item>\n Text button loading state\n <ActionList.Description>\n Shows how text button aligns spinner to the right and preserves\n width\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Save changes\" loading />\n </ActionList.Item>\n <ActionList.Item>\n Text button with transitions\n <ActionList.Description>\n Automatically toggles loading state every 2.5 seconds to show\n transitions\n </ActionList.Description>\n <ActionList.TrailingAction\n label=\"Apply settings\"\n loading={loadingState}\n />\n </ActionList.Item>\n <ActionList.LinkItem href=\"#\">\n LinkItem 1\n <ActionList.Description>\n with TrailingAction this is a long description and should not cause\n horizontal scroll on smaller screen sizes\n </ActionList.Description>\n <ActionList.TrailingAction label=\"Another action\" />\n </ActionList.LinkItem>\n <ActionList.LinkItem href=\"#\">\n LinkItem 2\n <ActionList.Description>\n with TrailingVisual this is a long description and should not cause\n horizontal scroll on smaller screen sizes\n </ActionList.Description>\n <ActionList.TrailingVisual>\n <TableIcon />\n </ActionList.TrailingVisual>\n </ActionList.LinkItem>\n <ActionList.Item inactiveText=\"Unavailable due to an outage\">\n Inactive Item\n <ActionList.Description>With TrailingAction</ActionList.Description>\n <ActionList.TrailingAction\n as=\"a\"\n href=\"#\"\n label=\"Some action 8\"\n icon={ArrowRightIcon}\n />\n </ActionList.Item>\n </ActionList>\n </FeatureFlags>\n )\n}"
@@ -1338,7 +1346,7 @@
1338
1346
  },
1339
1347
  {
1340
1348
  "id": "components-banner-features--custom-icon",
1341
- "code": "() => {\n return (\n <Banner\n title=\"Upsell\"\n description=\"An example banner with a custom icon\"\n icon={<CopilotIcon />}\n onDismiss={action('onDismiss')}\n variant=\"upsell\"\n />\n )\n}"
1349
+ "code": "() => {\n return (\n <Banner\n title=\"Upsell\"\n description=\"An example banner with a custom icon\"\n leadingVisual={<CopilotIcon />}\n onDismiss={action('onDismiss')}\n variant=\"upsell\"\n />\n )\n}"
1342
1350
  },
1343
1351
  {
1344
1352
  "id": "components-banner-examples--with-announcement",
@@ -1369,7 +1377,13 @@
1369
1377
  {
1370
1378
  "name": "icon",
1371
1379
  "type": "React.ReactNode",
1372
- "description": "Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`"
1380
+ "description": "Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`",
1381
+ "deprecated": true
1382
+ },
1383
+ {
1384
+ "name": "leadingVisual",
1385
+ "type": "React.ReactNode",
1386
+ "description": "Provide a custom leading visual for the Banner. This is only available when `variant` is `info` or `upsell`"
1373
1387
  },
1374
1388
  {
1375
1389
  "name": "onDismiss",
@@ -6225,6 +6239,24 @@
6225
6239
  "type": "'start' | 'end' | 'center'",
6226
6240
  "defaultValue": "'start'",
6227
6241
  "description": "Determines the alignment of the panel relative to the anchor. Defaults to 'start' which aligns the left edge of the panel with the left edge of the anchor."
6242
+ },
6243
+ {
6244
+ "name": "scrollContainerRef",
6245
+ "type": "React.Ref<HTMLDivElement | null>",
6246
+ "defaultValue": "undefined",
6247
+ "description": "A ref assigned to the scrollable container wrapping the ActionList"
6248
+ },
6249
+ {
6250
+ "name": "actionListProps",
6251
+ "type": "Partial<ActionListProps>",
6252
+ "defaultValue": "undefined",
6253
+ "description": "See [ActionList props](/react/ActionList#props)."
6254
+ },
6255
+ {
6256
+ "name": "focusOutBehavior",
6257
+ "type": "'start' | 'wrap'",
6258
+ "defaultValue": "'wrap'",
6259
+ "description": "Determines how keyboard focus behaves when navigating beyond the first or last item in the list."
6228
6260
  }
6229
6261
  ],
6230
6262
  "subcomponents": []
@@ -7970,6 +8002,52 @@
7970
8002
  ],
7971
8003
  "subcomponents": []
7972
8004
  },
8005
+ "topic_tag": {
8006
+ "source": "https://github.com/primer/react/tree/main/packages/react/src/TopicTag",
8007
+ "id": "topic_tag",
8008
+ "name": "TopicTag",
8009
+ "status": "draft",
8010
+ "a11yReviewed": false,
8011
+ "stories": [
8012
+ {
8013
+ "id": "experimental-components-topictag--default",
8014
+ "code": "() => <TopicTag>react</TopicTag>"
8015
+ },
8016
+ {
8017
+ "id": "experimental-components-topictag-features--as-button",
8018
+ "code": "() => <TopicTag as=\"button\">react</TopicTag>"
8019
+ },
8020
+ {
8021
+ "id": "experimental-components-topictag-features--as-group",
8022
+ "code": "() => {\n const tags = [\n 'react',\n 'nodejs',\n 'javascript',\n 'd3',\n 'teachers',\n 'community',\n 'education',\n 'programming',\n 'curriculum',\n 'math',\n ]\n return (\n <TopicTagGroup>\n {tags.map((tag) => (\n <TopicTag key={tag} href={`/topics/${tag}`}>\n {tag}\n </TopicTag>\n ))}\n </TopicTagGroup>\n )\n}"
8023
+ }
8024
+ ],
8025
+ "importPath": "@primer/react/experimental",
8026
+ "props": [
8027
+ {
8028
+ "name": "as",
8029
+ "type": "React.ElementType",
8030
+ "description": "The HTML element or React component to render as the root element"
8031
+ },
8032
+ {
8033
+ "name": "className",
8034
+ "type": "string",
8035
+ "description": "Provide a class name for styling on the outermost element"
8036
+ }
8037
+ ],
8038
+ "subcomponents": [
8039
+ {
8040
+ "name": "TopicTag.Group",
8041
+ "props": [
8042
+ {
8043
+ "name": "className",
8044
+ "type": "string",
8045
+ "description": "Provide a class name for styling on the outermost element"
8046
+ }
8047
+ ]
8048
+ }
8049
+ ]
8050
+ },
7973
8051
  "tree_view": {
7974
8052
  "source": "https://github.com/primer/react/tree/main/packages/react/src/TreeView",
7975
8053
  "id": "tree_view",