@primer/css 18.1.0 → 18.2.0-rc.aef9b229

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/css
 
+## 18.2.0
+
+### Minor Changes
+
+- [#1657](https://github.com/primer/css/pull/1657) [`e7543009`](https://github.com/primer/css/commit/e754300989a4e762091a957edd324b26682b104a) Thanks [@langermank](https://github.com/langermank)! - ActionList Component: Primer CSS Implementation. Adding a new component `ActionList` to learn more checkout the docs [https://primer.style/css/components/action-list](https://primer.style/css/components/action-list).
+
+### Patch Changes
+
+- [#1731](https://github.com/primer/css/pull/1731) [`832e9988`](https://github.com/primer/css/commit/832e99886df66ea5860d725517aeb9d5f178dd58) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/primitives@6.1.0
+
 ## 18.1.0
 
 ### Minor Changes

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

@@ -0,0 +1,42 @@
+// emtpy 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;
+    color: var(--color-fg-muted);
+    flex-direction: column;
+  }
+
+  // no children
+  &:empty {
+    height: 1px;
+    padding: 0;
+    // stylelint-disable-next-line primer/spacing
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+    list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin: $spacer-2 ($spacer-2 * -1);
+  background: var(--color-canvas-subtle);
+  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 {
+    height: $spacer-2;
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}

package/actionlist/action-list-item.scss

@@ -0,0 +1,444 @@
+@mixin focusOutline {
+  position: relative;
+  z-index: 1;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
+}
+
+// <li>
+.ActionList-item {
+  position: relative;
+  list-style: none;
+  background-color: transparent;
+  border-radius: $border-radius;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+
+    // a href
+    .ActionList-content {
+      text-decoration: none;
+    }
+  }
+
+  // only hover li without list as children
+  &:not(.ActionList-item--hasSubItem) {
+    &:hover {
+      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 cubic-bezier(0.33, 1, 0.68, 1);
+      }
+
+      // stylelint-disable primer/box-shadow
+      @keyframes ActionList-item-active-bg {
+        // stylelint-disable-next-line max-nesting-depth
+        50% {
+          box-shadow: inset 0 0 0 rgba(#000, 0.04);
+          transform: scale(1);
+        }
+
+        // stylelint-disable-next-line max-nesting-depth
+        100% {
+          box-shadow: inset 0 3px 9px rgba(#000, 0.04);
+          transform: scale(0.97);
+        }
+      }
+      // stylelint-enable primer/box-shadow
+    }
+
+    &:hover,
+    &:active {
+      // hide dividers
+      // stylelint-disable-next-line selector-max-specificity
+      .ActionList-item-label::before,
+      + .ActionList-item .ActionList-item-label::before {
+        visibility: hidden;
+      }
+    }
+  }
+
+  // target contents of li if sub-item (li wraps item label + nested ul)
+  // collapse styles here
+  &.ActionList-item--hasSubItem {
+    // first child
+    > .ActionList-content {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+  }
+
+  // active state [aria-current]
+
+  &.ActionList-item--navActive:not(.ActionList-item--danger) {
+    background: var(--color-action-list-item-default-selected-bg);
+
+    // stylelint-disable-next-line selector-max-specificity
+    &::before,
+    + .ActionList-item::before {
+      visibility: hidden;
+    }
+
+    // blue accent line
+    &::after {
+      position: absolute;
+      top: calc(50% - 12px);
+      left: -$actionList-item-padding-horizontal;
+      width: $spacer-1;
+      height: $spacer-4;
+      content: '';
+      background: var(--color-accent-fg);
+      border-radius: $border-radius;
+    }
+  }
+
+  // collapsible item [aria-expanded]
+
+  &[aria-expanded='true'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    .ActionList--subGroup {
+      display: block;
+    }
+
+    &.ActionList-item--hasSubItem {
+      // stylelint-disable-next-line selector-max-specificity
+      > .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 {
+      display: none;
+    }
+  }
+
+  // checkbox item [aria-checked]
+  // listbox [aria-selected]
+
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    // multiselect checkmark
+    .ActionList-item-multiSelectCheckmark {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0 linear 0, opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: visible;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: $border-width;
+      }
+
+      .ActionList-item-multiSelectCheckmark {
+        fill: var(--color-fg-on-emphasis);
+      }
+    }
+  }
+
+  &[aria-checked='false'],
+  &[aria-selected='false'] {
+    // multiselect checkmark
+    .ActionList-item-multiSelectCheckmark {
+      visibility: hidden;
+      opacity: 0;
+      transition:
+ visibility 0 linear $actionList-item-checkmark-transition-timing,
+        opacity $actionList-item-checkmark-transition-timing;
+    }
+
+    // singleselect checkmark
+    .ActionList-item-singleSelectCheckmark {
+      visibility: hidden;
+      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;
+      }
+    }
+
+    // checkbox
+    .ActionList-item-multiSelectIcon {
+      .ActionList-item-multiSelectIconRect {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: $border-width;
+      }
+    }
+
+    .ActionList-item-multiSelectIconRect {
+      fill: var(--color-canvas-default);
+      border: $border-width $border-style var(--color-border-default);
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+
+  // variants
+
+  // danger
+  &.ActionList-item--danger {
+    .ActionList-item-label {
+      color: var(--color-danger-fg);
+    }
+
+    .ActionList-item-visual {
+      color: var(--color-danger-fg);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: var(--color-action-list-item-danger-hover-bg);
+
+        // stylelint-disable-next-line max-nesting-depth
+        .ActionList-item-label {
+          color: var(--color-action-list-item-danger-hover-text);
+        }
+      }
+    }
+
+    &: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) and (pointer: fine) {
+      &:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+
+  // if nested list exists, remove default padding
+  .ActionList {
+    // stylelint-disable-next-line primer/spacing
+    padding: unset;
+  }
+}
+
+// span or a href
+.ActionList-content {
+  position: relative;
+  display: grid;
+  // stylelint-disable-next-line primer/spacing
+  padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
+  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: min-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;
+
+  // column-gap persists with empty grid-areas, margin applies only when children exist
+  > :not(:last-child) {
+    margin-right: $spacer-2;
+  }
+
+  &:focus-visible {
+    @include focusOutline;
+  }
+
+  // sizes
+
+  &.ActionList-content--sizeMedium {
+    // 44px total height
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
+  }
+
+  &.ActionList-content--sizeLarge {
+    // 48px total height
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
+  }
+
+  // On pointer:coarse (mobile), all list items are large
+  @media (pointer: coarse) {
+    // stylelint-disable-next-line primer/spacing
+    padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
+  }
+
+  &.ActionList-content--blockDescription {
+    // if leading/trailing visual, align with first line of content
+    .ActionList-item-visual {
+      place-self: start;
+    }
+  }
+}
+
+// place children on grid
+
+.ActionList-item-action--leading {
+  grid-area: leadingAction;
+}
+
+.ActionList-item-visual--leading {
+  grid-area: leadingVisual;
+}
+
+.ActionList-item-label {
+  grid-area: label;
+}
+
+.ActionList-item-visual--trailing {
+  grid-area: trailingVisual;
+}
+
+.ActionList-item-action--trailing {
+  grid-area: trailingAction;
+}
+
+// wrapper span
+// default block
+.ActionList-item-descriptionWrap {
+  grid-area: label;
+  display: flex;
+  flex-direction: column;
+
+  .ActionList-item-description {
+    margin-top: $spacer-1;
+  }
+
+  .ActionList-item-label {
+    font-weight: $font-weight-bold;
+  }
+}
+
+// inline
+.ActionList-item-descriptionWrap--inline {
+  flex-direction: row;
+  align-items: baseline;
+
+  .ActionList-item-description {
+    // stylelint-disable-next-line primer/spacing
+    margin-left: $actionList-item-padding-horizontal;
+  }
+}
+
+// description
+.ActionList-item-description {
+  font-size: $font-size-small;
+  font-weight: $font-weight-normal;
+  line-height: $lh-default;
+  color: var(--color-fg-muted);
+}
+
+// helper for grid alignment with multi-line content
+// span wrapping svg or text
+.ActionList-item-visual,
+.ActionList-item-action {
+  display: flex;
+  min-height: $actionList-item-height-sm;
+  color: var(--color-fg-muted); // if visual is text
+  fill: var(--color-fg-muted);
+  align-items: center;
+}
+
+// text
+// stylelint-disable-next-line no-duplicate-selectors
+.ActionList-item-label {
+  position: relative; // for pseudo dividers
+  font-weight: $font-weight-normal;
+  // we need a strict value here for grid alignment
+  // stylelint-disable-next-line primer/typography
+  line-height: $actionList-item-label-line-height;
+  color: var(--color-fg-default);
+}
+
+// nested lists (only supports 1 level currently)
+// target ActionList-item--subItem for padding-left to maintain :active :after state
+
+.ActionList-item--subItem > .ActionList-content {
+  font-size: $font-size-small;
+}
+
+// no leading visual
+.ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-3;
+  }
+}
+
+// has 16px leading visual
+.ActionList-content--visual16 + .ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-4;
+  }
+}
+
+// has 20px leading visual
+.ActionList-content--visual20 + .ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-3 * 1.75;
+  }
+}
+
+// has 24px leading visual
+.ActionList-content--visual24 + .ActionList--subGroup {
+  .ActionList-item--subItem {
+    padding-left: $spacer-5;
+  }
+}

package/actionlist/action-list-variables.scss

@@ -0,0 +1,8 @@
+$actionList-item-height-sm: $spacer-2 * 2.5 !default;
+$actionList-item-label-line-height: $spacer-2 * 2.5 !default;
+$actionList-item-padding-vertical-md: $spacer-2 * 1.25 !default;
+$actionList-item-padding-vertical-lg: $spacer-2 * 1.75 !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

@@ -0,0 +1,33 @@
+// <ul>
+.ActionList {
+  padding: $spacer-2;
+}
+
+// dividers
+
+.ActionList--divided {
+  .ActionList-item-label::before {
+    position: absolute;
+    top: -$actionList-item-padding-vertical;
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background: var(--color-action-list-item-inline-divider);
+  }
+
+  // hide divider if item is active
+  .ActionList-item--navActive {
+    // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
+    .ActionList-item-label::before,
+    + .ActionList-item .ActionList-item-label::before {
+      visibility: hidden;
+    }
+  }
+}
+
+// hide if item is first of type with label::before, or is the first item after a sectionDivider
+.ActionList-item:first-of-type .ActionList-item-label::before,
+.ActionList-sectionDivider + .ActionList-item .ActionList-item-label::before {
+  visibility: hidden;
+}

package/actionlist/index.scss

@@ -0,0 +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/core/index.scss

@@ -11,6 +11,7 @@
 // Color modes
 
 // Core modules
+@import '../actionlist/index.scss';
 @import '../base/index.scss';
 @import '../box/index.scss';
 @import '../breadcrumb/index.scss';

package/dist/actionlist.css

@@ -0,0 +1,2 @@
+.ActionList{padding:8px}.ActionList--divided .ActionList-item-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--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-content,.ActionList-item:active .ActionList-content{text-decoration:none}.ActionList-item:not(.ActionList-item--hasSubItem):hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):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--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive: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-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--subGroup{display:block}.ActionList-item[aria-expanded=true].ActionList-item--hasSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--subGroup{display:none}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{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-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{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-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{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-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[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover)and (pointer: fine){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.ActionList-item .ActionList{padding:unset}.ActionList-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:min-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-content>:not(:last-child){margin-right:8px}.ActionList-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList--subGroup .ActionList-item--subItem{padding-left:16px}.ActionList-content--visual16+.ActionList--subGroup .ActionList-item--subItem{padding-left:24px}.ActionList-content--visual20+.ActionList--subGroup .ActionList-item--subItem{padding-left:28px}.ActionList-content--visual24+.ActionList--subGroup .ActionList-item--subItem{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--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

@@ -0,0 +1 @@
+{"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}

package/dist/actionlist.js

@@ -0,0 +1 @@
+export {cssstats: require('./stats/actionlist.json')}