@primer/css 0.0.0-20220323031013 → 0.0.0-20220323180404

package/CHANGELOG.md

@@ -1,6 +1,96 @@
 # @primer/css
 
-## 0.0.0-20220323031013
+## 0.0.0-20220323180404
+
+### Patch Changes
+
+- [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts
+
+* Fake entry to force publishing
+
+## 19.6.0
+
+### Minor Changes
+
+- [#1989](https://github.com/primer/css/pull/1989) [`f544ef85`](https://github.com/primer/css/commit/f544ef8574a4d6e12cccf94d534ad66df3e9249a) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Make `pane` an optional region for PageLayout component
+
+### Patch Changes
+
+- [#1988](https://github.com/primer/css/pull/1988) [`e3443f1a`](https://github.com/primer/css/commit/e3443f1a69ba5a23d3e3804bf4e22d384783c443) Thanks [@simurai](https://github.com/simurai)! - Fix color-fg utilities in links
+
+* [#1985](https://github.com/primer/css/pull/1985) [`c2bd6bc9`](https://github.com/primer/css/commit/c2bd6bc9bf90686f258af11c102097d7da000a5b) Thanks [@cheshire137](https://github.com/cheshire137)! - Adding .color-bg-transparent utility class
+
+## 19.5.1
+
+### Patch Changes
+
+- [#1983](https://github.com/primer/css/pull/1983) [`07bc069e`](https://github.com/primer/css/commit/07bc069ec0faae9c0e4530e5171e3346fa643a10) Thanks [@simurai](https://github.com/simurai)! - Bump `primer/primitives` to `^7.5.1`
+
+## 19.5.0
+
+### Minor Changes
+
+- [#1948](https://github.com/primer/css/pull/1948) [`6a83a92b`](https://github.com/primer/css/commit/6a83a92b4332d577cdd72eee084e3f2c41b588ee) Thanks [@simurai](https://github.com/simurai)! - Add `open` and `closed` color roles
+
+* [#1961](https://github.com/primer/css/pull/1961) [`a35a8bdc`](https://github.com/primer/css/commit/a35a8bdcc17906848fcb486842d2345db0441c7c) Thanks [@jonrohan](https://github.com/jonrohan)! - Default .PageLayout to display block
+
+### Patch Changes
+
+- [#1954](https://github.com/primer/css/pull/1954) [`30f29d38`](https://github.com/primer/css/commit/30f29d383256a7d4023a859fdeee44471307159d) Thanks [@simurai](https://github.com/simurai)! - Fix `input-block` in `form-group`
+
+* [#1956](https://github.com/primer/css/pull/1956) [`39063461`](https://github.com/primer/css/commit/3906346182ed983d9725fd95da41b21424378b3e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.2
+
+- [#1931](https://github.com/primer/css/pull/1931) [`e5c5312e`](https://github.com/primer/css/commit/e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Page layout api updates renaming spacing options in storybook
+
+* [#1950](https://github.com/primer/css/pull/1950) [`7c85c500`](https://github.com/primer/css/commit/7c85c500569fe6e1b29665c2eed37d58625ab06f) Thanks [@hectahertz](https://github.com/hectahertz)! - Fix sequence of content in Subhead
+
+- [#1942](https://github.com/primer/css/pull/1942) [`0450ccbb`](https://github.com/primer/css/commit/0450ccbb86104564c7d4038eb68989f370014fa1) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Added line break to docs
+
+* [#1953](https://github.com/primer/css/pull/1953) [`3a91a29a`](https://github.com/primer/css/commit/3a91a29a822a28ea9679fbbb90250fc039057f23) Thanks [@hectahertz](https://github.com/hectahertz)! - Use `<h2>` instead of `<div>` on Subhead-heading docs
+
+- [#1949](https://github.com/primer/css/pull/1949) [`dab83198`](https://github.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://github.com/heiskr)! - Render headings inline when in a `<summary>`
+
+* [#1978](https://github.com/primer/css/pull/1978) [`a00e6bce`](https://github.com/primer/css/commit/a00e6bce01b368d9cb6da5ec2af1d833f4d785c1) Thanks [@langermank](https://github.com/langermank)! - Handle pointer-events on ActionList visuals
+
+- [#1977](https://github.com/primer/css/pull/1977) [`80bf9d9d`](https://github.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug Fix] Adding white-space nowrap to Labels
+
+## 19.4.0
+
+### Minor Changes
+
+- [#1937](https://github.com/primer/css/pull/1937) [`67f08009`](https://github.com/primer/css/commit/67f08009ef458088b9fda6267ab25ad6d0a514aa) Thanks [@langermank](https://github.com/langermank)! - TreeView single item nesting
+
+* [#1905](https://github.com/primer/css/pull/1905) [`50221a54`](https://github.com/primer/css/commit/50221a5486d28c54dc1f578b459addd867bd01d3) Thanks [@langermank](https://github.com/langermank)! - Refactors NavigationList to better handle accessibility. Backwards compatible for TreeView CSS.
+
+- [#1936](https://github.com/primer/css/pull/1936) [`c53ecdff`](https://github.com/primer/css/commit/c53ecdff5442cf4ac5da0d1e2ba45871ab662855) Thanks [@khiga8](https://github.com/khiga8)! - Deprecating `.tooltipped` CSS classes
+
+### Patch Changes
+
+- [#1928](https://github.com/primer/css/pull/1928) [`0fb67895`](https://github.com/primer/css/commit/0fb6789555652860cfa5178b60433eb2c3d2575c) Thanks [@simurai](https://github.com/simurai)! - Fix `<sup><a>` from getting wrapped with `[ ]`
+
+## 19.3.0
+
+### Minor Changes
+
+- [#1876](https://github.com/primer/css/pull/1876) [`bcf447ab`](https://github.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add mono font stack to <samp> tag
+
+* [#1919](https://github.com/primer/css/pull/1919) [`21085f5c`](https://github.com/primer/css/commit/21085f5c6cc538b5014a47de76642554a4291cc6) Thanks [@hectahertz](https://github.com/hectahertz)! - Add blankslate classes to replace utilities
+
+### Patch Changes
+
+- [#1892](https://github.com/primer/css/pull/1892) [`55bd498b`](https://github.com/primer/css/commit/55bd498b7357e86659ac574f0f745f7b420fb6d3) Thanks [@langermank](https://github.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios
+
+* [#1906](https://github.com/primer/css/pull/1906) [`f02d9a3e`](https://github.com/primer/css/commit/f02d9a3e4e86c2659a9f507995bcb90c5226e34e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.0 and fixing violations
+
+- [#1908](https://github.com/primer/css/pull/1908) [`84581e96`](https://github.com/primer/css/commit/84581e96aee50ff3883907dfe1069701edd1c24a) Thanks [@simurai](https://github.com/simurai)! - Reduce size of `Label--inline`
+
+* [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
+
+- [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
+
+* [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
+
+## 19.2.0
 
 ### Minor Changes
 
@@ -12,7 +102,7 @@
 
 * [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
 
-- Fake entry to force publishing
+- [#1856](https://github.com/primer/css/pull/1856) [`cbe3fb56`](https://github.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
 
 * [#1870](https://github.com/primer/css/pull/1870) [`815daff9`](https://github.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [ActionList] Add hover to `aria-current` elements and other micro interactions
 
@@ -253,7 +343,7 @@
 
 ### Patch Changes
 
-- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecyle milestones for statuses.
+- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecycle milestones for statuses.
 
 * [#1528](https://github.com/primer/css/pull/1528) [`303cacae`](https://github.com/primer/css/commit/303cacae77244a9e0de02b4caee2a8c01097aced) Thanks [@koddsson](https://github.com/koddsson)! - Convert package to a ES module
 

package/CONTRIBUTING.md

@@ -58,13 +58,15 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub
 2. Configure and install the dependencies: `npm install`
 3. Create a new branch from main `git checkout -b my-branch-name`
 4. Make your changes and commit them.
-5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
-6. Wait for CI tests to finish.
+5. Create a changeset for your changes: `npx changeset`
+    - See [changesets/changesets](https://github.com/changesets/changesets) for more information.
+6. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
+7. Wait for CI tests to finish.
    - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
    - If the tests fail, review the logs and address any issues.
    - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
-7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
-8. Pat yourself on the back and wait for your pull request to be reviewed.
+8. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
+9. Pat yourself on the back and wait for your pull request to be reviewed.
 
 Here are a few things you can do that will increase the likelihood of your pull request being accepted:
 

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300px" src="./docs/src/readme.png">
+  <img width="300px" alt="" src="./docs/src/readme.png">
 </p>
 
 <h1 align="center">Primer CSS</h1>
@@ -14,7 +14,7 @@
     <img alt="" src="https://github.com/primer/css/actions/workflows/ci.yml/badge.svg">
   </a>
   <a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
-    <img src="https://img.shields.io/github/contributors/primer/css.svg">
+    <img alt="" src="https://img.shields.io/github/contributors/primer/css.svg">
   </a>
   <a aria-label="last commit" href="https://github.com/primer/css/commits/main">
     <img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">

package/actionlist/action-list-item-divider.scss

@@ -1,10 +1,9 @@
-// emtpy divider
+// empty divider
 
 .ActionList-sectionDivider {
   // has children
   &:not(:empty) {
     display: flex;
-    // stylelint-disable-next-line primer/spacing
     padding: ($spacer-1 * 1.5) $spacer-2;
     font-size: $font-size-small;
     font-weight: $font-weight-bold;
@@ -14,6 +13,7 @@
 
   // no children
   &:empty {
+    display: block;
     height: 1px;
     padding: 0;
     // stylelint-disable-next-line primer/spacing
@@ -22,6 +22,12 @@
     background: var(--color-action-list-item-inline-divider);
     border: 0;
   }
+
+  .ActionList-sectionDivider-title {
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-muted);
+  }
 }
 
 .ActionList-sectionDivider--filled {

package/actionlist/action-list-item.scss

@@ -1,4 +1,4 @@
-// stylelint-disable max-nesting-depth, selector-max-specificity
+// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
 @mixin focusOutline {
   position: relative;
@@ -24,48 +24,57 @@
   list-style: none;
   background-color: transparent;
   border-radius: $border-radius;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
 
   &:hover,
   &:active {
     cursor: pointer;
-
-    // a href
-    .ActionList-content {
-      text-decoration: none;
-    }
   }
 
   // only hover li without list as children
-  &:not(.ActionList-item--hasSubItem) {
+  &:not(.ActionList-item--hasSubItem),
+  // target contents of first child li if sub-item (li wraps item label + nested ul)
+  &.ActionList-item--hasSubItem > .ActionList-content {
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
         background-color: var(--color-action-list-item-default-hover-bg);
+
+        &:not(.ActionList-item--navActive) {
+          // Support for "Windows high contrast mode"
+          outline: $border-style $border-width transparent;
+          outline-offset: -$border-width;
+          // stylelint-disable-next-line primer/box-shadow
+          box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
+        }
       }
     }
 
     &:active {
       background: var(--color-action-list-item-default-active-bg);
 
+      &:not(.ActionList-item--navActive) {
+        // Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
+        outline: $border-style $border-width transparent;
+        outline-offset: -$border-width;
+        // stylelint-disable-next-line primer/box-shadow
+        box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
+      }
+
       @media screen and (prefers-reduced-motion: no-preference) {
         animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
       }
 
-      // stylelint-disable primer/box-shadow
       @keyframes ActionList-item-active-bg {
         50% {
-          box-shadow: inset 0 0 0 rgba(#000, 0.04);
+          // stylelint-disable-next-line primer/box-shadow
+          box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
           transform: scale(1);
         }
 
         100% {
-          box-shadow: inset 0 3px 9px rgba(#000, 0.04);
           transform: scale(0.97);
         }
       }
-      // stylelint-enable primer/box-shadow
     }
 
     // hide dividers
@@ -76,6 +85,11 @@
         + .ActionList-item .ActionList-item-label::before {
           visibility: hidden;
         }
+
+        .ActionList-item-descriptionWrap--inline::before,
+        + .ActionList-item .ActionList-item-descriptionWrap--inline::before {
+          visibility: hidden;
+        }
       }
     }
     // stylelint-disable-next-line no-duplicate-selectors
@@ -136,101 +150,6 @@
     }
   }
 
-  // collapsible item [aria-expanded]
-
-  // nesting (single level)
-  // target items inside expanded subgroups
-  &[aria-expanded] {
-    .ActionList--subGroup {
-      @media screen and (prefers-reduced-motion: no-preference) {
-        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
-      }
-
-      .ActionList-content {
-        padding-left: $spacer-4;
-      }
-    }
-
-    // has 16px leading visual
-    .ActionList-content--visual16 + .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-compound-selectors
-      .ActionList-content {
-        padding-left: $spacer-5;
-      }
-    }
-
-    // has 20px leading visual
-    .ActionList-content--visual20 + .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-compound-selectors
-      .ActionList-content {
-        padding-left: $spacer-2 * 4.5; // 36px
-      }
-    }
-
-    // has 24px leading visual
-    .ActionList-content--visual24 + .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-compound-selectors
-      .ActionList-content {
-        padding-left: $spacer-6;
-      }
-    }
-  }
-
-  &[aria-expanded='true'] {
-    .ActionList-item-collapseIcon {
-      transition: transform 120ms linear;
-      transform: scaleY(-1);
-    }
-
-    .ActionList--subGroup {
-      height: auto;
-      overflow: visible;
-      visibility: visible;
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    &.ActionList-item--hasActiveSubItem {
-      > .ActionList-content > .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-    }
-  }
-
-  &[aria-expanded='false'] {
-    .ActionList-item-collapseIcon {
-      transition: transform 120ms linear;
-      transform: scaleY(1);
-    }
-
-    .ActionList--subGroup {
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      transform: translateY(-$spacer-3);
-    }
-
-    // show active indicator on parent collapse if child is active
-    &.ActionList-item--hasActiveSubItem {
-      background: var(--color-action-list-item-default-selected-bg);
-
-      .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-
-      &::before,
-      + .ActionList-item::before {
-        visibility: hidden;
-      }
-
-      // blue accent line
-      &::after {
-        @include activeIndicatorLine;
-      }
-    }
-  }
-
   // checkbox item [aria-checked]
   // listbox [aria-selected]
 
@@ -345,26 +264,9 @@
       }
     }
 
-    &:active {
-      background: var(--color-action-list-item-danger-active-bg);
-    }
-  }
-
-  // disabled
-  &[aria-disabled='true'] {
-    .ActionList-item-label,
-    .ActionList-item-description {
-      color: var(--color-primer-fg-disabled);
-    }
-
-    .ActionList-item-visual {
-      fill: var(--color-primer-fg-disabled);
-    }
-
-    @media (hover: hover) {
-      &:hover {
-        cursor: not-allowed;
-        background-color: transparent;
+    .ActionList-content {
+      &:active {
+        background: var(--color-action-list-item-danger-active-bg);
       }
     }
   }
@@ -376,19 +278,26 @@
   }
 }
 
-// span or a href
+// button or a href
 .ActionList-content {
   position: relative;
   display: grid;
+  width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
   font-size: $body-font-size;
   font-weight: $font-weight-normal;
   color: var(--color-fg-default);
+  text-align: left;
   user-select: none;
-  touch-action: manipulation;
+  background-color: transparent;
+  // stylelint-disable-next-line declaration-property-value-disallowed-list
+  border: none;
   border-radius: $border-radius;
   transition: $actionList-item-bg-transition;
+  touch-action: manipulation;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
   grid-template-rows: min-content;
   grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
   grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
@@ -399,10 +308,127 @@
     margin-right: $spacer-2;
   }
 
+  // state
+
+  &:hover {
+    text-decoration: none;
+  }
+
   &:focus-visible {
     @include focusOutline;
   }
 
+  // disabled
+  &[aria-disabled='true'] {
+    .ActionList-item-label,
+    .ActionList-item-description {
+      color: var(--color-primer-fg-disabled);
+    }
+
+    .ActionList-item-visual {
+      fill: var(--color-primer-fg-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+
+  // collapsible item [aria-expanded]
+
+  // nesting (single level)
+  // target items inside expanded subgroups
+  &[aria-expanded] {
+    + .ActionList--subGroup {
+      @media screen and (prefers-reduced-motion: no-preference) {
+        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
+      }
+
+      .ActionList-content {
+        padding-left: $spacer-4;
+      }
+    }
+
+    // has 16px leading visual
+    &.ActionList-content--visual16 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-5;
+      }
+    }
+
+    // has 20px leading visual
+    &.ActionList-content--visual20 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-2 * 4.5; // 36px
+      }
+    }
+
+    // has 24px leading visual
+    &.ActionList-content--visual24 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-6;
+      }
+    }
+  }
+
+  &[aria-expanded='true'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    + .ActionList--subGroup {
+      height: auto;
+      overflow: visible;
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.ActionList-content--hasActiveSubItem {
+      > .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  &[aria-expanded='false'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
+    }
+
+    + .ActionList--subGroup {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-$spacer-3);
+    }
+
+    // show active indicator on parent collapse if child is active
+    &.ActionList-content--hasActiveSubItem {
+      background: var(--color-action-list-item-default-selected-bg);
+
+      .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+
+      &::before,
+      + .ActionList-item::before {
+        visibility: hidden;
+      }
+
+      // blue accent line
+      &::after {
+        @include activeIndicatorLine;
+      }
+    }
+  }
+
   // sizes
 
   &.ActionList-content--sizeMedium {
@@ -475,6 +501,7 @@
 
 // inline
 .ActionList-item-descriptionWrap--inline {
+  position: relative;
   flex-direction: row;
   align-items: baseline;
 
@@ -499,6 +526,7 @@
   display: flex;
   min-height: $actionList-item-height-sm;
   color: var(--color-fg-muted); // if visual is text
+  pointer-events: none;
   fill: var(--color-fg-muted);
   align-items: center;
 }