yattho_view_components 0.0.1 → 0.1.1

data/app/components/yattho/alpha/text_field.css

@@ -1,836 +1,3 @@
-/* FormControl */
-
-/* groups label, field, caption and inline error message */
-
-.FormControl {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--base-size-4, 4px);
-}
-
-/* fill container */
-
-.FormControl--fullWidth {
-  display: flex;
-}
-
-/* <label> */
-
-.FormControl-label {
-  font-size: var(--yattho-text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-semibold, 600);
-  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
-  color: var(--color-fg-default);
-  -webkit-user-select: none;
-          user-select: none;
-}
-
-/* optional caption */
-
-.FormControl-caption {
-  margin-bottom: 0;
-  font-size: var(--yattho-text-caption-size, 12px);
-  font-weight: var(--yattho-text-caption-weight, 400);
-  line-height: var(--yattho-text-caption-lineHeight, calc(16 / 12));
-  color: var(--color-fg-muted);
-}
-
-/* inline validation message */
-
-.FormControl-inlineValidation {
-  display: flex;
-  font-size: var(--yattho-text-caption-size, 12px);
-  font-weight: var(--base-text-weight-semibold, 600);
-  color: var(--color-danger-fg);
-  fill: var(--color-danger-fg);
-  flex-direction: row;
-  align-items: center;
-  gap: var(--base-size-4, 4px);
-}
-
-.FormControl-inlineValidation p {
-    margin-bottom: 0;
-  }
-
-/* shared among all form control components (input, select, textarea, checkbox, radio) */
-
-/* TextInput structure
-** ===================
-**
-** .FormControl
-** ├─ .FormControl-label
-** │  ├─ .FormControl-input-wrap
-** │  │  ├─ .FormControl-input-leadingVisualWrap
-** │  │  │  ├─ .FormControl-input-leadingVisual
-** │  │  ├─ .FormControl-input
-** │  │  ├─ .FormControl-input-trailingAction
-** ├─ .FormControl-inlineValidation
-** ├─ .FormControl-caption */
-
-/* // Select structure
-** ===================
-**
-** .FormControl
-** ├─ .FormControl-label
-** │  ├─ .FormControl-select-wrap
-** │  │  ├─ .FormControl-select
-** ├─ .FormControl-inlineValidation
-** ├─ .FormControl-caption */
-
-/* // Textarea structure
-** ===================
-**
-** .FormControl
-** ├─ .FormControl-label
-** ├─ .FormControl-textarea
-** ├─ .FormControl-inlineValidation
-** ├─ .FormControl-caption */
-
-.FormControl-input,
-.FormControl-select,
-.FormControl-textarea {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
-}
-
-.FormControl-input[disabled], .FormControl-select[disabled], .FormControl-textarea[disabled] {
-    color: var(--color-yattho-fg-disabled);
-    cursor: not-allowed;
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    opacity: 1;
-    -webkit-text-fill-color: var(--color-yattho-fg-disabled);
-  }
-
-.FormControl-input[invalid]:not(:focus), .FormControl-select[invalid]:not(:focus), .FormControl-textarea[invalid]:not(:focus) {
-    border-color: var(--color-danger-emphasis);
-  }
-
-.FormControl-input:not([type='checkbox'], [type='radio']):focus, .FormControl-select:not([type='checkbox'], [type='radio']):focus, .FormControl-textarea:not([type='checkbox'], [type='radio']):focus {
-    border-color: var(--color-accent-fg);
-    outline: none;
-    box-shadow: inset 0 0 0 1px var(--color-accent-fg);
-
-    /* remove fallback :focus if :focus-visible is supported */
-  }
-
-.FormControl-input:not([type='checkbox'], [type='radio']):focus:not(:focus-visible), .FormControl-select:not([type='checkbox'], [type='radio']):focus:not(:focus-visible), .FormControl-textarea:not([type='checkbox'], [type='radio']):focus:not(:focus-visible) {
-      border-color: transparent;
-
-      border-color: var(--color-accent-fg);
-
-      outline: none;
-
-      box-shadow: inset 0 0 0 1px transparent var(--color-accent-fg);
-    }
-
-/* default focus state */
-
-.FormControl-input:not([type='checkbox'], [type='radio']):focus-visible, .FormControl-select:not([type='checkbox'], [type='radio']):focus-visible, .FormControl-textarea:not([type='checkbox'], [type='radio']):focus-visible {
-    border-color: var(--color-accent-fg);
-    outline: none;
-    box-shadow: inset 0 0 0 1px var(--color-accent-fg);
-  }
-
-.FormControl-input,
-.FormControl-select,
-.FormControl-textarea {
-
-  width: 100%;
-  font-size: var(--yattho-text-body-size-medium, 14px);
-  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
-  border-radius: var(--yattho-borderRadius-medium, 6px);
-  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  transition-property: color, background-color, box-shadow, border-color;
-  padding-inline: var(--yattho-control-medium-paddingInline-condensed, 8px);
-  padding-block: calc(var(--yattho-control-medium-paddingBlock, 6px) - var(--yattho-borderWidth-thin, 1px));
-}
-
-.FormControl-input[disabled]::placeholder, .FormControl-select[disabled]::placeholder, .FormControl-textarea[disabled]::placeholder {
-      color: var(--color-yattho-fg-disabled);
-    }
-
-.FormControl-input[readonly], .FormControl-select[readonly], .FormControl-textarea[readonly] {
-    background-color: var(--color-input-disabled-bg);
-  }
-
-.FormControl-input::placeholder, .FormControl-select::placeholder, .FormControl-textarea::placeholder {
-    color: var(--color-fg-subtle);
-    opacity: 1;
-  }
-
-/* sizes */
-
-.FormControl-input.FormControl-small, .FormControl-select.FormControl-small, .FormControl-textarea.FormControl-small {
-    height: var(--yattho-control-small-size, 28px);
-    padding-inline: var(--yattho-control-small-paddingInline-normal, 8px);
-    padding-block: var(--yattho-control-small-paddingBlock, 4px);
-    font-size: var(--yattho-text-body-size-small, 12px);
-  }
-
-.FormControl-input.FormControl-medium, .FormControl-select.FormControl-medium, .FormControl-textarea.FormControl-medium {
-    height: var(--yattho-control-medium-size, 32px);
-  }
-
-.FormControl-input.FormControl-large, .FormControl-select.FormControl-large, .FormControl-textarea.FormControl-large {
-    height: var(--yattho-control-large-size, 40px);
-    padding-inline: var(--yattho-control-large-paddingInline-normal, 12px);
-    padding-block: var(--yattho-control-large-paddingBlock, 10px);
-  }
-
-/* variants */
-
-.FormControl-input.FormControl-inset, .FormControl-select.FormControl-inset, .FormControl-textarea.FormControl-inset {
-    background-color: var(--color-canvas-inset);
-  }
-
-.FormControl-input.FormControl-inset:focus-visible,
-    .FormControl-select.FormControl-inset:focus-visible,
-    .FormControl-textarea.FormControl-inset:focus-visible,
-    .FormControl-input.FormControl-inset:focus,
-    .FormControl-select.FormControl-inset:focus,
-    .FormControl-textarea.FormControl-inset:focus {
-      background-color: var(--color-canvas-default);
-    }
-
-.FormControl-input.FormControl-monospace, .FormControl-select.FormControl-monospace, .FormControl-textarea.FormControl-monospace {
-    font-family:
-      var(
-        --yattho-fontStack-monospace,
-        'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
-      );
-  }
-
-/* validation states */
-
-.FormControl-input.FormControl-error, .FormControl-select.FormControl-error, .FormControl-textarea.FormControl-error {
-    border-color: var(--color-danger-emphasis);
-  }
-
-.FormControl-input.FormControl-success, .FormControl-select.FormControl-success, .FormControl-textarea.FormControl-success {
-    border-color: var(--color-success-emphasis);
-  }
-
-.FormControl-input.FormControl-warning, .FormControl-select.FormControl-warning, .FormControl-textarea.FormControl-warning {
-    border-color: var(--color-attention-emphasis);
-  }
-
-.FormControl-toggleSwitchInput {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--base-size-16, 16px);
-}
-
-/* positioning for leading/trailing items for TextInput */
-
-.FormControl-input-wrap {
-  position: relative;
-  display: grid;
-}
-
-.FormControl-input-wrap .FormControl-input-leadingVisualWrap {
-    position: absolute;
-    top: var(--base-size-8, 8px);
-    left: var(--base-size-8, 8px);
-    display: block;
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
-    color: var(--color-fg-muted);
-    pointer-events: none;
-
-    /* octicon */
-  }
-
-.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual {
-      display: block;
-      -webkit-user-select: none;
-              user-select: none;
-    }
-
-/* TODO: replace with new Button component */
-
-.FormControl-input-wrap .FormControl-input-trailingAction {
-    position: absolute;
-    top: var(--base-size-4, 4px);
-    right: var(--base-size-4, 4px);
-    z-index: 4;
-    display: grid;
-    width: var(--yattho-control-xsmall-size, 24px);
-    height: var(--yattho-control-xsmall-size, 24px);
-    padding: 0;
-    color: var(--color-fg-muted);
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    border-radius: var(--yattho-borderRadius-small);
-    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-    transition-property: color, background-color, border-color;
-    align-items: center;
-    justify-content: center;
-  }
-
-.FormControl-input-wrap .FormControl-input-trailingAction svg {
-      -webkit-user-select: none;
-              user-select: none;
-    }
-
-.FormControl-input-wrap .FormControl-input-trailingAction[disabled] {
-      color: var(--color-yattho-fg-disabled);
-      pointer-events: none;
-    }
-
-.FormControl-input-wrap .FormControl-input-trailingAction:hover {
-      background: var(--color-action-list-item-default-hover-bg);
-    }
-
-.FormControl-input-wrap .FormControl-input-trailingAction:active {
-      background: var(--color-action-list-item-default-active-bg);
-    }
-
-/* show vertical divider line between field and button */
-
-.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider::before {
-        position: absolute;
-        top: calc((var(--yattho-control-xsmall-size) - var(--base-size-16)) / 2);
-        left: calc(var(--base-size-4, 4px) * -1);
-        display: block;
-        width: var(--yattho-borderWidth-thin);
-        height: var(--base-size-16);
-        content: '';
-        background: var(--color-border-default);
-      }
-
-.FormControl-input-wrap .FormControl-input-trailingAction::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  min-height: var(--yattho-control-medium-size, 32px) var(--yattho-control-medium-size, 32px);
-  content: "";
-  transform: translateX(-50%) translateY(-50%);
-}
-
-@media (pointer: coarse) {
-
-.FormControl-input-wrap .FormControl-input-trailingAction::after {
-        min-width: var(--yattho-control-minTarget-coarse, 44px);
-        min-height: var(--yattho-control-minTarget-coarse, 44px);
-    }
-      }
-
-/* if leadingVisual is present */
-
-/*
-	┌──32px──┬────────────────────┐
-	╎  ┌───┐   ┌────────────────┐ ╎
-	╎   16px    16px                ╎
-	╎  └───┘   └────────────────┘ ╎
-	└───────8px───────────────────┘
-	*/
-
-.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input {
-      padding-inline-start:
-        calc(
-          var(--yattho-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-          var(--yattho-control-medium-gap, 8px)
-        ); /* 32px */
-    }
-
-/*
-	┌──────────────────┬──32px──┐
-	╎  ┌──────────────┐  ┌────┐ ╎
-	╎   24px               24px   ╎
-	╎  └──────────────┘  └────┘ ╎
-	└──────────────────┴────────┘
-  */
-
-/* if trailingAction is present */
-
-.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input {
-      padding-inline-end:
-        calc(
-          var(--yattho-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-          var(--yattho-control-medium-gap, 8px)
-        ); /* 32px */
-    }
-
-/*
-		32px + 1px border
-		┌──────────────────┬──33px──┐
-		╎  ┌──────────────┐  ┌────┐ ╎
-		╎   24px               24px   ╎
-		╎  └──────────────┘  └────┘ ╎
-		└──────────────────┴────────┘
-		*/
-
-/* if trailingAction divider is present, add 1px padding to accomodate input field text
-    ** can be refactored to has(.FormControl-input-trailingAction--divider) */
-
-.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input {
-        padding-inline-end:
-          calc(
-            var(--yattho-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-            var(--yattho-control-medium-gap, 8px) + var(--yattho-borderWidth-thin, 1px)
-          ); /* 33px */
-      }
-
-/* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
-  // sizes */
-
-.FormControl-input-wrap.FormControl-small .FormControl-input-leadingVisualWrap {
-      top: calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      left: calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-    }
-
-/*
-    ┌──────────────────┬──28px──┐
-    ╎  ┌──────────────┐  ┌────┐ ╎
-    ╎   20px               20px   ╎
-    ╎  └──────────────┘  └────┘ ╎
-    └──────────────────┴────────┘
-    */
-
-.FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small {
-        padding-inline-end:
-          calc(
-            var(--yattho-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-            var(--yattho-control-small-gap, 8px)
-          ); /* 28px */
-      }
-
-/*
-			28px + 1px border
-			┌──────────────────┬──29px──┐
-			╎  ┌──────────────┐  ┌────┐ ╎
-			╎   20px               20px   ╎
-			╎  └──────────────┘  └────┘ ╎
-			└──────────────────┴────────┘
-			*/
-
-.FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small {
-          padding-inline-end:
-            calc(
-              var(--yattho-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-              var(--yattho-control-small-gap, 8px) + var(--yattho-borderWidth-thin, 1px)
-            ); /* 29px */
-        }
-
-.FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction {
-      width: calc(var(--yattho-control-small-size, 28px) - var(--base-size-8, 8px));
-      height: calc(var(--yattho-control-small-size, 28px) - var(--base-size-8, 8px));
-    }
-
-.FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction::before {
-        top: calc((var(--yattho-control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
-      }
-
-.FormControl-input-wrap.FormControl-large .FormControl-input-leadingVisualWrap {
-      top: var(--yattho-control-medium-paddingInline-normal, 12px);
-      left: var(--yattho-control-medium-paddingInline-normal, 12px);
-    }
-
-/*
-    ┌──36px──┬───12px padding──────┐
-    ╎  ┌───┐   ┌────────────────┐ ╎
-    ╎   16px    16px                ╎
-    ╎  └───┘   └────────────────┘ ╎
-    └12px───8px───────────────────┘
-    */
-
-.FormControl-input-wrap.FormControl-large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large {
-        padding-inline-start:
-          calc(
-            var(--yattho-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
-            var(--yattho-control-large-gap, 8px)
-          ); /* 36px */
-      }
-
-/*
-    ┌──────────────────┬──36px──┐
-    ╎  ┌──────────────┐  ┌────┐ ╎
-    ╎   28px               28px   ╎
-    ╎  └──────────────┘  └────┘ ╎
-    └──────────────────┴────────┘
-    */
-
-.FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large {
-        padding-inline-end:
-          calc(
-            var(--yattho-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
-            var(--yattho-control-large-gap, 8px)
-          ); /* 36px */
-      }
-
-/*
-			┌──────────────────┬──37px──┐
-			╎  ┌──────────────┐  ┌────┐ ╎
-			╎   28px               28px   ╎
-			╎  └──────────────┘  └────┘ ╎
-			└──────────────────┴────────┘
-			*/
-
-.FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large {
-          padding-inline-end:
-            calc(
-              var(--yattho-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
-              var(--yattho-control-large-gap, 8px) + var(--yattho-borderWidth-thin, 1px)
-            ); /* 37px */
-        }
-
-.FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction {
-      top: calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      right: calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      width: var(--yattho-control-small-size, 28px);
-      height: var(--yattho-control-small-size, 28px);
-    }
-
-.FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction::before {
-        top: unset;
-        height: var(--base-size-20);
-      }
-
-.FormControl-select-wrap {
-  display: grid;
-  grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
-
-  /* mask allows for background-color to respect themes */
-}
-
-.FormControl-select-wrap::after {
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
-    padding-right: var(--base-size-4, 4px);
-    pointer-events: none;
-    content: '';
-    background-color: var(--color-fg-muted);
-    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
-            mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
-    -webkit-mask-size: contain;
-            mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    grid-column: 2;
-    grid-row: 1;
-    place-self: center end;
-  }
-
-/* spans entire grid below mask */
-
-.FormControl-select-wrap .FormControl-select {
-    grid-column: 1/-1;
-    grid-row: 1;
-    -webkit-appearance: none;
-            appearance: none;
-    padding-right: var(--base-size-20, 20px);
-  }
-
-/* checkbox + radio specific styles */
-
-/* // Checkbox + Radio structure
-** ===================
-**
-** .FormControl-radio-wrap
-** ├─ .FormControl-radio
-** ├─ .FormControl-radio-labelWrap
-** │  ├─ .FormControl-label
-** │  ├─ .FormControl-caption */
-
-.FormControl-checkbox-wrap,
-.FormControl-radio-wrap {
-  display: inline-grid;
-  grid-template-columns: min-content auto;
-  gap: var(--base-size-8, 8px);
-}
-
-.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,
-  .FormControl-radio-wrap .FormControl-checkbox-labelWrap,
-  .FormControl-checkbox-wrap .FormControl-radio-labelWrap,
-  .FormControl-radio-wrap .FormControl-radio-labelWrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base-size-4, 4px);
-  }
-
-.FormControl-checkbox-wrap .FormControl-label, .FormControl-radio-wrap .FormControl-label {
-    cursor: pointer;
-  }
-
-/* these selectors are temporary to override base.scss
-** once Field styles are widely adopted, we can adjust this and the global base styles */
-
-input[type='checkbox'].FormControl-checkbox {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
-}
-
-input.FormControl-checkbox[type='checkbox'][disabled] {
-    color: var(--color-yattho-fg-disabled);
-    cursor: not-allowed;
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    opacity: 1;
-    -webkit-text-fill-color: var(--color-yattho-fg-disabled);
-  }
-
-input.FormControl-checkbox[type='checkbox'][invalid]:not(:focus) {
-    border-color: var(--color-danger-emphasis);
-  }
-
-input.FormControl-checkbox[type='checkbox']:not([type='checkbox'], [type='radio']):focus {
-    border-color: var(--color-accent-fg);
-    outline: none;
-    box-shadow: inset 0 0 0 1px var(--color-accent-fg);
-
-    /* remove fallback :focus if :focus-visible is supported */
-  }
-
-input.FormControl-checkbox[type='checkbox']:not([type='checkbox'], [type='radio']):focus:not(:focus-visible) {
-      border-color: transparent;
-
-      border-color: var(--color-accent-fg);
-
-      outline: none;
-
-      box-shadow: inset 0 0 0 1px transparent var(--color-accent-fg);
-    }
-
-/* default focus state */
-
-input.FormControl-checkbox[type='checkbox']:not([type='checkbox'], [type='radio']):focus-visible {
-    border-color: var(--color-accent-fg);
-    outline: none;
-    box-shadow: inset 0 0 0 1px var(--color-accent-fg);
-  }
-
-input[type='checkbox'].FormControl-checkbox {
-
-  position: relative;
-  display: grid;
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
-  margin: 0;
-  margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
-  cursor: pointer;
-  border-color: var(--color-neutral-emphasis);
-  border-radius: var(--yattho-borderRadius-small, 3px);
-  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
-  -webkit-appearance: none;
-          appearance: none;
-  place-content: center;
-}
-
-input.FormControl-checkbox[type='checkbox']::before {
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
-    visibility: hidden;
-    content: '';
-    background-color: var(--color-fg-on-emphasis);
-    transition: visibility 0s linear 230ms;
-    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
-
-    /* octicon checkmark image */
-    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-            mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-    -webkit-mask-size: 75%;
-            mask-size: 75%;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-            mask-position: center;
-  }
-
-@media screen and (prefers-reduced-motion: no-preference) {
-
-input.FormControl-checkbox[type='checkbox']::before {
-      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
-  }
-    }
-
-/* extend touch target */
-
-input.FormControl-checkbox[type='checkbox']::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  min-height: var(--yattho-control-medium-size, 32px) var(--yattho-control-medium-size, 32px);
-  content: "";
-  transform: translateX(-50%) translateY(-50%);
-}
-
-input.FormControl-checkbox[type='checkbox'][disabled] ~ .FormControl-checkbox-labelWrap .FormControl-label, input.FormControl-checkbox[type='checkbox'][disabled] ~ .FormControl-radio-labelWrap .FormControl-label {
-        color: var(--color-yattho-fg-disabled);
-        cursor: not-allowed;
-      }
-
-input.FormControl-checkbox[type='checkbox']:checked {
-    background: var(--color-accent-fg);
-    border-color: var(--color-accent-fg);
-    transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
-  }
-
-input.FormControl-checkbox[type='checkbox']:checked::before {
-      visibility: visible;
-      transition: visibility 0s linear 0s;
-    }
-
-@media screen and (prefers-reduced-motion: no-preference) {
-
-input.FormControl-checkbox[type='checkbox']:checked::before {
-        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
-    }
-      }
-
-input.FormControl-checkbox[type='checkbox']:checked:disabled {
-      cursor: not-allowed;
-      background-color: var(--color-yattho-fg-disabled);
-      border-color: var(--color-yattho-fg-disabled);
-      opacity: 1;
-    }
-
-input.FormControl-checkbox[type='checkbox']:checked:disabled::before {
-        background-color: var(--color-fg-on-emphasis);
-      }
-
-/* Windows High Contrast mode */
-
-@media (forced-colors: active) {
-
-input.FormControl-checkbox[type='checkbox']:checked {
-      background-color: canvastext;
-      border-color: canvastext;
-  }
-    }
-
-input.FormControl-checkbox[type='checkbox']:focus-visible {
-    outline: 2px solid var(--color-accent-fg);
-    outline-offset: 2px;
-    box-shadow: none;
-  }
-
-input.FormControl-checkbox[type='checkbox']:indeterminate::before {
-      -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-              mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-      visibility: visible;
-    }
-
-input[type='radio'].FormControl-radio {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
-}
-
-input.FormControl-radio[type='radio'][disabled] {
-    color: var(--color-yattho-fg-disabled);
-    cursor: not-allowed;
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    opacity: 1;
-    -webkit-text-fill-color: var(--color-yattho-fg-disabled);
-  }
-
-input.FormControl-radio[type='radio'][invalid]:not(:focus) {
-    border-color: var(--color-danger-emphasis);
-  }
-
-input.FormControl-radio[type='radio']:not([type='checkbox'], [type='radio']):focus {
-    border-color: var(--color-accent-fg);
-    outline: none;
-    box-shadow: inset 0 0 0 1px var(--color-accent-fg);
-
-    /* remove fallback :focus if :focus-visible is supported */
-  }
-
-input.FormControl-radio[type='radio']:not([type='checkbox'], [type='radio']):focus:not(:focus-visible) {
-      border-color: transparent;
-
-      border-color: var(--color-accent-fg);
-
-      outline: none;
-
-      box-shadow: inset 0 0 0 1px transparent var(--color-accent-fg);
-    }
-
-/* default focus state */
-
-input.FormControl-radio[type='radio']:not([type='checkbox'], [type='radio']):focus-visible {
-    border-color: var(--color-accent-fg);
-    outline: none;
-    box-shadow: inset 0 0 0 1px var(--color-accent-fg);
-  }
-
-input[type='radio'].FormControl-radio {
-
-  position: relative;
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
-  margin: 0;
-  margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
-  cursor: pointer;
-  border-color: var(--color-neutral-emphasis);
-  border-radius: var(--yattho-borderRadius-full, 100vh);
-  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
-  -webkit-appearance: none;
-          appearance: none;
-}
-
-input.FormControl-radio[type='radio']::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  min-height: var(--yattho-control-medium-size, 32px) var(--yattho-control-medium-size, 32px);
-  content: "";
-  transform: translateX(-50%) translateY(-50%);
-}
-
-input.FormControl-radio[type='radio']:checked {
-    border-color: var(--color-accent-fg);
-    border-width: var(--base-size-4, 4px);
-  }
-
-input.FormControl-radio[type='radio']:checked:disabled {
-      cursor: not-allowed;
-      border-color: var(--color-yattho-fg-disabled);
-    }
-
-input.FormControl-radio[type='radio']:focus-visible {
-    outline: 2px solid var(--color-accent-fg);
-    outline-offset: 2px;
-    box-shadow: none;
-  }
-
-/* Windows High Contrast mode */
-
-@media (forced-colors: active) {
-
-input[type='radio'].FormControl-radio {
-    background-color: canvastext;
-    border-color: canvastext;
-}
-  }
-
-@keyframes checkmarkIn {
-  from {
-    clip-path: inset(var(--base-size-16, 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(var(--base-size-16, 16px) 0 0 0);
-  }
-}
+.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,4px)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--color-fg-default);font-size:var(--yattho-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--yattho-text-body-lineHeight-medium,1.42857);-webkit-user-select:none;user-select:none}.FormControl-caption{color:var(--color-fg-muted);font-size:var(--yattho-text-caption-size,12px);font-weight:var(--yattho-text-caption-weight,400);line-height:var(--yattho-text-caption-lineHeight,1.33333);margin-bottom:0}.FormControl-inlineValidation{fill:var(--color-danger-fg);align-items:center;color:var(--color-danger-fg);display:flex;flex-direction:row;font-size:var(--yattho-text-caption-size,12px);font-weight:var(--base-text-weight-semibold,600);gap:var(--base-size-4,4px)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--color-yattho-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-yattho-fg-disabled);cursor:not-allowed;opacity:1}.FormControl-input[invalid]:not(:focus),.FormControl-select[invalid]:not(:focus),.FormControl-textarea[invalid]:not(:focus){border-color:var(--color-danger-emphasis)}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--yattho-borderRadius-medium,6px);font-size:var(--yattho-text-body-size-medium,14px);line-height:var(--yattho-text-body-lineHeight-medium,1.42857);padding-block:calc(var(--yattho-control-medium-paddingBlock, 6px) - var(--yattho-borderWidth-thin, 1px));padding-inline:var(--yattho-control-medium-paddingInline-condensed,8px);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--color-yattho-fg-disabled)}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--color-input-disabled-bg)}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--color-fg-subtle);opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--yattho-text-body-size-small,12px);height:var(--yattho-control-small-size,28px);padding-block:var(--yattho-control-small-paddingBlock,4px);padding-inline:var(--yattho-control-small-paddingInline-normal,8px)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--yattho-control-medium-size,32px)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--yattho-control-large-size,40px);padding-block:var(--yattho-control-large-paddingBlock,10px);padding-inline:var(--yattho-control-large-paddingInline-normal,12px)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--color-canvas-inset)}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--color-canvas-default)}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(
+        --yattho-fontStack-monospace,"ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
+      )}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--color-danger-emphasis)}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--color-success-emphasis)}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--color-attention-emphasis)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,16px)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--color-fg-muted);display:block;height:var(--base-size-16,16px);left:var(--base-size-8,8px);pointer-events:none;position:absolute;top:var(--base-size-8,8px);width:var(--base-size-16,16px)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--yattho-borderRadius-small);color:var(--color-fg-muted);cursor:pointer;display:grid;height:var(--yattho-control-xsmall-size,24px);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,4px);top:var(--base-size-4,4px);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--yattho-control-xsmall-size,24px);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--color-yattho-fg-disabled);pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--color-action-list-item-default-hover-bg)}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--color-action-list-item-default-active-bg)}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--color-border-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc((var(--yattho-control-xsmall-size) - var(--base-size-16))/2);width:var(--yattho-borderWidth-thin)}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--yattho-control-medium-size,32px) var(--yattho-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--yattho-control-minTarget-coarse,44px);min-width:var(--yattho-control-minTarget-coarse,44px)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--yattho-control-medium-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--yattho-control-medium-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--yattho-control-medium-gap, 8px) + var(--yattho-borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-small .FormControl-input-leadingVisualWrap{left:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - .125rem);top:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - .125rem)}.FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--yattho-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--yattho-control-small-gap, 8px))}.FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--yattho-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--yattho-control-small-gap, 8px) + var(--yattho-borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction{height:calc(var(--yattho-control-small-size, 28px) - var(--base-size-8, 8px));width:calc(var(--yattho-control-small-size, 28px) - var(--base-size-8, 8px))}.FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction:before{top:calc((var(--yattho-control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-large .FormControl-input-leadingVisualWrap{left:var(--yattho-control-medium-paddingInline-normal,12px);top:var(--yattho-control-medium-paddingInline-normal,12px)}.FormControl-input-wrap.FormControl-large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--yattho-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--yattho-control-large-gap, 8px))}.FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--yattho-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--yattho-control-large-gap, 8px))}.FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--yattho-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--yattho-control-large-gap, 8px) + var(--yattho-borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction{height:var(--yattho-control-small-size,28px);right:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - .125rem);top:calc(var(--yattho-control-medium-paddingInline-condensed, 8px) - .125rem);width:var(--yattho-control-small-size,28px)}.FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction:before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,16px)}.FormControl-select-wrap:after{background-color:var(--color-fg-muted);content:"";grid-column:2;grid-row:1;height:var(--base-size-16,16px);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:initial;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,4px);place-self:center end;pointer-events:none;width:var(--base-size-16,16px)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,20px)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,8px);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}input[type=checkbox].FormControl-checkbox{background-color:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--color-yattho-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-yattho-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--yattho-borderRadius-small,3px);cursor:pointer;display:grid;height:var(--base-size-16,16px);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,16px)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--color-fg-on-emphasis);clip-path:inset(var(--base-size-16,16px) 0 0 0);content:"";height:var(--base-size-16,16px);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:initial;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,16px)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--yattho-control-medium-size,32px) var(--yattho-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label,input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--color-yattho-fg-disabled);cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--color-accent-fg);border-color:var(--color-accent-fg);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--color-yattho-fg-disabled);border-color:var(--color-yattho-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--color-fg-on-emphasis)}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--color-yattho-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-yattho-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--yattho-borderRadius-full,100vh);cursor:pointer;height:var(--base-size-16,16px);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,16px)}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--yattho-control-medium-size,32px) var(--yattho-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio]:checked{border-color:var(--color-accent-fg);border-width:var(--base-size-4,4px)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--color-yattho-fg-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,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(var(--base-size-16,16px) 0 0 0)}}