@mixtint/primer-view-components 0.72.0

package/app/components/primer/alpha/action_list.css

@@ -0,0 +1,526 @@
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable selector-max-specificity */
+/* stylelint-disable max-nesting-depth */
+:root {
+  --actionListContent-paddingBlock: var(--control-medium-paddingBlock);
+}
+/* ActionList */
+/* stylelint-disable-next-line selector-max-type */
+action-list {
+  display: block;
+}
+/* stylelint-disable-next-line selector-max-type */
+nav-list {
+  display: block;
+}
+.ActionListHeader {
+  margin-bottom: var(--base-size-16);
+  margin-left: var(--base-size-8);
+}
+/* <ul> */
+.ActionListWrap {
+  list-style: none;
+}
+.ActionListWrap--inset,
+.ActionListWrap--inset[popover] {
+  margin-left: 0;
+  padding: var(--base-size-8);
+}
+/* list dividers */
+.ActionListWrap--divided .ActionListItem-label::before {
+    position: absolute;
+    /* stylelint-disable-next-line primer/spacing */
+    top: calc(-1 * var(--actionListContent-paddingBlock));
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
+  }
+/* if descriptionWrap--inline exists, move pseudo divider to wrapper */
+:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline)::before {
+      position: absolute;
+      /* stylelint-disable-next-line primer/spacing */
+      top: calc(-1 * var(--actionListContent-paddingBlock));
+      display: block;
+      width: 100%;
+      height: var(--borderWidth-thin);
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background: var(--borderColor-muted);
+    }
+/* unset the default label pseudo */
+:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label::before {
+      content: unset;
+    }
+/* hide divider if item is active */
+:is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label::before,:is(.ActionListWrap--divided .ActionListItem--navActive) + .ActionListItem .ActionListItem-label::before {
+      visibility: hidden;
+    }
+/* hide if item is first of type with label::before, or is the first item after a sectionDivider */
+.ActionListItem:first-of-type .ActionListItem-label::before,
+.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {
+  visibility: hidden;
+}
+/* hide if item is first of type with label::before, or is the first item after a sectionDivider */
+.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,
+.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {
+  visibility: hidden;
+}
+/* ActionList::Item */
+.ActionListItem {
+  position: relative;
+  list-style: none;
+  background-color: var(--control-transparent-bgColor-rest);
+  border-radius: var(--borderRadius-medium);
+
+  /* state */
+}
+.ActionListItem:hover,.ActionListItem:active {
+    cursor: pointer;
+  }
+/* hide dividers  */
+@media (hover: hover) {
+      .ActionListItem:hover .ActionListItem-label::before,.ActionListItem:hover + .ActionListItem .ActionListItem-label::before {
+        visibility: hidden;
+      }
+
+      .ActionListItem:hover .ActionListItem-descriptionWrap--inline::before,.ActionListItem:hover + .ActionListItem .ActionListItem-descriptionWrap--inline::before {
+        visibility: hidden;
+      }
+  }
+/* Make sure that the first visible item isn't a divider */
+.ActionListItem[hidden] + .ActionList-sectionDivider {
+    display: none;
+  }
+/* collapse styles here */
+/* first child */
+.ActionListItem.ActionListItem--hasSubItem > .ActionListContent {
+      z-index: 1;
+    }
+@media (hover: hover) {
+        :is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover {
+          background-color: var(--control-transparent-bgColor-hover);
+        }
+      }
+:is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active {
+        background-color: var(--control-transparent-bgColor-active);
+      }
+/* only hover li without list as children */
+@media (hover: hover) {
+      :is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover {
+        cursor: pointer;
+        background-color: var(--control-transparent-bgColor-hover);
+      }
+
+        :is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible) {
+          /* Support for "Windows high contrast mode" */
+          outline: solid var(--borderWidth-thin) transparent;
+          outline-offset: calc(-1 * var(--borderWidth-thin));
+          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
+        }
+    }
+:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active {
+      background: var(--control-transparent-bgColor-active);
+    }
+:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active:not(.ActionListItem--navActive) {
+        /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
+        outline: solid var(--borderWidth-thin) transparent;
+        outline-offset: calc(-1 * var(--borderWidth-thin));
+        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
+      }
+:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active .ActionListItem-label::before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active + .ActionListItem .ActionListItem-label::before {
+        visibility: hidden;
+      }
+/* Autocomplete [aria-selected] items */
+.ActionListItem[aria-selected='true'] {
+    font-weight: var(--base-text-weight-normal);
+    background: var(--control-transparent-bgColor-selected);
+  }
+@media (hover: hover) {
+      .ActionListItem[aria-selected='true']:hover {
+        background-color: var(--control-transparent-bgColor-hover);
+      }
+    }
+.ActionListItem[aria-selected='true']::before,.ActionListItem[aria-selected='true'] + .ActionListItem::before {
+      visibility: hidden;
+    }
+/* blue accent line */
+.ActionListItem[aria-selected='true']::after {
+      position: absolute;
+      top: calc(50% - 12px);
+      left: calc(-1 * var(--base-size-4));
+      width: var(--base-size-4);
+      height: var(--base-size-24);
+      content: '';
+      background: var(--borderColor-accent-emphasis);
+      border-radius: var(--borderRadius-medium);
+    }
+/* active state [aria-current] */
+.ActionListItem.ActionListItem--navActive {
+    /* provides a visual indication of the current item for Windows high-contrast mode */
+    outline: 2px solid transparent;
+  }
+.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold);
+      }
+.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
+      background: var(--control-transparent-bgColor-selected);
+    }
+@media (hover: hover) {
+        .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover {
+          background-color: var(--control-transparent-bgColor-hover);
+        }
+      }
+.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) + .ActionListItem::before {
+        visibility: hidden;
+      }
+/* blue accent line  */
+.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::after {
+        position: absolute;
+        top: calc(50% - 12px);
+        left: calc(-1 * var(--base-size-8));
+        width: var(--base-size-4);
+        height: var(--base-size-24);
+        content: '';
+        background: var(--borderColor-accent-emphasis);
+        border-radius: var(--borderRadius-medium);
+      }
+/* disabled */
+:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-label,:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-description {
+        color: var(--control-fgColor-disabled);
+      }
+:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-visual {
+        fill: var(--control-fgColor-disabled);
+      }
+@media (hover: hover) {
+      :is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']):hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+/* variants */
+/* danger */
+.ActionListItem.ActionListItem--danger .ActionListItem-label {
+      color: var(--control-danger-fgColor-rest);
+    }
+.ActionListItem.ActionListItem--danger .ActionListItem-visual {
+      color: var(--control-danger-fgColor-rest);
+    }
+@media (hover: hover) {
+      .ActionListItem.ActionListItem--danger:hover {
+        background: var(--control-danger-bgColor-hover);
+      }
+
+        .ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual,.ActionListItem.ActionListItem--danger:hover .ActionListItem-description {
+          color: var(--control-danger-fgColor-hover);
+        }
+    }
+:is(.ActionListItem.ActionListItem--danger .ActionListContent):active {
+        background: var(--control-danger-bgColor-active);
+      }
+:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description {
+          color: var(--control-danger-fgColor-hover);
+        }
+/* button or a href */
+.ActionListContent {
+  position: relative;
+  display: grid;
+  width: 100%;
+  /* stylelint-disable-next-line primer/spacing */
+  padding-block: var(--actionListContent-paddingBlock);
+  /* stylelint-disable-next-line primer/spacing */
+  padding-inline: var(--control-medium-paddingInline-condensed);
+  color: var(--control-fgColor-rest);
+  text-align: left;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--borderRadius-medium);
+  transition: background 33.333ms linear;
+  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;
+  align-items: start;
+
+  /* column-gap persists with empty grid-areas, margin applies only when children exist */
+}
+.ActionListContent > :not(:last-child) {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: var(--control-medium-gap);
+  }
+/* state */
+.ActionListContent:hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+/* disabled */
+.ActionListContent[aria-disabled='true'] .ActionListItem-label,.ActionListContent[aria-disabled='true'] .ActionListItem-description {
+      color: var(--control-fgColor-disabled);
+    }
+.ActionListContent[aria-disabled='true'] .ActionListItem-visual {
+      fill: var(--control-fgColor-disabled);
+    }
+@media (hover: hover) {
+      .ActionListContent[aria-disabled='true']:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+/* collapsible item [aria-expanded] */
+/* nesting (single level)
+   target items inside expanded subgroups */
+@media screen and (prefers-reduced-motion: no-preference) {
+.ActionListContent[aria-expanded] + .ActionList--subGroup {
+        transition:
+          opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),
+          transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
+    }
+      }
+:is(.ActionListContent[aria-expanded] + .ActionList--subGroup) .ActionListContent {
+        padding-left: var(--base-size-24);
+      }
+/* has 16px leading visual */
+:is(.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup) .ActionListContent {
+        padding-left: var(--base-size-32);
+      }
+/* has 20px leading visual */
+:is(.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup) .ActionListContent {
+        padding-left: var(--base-size-36);
+      }
+/* has 24px leading visual */
+:is(.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup) .ActionListContent {
+        padding-left: var(--base-size-40);
+      }
+.ActionListContent[aria-expanded='true'] .ActionListItem-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+.ActionListContent[aria-expanded='true'] + .ActionList--subGroup {
+      height: auto;
+      overflow: visible;
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='true'] > .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold);
+      }
+.ActionListContent[aria-expanded='false'] .ActionListItem-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
+    }
+.ActionListContent[aria-expanded='false'] + .ActionList--subGroup {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--base-size-16)));
+    }
+/* show active indicator on parent collapse if child is active */
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] {
+      background: var(--control-transparent-bgColor-selected);
+    }
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold);
+      }
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] + .ActionListItem::before {
+        visibility: hidden;
+      }
+/* blue accent line */
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::after {
+        position: absolute;
+        top: calc(50% - 12px);
+        left: calc(-1 * var(--base-size-8));
+        width: var(--base-size-4);
+        height: var(--base-size-24);
+        content: '';
+        background: var(--borderColor-accent-emphasis);
+        border-radius: var(--borderRadius-medium);
+      }
+/*
+  * checkbox item [aria-checked]
+  * listbox [aria-selected]
+  */
+:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox {
+      background: var(--control-checked-bgColor-rest);
+      border-color: var(--control-checked-borderColor-rest);
+      transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
+    }
+:is(:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox)::before {
+        visibility: visible;
+        transition: visibility 0s linear 0s;
+        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      }
+/* singleselect checkmark */
+:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .ActionListItem-singleSelectCheckmark {
+      visibility: visible;
+    }
+/* singleselect checkmark */
+:is(.ActionListContent[aria-checked='false'],.ActionListContent[aria-selected='false']) .ActionListItem-singleSelectCheckmark {
+      visibility: hidden;
+      transition: visibility 0s linear 200ms;
+    }
+/* sizes */
+.ActionListContent.ActionListContent--sizeLarge {
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock);
+  }
+.ActionListContent.ActionListContent--sizeXLarge {
+    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);
+  }
+/* On pointer:coarse (mobile), all list items are large */
+@media (pointer: coarse) {
+.ActionListContent {
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock);
+}
+  }
+/* if leading/trailing visual, align with first line of content */
+.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual {
+      place-self: start;
+    }
+/* place children on grid */
+.ActionListItem-action--leading {
+  grid-area: leadingAction;
+}
+.ActionListItem-visual--leading {
+  grid-area: leadingVisual;
+}
+.ActionListItem-visual--trailing {
+  grid-area: trailingVisual;
+}
+.ActionListItem-action--trailing {
+  grid-area: trailingAction;
+}
+/* have leading visual svg filled with chosen color */
+/* stylelint-disable-next-line selector-max-type */
+.ActionListItem-visual--leading svg {
+  fill: currentcolor;
+}
+/* wrapper span
+ default block */
+.ActionListItem-descriptionWrap {
+  grid-area: label;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+.ActionListItem-descriptionWrap .ActionListItem-label {
+    font-weight: var(--base-text-weight-semibold);
+  }
+/* inline */
+.ActionListItem-descriptionWrap--inline {
+  position: relative;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--base-size-8);
+}
+/* description */
+.ActionListItem-description {
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--text-body-lineHeight-small);
+  color: var(--fgColor-muted);
+}
+/* helper for grid alignment with multi-line content
+ span wrapping svg or text */
+.ActionListItem-visual,
+.ActionListItem-action {
+  display: flex;
+  min-height: var(--control-medium-lineBoxHeight);
+  color: var(--fgColor-muted);
+  pointer-events: none;
+  fill: var(--fgColor-muted);
+  align-items: center;
+}
+/* text */
+.ActionListItem-label {
+  position: relative;
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--text-body-lineHeight-medium);
+  color: var(--fgColor-default);
+  grid-area: label;
+}
+.ActionListItem-label--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* nested lists (only supports 1 level currently)
+ target ActionListItem--subItem for padding-left to maintain :active :after state */
+.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
+  font-size: var(--text-body-size-small);
+  line-height: var(--text-body-lineHeight-small);
+}
+/* trailing action icon button */
+.ActionListItem--withActions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.ActionListItem-trailingAction {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+/* show trailing action button on hover */
+.ActionListItem--trailingActionHover .ActionListItem-trailingAction {
+    visibility: hidden;
+  }
+:is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction {
+      visibility: visible;
+    }
+/* ActionList::Divider */
+/* with children */
+.ActionList-sectionDivider:not(:empty) {
+    display: flex;
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
+    line-height: var(--text-body-lineHeight-small);
+    color: var(--fgColor-muted);
+    flex-direction: column;
+    /* stylelint-disable-next-line primer/spacing */
+    padding-inline: var(--actionListContent-paddingBlock);
+    padding-block: var(--base-size-8);
+  }
+/* no children */
+.ActionList-sectionDivider:empty {
+    display: block;
+    height: var(--borderWidth-thin);
+    padding: 0;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
+    margin-block-end: var(--base-size-8);
+    margin-inline: calc(-1 * var(--base-size-8));
+    list-style: none;
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
+    border: 0;
+  }
+.ActionList-sectionDivider .ActionList-sectionDivider-title {
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
+    color: var(--fgColor-muted);
+    align-self: flex-start;
+  }
+.ActionList-sectionDivider--filled {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
+  margin-block-end: var(--base-size-8);
+  margin-inline: calc(-1 * var(--base-size-8));
+  background: var(--bgColor-muted);
+  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+
+  /* if no children, treat as divider */
+}
+.ActionList-sectionDivider--filled:empty {
+    height: var(--base-size-8);
+    box-sizing: border-box;
+  }
+.ActionList-sectionDivider--filled:first-child {
+    margin-block-start: 0;
+  }

package/app/components/primer/alpha/action_list.css.json

@@ -0,0 +1,117 @@
+{
+  "name": "alpha/action_list",
+  "selectors": [
+    ":root",
+    "action-list",
+    "nav-list",
+    ".ActionListHeader",
+    ".ActionListWrap",
+    ".ActionListWrap--inset",
+    ".ActionListWrap--inset[popover]",
+    ".ActionListWrap--divided .ActionListItem-label::before",
+    ":is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline)::before",
+    ":is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label::before",
+    ":is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label::before",
+    ":is(.ActionListWrap--divided .ActionListItem--navActive) + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem:first-of-type .ActionListItem-label::before",
+    ".ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before",
+    ".ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before",
+    ".ActionListItem",
+    ".ActionListItem:hover",
+    ".ActionListItem:active",
+    ".ActionListItem:hover .ActionListItem-label::before",
+    ".ActionListItem:hover + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem:hover .ActionListItem-descriptionWrap--inline::before",
+    ".ActionListItem:hover + .ActionListItem .ActionListItem-descriptionWrap--inline::before",
+    ".ActionListItem[hidden] + .ActionList-sectionDivider",
+    ".ActionListItem.ActionListItem--hasSubItem > .ActionListContent",
+    ":is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover",
+    ":is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible)",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active:not(.ActionListItem--navActive)",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active .ActionListItem-label::before",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem[aria-selected='true']",
+    ".ActionListItem[aria-selected='true']:hover",
+    ".ActionListItem[aria-selected='true']::before",
+    ".ActionListItem[aria-selected='true'] + .ActionListItem::before",
+    ".ActionListItem[aria-selected='true']::after",
+    ".ActionListItem.ActionListItem--navActive",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) + .ActionListItem::before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::after",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-label",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-description",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-visual",
+    ":is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']):hover",
+    ".ActionListItem.ActionListItem--danger .ActionListItem-label",
+    ".ActionListItem.ActionListItem--danger .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--danger:hover",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-description",
+    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active",
+    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label",
+    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual",
+    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description",
+    ".ActionListContent",
+    ".ActionListContent > :not(:last-child)",
+    ".ActionListContent:hover",
+    ".ActionListContent[aria-disabled='true'] .ActionListItem-label",
+    ".ActionListContent[aria-disabled='true'] .ActionListItem-description",
+    ".ActionListContent[aria-disabled='true'] .ActionListItem-visual",
+    ".ActionListContent[aria-disabled='true']:hover",
+    ".ActionListContent[aria-expanded] + .ActionList--subGroup",
+    ":is(.ActionListContent[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ":is(.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ":is(.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ":is(.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ".ActionListContent[aria-expanded='true'] .ActionListItem-collapseIcon",
+    ".ActionListContent[aria-expanded='true'] + .ActionList--subGroup",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='true'] > .ActionListItem-label",
+    ".ActionListContent[aria-expanded='false'] .ActionListItem-collapseIcon",
+    ".ActionListContent[aria-expanded='false'] + .ActionList--subGroup",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] .ActionListItem-label",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::before",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] + .ActionListItem::before",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::after",
+    ":is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox",
+    ":is(:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox)::before",
+    ":is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .ActionListItem-singleSelectCheckmark",
+    ":is(.ActionListContent[aria-checked='false'],.ActionListContent[aria-selected='false']) .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent.ActionListContent--sizeLarge",
+    ".ActionListContent.ActionListContent--sizeXLarge",
+    ".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
+    ".ActionListItem-action--leading",
+    ".ActionListItem-visual--leading",
+    ".ActionListItem-visual--trailing",
+    ".ActionListItem-action--trailing",
+    ".ActionListItem-visual--leading svg",
+    ".ActionListItem-descriptionWrap",
+    ".ActionListItem-descriptionWrap .ActionListItem-label",
+    ".ActionListItem-descriptionWrap--inline",
+    ".ActionListItem-description",
+    ".ActionListItem-visual",
+    ".ActionListItem-action",
+    ".ActionListItem-label",
+    ".ActionListItem-label--truncate",
+    ".ActionListItem--subItem > .ActionListContent > .ActionListItem-label",
+    ".ActionListItem--withActions",
+    ".ActionListItem-trailingAction",
+    ".ActionListItem--trailingActionHover .ActionListItem-trailingAction",
+    ":is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction",
+    ".ActionList-sectionDivider:not(:empty)",
+    ".ActionList-sectionDivider:empty",
+    ".ActionList-sectionDivider .ActionList-sectionDivider-title",
+    ".ActionList-sectionDivider--filled",
+    ".ActionList-sectionDivider--filled:empty",
+    ".ActionList-sectionDivider--filled:first-child"
+  ]
+}

package/app/components/primer/alpha/action_list.d.ts

@@ -0,0 +1,16 @@
+export declare class ActionListTruncationObserver {
+    resizeObserver: ResizeObserver;
+    constructor(el: HTMLElement);
+    unobserve(el: HTMLElement): void;
+    update(el: HTMLElement): void;
+}
+export declare class ActionListElement extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionListElement: typeof ActionListElement;
+    }
+}