@primer/view-components 0.3.0-rc.d9da539f → 0.3.0

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

@@ -1 +1,710 @@
-:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-neutral-muted));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-fg));border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-fg));border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,6px);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-fg));border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-neutral-muted));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-inset));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-neutral-muted));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-neutral-muted));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
+:root {
+  --actionListContent-paddingBlock: var(--control-medium-paddingBlock,calc((2rem - 1.25rem) / 2));
+}
+
+/* ActionList */
+
+.ActionListHeader {
+  margin-left: var(--base-size-8,0.5rem);
+  margin-bottom: var(--base-size-16,1rem);
+}
+
+/* <ul> */
+
+.ActionListWrap {
+  list-style: none;
+}
+
+.ActionListWrap--inset {
+  padding: var(--base-size-8,0.5rem);
+}
+
+/* list dividers */
+
+.ActionListWrap--divided .ActionListItem-label::before {
+    position: absolute;
+    top: calc(-1 * var(--actionListContent-paddingBlock));
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background: var(--borderColor-muted,var(--color-neutral-muted));
+  }
+
+/* if descriptionWrap--inline exists, move pseudo divider to wrapper */
+
+.ActionListWrap--divided .ActionListItem-descriptionWrap--inline::before {
+      position: absolute;
+      top: calc(-1 * var(--actionListContent-paddingBlock));
+      display: block;
+      width: 100%;
+      height: var(--borderWidth-thin,max(1px, 0.0625rem));
+      content: '';
+      background: var(--borderColor-muted,var(--color-neutral-muted));
+    }
+
+/* unset the default label pseudo */
+
+.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label::before {
+      content: unset;
+    }
+
+/* hide divider if item is active */
+
+.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label::before,
+    .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,transparent);
+  border-radius: var(--borderRadius-medium,6px);
+
+  /* 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) {
+        .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover {
+          background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));
+        }
+      }
+
+.ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active {
+        background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg));
+      }
+
+/* only hover li without list as children */
+
+@media (hover: hover) {
+      .ActionListItem:not(.ActionListItem--hasSubItem):hover, .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover {
+        cursor: pointer;
+        background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));
+      }
+
+        .ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive, :focus-visible), .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover:not(.ActionListItem--navActive, :focus-visible) {
+          /* Support for "Windows high contrast mode" */
+          outline: solid var(--borderWidth-thin,max(1px, 0.0625rem)) transparent;
+          outline-offset: calc(-1 * var(--borderWidth-thin,max(1px, 0.0625rem)));
+          box-shadow: var(--boxShadow-thin,inset 0 0 0 max(1px, 0.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));
+        }
+    }
+
+.ActionListItem:not(.ActionListItem--hasSubItem):active, .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active {
+      background: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg));
+    }
+
+.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive), .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,max(1px, 0.0625rem)) transparent;
+        outline-offset: calc(-1 * var(--borderWidth-thin,max(1px, 0.0625rem)));
+        box-shadow: var(--boxShadow-thin,inset 0 0 0 max(1px, 0.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));
+      }
+
+.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label::before,
+      .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active .ActionListItem-label::before,
+      .ActionListItem:not(.ActionListItem--hasSubItem):active + .ActionListItem .ActionListItem-label::before,
+      .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,400);
+    background: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));
+  }
+
+@media (hover: hover) {
+      .ActionListItem[aria-selected='true']:hover {
+        background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));
+      }
+    }
+
+.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,0.25rem));
+      width: var(--base-size-4,0.25rem);
+      height: var(--base-size-24,1.5rem);
+      content: '';
+      background: var(--borderColor-accent-emphasis,var(--color-accent-fg));
+      border-radius: var(--borderRadius-medium,6px);
+    }
+
+/* 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,600);
+      }
+
+.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
+      background: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));
+    }
+
+@media (hover: hover) {
+        .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover {
+          background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));
+        }
+      }
+
+.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,0.5rem));
+        width: var(--base-size-4,0.25rem);
+        height: var(--base-size-24,1.5rem);
+        content: '';
+        background: var(--borderColor-accent-emphasis,var(--color-accent-fg));
+        border-radius: var(--borderRadius-medium,6px);
+      }
+
+/* disabled */
+
+.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,
+      .ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-label,
+      .ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,
+      .ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-description {
+        color: var(--control-fgColor-disabled,var(--color-primer-fg-disabled));
+      }
+
+.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual, .ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-visual {
+        fill: var(--control-fgColor-disabled,var(--color-primer-fg-disabled));
+      }
+
+@media (hover: hover) {
+      .ActionListItem.ActionListItem--disabled:hover, .ActionListItem[aria-disabled='true']:hover {
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+
+/* variants */
+
+/* danger */
+
+.ActionListItem.ActionListItem--danger .ActionListItem-label {
+      color: var(--control-danger-fgColor-rest,var(--color-danger-fg));
+    }
+
+.ActionListItem.ActionListItem--danger .ActionListItem-visual {
+      color: var(--control-danger-fgColor-rest,var(--color-danger-fg));
+    }
+
+@media (hover: hover) {
+      .ActionListItem.ActionListItem--danger:hover {
+        background: var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg));
+      }
+
+        .ActionListItem.ActionListItem--danger:hover .ActionListItem-label,
+        .ActionListItem.ActionListItem--danger:hover .ActionListItem-visual {
+          color: var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text));
+        }
+    }
+
+.ActionListItem.ActionListItem--danger .ActionListContent:active {
+        background: var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg));
+      }
+
+.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,
+        .ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual {
+          color: var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text));
+        }
+
+/* button or a href */
+
+.ActionListContent {
+  position: relative;
+  display: grid;
+  width: 100%;
+  padding-block: var(--actionListContent-paddingBlock);
+  padding-inline: var(--control-medium-paddingInline-condensed,0.5rem);
+  color: var(--control-fgColor-rest,var(--color-fg-default));
+  text-align: left;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--borderRadius-medium,6px);
+  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) {
+    margin-right: var(--control-medium-gap,0.5rem);
+  }
+
+/* state */
+
+.ActionListContent:hover {
+    text-decoration: none;
+  }
+
+/* disabled */
+
+.ActionListContent[aria-disabled='true'] .ActionListItem-label,
+    .ActionListContent[aria-disabled='true'] .ActionListItem-description {
+      color: var(--control-fgColor-disabled,var(--color-primer-fg-disabled));
+    }
+
+.ActionListContent[aria-disabled='true'] .ActionListItem-visual {
+      fill: var(--control-fgColor-disabled,var(--color-primer-fg-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);
+    }
+      }
+
+.ActionListContent[aria-expanded] + .ActionList--subGroup .ActionListContent {
+        padding-left: var(--base-size-24,1.5rem);
+      }
+
+/* has 16px leading visual */
+
+.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup .ActionListContent {
+        padding-left: var(--base-size-32,2rem);
+      }
+
+/* has 20px leading visual */
+
+.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup .ActionListContent {
+        padding-left: var(--base-size-36,2.25rem);
+      }
+
+/* has 24px leading visual */
+
+.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup .ActionListContent {
+        padding-left: var(--base-size-40,2.5rem);
+      }
+
+.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,600);
+      }
+
+.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,1rem)));
+    }
+
+/* show active indicator on parent collapse if child is active */
+
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] {
+      background: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));
+    }
+
+.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] .ActionListItem-label {
+        font-weight: var(--base-text-weight-semibold,600);
+      }
+
+.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,0.5rem));
+        width: var(--base-size-4,0.25rem);
+        height: var(--base-size-24,1.5rem);
+        content: '';
+        background: var(--borderColor-accent-emphasis,var(--color-accent-fg));
+        border-radius: var(--borderRadius-medium,6px);
+      }
+
+/*
+  * checkbox item [aria-checked]
+  * listbox [aria-selected]
+  */
+
+/* multiselect checkmark */
+
+.ActionListContent[aria-checked='true'] .ActionListItem-multiSelectCheckmark, .ActionListContent[aria-selected='true'] .ActionListItem-multiSelectCheckmark {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0 linear 0, opacity 50ms;
+    }
+
+/* singleselect checkmark */
+
+.ActionListContent[aria-checked='true'] .ActionListItem-singleSelectCheckmark, .ActionListContent[aria-selected='true'] .ActionListItem-singleSelectCheckmark {
+      visibility: visible;
+    }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.ActionListContent[aria-checked='true'] .ActionListItem-singleSelectCheckmark, .ActionListContent[aria-selected='true'] .ActionListItem-singleSelectCheckmark {
+        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+        @keyframes checkmarkIn {
+          from {
+            clip-path: inset(16px 0 0 0);
+          }
+
+          to {
+            clip-path: inset(0 0 0 0);
+          }
+        }
+    }
+      }
+
+/* checkbox */
+
+.ActionListContent[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect, .ActionListContent[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect {
+        fill: var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));
+        stroke: var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));
+        stroke-width: var(--borderWidth-thin, 1px);
+      }
+
+.ActionListContent[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark, .ActionListContent[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark {
+        fill: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+      }
+
+/* multiselect checkmark */
+
+.ActionListContent[aria-checked='false'] .ActionListItem-multiSelectCheckmark, .ActionListContent[aria-selected='false'] .ActionListItem-multiSelectCheckmark {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0 linear 50ms, opacity 50ms;
+    }
+
+/* singleselect checkmark */
+
+.ActionListContent[aria-checked='false'] .ActionListItem-singleSelectCheckmark, .ActionListContent[aria-selected='false'] .ActionListItem-singleSelectCheckmark {
+      visibility: hidden;
+      transition: visibility 0s linear 200ms;
+      clip-path: inset(16px 0 0 0);
+    }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.ActionListContent[aria-checked='false'] .ActionListItem-singleSelectCheckmark, .ActionListContent[aria-selected='false'] .ActionListItem-singleSelectCheckmark {
+        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+        @keyframes checkmarkOut {
+          from {
+            clip-path: inset(0 0 0 0);
+          }
+
+          to {
+            clip-path: inset(16px 0 0 0);
+          }
+        }
+    }
+      }
+
+/* checkbox */
+
+.ActionListContent[aria-checked='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect, .ActionListContent[aria-selected='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect {
+        fill: var(--bgColor-default,var(--color-canvas-default));
+        stroke: var(--control-borderColor-rest,var(--color-btn-border));
+        stroke-width: var(--borderWidth-thin, 1px);
+      }
+
+.ActionListContent[aria-checked='false'] .ActionListItem-multiSelectIconRect, .ActionListContent[aria-selected='false'] .ActionListItem-multiSelectIconRect {
+      fill: var(--bgColor-default,var(--color-canvas-default));
+      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest,var(--color-btn-border));
+    }
+
+/* sizes */
+
+.ActionListContent.ActionListContent--sizeLarge {
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock,calc((2.5rem - 1.25rem) / 2));
+  }
+
+.ActionListContent.ActionListContent--sizeXLarge {
+    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock,calc((3rem - 1.25rem) / 2));
+  }
+
+/* On pointer:coarse (mobile), all list items are large */
+
+@media (pointer: coarse) {
+
+.ActionListContent {
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock,calc((2.5rem - 1.25rem) / 2));
+}
+  }
+
+/* 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;
+}
+
+/* wrapper span
+ default block */
+
+.ActionListItem-descriptionWrap {
+  grid-area: label;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4,0.25rem);
+}
+
+.ActionListItem-descriptionWrap .ActionListItem-label {
+    font-weight: var(--base-text-weight-semibold,600);
+  }
+
+/* inline */
+
+.ActionListItem-descriptionWrap--inline {
+  position: relative;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--base-size-8,0.5rem);
+}
+
+/* description */
+
+.ActionListItem-description {
+  font-size: var(--text-body-size-small,0.75rem);
+  font-weight: var(--base-text-weight-normal,400);
+  line-height: var(--text-body-lineHeight-small,calc(20/12));
+  color: var(--fgColor-muted,var(--color-fg-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,1.25rem);
+  color: var(--fgColor-muted,var(--color-fg-muted));
+  pointer-events: none;
+  fill: var(--fgColor-muted,var(--color-fg-muted));
+  align-items: center;
+}
+
+/* text */
+
+.ActionListItem-label {
+  position: relative;
+  font-size: var(--text-body-size-medium,0.875rem);
+  font-weight: var(--base-text-weight-normal,400);
+  line-height: var(--text-body-lineHeight-medium,calc(20/14));
+  color: var(--fgColor-default,var(--color-fg-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,0.75rem);
+  line-height: var(--text-body-lineHeight-small,calc(20/12));
+}
+
+/* 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;
+  }
+
+.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction, .ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction {
+      visibility: visible;
+    }
+
+/* ActionList::Divider */
+
+/* with children */
+
+.ActionList-sectionDivider:not(:empty) {
+    display: flex;
+    padding-inline: var(--actionListContent-paddingBlock);
+    padding-block: var(--base-size-8,0.5rem);
+    font-size: var(--text-body-size-small,0.75rem);
+    line-height: var(--text-body-lineHeight-small,calc(20/12));
+    font-weight: var(--base-text-weight-semibold,600);
+    color: var(--fgColor-muted,var(--color-fg-muted));
+    flex-direction: column;
+  }
+
+/* no children */
+
+.ActionList-sectionDivider:empty {
+    display: block;
+    height: var(--borderWidth-thin,max(1px, 0.0625rem));
+    padding: 0;
+    margin-block-start: calc(var(--base-size-8,0.5rem) - var(--borderWidth-thin,max(1px, 0.0625rem)));
+    margin-block-end: var(--base-size-8,0.5rem);
+    margin-inline: calc(-1 * var(--base-size-8,0.5rem));
+    list-style: none;
+    background: var(--borderColor-muted,var(--color-neutral-muted));
+    border: 0;
+  }
+
+.ActionList-sectionDivider .ActionList-sectionDivider-title {
+    font-size: var(--text-body-size-small,0.75rem);
+    font-weight: var(--base-text-weight-semibold,600);
+    color: var(--fgColor-muted,var(--color-fg-muted));
+  }
+
+.ActionList-sectionDivider--filled {
+  margin-block-start: calc(var(--base-size-8,0.5rem) - var(--borderWidth-thin,max(1px, 0.0625rem)));
+  margin-block-end: var(--base-size-8,0.5rem);
+  margin-inline: calc(-1 * var(--base-size-8,0.5rem));
+  background: var(--bgColor-muted,var(--color-canvas-inset));
+  border-top: solid var(--borderWidth-thin,max(1px, 0.0625rem)) var(--borderColor-muted,var(--color-neutral-muted));
+  border-bottom: solid var(--borderWidth-thin,max(1px, 0.0625rem)) var(--borderColor-muted,var(--color-neutral-muted));
+
+  /* if no children, treat as divider */
+}
+
+.ActionList-sectionDivider--filled:empty {
+    height: var(--base-size-8,0.5rem);
+    box-sizing: border-box;
+  }
+
+.ActionList-sectionDivider--filled:first-child {
+    margin-block-start: 0;
+  }