RubyGems - yattho_view_components - Versions diffs - 0.0.1 → 0.1.1 - Mend

yattho_view_components 0.0.1 → 0.1.1

Files changed (447) hide show

data/app/components/yattho/alpha/action_list.css CHANGED Viewed

@@ -1,697 +1 @@
-:root {
-  --yattho-actionListContent-paddingBlock: var(--yattho-control-medium-paddingBlock, 6px);
-}
-/* ActionList */
-/* <ul> */
-.ActionListWrap {
-  list-style: none;
-}
-.ActionListWrap--inset {
-  padding: var(--base-size-8, 8px);
-}
-/* list dividers */
-.ActionListWrap--divided .ActionListItem-label::before {
-    position: absolute;
-    top: calc(-1 * var(--yattho-actionListContent-paddingBlock));
-    display: block;
-    width: 100%;
-    height: 1px;
-    content: '';
-    background: var(--color-action-list-item-inline-divider);
-  }
-/* if descriptionWrap--inline exists, move pseudo divider to wrapper */
-.ActionListWrap--divided .ActionListItem-descriptionWrap--inline::before {
-      position: absolute;
-      top: calc(-1 * var(--yattho-actionListContent-paddingBlock));
-      display: block;
-      width: 100%;
-      height: var(--yattho-borderWidth-thin, 1px);
-      content: '';
-      background: var(--color-action-list-item-inline-divider);
-    }
-/* 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: transparent;
-  border-radius: var(--yattho-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(--color-action-list-item-default-hover-bg);
-        }
-      }
-.ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active {
-        background-color: 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(--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(--yattho-borderWidth-thin, 1px) transparent;
-          outline-offset: calc(-1 * var(--yattho-borderWidth-thin, 1px));
-          box-shadow: var(--yattho-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
-        }
-    }
-.ActionListItem:not(.ActionListItem--hasSubItem):active, .ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active {
-      background: 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(--yattho-borderWidth-thin, 1px) transparent;
-        outline-offset: calc(-1 * var(--yattho-borderWidth-thin, 1px));
-        box-shadow: var(--yattho-borderInset-thin, 1px) 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;
-      }
-/*
-  * checkbox item [aria-checked]
-  * listbox [aria-selected]
-  */
-/* multiselect checkmark */
-.ActionListItem[aria-checked='true'] .ActionListItem-multiSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-multiSelectCheckmark {
-      visibility: visible;
-      opacity: 1;
-      transition: visibility 0 linear 0, opacity 50ms;
-    }
-/* singleselect checkmark */
-.ActionListItem[aria-checked='true'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-singleSelectCheckmark {
-      visibility: visible;
-    }
-@media screen and (prefers-reduced-motion: no-preference) {
-.ActionListItem[aria-checked='true'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-singleSelectCheckmark {
-        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-    }
-      }
-/* checkbox */
-.ActionListItem[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect, .ActionListItem[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect {
-        fill: var(--color-accent-fg);
-        stroke: var(--color-accent-fg);
-        stroke-width: var(--yattho-borderWidth-thin, 1px);
-      }
-.ActionListItem[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark, .ActionListItem[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark {
-        fill: var(--color-fg-on-emphasis);
-      }
-/* multiselect checkmark */
-.ActionListItem[aria-checked='false'] .ActionListItem-multiSelectCheckmark, .ActionListItem[aria-selected='false'] .ActionListItem-multiSelectCheckmark {
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility 0 linear 50ms, opacity 50ms;
-    }
-/* singleselect checkmark */
-.ActionListItem[aria-checked='false'] .ActionListItem-singleSelectCheckmark, .ActionListItem[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) {
-.ActionListItem[aria-checked='false'] .ActionListItem-singleSelectCheckmark, .ActionListItem[aria-selected='false'] .ActionListItem-singleSelectCheckmark {
-        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
-    }
-      }
-/* checkbox */
-.ActionListItem[aria-checked='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect, .ActionListItem[aria-selected='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect {
-        fill: var(--color-canvas-default);
-        stroke: var(--color-border-default);
-        stroke-width: var(--yattho-borderWidth-thin, 1px);
-      }
-.ActionListItem[aria-checked='false'] .ActionListItem-multiSelectIconRect, .ActionListItem[aria-selected='false'] .ActionListItem-multiSelectIconRect {
-      fill: var(--color-canvas-default);
-      border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
-    }
-.ActionListItem {
-  @keyframes checkmarkIn {
-    from {
-      clip-path: inset(16px 0 0 0);
-    }
-    to {
-      clip-path: inset(0 0 0 0);
-    }
-  }
-  @keyframes checkmarkOut {
-    from {
-      clip-path: inset(0 0 0 0);
-    }
-    to {
-      clip-path: inset(16px 0 0 0);
-    }
-  }
-  /* Autocomplete [aria-selected] items */
-}
-.ActionListItem[aria-selected='true'] {
-    font-weight: var(--base-text-weight-normal, 400);
-    background: var(--color-action-list-item-default-selected-bg);
-  }
-@media (hover: hover) {
-      .ActionListItem[aria-selected='true']:hover {
-        background-color: 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, 4px));
-      width: var(--base-size-4, 4px);
-      height: var(--base-size-24, 24px);
-      content: '';
-      background: var(--color-accent-fg);
-      border-radius: var(--yattho-borderRadius-medium, 6px);
-    }
-/* active state [aria-current] */
-.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label {
-        font-weight: var(--base-text-weight-semibold, 600);
-      }
-.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
-      background: var(--color-action-list-item-default-selected-bg);
-    }
-@media (hover: hover) {
-        .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover {
-          background-color: 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, 8px));
-        width: var(--base-size-4, 4px);
-        height: var(--base-size-24, 24px);
-        content: '';
-        background: var(--color-accent-fg);
-        border-radius: var(--yattho-borderRadius-medium, 6px);
-      }
-/* disabled */
-.ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-label,
-      .ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-description {
-        color: var(--color-yattho-fg-disabled);
-      }
-.ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-visual {
-        fill: var(--color-yattho-fg-disabled);
-      }
-@media (hover: hover) {
-      .ActionListItem[aria-disabled='true']:hover {
-        cursor: not-allowed;
-        background-color: transparent;
-      }
-    }
-/* variants */
-/* danger */
-.ActionListItem.ActionListItem--danger .ActionListItem-label {
-      color: var(--color-danger-fg);
-    }
-.ActionListItem.ActionListItem--danger .ActionListItem-visual {
-      color: var(--color-danger-fg);
-    }
-@media (hover: hover) {
-      .ActionListItem.ActionListItem--danger:hover {
-        background: var(--color-action-list-item-danger-hover-bg);
-      }
-        .ActionListItem.ActionListItem--danger:hover .ActionListItem-label {
-          color: var(--color-action-list-item-danger-hover-text);
-        }
-    }
-.ActionListItem.ActionListItem--danger .ActionListContent:active {
-        background: var(--color-action-list-item-danger-active-bg);
-      }
-/* button or a href */
-.ActionListContent {
-  position: relative;
-  display: grid;
-  width: 100%;
-  padding-block: var(--yattho-actionListContent-paddingBlock);
-  padding-inline: var(--yattho-control-medium-paddingInline-condensed, 8px);
-  color: var(--color-fg-default);
-  text-align: left;
-  -webkit-user-select: none;
-          user-select: none;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--yattho-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(--yattho-control-medium-gap, 8px);
-  }
-/* state */
-.ActionListContent:hover {
-    text-decoration: none;
-  }
-/* disabled */
-.ActionListContent[aria-disabled='true'] .ActionListItem-label,
-    .ActionListContent[aria-disabled='true'] .ActionListItem-description {
-      color: var(--color-yattho-fg-disabled);
-    }
-.ActionListContent[aria-disabled='true'] .ActionListItem-visual {
-      fill: var(--color-yattho-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, 24px);
-      }
-/* has 16px leading visual */
-.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup .ActionListContent {
-        padding-left: var(--base-size-32, 32px);
-      }
-/* has 20px leading visual */
-.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup .ActionListContent {
-        padding-left: var(--base-size-36, 36px);
-      }
-/* has 24px leading visual */
-.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup .ActionListContent {
-        padding-left: var(--base-size-40, 40px);
-      }
-.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, 16px)));
-    }
-/* show active indicator on parent collapse if child is active */
-.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] {
-      background: 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, 8px));
-        width: var(--base-size-4, 4px);
-        height: var(--base-size-24, 24px);
-        content: '';
-        background: var(--color-accent-fg);
-        border-radius: var(--yattho-borderRadius-medium, 6px);
-      }
-/* sizes */
-.ActionListContent.ActionListContent--sizeLarge {
-    --yattho-actionListContent-paddingBlock: var(--yattho-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
-  }
-.ActionListContent.ActionListContent--sizeXLarge {
-    --yattho-actionListContent-paddingBlock: var(--yattho-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
-  }
-/* On pointer:coarse (mobile), all list items are large */
-@media (pointer: coarse) {
-.ActionListContent {
-    --yattho-actionListContent-paddingBlock: var(--yattho-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, 4px);
-}
-.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, 8px);
-}
-/* description */
-.ActionListItem-description {
-  font-size: var(--yattho-text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
-  color: 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(--yattho-control-medium-lineBoxHeight, 20px);
-  color: var(--color-fg-muted);
-  pointer-events: none;
-  fill: var(--color-fg-muted);
-  align-items: center;
-}
-/* text */
-.ActionListItem-label {
-  position: relative;
-  font-size: var(--yattho-text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
-  color: 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(--yattho-text-body-size-small, 12px);
-  line-height: var(--yattho-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(--yattho-actionListContent-paddingBlock);
-    padding-block: var(--base-size-8, 8px);
-    font-size: var(--yattho-text-body-size-small, 12px);
-    line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
-    font-weight: var(--base-text-weight-semibold, 600);
-    color: var(--color-fg-muted);
-    flex-direction: column;
-  }
-/* no children */
-.ActionList-sectionDivider:empty {
-    display: block;
-    height: var(--yattho-borderWidth-thin, 1px);
-    padding: 0;
-    margin-block-start: calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));
-    margin-block-end: var(--base-size-8, 8px);
-    margin-inline: calc(-1 * var(--base-size-8, 8px));
-    list-style: none;
-    background: var(--color-action-list-item-inline-divider);
-    border: 0;
-  }
-.ActionList-sectionDivider .ActionList-sectionDivider-title {
-    font-size: var(--yattho-text-body-size-small, 12px);
-    font-weight: var(--base-text-weight-semibold, 600);
-    color: var(--color-fg-muted);
-  }
-.ActionList-sectionDivider--filled {
-  margin-block-start: calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));
-  margin-block-end: var(--base-size-8, 8px);
-  margin-inline: calc(-1 * var(--base-size-8, 8px));
-  background: var(--color-canvas-subtle);
-  border-top: solid var(--yattho-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
-  border-bottom: solid var(--yattho-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
-  /* if no children, treat as divider */
-}
-.ActionList-sectionDivider--filled:empty {
-    height: var(--base-size-8, 8px);
-    box-sizing: border-box;
-  }
-.ActionList-sectionDivider--filled:first-child {
-    margin-block-start: 0;
-  }
+:root{--yattho-actionListContent-paddingBlock:var(--yattho-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--yattho-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--yattho-borderWidth-thin,1px)}.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:initial;border-radius:var(--yattho-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(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color: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(--yattho-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--yattho-borderWidth-thin,1px) #0000;outline-offset:calc(var(--yattho-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background: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(--yattho-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--yattho-borderWidth-thin,1px) #0000;outline-offset:calc(var(--yattho-borderWidth-thin, 1px)*-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-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--yattho-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[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){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--yattho-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem{@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}.ActionListItem[aria-selected=true]{background: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(--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(--color-accent-fg);border-radius:var(--yattho-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color: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(--color-accent-fg);border-radius:var(--yattho-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-yattho-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-yattho-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--yattho-borderRadius-medium,6px);color: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(--yattho-actionListContent-paddingBlock);padding-inline:var(--yattho-control-medium-paddingInline-condensed,8px);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(--yattho-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-yattho-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-yattho-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,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.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, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background: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(--color-accent-fg);border-radius:var(--yattho-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--yattho-actionListContent-paddingBlock:var(--yattho-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--yattho-actionListContent-paddingBlock:var(--yattho-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--yattho-actionListContent-paddingBlock:var(--yattho-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,4px);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,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--yattho-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--yattho-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--yattho-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--yattho-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--yattho-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(--yattho-text-body-size-small,12px);line-height:var(--yattho-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(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--yattho-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--yattho-text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--yattho-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--yattho-borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--yattho-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--yattho-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--yattho-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--yattho-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}