@primer/view-components 0.45.2 → 0.46.0-rc.4214e155

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

@@ -1,49 +1 @@
-/* CSS for ActionBar  */
-.ActionBar {
-  position: relative;
-  display: flex !important;
-  min-width: calc(var(--control-medium-size) * 3);
-  align-items: center;
-  flex-grow: 1;
-  flex-shrink: 1;
-  box-sizing: content-box;
-  overflow: hidden;
-  justify-content: flex-end;
-}
-.ActionBar-item-container {
-  height: var(--control-medium-size);
-  box-sizing: content-box;
-  overflow: hidden;
-}
-.ActionBar-item {
-  position: relative;
-  float: left;
-}
-.ActionBar-more-menu {
-  float: left;
-}
-.ActionBar--small {
-  min-width: calc(var(--control-small-size) * 3);
-}
-.ActionBar--large {
-  min-width: calc(var(--control-large-size) * 3);
-}
-/* Divider */
-.ActionBar-divider {
-  top: 50%;
-  bottom: 50%;
-  float: left;
-  height: calc(var(--control-medium-size) / 2);
-  /* stylelint-disable-next-line primer/spacing */
-  margin: 0 var(--controlStack-medium-gap-condensed);
-  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
-  transform: translateY(-50%);
-}
-.ActionBar--small .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
-  margin: 0 var(--controlStack-small-gap-condensed);
-}
-.ActionBar--large .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
-  margin: 0 var(--controlStack-large-gap-condensed);
-}
+.ActionBar{align-items:center;box-sizing:initial;display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size)*3);overflow:hidden;position:relative}.ActionBar-item-container{box-sizing:initial;height:var(--control-medium-size);overflow:hidden}.ActionBar-item{float:left;position:relative}.ActionBar-more-menu{float:left}.ActionBar--small{min-width:calc(var(--control-small-size)*3)}.ActionBar--large{min-width:calc(var(--control-large-size)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin) solid var(--borderColor-muted);bottom:50%;float:left;height:calc(var(--control-medium-size)/2);margin:0 var(--controlStack-medium-gap-condensed);top:50%;transform:translateY(-50%)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed)}

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

@@ -1,525 +1 @@
-/* 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] {
-  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;
-  }
+:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock)}action-list,nav-list{display:block}.ActionListHeader{margin-bottom:var(--base-size-16);margin-left:var(--base-size-8)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{background:var(--borderColor-muted);content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{height:var(--borderWidth-thin)}:is(.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,:is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest);border-radius:var(--borderRadius-medium);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){: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)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}}: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){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}: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}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected);font-weight:var(--base-text-weight-normal)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-4)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.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)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description,:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label{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{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.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-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{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-description,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-webkit-tap-highlight-color:transparent;align-items:start;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}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-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)}}:is(.ActionListContent[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-24)}:is(.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-32)}:is(.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-36)}:is(.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-40)}.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)}.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)*-1));visibility:hidden}.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]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}: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(.32,0,.67,0) 0s}:is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark{visibility:visible}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark{transition:visibility 0s linear .2s;visibility:hidden}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}}.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-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8);position:relative}.ActionListItem-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);line-height:var(--text-body-lineHeight-small)}.ActionListItem-action,.ActionListItem-visual{color:var(--fgColor-muted);display:flex;min-height:var(--control-medium-lineBoxHeight);pointer-events:none;fill:var(--fgColor-muted);align-items:center}.ActionListItem-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-normal);grid-area:label;line-height:var(--text-body-lineHeight-medium);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);line-height:var(--text-body-lineHeight-small)}.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}:is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted);display:flex;flex-direction:column;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-small);padding-block:var(--base-size-8);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted);border:0;display:block;height:var(--borderWidth-thin);list-style:none;margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{align-self:flex-start;color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted);border-bottom:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}