yattho_view_components 0.0.1

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

@@ -0,0 +1 @@
+{"name":"alpha/text_field","selectors":[".FormControl",".FormControl--fullWidth",".FormControl-label",".FormControl-caption",".FormControl-inlineValidation",".FormControl-inlineValidation p",".FormControl-input","\n.FormControl-select","\n.FormControl-textarea",".FormControl-input[disabled]"," .FormControl-select[disabled]"," .FormControl-textarea[disabled]",".FormControl-input[invalid]:not(:focus)"," .FormControl-select[invalid]:not(:focus)"," .FormControl-textarea[invalid]:not(:focus)",".FormControl-input:not([type='checkbox']"," [type='radio']):focus"," .FormControl-select:not([type='checkbox']"," .FormControl-textarea:not([type='checkbox']"," [type='radio']):focus:not(:focus-visible)"," [type='radio']):focus-visible",".FormControl-input[disabled]::placeholder"," .FormControl-select[disabled]::placeholder"," .FormControl-textarea[disabled]::placeholder",".FormControl-input[readonly]"," .FormControl-select[readonly]"," .FormControl-textarea[readonly]",".FormControl-input::placeholder"," .FormControl-select::placeholder"," .FormControl-textarea::placeholder",".FormControl-input.FormControl-small"," .FormControl-select.FormControl-small"," .FormControl-textarea.FormControl-small",".FormControl-input.FormControl-medium"," .FormControl-select.FormControl-medium"," .FormControl-textarea.FormControl-medium",".FormControl-input.FormControl-large"," .FormControl-select.FormControl-large"," .FormControl-textarea.FormControl-large",".FormControl-input.FormControl-inset"," .FormControl-select.FormControl-inset"," .FormControl-textarea.FormControl-inset",".FormControl-input.FormControl-inset:focus-visible","\n    .FormControl-select.FormControl-inset:focus-visible","\n    .FormControl-textarea.FormControl-inset:focus-visible","\n    .FormControl-input.FormControl-inset:focus","\n    .FormControl-select.FormControl-inset:focus","\n    .FormControl-textarea.FormControl-inset:focus",".FormControl-input.FormControl-monospace"," .FormControl-select.FormControl-monospace"," .FormControl-textarea.FormControl-monospace",".FormControl-input.FormControl-error"," .FormControl-select.FormControl-error"," .FormControl-textarea.FormControl-error",".FormControl-input.FormControl-success"," .FormControl-select.FormControl-success"," .FormControl-textarea.FormControl-success",".FormControl-input.FormControl-warning"," .FormControl-select.FormControl-warning"," .FormControl-textarea.FormControl-warning",".FormControl-toggleSwitchInput",".FormControl-input-wrap",".FormControl-input-wrap .FormControl-input-leadingVisualWrap",".FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual",".FormControl-input-wrap .FormControl-input-trailingAction",".FormControl-input-wrap .FormControl-input-trailingAction svg",".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",".FormControl-input-wrap .FormControl-input-trailingAction:hover",".FormControl-input-wrap .FormControl-input-trailingAction:active",".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider::before",".FormControl-input-wrap .FormControl-input-trailingAction::after",".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",".FormControl-input-wrap.FormControl-small .FormControl-input-leadingVisualWrap",".FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",".FormControl-input-wrap.FormControl-small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",".FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction",".FormControl-input-wrap.FormControl-small .FormControl-input-trailingAction::before",".FormControl-input-wrap.FormControl-large .FormControl-input-leadingVisualWrap",".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",".FormControl-input-wrap.FormControl-large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",".FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction",".FormControl-input-wrap.FormControl-large .FormControl-input-trailingAction::before",".FormControl-select-wrap",".FormControl-select-wrap::after",".FormControl-select-wrap .FormControl-select",".FormControl-checkbox-wrap","\n.FormControl-radio-wrap",".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap","\n  .FormControl-radio-wrap .FormControl-checkbox-labelWrap","\n  .FormControl-checkbox-wrap .FormControl-radio-labelWrap","\n  .FormControl-radio-wrap .FormControl-radio-labelWrap",".FormControl-checkbox-wrap .FormControl-label"," .FormControl-radio-wrap .FormControl-label","input[type='checkbox'].FormControl-checkbox","input.FormControl-checkbox[type='checkbox'][disabled]","input.FormControl-checkbox[type='checkbox'][invalid]:not(:focus)","input.FormControl-checkbox[type='checkbox']:not([type='checkbox']","input.FormControl-checkbox[type='checkbox']::before","input.FormControl-checkbox[type='checkbox']::after","input.FormControl-checkbox[type='checkbox'][disabled] ~ .FormControl-checkbox-labelWrap .FormControl-label"," input.FormControl-checkbox[type='checkbox'][disabled] ~ .FormControl-radio-labelWrap .FormControl-label","input.FormControl-checkbox[type='checkbox']:checked","input.FormControl-checkbox[type='checkbox']:checked::before","input.FormControl-checkbox[type='checkbox']:checked:disabled","input.FormControl-checkbox[type='checkbox']:checked:disabled::before","input.FormControl-checkbox[type='checkbox']:focus-visible","input.FormControl-checkbox[type='checkbox']:indeterminate::before","input[type='radio'].FormControl-radio","input.FormControl-radio[type='radio'][disabled]","input.FormControl-radio[type='radio'][invalid]:not(:focus)","input.FormControl-radio[type='radio']:not([type='checkbox']","input.FormControl-radio[type='radio']::after","input.FormControl-radio[type='radio']:checked","input.FormControl-radio[type='radio']:checked:disabled","input.FormControl-radio[type='radio']:focus-visible","from","to"]}

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

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