@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.6

package/bundled-test-harness/assets/pretui-components-test-Ducr9fLT.css

@@ -0,0 +1,743 @@
+
+  @layer PretComponent {
+    /* the kit's field style, Select's trigger the reference: the --field
+       face, an --input edge, the theme's --ring and --muted-foreground,
+       Button's corner, a --boxel-form-control-height-sm height and
+       --boxel-font-size-xs type */
+    .pretui-inputwrap[data-scopedcss-9515ca7666-5e5f72ffb3] {
+      position: relative;
+      width: 100%;
+      /* --pretui-field-font-size: opt-in type-size knob, set beside
+         --pretui-field-h where a page wants full-size fields */
+      font-size: var(--pretui-field-font-size, var(--boxel-font-size-xs));
+      letter-spacing: var(--boxel-lsp-xs);
+      --background: var(--field);
+      --border: var(--input);
+      /* --pretui-field-h: opt-in height knob (LayoutControl sets it) */
+      --boxel-form-control-height: var(
+        --pretui-field-h,
+        var(--boxel-form-control-height-sm)
+      );
+      --boxel-input-height: var(--boxel-form-control-height);
+      --boxel-form-control-border-radius: calc(var(--radius) - 0.125rem);
+      /* the helper and error rows, a step below the field's text;
+         --pretui-field-message-font-size: opt-in knob, set beside
+         --pretui-field-font-size */
+      --boxel-font-size-sm: var(
+        --pretui-field-message-font-size,
+        var(--boxel-font-size-2xs)
+      );
+      --boxel-sp-xs: var(--boxel-sp-3xs);
+      /* Select's 0.625rem text inset on both sides, less this edge's 1px
+         border. While a validation icon shows, BoxelInput reserves its
+         column at the end instead. */
+      --boxel-sp-sm: calc(0.625rem - 1px);
+      --boxel-input-padding-inline-end: calc(0.625rem - 1px);
+      /* Select's and Autocomplete's states. Hover leaves the edge alone
+         unless the pointer can hover (below). Focus is the kit's 2px --ring
+         outline, laid over the 1px border, which BoxelInput turns --ring. */
+      --boxel-input-hover-border-color: var(--border);
+      --boxel-input-outline: 0 solid transparent;
+      --boxel-input-outline-offset: -1px;
+      --boxel-input-invalid-color: var(--destructive-ink);
+      --boxel-input-invalid-box-shadow: none;
+      --boxel-input-invalid-focus-outline: 2px solid var(--ring);
+      --boxel-input-invalid-focus-box-shadow: none;
+      --boxel-input-disabled-opacity: var(--boxel-disabled-opacity);
+      /* read-only stays focusable and copyable, so it isn't dimmed */
+      --boxel-input-readonly-opacity: 1;
+      /* the invalid dress, from the control's own validation or an
+         invalid Field: the -ink edge, as on Autocomplete (the fill hue
+         misses a boundary's 3:1), and no tint */
+      --pretui-invalid-border: var(--destructive-ink);
+      --pretui-invalid-background: var(--field);
+    }
+    @media (hover: hover) {
+      /* Select's hover edge: toward --foreground, in both schemes. It
+         mixes from --border, so an invalid field keeps its error edge on
+         hover, darkened. */
+      .pretui-inputwrap[data-scopedcss-9515ca7666-5e5f72ffb3] {
+        --boxel-input-hover-border-color: color-mix(
+          in oklch,
+          var(--foreground) 30%,
+          var(--border)
+        );
+      }
+      /* hovering the field or a button inside it (Search's clear,
+         Password's reveal), not its message rows. The edge is set one
+         level in, so it reads the hover color the wrapper resolved from
+         its own --border. */
+      .pretui-inputwrap:has(:is(input, textarea, button):hover):not(
+          :has(:is(input, textarea):is(:focus, :disabled))
+        )
+        > .pretui-inputwrap-field[data-scopedcss-9515ca7666-5e5f72ffb3] {
+        --border: var(--boxel-input-hover-border-color);
+        --boxel-input-invalid-color: var(--boxel-input-hover-border-color);
+      }
+    }
+    /* forced colors paint a transparent outline, so it only gets a width
+       on focus; at rest it would look the same as the focus ring. Focus
+       swaps the error edge for the ring, which wins over hover. */
+    .pretui-inputwrap[data-scopedcss-9515ca7666-5e5f72ffb3]:has(:is(input, textarea):focus) {
+      --boxel-input-outline: 2px solid transparent;
+      --boxel-input-invalid-color: var(--ring);
+    }
+    .pretui-inputoptional[data-scopedcss-9515ca7666-5e5f72ffb3] {
+      display: block;
+      margin-block-end: var(--boxel-sp-3xs);
+      font-size: var(--boxel-font-size-2xs);
+      font-style: oblique;
+      text-align: end;
+      opacity: 0.75;
+    }
+    /* iOS zooms into inputs under 16px on focus */
+    @media (pointer: coarse) {
+      .pretui-inputwrap[data-scopedcss-9515ca7666-5e5f72ffb3] {
+        font-size: var(--boxel-form-control-touch-font-size);
+      }
+    }
+    /* a disabled field can't be fixed, so it drops the error edge */
+    .pretui-inputwrap[data-scopedcss-9515ca7666-5e5f72ffb3]:has(:is(input, textarea):disabled) {
+      --pretui-invalid-border: var(--input);
+    }
+    /* the control's own validation; Field's rule adds the same edge for a
+       Field-level error */
+    .pretui-inputwrap[data-scopedcss-9515ca7666-5e5f72ffb3]:has(:is(input, textarea)[aria-invalid='true']) {
+      --border: var(--pretui-invalid-border);
+    }
+  }
+
+  @layer PretComponent {
+    /* chrome, never a surface: no background, no elevation, no border */
+    /* the message size matches Input's helper and error rows; the 1rem
+       line-height is the row Field reserves for it */
+    .pretui-cue[data-scopedcss-ccfd1fd21d-79ea398cac] {
+      --pretui-cue-glyph-size: 1.5em;
+      --pretui-cue-glyph-font-size: 0.75em;
+      --pretui-cue-glyph-font-weight: 700;
+      --pretui-cue-emphasis-font-weight: 500;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--boxel-sp-4xs);
+      min-width: 0;
+      font-size: var(--boxel-font-size-2xs);
+      line-height: var(--pretui-cue-line-height, 1rem);
+      letter-spacing: var(--boxel-lsp);
+      color: var(--muted-foreground);
+    }
+    /* a tone's text is its -ink; its glyph is the fill with the paired
+       -foreground */
+    .pretui-cue[data-tone='info'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      color: var(--info-ink);
+      --pretui-cue-fill: var(--info);
+      --pretui-cue-on-fill: var(--info-foreground);
+    }
+    .pretui-cue[data-tone='success'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      color: var(--success-ink);
+      --pretui-cue-fill: var(--success);
+      --pretui-cue-on-fill: var(--success-foreground);
+    }
+    .pretui-cue[data-tone='warning'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      color: var(--warning-ink);
+      --pretui-cue-fill: var(--warning);
+      --pretui-cue-on-fill: var(--warning-foreground);
+    }
+    .pretui-cue[data-tone='danger'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      color: var(--destructive-ink);
+      --pretui-cue-fill: var(--destructive);
+      --pretui-cue-on-fill: var(--destructive-foreground);
+    }
+    .pretui-cue[data-kind='label'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      font-family: var(--boxel-ui-label-font-family);
+      font-size: var(--boxel-ui-label-font-size);
+      font-weight: var(--boxel-ui-label-font-weight);
+      line-height: var(--boxel-ui-label-line-height);
+      letter-spacing: var(--boxel-ui-label-letter-spacing);
+    }
+    /* a toned label keeps its tone's ink */
+    .pretui-cue[data-kind='label'][data-tone='neutral'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      color: var(--foreground);
+    }
+    /* a label keeps the label role's weight */
+    .pretui-cue[data-kind='error'][data-scopedcss-ccfd1fd21d-79ea398cac],
+    .pretui-cue[data-tone='danger'][data-scopedcss-ccfd1fd21d-79ea398cac]:not([data-kind='label']) {
+      font-weight: var(--pretui-cue-emphasis-font-weight);
+    }
+    /* top-aligned and one line tall at the cue's own font size, so the glyph
+       centers on the first line of a wrapped message */
+    .pretui-cue-mark[data-scopedcss-ccfd1fd21d-79ea398cac] {
+      display: flex;
+      align-items: center;
+      align-self: flex-start;
+      block-size: 1lh;
+      flex: none;
+    }
+    /* the second, non-color channel the source lacked */
+    .pretui-cue-glyph[data-scopedcss-ccfd1fd21d-79ea398cac] {
+      display: inline-grid;
+      place-items: center;
+      inline-size: var(--pretui-cue-glyph-size);
+      block-size: var(--pretui-cue-glyph-size);
+      border-radius: 50%;
+      font-size: var(--pretui-cue-glyph-font-size);
+      font-weight: var(--pretui-cue-glyph-font-weight);
+      /* the cue's line height would overflow the circle */
+      line-height: 1;
+      background-color: var(--pretui-cue-fill);
+      color: var(--pretui-cue-on-fill);
+    }
+    /* the icon's width/height attributes hold it before this CSS applies;
+       here it scales with the circle */
+    .pretui-cue-icon[data-scopedcss-ccfd1fd21d-79ea398cac] {
+      inline-size: 78%;
+      block-size: 78%;
+    }
+    /* one flex item, so yielded markup stays inline; a long word with no
+       break point wraps anywhere rather than widening the row */
+    .pretui-cue-text[data-scopedcss-ccfd1fd21d-79ea398cac] {
+      min-width: 0;
+      overflow-wrap: break-word;
+    }
+    /* logical edges: the inline pair sit on the control's reading start /
+       end, the block pair above / below. RTL comes free. */
+    .pretui-cue[data-position='inline-start'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      margin-inline-end: var(--boxel-sp-2xs);
+    }
+    .pretui-cue[data-position='inline-end'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      margin-inline-start: var(--boxel-sp-2xs);
+    }
+    .pretui-cue[data-position='block-start'][data-scopedcss-ccfd1fd21d-79ea398cac] {
+      margin-block-end: var(--boxel-sp-4xs);
+    }
+  }
+
+  /* above Input's layer, so these win by layer order, not file order */
+  @layer PretComponent, PretComposite;
+  @layer PretComposite {
+    .pretui-fieldw[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      display: grid;
+      gap: var(--boxel-sp-3xs);
+      grid-template-rows: auto auto auto;
+      align-content: start;
+      justify-items: start;
+    }
+    .pretui-fieldw[data-orientation='horizontal'][data-scopedcss-64a5d1bbb5-dcf933220c] {
+      grid-template-columns:
+        var(--pretui-field-label-size, minmax(8rem, 25%))
+        minmax(0, 1fr);
+      grid-template-rows: auto;
+      column-gap: var(--pretui-field-column-gap, var(--boxel-sp-xs));
+      justify-items: stretch;
+      min-block-size: var(--boxel-form-control-height);
+    }
+    .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      display: contents;
+    }
+    /* the column beside the label is the control's, so what is in it
+       takes its width */
+    .pretui-fieldw[data-orientation='horizontal'] > .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      display: grid;
+      gap: var(--boxel-sp-3xs);
+      align-content: start;
+      justify-items: stretch;
+      align-self: center;
+      min-inline-size: 0;
+    }
+    /* with no label, the control takes the whole row */
+    .pretui-fieldw[data-orientation='horizontal'] > .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c]:first-child {
+      grid-column: 1 / -1;
+    }
+    /* the label column: down to the first line of a control box beside
+       it, which a caller beside text sets to 0 */
+    .pretui-fieldw[data-orientation='horizontal'] > .pretui-fieldhead[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      padding-block-start: var(
+        --pretui-field-label-offset,
+        var(--boxel-sp-sm)
+      );
+    }
+    .pretui-fieldhead[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--boxel-sp-xs);
+      min-inline-size: 0;
+    }
+    .pretui-fieldicon[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      flex: none;
+      inline-size: var(--pretui-field-icon-size, 1rem);
+      block-size: var(--pretui-field-icon-size, 1rem);
+      /* on the label's first line */
+      margin-block-start: calc(
+        (
+            var(--boxel-ui-label-line-height, 1.25) *
+              var(--boxel-ui-label-font-size, 0.75rem) -
+              var(--pretui-field-icon-size, 1rem)
+          ) /
+          2
+      );
+    }
+    .pretui-fieldlabel[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      font-family: var(--boxel-ui-label-font-family);
+      font-size: var(--boxel-ui-label-font-size);
+      font-weight: var(--boxel-ui-label-font-weight);
+      line-height: var(--boxel-ui-label-line-height);
+      letter-spacing: var(--boxel-ui-label-letter-spacing);
+      color: var(--foreground);
+    }
+    /* the control row: accessories sit at the LOGICAL edges, so an RTL
+       reading order moves them without a second rule */
+    .pretui-fieldrow[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      display: flex;
+      align-items: center;
+      justify-self: stretch;
+      min-width: 0;
+    }
+    .pretui-fieldctl[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      flex: 1;
+      min-width: 0;
+    }
+    .pretui-fieldcue[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      flex: none;
+    }
+    .pretui-fieldctl[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-input,
+    .pretui-fieldctl[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-inputwrap,
+    .pretui-fieldctl[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-boxelwrap,
+    .pretui-fieldctl[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-selectwrap {
+      width: 100%;
+    }
+    .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-input,
+    .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-inputwrap,
+    .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-boxelwrap,
+    .pretui-fieldbody[data-scopedcss-64a5d1bbb5-dcf933220c] >  .pretui-selectwrap {
+      justify-self: stretch;
+    }
+    /* a flex row, so the Cue sets the line and the inherited font can't
+       grow it; reads the Cue's line height, so an ancestor sets both */
+    .pretui-fieldmsg[data-scopedcss-64a5d1bbb5-dcf933220c],
+    .pretui-fieldlive[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      display: flex;
+      min-width: 0;
+    }
+    /* the column's width, not the message's, so a long one wraps */
+    .pretui-fieldmsg[data-scopedcss-64a5d1bbb5-dcf933220c] {
+      justify-self: stretch;
+      min-height: var(--pretui-cue-line-height, 1rem);
+    }
+    /* the invalid dress is Input's: a --destructive-ink edge (the fill
+       hue misses a field boundary's 3:1) and no tint, through --input,
+       which the select-type triggers draw their edge from. A disabled
+       control can't be fixed, so it keeps the usual edge; a disabled
+       option or tree row inside it doesn't count. */
+    .pretui-fieldw[data-invalid][data-scopedcss-64a5d1bbb5-dcf933220c]:not(
+        :has(
+          :is(input, textarea, select, button):disabled,
+          [aria-disabled='true']:not([role='option'], [role='treeitem'])
+        )
+      ) {
+      --input: var(--destructive-ink);
+    }
+    /* boxel-ui-wrapped controls: the invalid dress travels through the
+       token channel — repoint the wrapper's --border/--background and the
+       inner BoxelInput re-dresses itself; no CSS reaches boxel markup.
+       A control sets --pretui-invalid-border/-background on its wrapper
+       to choose its own dress. */
+    .pretui-fieldw[data-invalid][data-scopedcss-64a5d1bbb5-dcf933220c] .pretui-inputwrap,
+    .pretui-fieldw[data-invalid][data-scopedcss-64a5d1bbb5-dcf933220c] .pretui-boxelwrap {
+      --border: var(--pretui-invalid-border, var(--destructive-ink));
+      --background: var(--pretui-invalid-background, var(--field));
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-searchglyph[data-scopedcss-da7b9a4122-42a8bccc05] {
+      position: absolute;
+      top: calc(var(--boxel-input-height) / 2);
+      translate: 0 -50%;
+      inset-inline-start: 0.625rem;
+      display: flex;
+      color: var(--muted-foreground);
+      pointer-events: none;
+    }
+    .pretui-searchglyph[data-dimmed][data-scopedcss-da7b9a4122-42a8bccc05] {
+      opacity: var(--boxel-disabled-opacity);
+    }
+  }
+
+  @layer PretComponent {
+    /* the magnifier's positioned box: the field, without the Optional
+       label above it */
+    .pretui-inputfield[data-scopedcss-9c5967a788-6059ed0c39] {
+      position: relative;
+    }
+  }
+
+  @layer PretComponent {
+    /* Select's field style: the --field face, a 1px --input edge inside
+       the box, Button's corner, --boxel-form-control-height-sm at size m
+       and --boxel-font-size-xs type, with Select's caret at its inset */
+    .pretui-nativeselect[data-scopedcss-1fe4353c4d-852fa59adf] {
+      --ns-h-base: var(--boxel-form-control-height-sm);
+      --ns-h: var(--ns-h-base);
+      /* Select's 0.625rem text inset, less the edge's 1px border */
+      --ns-pad: calc(0.625rem - 1px);
+      position: relative;
+      display: inline-grid;
+      align-items: center;
+      inline-size: 100%;
+      min-inline-size: 0;
+      font-size: var(--boxel-font-size-xs);
+      letter-spacing: var(--boxel-lsp-xs);
+    }
+    .pretui-nativeselect-control[data-scopedcss-1fe4353c4d-852fa59adf] {
+      appearance: none;
+      inline-size: 100%;
+      min-block-size: var(--ns-h);
+      margin: 0;
+      padding-block: 0;
+      padding-inline: var(--ns-pad)
+        calc(var(--ns-pad) + 0.625rem + var(--boxel-sp-2xs));
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      letter-spacing: inherit;
+      line-height: var(--boxel-form-control-line-height-sm);
+      color: var(--foreground);
+      background-color: var(--field);
+      border: 1px solid var(--input);
+      border-radius: calc(var(--radius) - 0.125rem);
+      cursor: pointer;
+      transition: border-color var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, ease);
+    }
+    .pretui-nativeselect[data-empty='true'] .pretui-nativeselect-control[data-scopedcss-1fe4353c4d-852fa59adf] {
+      color: var(--muted-foreground);
+    }
+    /* the -ink edge (the fill hue misses a field boundary's 3:1), which
+       hover darkens; a disabled field can't be fixed, so it drops it */
+    .pretui-nativeselect[data-invalid='true']
+      .pretui-nativeselect-control[data-scopedcss-1fe4353c4d-852fa59adf]:not(:disabled) {
+      --input: var(--destructive-ink);
+    }
+    /* Select's hover edge: toward --foreground, in both schemes */
+    @media (hover: hover) {
+      .pretui-nativeselect-control[data-scopedcss-1fe4353c4d-852fa59adf]:hover:not(:disabled) {
+        border-color: color-mix(
+          in oklch,
+          var(--foreground) 30%,
+          var(--input)
+        );
+      }
+    }
+    .pretui-nativeselect-control[data-scopedcss-1fe4353c4d-852fa59adf]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: -1px;
+    }
+    .pretui-nativeselect-control[data-scopedcss-1fe4353c4d-852fa59adf]:disabled {
+      opacity: var(--boxel-disabled-opacity);
+      cursor: default;
+    }
+    /* the platform draws the open list, so the caret never flips */
+    .pretui-nativeselect-caret[data-scopedcss-1fe4353c4d-852fa59adf] {
+      position: absolute;
+      inset-inline-end: 0.625rem;
+      color: var(--muted-foreground);
+      pointer-events: none;
+    }
+    .pretui-nativeselect:has(select:disabled) .pretui-nativeselect-caret[data-scopedcss-1fe4353c4d-852fa59adf] {
+      opacity: var(--boxel-disabled-opacity);
+    }
+    .pretui-nativeselect[data-size='xs'][data-scopedcss-1fe4353c4d-852fa59adf] {
+      --ns-h: calc(var(--ns-h-base) - 0.375rem);
+      font-size: var(--boxel-font-size-2xs);
+    }
+    .pretui-nativeselect[data-size='s'][data-scopedcss-1fe4353c4d-852fa59adf] {
+      --ns-h: calc(var(--ns-h-base) - 0.1875rem);
+      font-size: var(--boxel-font-size-2xs);
+    }
+    .pretui-nativeselect[data-size='l'][data-scopedcss-1fe4353c4d-852fa59adf] {
+      --ns-h: calc(var(--ns-h-base) + 0.25rem);
+      font-size: var(--boxel-font-size-sm);
+    }
+    .pretui-nativeselect[data-size='xl'][data-scopedcss-1fe4353c4d-852fa59adf] {
+      --ns-h: calc(var(--ns-h-base) + 0.5rem);
+      font-size: var(--boxel-font-size-sm);
+    }
+    /* iOS zooms into inputs under 16px on focus */
+    @media (pointer: coarse) {
+      .pretui-nativeselect[data-scopedcss-1fe4353c4d-852fa59adf],
+      .pretui-nativeselect[data-size][data-scopedcss-1fe4353c4d-852fa59adf] {
+        font-size: var(--boxel-form-control-touch-font-size);
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-switch[data-scopedcss-c09a27df25-c369026ab0] {
+      position: relative;
+      width: 30px;
+      height: 18px;
+      border-radius: 9px;
+      background: var(
+        --pretui-control-border,
+        var(--line-strong, var(--boxel-400))
+      );
+      cursor: pointer;
+      border: 0;
+      padding: 0;
+      transition: background var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, ease);
+      flex: none;
+    }
+    /* Stretches the hit area to the 24px minimum target of WCAG 2.5.8
+       on the short axis, leaving the drawn track as it is. The inset
+       reads the track's own height, so the target stays 24px tall if
+       that height changes. */
+    .pretui-switch[data-scopedcss-c09a27df25-c369026ab0]::before {
+      content: '';
+      position: absolute;
+      inset: calc((100% - 24px) / 2) 0;
+    }
+    .pretui-switch[data-scopedcss-c09a27df25-c369026ab0]:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+    }
+    .pretui-switch[data-scopedcss-c09a27df25-c369026ab0]:active:not(:disabled) {
+      box-shadow: var(
+        --pretui-shadow-inset,
+        inset 0 1px 2px rgb(0 0 0 / 0.16)
+      );
+    }
+    .pretui-switch[data-state='checked'][data-scopedcss-c09a27df25-c369026ab0] {
+      background: var(--primary);
+    }
+    .pretui-switch[data-scopedcss-c09a27df25-c369026ab0]:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    .pretui-switch-thumb[data-scopedcss-c09a27df25-c369026ab0] {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--card);
+      box-shadow: 0 1px 2px var(--shadow-ink-mid, rgb(0 0 0 / 0.08));
+      transition: transform var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, ease);
+    }
+    .pretui-switch[data-state='checked'] .pretui-switch-thumb[data-scopedcss-c09a27df25-c369026ab0] {
+      transform: translateX(12px);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-switch[data-scopedcss-c09a27df25-c369026ab0],
+      .pretui-switch-thumb[data-scopedcss-c09a27df25-c369026ab0] {
+        transition: none;
+      }
+    }
+  }
+
+  @layer PretComponent {
+    .pretui-treeselect[data-scopedcss-cf437da5df-b810219660] {
+      position: relative;
+      display: inline-block;
+      min-inline-size: 14rem;
+      font-family: var(--font-sans);
+      font-size: var(--boxel-font-size-xs);
+      letter-spacing: var(--boxel-lsp-xs);
+    }
+    /* Select's field style: the --field face, a 1px --input edge inside
+       the box, Button's corner and a --boxel-form-control-height-sm
+       height that grows with wrapped chips; the block padding seats a
+       1.25rem chip in the rest height */
+    .pretui-treeselect-trigger[data-scopedcss-cf437da5df-b810219660] {
+      display: flex;
+      align-items: center;
+      gap: var(--boxel-sp-2xs);
+      inline-size: 100%;
+      min-block-size: var(--boxel-form-control-height-sm);
+      padding-block: calc(0.25rem - 1px);
+      padding-inline: calc(0.25rem - 1px) calc(0.625rem - 1px);
+      border: 1px solid var(--input);
+      border-radius: calc(var(--radius) - 0.125rem);
+      background-color: var(--field);
+      color: var(--foreground);
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      letter-spacing: inherit;
+      line-height: var(--boxel-form-control-line-height-sm);
+      text-align: start;
+      cursor: pointer;
+      transition: border-color var(--pretui-dur-snap, 180ms)
+        var(--pretui-ease-snap, ease);
+    }
+    /* Select's hover edge: toward --foreground, in both schemes */
+    @media (hover: hover) {
+      .pretui-treeselect-trigger[data-scopedcss-cf437da5df-b810219660]:hover:not(:disabled) {
+        border-color: color-mix(
+          in oklch,
+          var(--foreground) 30%,
+          var(--input)
+        );
+      }
+    }
+    .pretui-treeselect-trigger[data-scopedcss-cf437da5df-b810219660]:focus-visible,
+    .pretui-treeselect-trigger[aria-expanded='true'][data-scopedcss-cf437da5df-b810219660] {
+      outline: 2px solid var(--ring);
+      outline-offset: -1px;
+    }
+    .pretui-treeselect-trigger[data-scopedcss-cf437da5df-b810219660]:disabled {
+      opacity: var(--boxel-disabled-opacity);
+      cursor: default;
+    }
+    /* iOS zooms into inputs under 16px on focus */
+    @media (pointer: coarse) {
+      .pretui-treeselect[data-scopedcss-cf437da5df-b810219660] {
+        font-size: var(--boxel-form-control-touch-font-size);
+      }
+    }
+    .pretui-treeselect-chips[data-scopedcss-cf437da5df-b810219660] {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      min-inline-size: 0;
+    }
+    .pretui-treeselect-chip[data-scopedcss-cf437da5df-b810219660],
+    .pretui-treeselect-more[data-scopedcss-cf437da5df-b810219660] {
+      display: inline-flex;
+      align-items: center;
+      block-size: 1.25rem;
+      padding-inline: 0.5rem;
+      border-radius: var(--radius-chip, 6px);
+      background: color-mix(in oklch, var(--muted-foreground) var(--pretui-chip-mix, 20%), var(--card));
+      white-space: nowrap;
+    }
+    .pretui-treeselect-more[data-scopedcss-cf437da5df-b810219660] {
+      color: var(--muted-foreground);
+      font-variant-numeric: tabular-nums;
+    }
+    /* lines up with the text in Select's trigger */
+    .pretui-treeselect-placeholder[data-scopedcss-cf437da5df-b810219660] {
+      flex: 1;
+      padding-inline-start: 0.375rem;
+      color: var(--muted-foreground);
+    }
+    .pretui-treeselect-caret[data-scopedcss-cf437da5df-b810219660] {
+      flex: none;
+      margin-inline-start: auto;
+      color: var(--muted-foreground);
+    }
+    /* points up while the tree is open, as on Select */
+    .pretui-treeselect[data-open='true'] .pretui-treeselect-caret[data-scopedcss-cf437da5df-b810219660] {
+      rotate: 180deg;
+    }
+    .pretui-treeselect-tree[data-scopedcss-cf437da5df-b810219660] {
+      position: absolute;
+      inset-block-start: calc(100% + 0.25rem);
+      inset-inline: 0;
+      z-index: var(--pretui-z-dropdown, 60);
+      max-block-size: 18rem;
+      overflow-y: auto;
+      margin: 0;
+      padding: 0.25rem;
+      list-style: none;
+      border-radius: var(--radius-surface, 10px);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      box-shadow: var(--pretui-shadow-raised, 0 0 0 1px var(--border), 0 6px 20px rgb(16 24 40 / 0.12));
+    }
+    .pretui-treeselect-row[data-scopedcss-cf437da5df-b810219660] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2, 0.375rem);
+      padding-block: 0.3rem;
+      padding-inline: calc((var(--pretui-row-depth, 1) - 1) * 1rem + 0.25rem) var(--space-3, 0.5rem);
+      border-radius: var(--radius-control, 6px);
+      cursor: pointer;
+    }
+    .pretui-treeselect-row[data-depth='2'][data-scopedcss-cf437da5df-b810219660] {
+      --pretui-row-depth: 2;
+    }
+    .pretui-treeselect-row[data-depth='3'][data-scopedcss-cf437da5df-b810219660] {
+      --pretui-row-depth: 3;
+    }
+    .pretui-treeselect-row[data-depth='4'][data-scopedcss-cf437da5df-b810219660] {
+      --pretui-row-depth: 4;
+    }
+    .pretui-treeselect-row[data-depth='5'][data-scopedcss-cf437da5df-b810219660] {
+      --pretui-row-depth: 5;
+    }
+    .pretui-treeselect-row[data-scopedcss-cf437da5df-b810219660]:hover,
+    .pretui-treeselect-row[data-scopedcss-cf437da5df-b810219660]:focus-visible {
+      background: var(--hover, color-mix(in oklch, var(--foreground) 8%, transparent));
+      outline: 0;
+    }
+    .pretui-treeselect-row[data-scopedcss-cf437da5df-b810219660]:focus-visible {
+      box-shadow: inset 0 0 0 2px var(--ring);
+    }
+    .pretui-treeselect-row[aria-selected='true'][data-scopedcss-cf437da5df-b810219660] {
+      color: var(--primary);
+      font-weight: 600;
+    }
+    .pretui-treeselect-row[aria-disabled='true'][data-scopedcss-cf437da5df-b810219660] {
+      opacity: var(--boxel-disabled-opacity);
+      cursor: default;
+    }
+    .pretui-treeselect-twisty[data-scopedcss-cf437da5df-b810219660],
+    .pretui-treeselect-twisty-space[data-scopedcss-cf437da5df-b810219660] {
+      flex: none;
+      display: grid;
+      place-items: center;
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+    .pretui-treeselect-twisty[data-scopedcss-cf437da5df-b810219660]::before {
+      content: '';
+      inline-size: 0.35rem;
+      block-size: 0.35rem;
+      border-inline-end: 1.5px solid var(--muted-foreground);
+      border-block-end: 1.5px solid var(--muted-foreground);
+      rotate: -45deg;
+      transition: rotate var(--pretui-dur-snap, 160ms) var(--pretui-ease-snap, ease-out);
+    }
+    .pretui-treeselect-twisty[data-open='true'][data-scopedcss-cf437da5df-b810219660]::before {
+      rotate: 45deg;
+    }
+    .pretui-treeselect-box[data-scopedcss-cf437da5df-b810219660] {
+      flex: none;
+      display: grid;
+      place-items: center;
+      inline-size: 0.9rem;
+      block-size: 0.9rem;
+      border-radius: 3px;
+      box-shadow: inset 0 0 0 1.5px var(--muted-foreground);
+    }
+    .pretui-treeselect-box[data-state='true'][data-scopedcss-cf437da5df-b810219660],
+    .pretui-treeselect-box[data-state='mixed'][data-scopedcss-cf437da5df-b810219660] {
+      background: var(--primary);
+      box-shadow: none;
+    }
+    .pretui-treeselect-box[data-state='true'][data-scopedcss-cf437da5df-b810219660]::after {
+      content: '';
+      inline-size: 0.25rem;
+      block-size: 0.45rem;
+      border-inline-end: 1.5px solid var(--primary-foreground);
+      border-block-end: 1.5px solid var(--primary-foreground);
+      rotate: 45deg;
+      translate: 0 -0.05rem;
+    }
+    .pretui-treeselect-box[data-state='mixed'][data-scopedcss-cf437da5df-b810219660]::after {
+      content: '';
+      inline-size: 0.45rem;
+      block-size: 1.5px;
+      background: var(--primary-foreground);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pretui-treeselect-twisty[data-scopedcss-cf437da5df-b810219660]::before {
+        transition: none;
+      }
+    }
+  }