@primer/css 0.0.0-2021926165249 → 0.0.0-2021926222917

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/css
 
-## 0.0.0-2021926165249
+## 0.0.0-2021926222917
 
 ### Minor Changes
 

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

@@ -1,26 +1,26 @@
-@import './action-list-helpers-temporary.scss';
+// stylelint-disable primer/spacing
 
 // emtpy divider
 
 .ActionList-sectionDivider {
   // has children
   &:not(:empty) {
-    padding: (($spacer-5 - $s-20) / 2) $spacer-2;
+    display: flex;
+    padding: ($spacer-1 * 1.5) $spacer-2;
     font-size: $font-size-small;
     font-weight: $font-weight-bold;
     color: var(--color-fg-muted);
-    display: flex;
     flex-direction: column;
   }
 
   // no children
   &:empty {
     height: 1px;
-    background: var(--color-action-list-item-inline-divider);
-    border: 0;
-    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
     padding: 0;
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
     list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
   }
 
   // secondary description text
@@ -33,8 +33,8 @@
 .ActionList-sectionDivider--filled {
   margin: $spacer-2 ($spacer-2 * -1);
   background: var(--color-canvas-subtle);
-  border-top: 1px solid var(--color-scale-gray-2);
-  border-bottom: 1px solid var(--color-scale-gray-2);
+  border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
+  border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
 
   // if no children, treat as divider
   &:empty {

package/actionlist/action-list-item.scss

@@ -1,17 +1,18 @@
-@import './action-list-helpers-temporary.scss';
+// stylelint-disable selector-max-specificity, max-nesting-depth, primer/spacing, no-duplicate-selectors
+@import './action-list-variables.scss';
 
 @mixin focusOutline {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
   position: relative;
   z-index: 1;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
 }
 
 // <li>
 .ActionList-item {
-  list-style: none;
   position: relative;
-  border-radius: $border-radius-2;
+  list-style: none;
+  border-radius: $border-radius;
 
   &:hover,
   &:active {
@@ -26,36 +27,37 @@
   // only hover li without list as children
   &:not(.ActionList-item--has-sub-item) {
     &:hover {
-      background-color: var(--color-action-list-item-default-hover-bg);
       cursor: pointer;
+      background-color: var(--color-action-list-item-default-hover-bg);
     }
 
     &:active {
       background: var(--color-action-list-item-default-active-bg);
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: ActionList-item-active-bg 4s forwards $ease-out-cubic;
+        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 {
-        0% {
-        }
         50% {
-          transform: scale(1);
           box-shadow: inset 0 0 0 rgba(#000, 0.04);
+          transform: scale(1);
         }
+
         100% {
-          transform: scale(0.97);
           box-shadow: inset 0 3px 9px rgba(#000, 0.04);
+          transform: scale(0.97);
         }
       }
+      // stylelint-enable primer/box-shadow
     }
 
     &:hover,
     &:active {
       // hide dividers
-      .ActionList-item-content--label:before,
-      + .ActionList-item .ActionList-item-content--label:before {
+      .ActionList-item-content--label::before,
+      + .ActionList-item .ActionList-item-content--label::before {
         visibility: hidden;
       }
     }
@@ -76,21 +78,22 @@
 
   &.ActionList-item--nav-active:not(.ActionList-item--danger) {
     background: var(--color-action-list-item-default-selected-bg);
-    &:before,
-    + .ActionList-item:before {
+
+    &::before,
+    + .ActionList-item::before {
       visibility: hidden;
     }
 
     // blue accent line
-    &:after {
-      content: '';
-      width: $spacer-1;
-      height: $spacer-4;
-      border-radius: $border-radius-1;
+    &::after {
       position: absolute;
+      top: calc(50% - ($spacer-4 * 0.5));
       left: -$actionList-item-padding-horizontal;
-      top: calc(50% - (24px / 2));
+      width: $spacer-1;
+      height: $spacer-4;
+      content: '';
       background: var(--color-accent-fg);
+      border-radius: $border-radius;
     }
   }
 
@@ -98,8 +101,8 @@
 
   &[aria-expanded='true'] {
     .ActionList-item-content--collapseIcon {
-      transform: scaleY(-1);
       transition: transform 120ms linear;
+      transform: scaleY(-1);
     }
 
     .ActionList--sub-group {
@@ -115,8 +118,8 @@
 
   &[aria-expanded='false'] {
     .ActionList-item-content--collapseIcon {
-      transform: scaleY(1);
       transition: transform 120ms linear;
+      transform: scaleY(1);
     }
 
     .ActionList--sub-group {
@@ -133,7 +136,7 @@
     .ActionList-item-content--multiSelect-checkmark {
       visibility: visible;
       opacity: 1;
-      transition: visibility 0s linear 0s, opacity $actionList-item-checkmark-transition-timing;
+      transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
     }
 
     // singleselect checkmark
@@ -165,15 +168,16 @@
     .ActionList-item-content--multiSelect-checkmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0s linear $actionList-item-checkmark-transition-timing,
+      transition:
+ visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
     // singleselect checkmark
     .ActionList-item-content--singleSelect {
       visibility: hidden;
-      clip-path: inset(16px 0 0 0);
       transition: visibility 0s linear 200ms;
+      clip-path: inset(16px 0 0 0);
 
       @media screen and (prefers-reduced-motion: no-preference) {
         animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
@@ -199,6 +203,7 @@
     from {
       clip-path: inset(16px 0 0 0);
     }
+
     to {
       clip-path: inset(0 0 0 0);
     }
@@ -208,6 +213,7 @@
     from {
       clip-path: inset(0 0 0 0);
     }
+
     to {
       clip-path: inset(16px 0 0 0);
     }
@@ -223,6 +229,10 @@
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         background: var(--color-action-list-item-danger-hover-bg);
+
+        .ActionList-item-content--label {
+          color: var(--color-action-list-item-danger-hover-text);
+        }
       }
     }
 
@@ -239,21 +249,21 @@
 
 // span or a href
 .ActionList-item-content {
+  position: relative;
   display: grid;
-  grid-template-rows: minmax(20px, max-content); // 20px + 12px padding [32]
-  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
-  grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
-  align-items: center;
   padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
-  position: relative;
-  border-radius: $border-radius-2;
   font-weight: $font-weight-normal;
   color: var(--color-fg-default);
   user-select: none;
+  border-radius: $border-radius;
   transition: $actionList-item-bg-transition;
+  grid-template-rows: minmax($actionList-item-height-sm, max-content); // 20px with 12px padding = [32px total]
+  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
+  grid-template-columns: min-content min-content minmax(min-content, auto) min-content min-content;
+  align-items: center;
 
   // column-gap persists with empty grid-areas, margin applies only when children exist
-  & > :not(:last-child) {
+  > :not(:last-child) {
     margin-right: $spacer-2;
   }
 
@@ -264,16 +274,16 @@
   // sizes
 
   &.ActionList-item-content--sizeMedium {
-    grid-template-rows: minmax(28px, max-content); // 28px + 12px padding [40]
+    grid-template-rows: minmax($actionList-item-height-md, max-content); // 28px with 12px padding = [40px total]
   }
 
   &.ActionList-item-content--sizeLarge {
-    grid-template-rows: minmax(36px, max-content); // 36px + 12px padding [48]
+    grid-template-rows: minmax($actionList-item-height-lg, max-content); // 36px with 12px padding = [48px total]
   }
 
   // On pointer:coarse (mobile), all list items are large
   @media (pointer: coarse) {
-    grid-template-rows: minmax(36px, max-content);
+    grid-template-rows: minmax($actionList-item-height-lg, max-content);
   }
 
   &.ActionList-item-content--blockDescription {
@@ -347,18 +357,18 @@
 // span wrapping svg or text
 .ActionList-item-content--visual,
 .ActionList-item-content--action {
-  min-height: 20px;
   display: flex;
-  align-items: center;
-  fill: var(--color-fg-muted);
+  min-height: $actionList-item-height-sm;
   color: var(--color-fg-muted); // if visual is text
+  fill: var(--color-fg-muted);
+  align-items: center;
 }
 
 // text
 .ActionList-item-content--label {
+  position: relative; // for pseudo dividers
   font-weight: $font-weight-normal;
   color: var(--color-fg-default);
-  position: relative; // for pseudo dividers
 }
 
 // nested lists (only supports 1 level currently)
@@ -371,27 +381,27 @@
 // no leading visual
 .ActionList--sub-group {
   .ActionList-item--sub-item {
-    padding-left: 16px;
+    padding-left: $spacer-3;
   }
 }
 
 // has 16px leading visual
 .ActionList-item-content--visual--16 + .ActionList--sub-group {
   .ActionList-item--sub-item {
-    padding-left: 24px;
+    padding-left: $spacer-4;
   }
 }
 
 // has 20px leading visual
 .ActionList-item-content--visual--20 + .ActionList--sub-group {
   .ActionList-item--sub-item {
-    padding-left: 28px;
+    padding-left: $spacer-3 * 1.75;
   }
 }
 
 // has 24px leading visual
 .ActionList-item-content--visual--24 + .ActionList--sub-group {
   .ActionList-item--sub-item {
-    padding-left: 32px;
+    padding-left: $spacer-5;
   }
 }

package/actionlist/action-list-variables.scss

@@ -0,0 +1,7 @@
+$actionList-item-height-sm: 20px !default;
+$actionList-item-height-md: 28px !default;
+$actionList-item-height-lg: 36px !default;
+$actionList-item-padding-vertical: $spacer-1 * 1.5 !default;
+$actionList-item-padding-horizontal: $spacer-2 !default;
+$actionList-item-bg-transition: background 33.333ms linear !default; // 2 frames on a 60hz monitor
+$actionList-item-checkmark-transition-timing: 50ms !default;

package/actionlist/action-list.scss

@@ -1,34 +1,35 @@
-@import './action-list-helpers-temporary.scss';
+// stylelint-disable selector-max-specificity, selector-max-compound-selectors
+@import './action-list-variables.scss';
 
 // <ul>
 .ActionList {
-  padding: $actionList-padding;
+  padding: $spacer-2;
 }
 
 // dividers
 
 .ActionList--divided {
-  .ActionList-item-content--label:before {
-    content: '';
-    display: block;
+  .ActionList-item-content--label::before {
     position: absolute;
+    top: -$actionList-item-padding-vertical;
+    display: block;
     width: 100%;
     height: 1px;
+    content: '';
     background: var(--color-action-list-item-inline-divider);
-    top: -$actionList-item-padding-vertical;
   }
 
   // hide divider if item is active
   .ActionList-item--nav-active {
-    .ActionList-item-content--label:before,
-    + .ActionList-item .ActionList-item-content--label:before {
+    .ActionList-item-content--label::before,
+    + .ActionList-item .ActionList-item-content--label::before {
       visibility: hidden;
     }
   }
 }
 
-.ActionList-item:first-of-type .ActionList-item-content--label:before,
-.ActionList-sectionDivider + .ActionList-item .ActionList-item-content--label:before,
-.ActionList-sectionHeader + .ActionList-item .ActionList-item-content--label:before {
+.ActionList-item:first-of-type .ActionList-item-content--label::before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-content--label::before,
+.ActionList-sectionHeader + .ActionList-item .ActionList-item-content--label::before {
   visibility: hidden;
 }

package/actionlist/index.scss

@@ -1,4 +1,5 @@
 @import '../support/index.scss';
+@import './action-list-variables.scss';
 @import './action-list.scss';
 @import './action-list-item.scss';
 @import './action-list-item-divider.scss';

package/dist/actionlist.css

@@ -1,2 +1,2 @@
-.ActionList{padding:8px}.ActionList--divided .ActionList-item-content--label:before{content:"";display:block;position:absolute;width:100%;height:1px;background:var(--color-action-list-item-inline-divider);top:-6px}.ActionList--divided .ActionList-item--nav-active .ActionList-item-content--label:before,.ActionList--divided .ActionList-item--nav-active+.ActionList-item .ActionList-item-content--label:before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-content--label:before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-content--label:before,.ActionList-sectionHeader+.ActionList-item .ActionList-item-content--label:before{visibility:hidden}.ActionList-item{list-style:none;position:relative;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-item-content,.ActionList-item:active .ActionList-item-content{text-decoration:none}.ActionList-item:not(.ActionList-item--has-sub-item):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionList-item:not(.ActionList-item--has-sub-item):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--has-sub-item):active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{transform:scale(1);box-shadow:inset 0 0 0 rgba(0,0,0,.04)}100%{transform:scale(0.97);box-shadow:inset 0 3px 9px rgba(0,0,0,.04)}}.ActionList-item:not(.ActionList-item--has-sub-item):hover .ActionList-item-content--label:before,.ActionList-item:not(.ActionList-item--has-sub-item):hover+.ActionList-item .ActionList-item-content--label:before,.ActionList-item:not(.ActionList-item--has-sub-item):active .ActionList-item-content--label:before,.ActionList-item:not(.ActionList-item--has-sub-item):active+.ActionList-item .ActionList-item-content--label:before{visibility:hidden}.ActionList-item.ActionList-item--has-sub-item>.ActionList-item-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger):before,.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)+.ActionList-item:before{visibility:hidden}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger):after{content:"";width:4px;height:24px;border-radius:4px;position:absolute;left:-8px;top:calc(50% - 12px);background:var(--color-accent-fg)}.ActionList-item[aria-expanded=true] .ActionList-item-content--collapseIcon{transform:scaleY(-1);transition:transform 120ms linear}.ActionList-item[aria-expanded=true] .ActionList--sub-group{display:block}.ActionList-item[aria-expanded=true].ActionList-item--has-sub-item>.ActionList-item-content>.ActionList-item-content--label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-content--collapseIcon{transform:scaleY(1);transition:transform 120ms linear}.ActionList-item[aria-expanded=false] .ActionList--sub-group{display:none}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect-checkmark{visibility:visible;opacity:1;transition:visibility 0s linear 0s,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=true] .ActionList-item-content--singleSelect{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=true] .ActionList-item-content--singleSelect{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-checkmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect-checkmark{visibility:hidden;opacity:0;transition:visibility 0s linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{visibility:hidden;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0);transition:visibility 0s linear 200ms}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect-rectangle{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-content--label{color:var(--color-danger-fg)}@media(hover: hover)and (pointer: fine){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item .ActionList{padding:unset}.ActionList-item-content{display:grid;grid-template-rows:minmax(20px, max-content);grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(min-content, auto) min-content min-content;align-items:center;padding:6px 8px;position:relative;border-radius:6px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;transition:background 33.333ms linear}.ActionList-item-content>:not(:last-child){margin-right:8px}.ActionList-item-content:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent-fg);position:relative;z-index:1}.ActionList-item-content.ActionList-item-content--sizeMedium{grid-template-rows:minmax(28px, max-content)}.ActionList-item-content.ActionList-item-content--sizeLarge{grid-template-rows:minmax(36px, max-content)}@media(pointer: coarse){.ActionList-item-content{grid-template-rows:minmax(36px, max-content)}}.ActionList-item-content.ActionList-item-content--blockDescription .ActionList-item-content--visual{place-self:start}.ActionList-item-content--action-leading{grid-area:leadingAction}.ActionList-item-content--visual-leading{grid-area:leadingVisual}.ActionList-item-content--label{grid-area:label}.ActionList-item-content--visual-trailing{grid-area:trailingVisual}.ActionList-item-content--action-trailing{grid-area:trailingAction}.ActionList-item-content--label-blockDescription,.ActionList-item-content--label-inlineDescription{grid-area:label;display:flex}.ActionList-item-content--label-blockDescription .ActionList-item-content--label,.ActionList-item-content--label-inlineDescription .ActionList-item-content--label{font-weight:600}.ActionList-item-content--label-blockDescription{flex-direction:column}.ActionList-item-content--label-blockDescription .ActionList-item-content--description{margin-top:4px}.ActionList-item-content--label-inlineDescription{flex-direction:row;align-items:baseline}.ActionList-item-content--label-inlineDescription .ActionList-item-content--description{margin-left:8px}.ActionList-item-content--description{font-size:12px;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-content--visual,.ActionList-item-content--action{min-height:20px;display:flex;align-items:center;fill:var(--color-fg-muted);color:var(--color-fg-muted)}.ActionList-item-content--label{font-weight:400;color:var(--color-fg-default);position:relative}.ActionList-item--sub-item>.ActionList-item-content{font-size:12px}.ActionList--sub-group .ActionList-item--sub-item{padding-left:16px}.ActionList-item-content--visual--16+.ActionList--sub-group .ActionList-item--sub-item{padding-left:24px}.ActionList-item-content--visual--20+.ActionList--sub-group .ActionList-item--sub-item{padding-left:28px}.ActionList-item-content--visual--24+.ActionList--sub-group .ActionList-item--sub-item{padding-left:32px}.ActionList-sectionDivider:not(:empty){padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);display:flex;flex-direction:column}.ActionList-sectionDivider:empty{height:1px;background:var(--color-action-list-item-inline-divider);border:0;margin:7px -8px 8px;padding:0;list-style:none}.ActionList-sectionDivider .ActionList-sectionDivider--description{font-size:12px;font-weight:400}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-scale-gray-2);border-bottom:1px solid var(--color-scale-gray-2)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
+.ActionList{padding:8px}.ActionList--divided .ActionList-item-content--label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item--nav-active .ActionList-item-content--label::before,.ActionList--divided .ActionList-item--nav-active+.ActionList-item .ActionList-item-content--label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-content--label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-content--label::before,.ActionList-sectionHeader+.ActionList-item .ActionList-item-content--label::before{visibility:hidden}.ActionList-item{position:relative;list-style:none;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-item-content,.ActionList-item:active .ActionList-item-content{text-decoration:none}.ActionList-item:not(.ActionList-item--has-sub-item):hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--has-sub-item):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--has-sub-item):active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 0 0 rgba(0,0,0,.04);transform:scale(1)}100%{box-shadow:inset 0 3px 9px rgba(0,0,0,.04);transform:scale(0.97)}}.ActionList-item:not(.ActionList-item--has-sub-item):hover .ActionList-item-content--label::before,.ActionList-item:not(.ActionList-item--has-sub-item):hover+.ActionList-item .ActionList-item-content--label::before,.ActionList-item:not(.ActionList-item--has-sub-item):active .ActionList-item-content--label::before,.ActionList-item:not(.ActionList-item--has-sub-item):active+.ActionList-item .ActionList-item-content--label::before{visibility:hidden}.ActionList-item.ActionList-item--has-sub-item>.ActionList-item-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--nav-active:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-expanded=true] .ActionList-item-content--collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--sub-group{display:block}.ActionList-item[aria-expanded=true].ActionList-item--has-sub-item>.ActionList-item-content>.ActionList-item-content--label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-content--collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--sub-group{display:none}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect-checkmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=true] .ActionList-item-content--singleSelect{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=true] .ActionList-item-content--singleSelect{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=true] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-checkmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect-checkmark,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect-checkmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-content--singleSelect,.ActionList-item[aria-selected=false] .ActionList-item-content--singleSelect{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect .ActionList-item-content--multiSelect-rectangle{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-content--multiSelect-rectangle,.ActionList-item[aria-selected=false] .ActionList-item-content--multiSelect-rectangle{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-content--label{color:var(--color-danger-fg)}@media(hover: hover)and (pointer: fine){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-content--label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item .ActionList{padding:unset}.ActionList-item-content{position:relative;display:grid;padding:6px 8px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:minmax(20px, max-content);grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(min-content, auto) min-content min-content;align-items:center}.ActionList-item-content>:not(:last-child){margin-right:8px}.ActionList-item-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-item-content.ActionList-item-content--sizeMedium{grid-template-rows:minmax(28px, max-content)}.ActionList-item-content.ActionList-item-content--sizeLarge{grid-template-rows:minmax(36px, max-content)}@media(pointer: coarse){.ActionList-item-content{grid-template-rows:minmax(36px, max-content)}}.ActionList-item-content.ActionList-item-content--blockDescription .ActionList-item-content--visual{place-self:start}.ActionList-item-content--action-leading{grid-area:leadingAction}.ActionList-item-content--visual-leading{grid-area:leadingVisual}.ActionList-item-content--label{grid-area:label}.ActionList-item-content--visual-trailing{grid-area:trailingVisual}.ActionList-item-content--action-trailing{grid-area:trailingAction}.ActionList-item-content--label-blockDescription,.ActionList-item-content--label-inlineDescription{grid-area:label;display:flex}.ActionList-item-content--label-blockDescription .ActionList-item-content--label,.ActionList-item-content--label-inlineDescription .ActionList-item-content--label{font-weight:600}.ActionList-item-content--label-blockDescription{flex-direction:column}.ActionList-item-content--label-blockDescription .ActionList-item-content--description{margin-top:4px}.ActionList-item-content--label-inlineDescription{flex-direction:row;align-items:baseline}.ActionList-item-content--label-inlineDescription .ActionList-item-content--description{margin-left:8px}.ActionList-item-content--description{font-size:12px;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-content--visual,.ActionList-item-content--action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-content--label{position:relative;font-weight:400;color:var(--color-fg-default)}.ActionList-item--sub-item>.ActionList-item-content{font-size:12px}.ActionList--sub-group .ActionList-item--sub-item{padding-left:16px}.ActionList-item-content--visual--16+.ActionList--sub-group .ActionList-item--sub-item{padding-left:24px}.ActionList-item-content--visual--20+.ActionList--sub-group .ActionList-item--sub-item{padding-left:28px}.ActionList-item-content--visual--24+.ActionList--sub-group .ActionList-item--sub-item{padding-left:32px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider .ActionList-sectionDivider--description{font-size:12px;font-weight:400}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
 /*# sourceMappingURL=actionlist.css.map */

package/dist/actionlist.css.map

@@ -1 +1 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"AAgiBA,YAAA,WAAA,CAAA,4DAAA,UAAA,CAAA,aAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,UAAA,CAAA,uDAAA,CAAA,QAAA,CAAA,mMAAA,iBAAA,CAAA,2OAAA,iBAAA,CAAA,iBAAA,eAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,+CAAA,cAAA,CAAA,iGAAA,oBAAA,CAAA,2DAAA,+DAAA,CAAA,cAAA,CAAA,4DAAA,0DAAA,CAAA,0DAAA,4DAAA,8EAAA,CAAA,CAAA,qCAAA,IAAA,kBAAA,CAAA,sCAAA,CAAA,KAAA,qBAAA,CAAA,0CAAA,CAAA,CAAA,4aAAA,iBAAA,CAAA,8EAAA,+DAAA,CAAA,2EAAA,4DAAA,CAAA,qLAAA,iBAAA,CAAA,iFAAA,UAAA,CAAA,SAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,iCAAA,CAAA,4EAAA,oBAAA,CAAA,iCAAA,CAAA,4DAAA,aAAA,CAAA,4HAAA,eAAA,CAAA,6EAAA,mBAAA,CAAA,iCAAA,CAAA,6DAAA,YAAA,CAAA,yKAAA,kBAAA,CAAA,SAAA,CAAA,+CAAA,CAAA,uJAAA,kBAAA,CAAA,0DAAA,uJAAA,kEAAA,CAAA,CAAA,qPAAA,2BAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,qPAAA,gCAAA,CAAA,2KAAA,iBAAA,CAAA,SAAA,CAAA,iDAAA,CAAA,yJAAA,iBAAA,CAAA,mCAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,0DAAA,yJAAA,mEAAA,CAAA,CAAA,uPAAA,gCAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,2KAAA,gCAAA,CAAA,4CAAA,CAAA,uBAAA,KAAA,mCAAA,CAAA,2BAAA,CAAA,GAAA,gCAAA,CAAA,wBAAA,CAAA,CAAA,wBAAA,KAAA,gCAAA,CAAA,wBAAA,CAAA,GAAA,mCAAA,CAAA,2BAAA,CAAA,CAAA,yEAAA,4BAAA,CAAA,wCAAA,+CAAA,wDAAA,CAAA,CAAA,gDAAA,yDAAA,CAAA,6BAAA,aAAA,CAAA,yBAAA,YAAA,CAAA,4CAAA,CAAA,qFAAA,CAAA,+FAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,qCAAA,CAAA,2CAAA,gBAAA,CAAA,uCAAA,YAAA,CAAA,2CAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,6DAAA,4CAAA,CAAA,4DAAA,4CAAA,CAAA,wBAAA,yBAAA,4CAAA,CAAA,CAAA,oGAAA,gBAAA,CAAA,yCAAA,uBAAA,CAAA,yCAAA,uBAAA,CAAA,gCAAA,eAAA,CAAA,0CAAA,wBAAA,CAAA,0CAAA,wBAAA,CAAA,mGAAA,eAAA,CAAA,YAAA,CAAA,mKAAA,eAAA,CAAA,iDAAA,qBAAA,CAAA,uFAAA,cAAA,CAAA,kDAAA,kBAAA,CAAA,oBAAA,CAAA,wFAAA,eAAA,CAAA,sCAAA,cAAA,CAAA,eAAA,CAAA,2BAAA,CAAA,kEAAA,eAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,gCAAA,eAAA,CAAA,6BAAA,CAAA,iBAAA,CAAA,oDAAA,cAAA,CAAA,kDAAA,iBAAA,CAAA,uFAAA,iBAAA,CAAA,uFAAA,iBAAA,CAAA,uFAAA,iBAAA,CAAA,uCAAA,eAAA,CAAA,cAAA,CAAA,eAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,iCAAA,UAAA,CAAA,uDAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,eAAA,CAAA,mEAAA,cAAA,CAAA,eAAA,CAAA,mCAAA,eAAA,CAAA,qCAAA,CAAA,8CAAA,CAAA,iDAAA,CAAA,yCAAA,UAAA,CAAA,qBAAA,CAAA,+CAAA,YAAA","file":"actionlist.css"}
+{"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}