trace-css 0.0.0-stage → 0.1.1

package/dist/trace.classless.css

@@ -0,0 +1,1532 @@
+@layer trace.foundation {
+  :where(:root) {
+    --trace-bg-light: oklch(96.2441% .00418752 236.497);
+    --trace-bg-dark: oklch(19.7902% .0189863 235.357);
+    --trace-neutral: oklch(50% 0 0);
+    --trace-neutral-lighter: oklch(from var(--trace-neutral) calc(l + .5) c h);
+    --trace-neutral-light: oklch(from var(--trace-neutral) calc(l + .25) c h);
+    --trace-neutral-dark: oklch(from var(--trace-neutral) calc(l - .25) c h);
+    --trace-neutral-darker: oklch(from var(--trace-neutral) calc(l - .5) c h);
+    --trace-text-light: oklch(9.44872% .0654731 264.052);
+    --trace-text-dark: oklch(92.494% 0 0);
+    --trace-primary: oklch(37.662% .0682014 228.503);
+    --trace-secondary: oklch(87.9592% .170365 81.3235);
+    --trace-primary-lighter: oklch(from var(--trace-primary) calc(l + (1 - l) * .6) c h);
+    --trace-primary-light: oklch(from var(--trace-primary) calc(l + (1 - l) * .3) c h);
+    --trace-primary-dark: oklch(from var(--trace-primary) calc(l * .7) c h);
+    --trace-primary-darker: oklch(from var(--trace-primary) calc(l * .4) c h);
+    --trace-secondary-lighter: oklch(from var(--trace-secondary) calc(l + (1 - l) * .6) c h);
+    --trace-secondary-light: oklch(from var(--trace-secondary) calc(l + (1 - l) * .3) c h);
+    --trace-secondary-dark: oklch(from var(--trace-secondary) calc(l * .7) c h);
+    --trace-secondary-darker: oklch(from var(--trace-secondary) calc(l * .4) c h);
+    --trace-danger: oklch(52.3358% .198564 31.9584);
+    --trace-success: oklch(69.13% .14353 158.708);
+    --trace-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
+    --trace-font-family-sans: system-ui, sans-serif, var(--trace-font-family-emoji);
+    --trace-font-family-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
+      monospace, var(--trace-font-family-emoji);
+    --trace-font-body: var(--trace-font-family-sans);
+    --trace-font-heading: var(--trace-font-body);
+    --trace-font-code: var(--trace-font-family-mono);
+    --trace-radius-none: 0;
+    --trace-radius-sm: 4px;
+    --trace-radius-full: 50%;
+    --trace-radius-control: var(--trace-radius-sm);
+    --trace-control-padding-block: .625rem;
+    --trace-control-padding-inline: 1rem;
+    --trace-shadow-color: light-dark(oklch(from var(--trace-neutral-darker) l c h / 25%), oklch(from var(--trace-neutral-lighter) l c h / 25%));
+    --trace-shadow: 5px 5px 0 0 var(--trace-shadow-color);
+    --trace-bg: light-dark(var(--trace-bg-light), var(--trace-bg-dark));
+    --trace-text: light-dark(var(--trace-text-light), var(--trace-text-dark));
+    --trace-control-bg: light-dark(var(--trace-neutral-lighter), var(--trace-bg-dark));
+  }
+
+  :where(*) {
+    box-sizing: border-box;
+  }
+
+  :where(body) {
+    font-family: var(--trace-font-body);
+    background-color: var(--trace-bg);
+    color: var(--trace-text);
+    margin: 0;
+  }
+
+  :where(button, input, select, textarea) {
+    font: inherit;
+  }
+
+  :where(:root) {
+    color-scheme: light dark;
+  }
+
+  :where([data-mode="light"], [data-mode="dark"]) {
+    background-color: var(--trace-bg);
+    color: var(--trace-text);
+  }
+
+  :where([data-mode="light"]) {
+    color-scheme: light;
+  }
+
+  :where([data-mode="dark"]) {
+    color-scheme: dark;
+  }
+}
+
+@layer trace.elements {
+  :where(:root) {
+    --trace-font-size-h1: 3rem;
+    --trace-font-size-h2: 2.5rem;
+    --trace-font-size-h3: 2rem;
+    --trace-font-size-h4: 1.5rem;
+    --trace-font-size-h5: 1.25rem;
+    --trace-font-size-h6: 1rem;
+    --trace-typography-line-height: 1.6;
+    --trace-heading-line-height: 1.25;
+    --trace-heading-margin-block-end: 1rem;
+    --trace-paragraph-margin-block-end: 1rem;
+    --trace-divider-margin-block: 2rem;
+    --trace-blockquote-margin-block: 1.5rem;
+    --trace-blockquote-padding-block: .75rem;
+    --trace-blockquote-padding-inline: 1.25rem;
+    --trace-typography-border: light-dark(var(--trace-neutral-light), var(--trace-neutral-dark));
+    --trace-mark-bg: var(--trace-secondary-lighter);
+    --trace-mark-text: var(--trace-neutral-darker);
+    --trace-kbd-bg: light-dark(var(--trace-neutral-dark), var(--trace-neutral-lighter));
+    --trace-kbd-text: light-dark(var(--trace-text-dark), var(--trace-text-light));
+    --trace-kbd-border: light-dark(var(--trace-neutral-darker), var(--trace-neutral-light));
+    --trace-kbd-shadow: 1px 1px 0 0
+      oklch(from var(--trace-neutral-darker) l c h / 25%);
+    --trace-blockquote-border: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-blockquote-bg: light-dark(color-mix(in oklch,
+        var(--trace-bg-light),
+        var(--trace-neutral-darker) 5%), color-mix(in oklch, var(--trace-bg-dark), var(--trace-neutral-lighter) 8%));
+  }
+
+  @media (width < 48rem) {
+    :where(:root) {
+      --trace-font-size-h1: 2rem;
+      --trace-font-size-h2: 1.75rem;
+      --trace-font-size-h3: 1.5rem;
+      --trace-font-size-h4: 1.25rem;
+      --trace-font-size-h5: 1.125rem;
+    }
+  }
+
+  :where(body) {
+    line-height: var(--trace-typography-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0 var(--trace-heading-margin-block-end);
+    font-family: var(--trace-font-heading);
+    font-weight: 700;
+    line-height: var(--trace-heading-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  :where(h1) {
+    font-size: var(--trace-font-size-h1);
+  }
+
+  :where(h2) {
+    font-size: var(--trace-font-size-h2);
+  }
+
+  :where(h3) {
+    font-size: var(--trace-font-size-h3);
+  }
+
+  :where(h4) {
+    font-size: var(--trace-font-size-h4);
+  }
+
+  :where(h5) {
+    font-size: var(--trace-font-size-h5);
+  }
+
+  :where(h6) {
+    font-size: var(--trace-font-size-h6);
+  }
+
+  :where(code, pre, kbd, samp) {
+    font-family: var(--trace-font-code);
+  }
+
+  :where(pre) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    overflow-x: auto;
+  }
+
+  :where(p) {
+    margin-block: 0 var(--trace-paragraph-margin-block-end);
+    line-height: var(--trace-typography-line-height);
+  }
+
+  :where(ul, ol, dl) {
+    line-height: var(--trace-typography-line-height);
+  }
+
+  :where(abbr[title]) {
+    text-underline-offset: .2em;
+    cursor: help;
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  :where(strong, b) {
+    font-weight: 700;
+  }
+
+  :where(i, em, cite) {
+    font-style: italic;
+  }
+
+  :where(del, s) {
+    text-decoration: line-through;
+  }
+
+  :where(ins, u) {
+    text-underline-offset: .15em;
+    text-decoration: underline;
+  }
+
+  :where(kbd) {
+    border: 1px solid var(--trace-kbd-border);
+    border-radius: var(--trace-radius-sm);
+    background-color: var(--trace-kbd-bg);
+    color: var(--trace-kbd-text);
+    box-shadow: var(--trace-kbd-shadow);
+    vertical-align: baseline;
+    border-bottom-width: 2px;
+    padding: .125em .375em;
+    font-size: .875em;
+    line-height: 1.25;
+    display: inline-block;
+  }
+
+  :where(mark) {
+    border-radius: var(--trace-radius-sm);
+    background-color: var(--trace-mark-bg);
+    color: var(--trace-mark-text);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    padding: .125em .25em;
+  }
+
+  :where(small) {
+    font-size: .875em;
+  }
+
+  :where(sub, sup) {
+    vertical-align: baseline;
+    font-size: .75em;
+    line-height: 0;
+    position: relative;
+  }
+
+  :where(sub) {
+    bottom: -.25em;
+  }
+
+  :where(sup) {
+    top: -.5em;
+  }
+
+  :where(hr) {
+    height: 0;
+    margin-block: var(--trace-divider-margin-block);
+    border: 0;
+    border-block-start: 2px solid var(--trace-typography-border);
+  }
+
+  :where(blockquote) {
+    margin-block: var(--trace-blockquote-margin-block);
+    padding-block: var(--trace-blockquote-padding-block);
+    padding-inline: var(--trace-blockquote-padding-inline);
+    border-inline-start: .25rem solid var(--trace-blockquote-border);
+    background-color: var(--trace-blockquote-bg);
+    line-height: var(--trace-typography-line-height);
+    margin-inline: 0;
+  }
+
+  :where(blockquote > :last-child) {
+    margin-block-end: 0;
+  }
+
+  :where(:root) {
+    --trace-link-color: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-link-hover: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
+    --trace-link-active: light-dark(var(--trace-primary-dark), var(--trace-secondary-dark));
+    --trace-link-visited: var(--trace-link-color);
+    --trace-link-focus: var(--trace-link-color);
+    --trace-link-underline-offset: .2em;
+    --trace-link-underline-thickness: .08em;
+  }
+
+  :where(a[href]) {
+    color: var(--trace-link-color);
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    text-decoration-thickness: var(--trace-link-underline-thickness);
+    text-underline-offset: var(--trace-link-underline-offset);
+    -webkit-text-decoration-skip-ink: auto;
+    text-decoration-skip-ink: auto;
+    border-radius: var(--trace-radius-sm);
+    transition: color .15s ease-in-out;
+
+    &:visited {
+      color: var(--trace-link-visited);
+    }
+
+    &:hover {
+      color: var(--trace-link-hover);
+      text-decoration-thickness: calc(var(--trace-link-underline-thickness) * 2);
+    }
+
+    &:active {
+      color: var(--trace-link-active);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--trace-link-focus);
+      outline-offset: 3px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(a[href]) {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(a[href]) {
+      color: linktext;
+
+      &:visited {
+        color: visitedtext;
+      }
+
+      &:active {
+        color: activetext;
+      }
+
+      &:focus-visible {
+        outline-color: highlight;
+      }
+    }
+  }
+
+  :where(:root) {
+    --trace-table-text: var(--trace-text);
+    --trace-table-accent: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-table-border: color-mix(in oklch,
+      var(--trace-table-accent),
+      transparent 78%);
+    --trace-table-header-bg: transparent;
+    --trace-table-header-text: var(--trace-table-accent);
+    --trace-table-row-heading: var(--trace-table-text);
+    --trace-table-footer-bg: transparent;
+    --trace-table-stripe-bg: color-mix(in oklch,
+      var(--trace-table-accent),
+      transparent 97%);
+    --trace-table-hover-bg: light-dark(color-mix(in oklch, var(--trace-primary), transparent 93%), color-mix(in oklch, var(--trace-secondary), transparent 90%));
+    --trace-table-radius: 0;
+    --trace-table-padding-block: .75rem;
+    --trace-table-padding-inline: .75rem;
+    --trace-table-font-size: 1rem;
+    --trace-table-line-height: 1.5;
+  }
+
+  :where(table) {
+    border-collapse: separate;
+    border-spacing: 0;
+    inline-size: 100%;
+    color: var(--trace-table-text);
+    font-size: var(--trace-table-font-size);
+    line-height: var(--trace-table-line-height);
+    text-align: start;
+  }
+
+  :where(table > caption) {
+    caption-side: top;
+    text-align: start;
+    padding-block: 0 1rem;
+    padding-inline: 0;
+    font-size: 1em;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  :where(table > :is(thead, tbody, tfoot) > tr > :is(th, td), table > tr > :is(th, td)) {
+    padding: var(--trace-table-padding-block) var(--trace-table-padding-inline);
+    border-block-end: 1px solid var(--trace-table-border);
+    vertical-align: top;
+    text-align: inherit;
+  }
+
+  :where(table > :is(thead, tbody, tfoot) > tr > th, table > tr > th) {
+    font-weight: 600;
+  }
+
+  :where(table > thead > tr > :is(th, td)) {
+    background-color: var(--trace-table-header-bg);
+    color: var(--trace-table-header-text);
+    border-block-end: 2px solid var(--trace-table-accent);
+    vertical-align: middle;
+    letter-spacing: normal;
+    font-size: .875em;
+  }
+
+  :where(table > tbody > tr > th) {
+    color: var(--trace-table-row-heading);
+  }
+
+  :where(table > thead > tr:first-child > :first-child) {
+    border-start-start-radius: var(--trace-table-radius);
+  }
+
+  :where(table > thead > tr:first-child > :last-child) {
+    border-start-end-radius: var(--trace-table-radius);
+  }
+
+  :where(table:has( > tfoot) > tbody:last-of-type > tr:last-child > :is(th, td)) {
+    border-block-end: 0;
+  }
+
+  :where(table > tfoot > tr > :is(th, td)) {
+    background-color: var(--trace-table-footer-bg);
+    color: var(--trace-table-accent);
+    border-block-start: 2px solid var(--trace-table-accent);
+    border-block-end: 0;
+    font-weight: 600;
+  }
+
+  :where(table > tfoot > tr:last-child > :first-child) {
+    border-end-start-radius: var(--trace-table-radius);
+  }
+
+  :where(table > tfoot > tr:last-child > :last-child) {
+    border-end-end-radius: var(--trace-table-radius);
+  }
+
+  @keyframes trace-square-rotate {
+    0% {
+      transform: rotateX(0) rotateY(0);
+    }
+
+    25% {
+      transform: rotateX(180deg) rotateY(0);
+    }
+
+    50% {
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+
+    75% {
+      transform: rotateX(0) rotateY(180deg);
+    }
+
+    100% {
+      transform: rotateX(0) rotateY(0);
+    }
+  }
+
+  :where(div, section, article, main, aside, nav, header, footer, form, fieldset, figure):where([aria-busy="true"]) {
+    isolation: isolate;
+    cursor: wait;
+    position: relative;
+
+    &:before {
+      content: "";
+      z-index: 1;
+      border-radius: inherit;
+      background: var(--trace-loader-overlay, color-mix(in srgb, var(--trace-bg), transparent 30%));
+      position: absolute;
+      inset: 0;
+    }
+
+    &:after {
+      content: "";
+      z-index: 2;
+      inline-size: var(--trace-loader-size, 2rem);
+      block-size: var(--trace-loader-size, 2rem);
+      border-radius: var(--trace-loader-radius, 2px);
+      background-color: var(--trace-loader-color, light-dark(var(--trace-primary), var(--trace-secondary)));
+      animation: trace-square-rotate var(--trace-loader-duration, 3s)
+        ease-in-out infinite;
+      pointer-events: none;
+      margin: auto;
+      position: absolute;
+      inset: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &:after {
+        animation: none;
+      }
+    }
+  }
+
+  :where(:root) {
+    --trace-button-color: light-dark(var(--trace-primary-darker), var(--trace-secondary));
+    --trace-button-contrast: light-dark(var(--trace-secondary), var(--trace-primary-dark));
+    --trace-button-outline-color: var(--trace-button-color);
+    --trace-button-radius: var(--trace-radius-control);
+    --trace-button-font-size: 1rem;
+    --trace-button-line-height: 1.5rem;
+    --trace-button-padding-block: .375rem;
+    --trace-button-padding-inline: .75rem;
+    --trace-button-box-shadow: var(--trace-shadow);
+    --trace-button-icon-gap: .5em;
+  }
+
+  :where(button[type="reset"], input[type="reset"]) {
+    --trace-button-color: var(--trace-primary-light);
+    --trace-button-contrast: var(--trace-secondary-lighter);
+    --trace-button-outline-color: var(--trace-button-color);
+  }
+
+  :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
+    justify-content: center;
+    align-items: center;
+    gap: var(--trace-button-icon-gap);
+    box-sizing: border-box;
+    padding: var(--trace-button-padding-block)
+      var(--trace-button-padding-inline);
+    border: 2px solid var(--trace-button-border, var(--trace-button-color));
+    border-radius: var(--trace-button-radius);
+    background-color: var(--trace-button-bg, var(--trace-button-color));
+    color: var(--trace-button-text, var(--trace-button-contrast));
+    font-size: var(--trace-button-font-size);
+    font-weight: 400;
+    line-height: var(--trace-button-line-height);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
+    display: inline-flex;
+  }
+
+  :where(button:hover:not(:disabled), input[type="button"]:hover:not(:disabled), input[type="submit"]:hover:not(:disabled), input[type="reset"]:hover:not(:disabled)) {
+    box-shadow: var(--trace-button-box-shadow);
+  }
+
+  :where(button:active:not(:disabled), input[type="button"]:active:not(:disabled), input[type="submit"]:active:not(:disabled), input[type="reset"]:active:not(:disabled)) {
+    box-shadow: var(--trace-button-box-shadow);
+    transform: scale(.95);
+  }
+
+  :where(button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible) {
+    outline: 2px solid var(--trace-button-outline-color);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  :where(button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  :where(button[aria-busy="true"]):after {
+    content: "";
+    inline-size: var(--trace-loader-size, 1em);
+    block-size: var(--trace-loader-size, 1em);
+    border-radius: var(--trace-loader-radius, 2px);
+    background-color: var(--trace-button-loader-color, var(--trace-button-text, var(--trace-button-contrast)));
+    animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
+      infinite;
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled) {
+      opacity: 1;
+      color: graytext;
+      border-color: graytext;
+    }
+  }
+
+  :where(button[aria-busy="true"]) {
+    cursor: wait;
+    opacity: 1;
+    box-shadow: none;
+    color: #0000;
+    position: relative;
+    transform: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(button[aria-busy="true"]):after {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(button[aria-busy="true"]) {
+      forced-color-adjust: none;
+      background-color: buttonface;
+      border-color: buttontext;
+    }
+
+    :where(button[aria-busy="true"]):after {
+      background-color: buttontext;
+    }
+  }
+
+  :where(button[aria-busy="true"] > *) {
+    opacity: 0;
+  }
+
+  :where(:root) {
+    --trace-switch-width: 2.125rem;
+    --trace-switch-height: 1.25rem;
+    --trace-switch-dot-size: .75rem;
+    --trace-switch-dot-active-size: .875rem;
+    --trace-switch-padding: .125rem;
+    --trace-switch-color: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-switch-radius: var(--trace-radius-sm);
+  }
+
+  :where(input[type="checkbox"][role="switch"]) {
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--trace-switch-width);
+    block-size: var(--trace-switch-height);
+    padding: var(--trace-switch-padding);
+    border: 2px solid var(--trace-switch-color);
+    border-radius: var(--trace-switch-radius);
+    background-color: var(--trace-switch-bg, var(--trace-control-bg));
+    background-image: radial-gradient(ellipse at center,
+      var(--trace-switch-color) 50%,
+      transparent 50%);
+    vertical-align: middle;
+    cursor: pointer;
+    background-position: right -100% top 50%;
+    background-repeat: no-repeat;
+    background-size: 200% 300%;
+    flex-shrink: 0;
+    margin: 2px;
+    transition: transform .25s ease-in-out, background-position .25s ease-in-out;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :where(input[type="checkbox"][role="switch"]):before {
+    content: "";
+    inline-size: var(--trace-switch-dot-size);
+    block-size: var(--trace-switch-dot-size);
+    background-color: var(--trace-switch-color);
+    border-radius: 2px;
+    transition: inset-inline-start .2s ease-in-out, inline-size .2s ease-in-out, background-color .2s ease-in-out;
+    position: absolute;
+    inset-block-start: var(--trace-switch-padding);
+    inset-inline-start: var(--trace-switch-padding);
+  }
+
+  :where(input[type="checkbox"][role="switch"]:checked) {
+    background-position: right 40% top 50%;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:checked):before {
+    background-color: var(--trace-switch-dot-checked, var(--trace-switch-bg, var(--trace-control-bg)));
+    inset-inline-start: calc(100% - var(--trace-switch-dot-size) - var(--trace-switch-padding));
+  }
+
+  :where(input[type="checkbox"][role="switch"]:dir(rtl)) {
+    background-position: -100%;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:dir(rtl):checked) {
+    background-position: 40%;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:focus-visible) {
+    outline: 2px solid var(--trace-switch-color);
+    outline-offset: 2px;
+  }
+
+  :where(label:has( > input[type="checkbox"][role="switch"])) {
+    cursor: pointer;
+    align-items: center;
+    gap: .5rem;
+    display: inline-flex;
+  }
+
+  :where(input[type="checkbox"][role="switch"]:active:not(:disabled), label:active > input[type="checkbox"][role="switch"]:not(:disabled)) {
+    transform: scale(.9);
+  }
+
+  :where(input[type="checkbox"][role="switch"]:active:not(:disabled), label:active > input[type="checkbox"][role="switch"]:not(:disabled)):before {
+    inline-size: var(--trace-switch-dot-active-size);
+  }
+
+  :where(input[type="checkbox"][role="switch"]:active:checked:not(:disabled), label:active > input[type="checkbox"][role="switch"]:checked:not(:disabled)):before {
+    inset-inline-start: calc(100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding));
+  }
+
+  :where(input[type="checkbox"][role="switch"]:disabled) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  :where(label:has( > input[type="checkbox"][role="switch"]:disabled)) {
+    cursor: not-allowed;
+  }
+
+  :where(label > input[type="checkbox"][role="switch"]:disabled ~ span) {
+    opacity: .5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(input[type="checkbox"][role="switch"]), :where(input[type="checkbox"][role="switch"]):before {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="checkbox"][role="switch"]) {
+      appearance: auto;
+      background: none;
+    }
+
+    :where(input[type="checkbox"][role="switch"]):before {
+      content: none;
+    }
+  }
+
+  :where(input[type="checkbox"][role="switch"][aria-invalid="true"]) {
+    --trace-switch-color: var(--trace-danger);
+  }
+
+  :where(:root) {
+    --trace-radio-size: 1.25rem;
+    --trace-radio-color: light-dark(var(--trace-primary), var(--trace-secondary));
+  }
+
+  :where(input[type="radio"]) {
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--trace-radio-size);
+    block-size: var(--trace-radio-size);
+    border: 2px solid var(--trace-radio-color);
+    background: var(--trace-radio-bg, var(--trace-control-bg));
+    vertical-align: middle;
+    cursor: pointer;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin: 2px;
+    padding: 0;
+    transition: transform .25s ease-in-out, border-color .25s ease-in-out;
+    display: inline-block;
+    position: relative;
+  }
+
+  :where(input[type="radio"]):before {
+    content: "";
+    box-sizing: border-box;
+    border: 2px solid var(--trace-radio-color);
+    background-color: #0000;
+    border-radius: 50%;
+    transition: border-color .25s ease-in-out, background-color .25s ease-in-out, transform .25s ease-in-out;
+    position: absolute;
+    inset: -2px;
+  }
+
+  :where(input[type="radio"]:checked):before {
+    background-color: var(--trace-radio-color);
+    transform: scale(.6);
+  }
+
+  :where(input[type="radio"]:focus-visible) {
+    outline: 2px solid var(--trace-radio-color);
+    outline-offset: 2px;
+  }
+
+  :where(label:has( > input[type="radio"])) {
+    cursor: pointer;
+    align-items: center;
+    gap: .5rem;
+    display: inline-flex;
+  }
+
+  :where(input[type="radio"]:active:not(:disabled), label:active > input[type="radio"]:not(:disabled)) {
+    transform: scale(.9);
+  }
+
+  :where(input[type="radio"]:disabled) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  :where(label:has( > input[type="radio"]:disabled)) {
+    cursor: not-allowed;
+  }
+
+  :where(label > input[type="radio"]:disabled ~ span) {
+    opacity: .5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(input[type="radio"]), :where(input[type="radio"]):before {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="radio"]:checked):before {
+      transform: scale(.6);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="radio"]) {
+      appearance: auto;
+    }
+
+    :where(input[type="radio"]):before {
+      content: none;
+    }
+  }
+
+  :where(input[type="radio"][aria-invalid="true"]) {
+    --trace-radio-color: var(--trace-danger);
+  }
+
+  :where(:root) {
+    --trace-input-font-size: 1rem;
+    --trace-input-line-height: 1.5rem;
+    --trace-input-padding-block: .375rem;
+    --trace-input-padding-inline: .625rem;
+    --trace-input-radius: var(--trace-radius-control);
+    --trace-input-text: var(--trace-text);
+    --trace-input-border: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-input-focus: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
+    --trace-input-placeholder: light-dark(var(--trace-neutral), var(--trace-neutral-light));
+    --trace-input-error: var(--trace-danger);
+    --trace-input-shadow: var(--trace-shadow);
+  }
+
+  :where(input:not([type]), input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="color"], [type="file"])) {
+    --_trace-input-border: var(--trace-input-border);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--trace-input-padding-block) var(--trace-input-padding-inline);
+    border: 2px solid var(--_trace-input-border);
+    border-radius: var(--trace-input-radius);
+    background-color: var(--trace-input-bg, var(--trace-control-bg));
+    color: var(--trace-input-text);
+    caret-color: var(--trace-input-focus);
+    font-family: var(--trace-font-body);
+    font-size: var(--trace-input-font-size);
+    line-height: var(--trace-input-line-height);
+    text-align: start;
+    cursor: text;
+    margin: 0;
+    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
+    display: block;
+
+    &::placeholder {
+      color: var(--trace-input-placeholder);
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled):not([readonly]):not(:focus) {
+      box-shadow: var(--trace-input-shadow);
+    }
+
+    &:focus {
+      --_trace-input-border: var(--trace-input-focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px
+        color-mix(in srgb, var(--trace-input-focus), transparent 70%);
+      outline: 2px solid #0000;
+    }
+
+    &[readonly] {
+      cursor: default;
+    }
+
+    &[aria-invalid="true"] {
+      --_trace-input-border: var(--trace-input-error);
+    }
+
+    &:user-invalid {
+      --_trace-input-border: var(--trace-input-error);
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  :where(input[type="color"]) {
+    block-size: calc(var(--trace-input-line-height) + var(--trace-input-padding-block) * 2 +
+        4px);
+    cursor: pointer;
+    padding: .25rem;
+  }
+
+  :where(input[type="color"])::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  :where(input[type="color"])::-webkit-color-swatch {
+    border: 0;
+    border-radius: 1px;
+  }
+
+  :where(input[type="color"])::-moz-color-swatch {
+    border: 0;
+    border-radius: 1px;
+  }
+
+  :where(label:has( > input:not([type]),  > input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="color"], [type="file"]))) {
+    cursor: pointer;
+    min-inline-size: 0;
+    color: var(--trace-input-text);
+    gap: .25rem;
+    display: grid;
+
+    &:has( > input[aria-invalid="true"]) > small:last-child {
+      color: var(--trace-input-error);
+    }
+
+    &:has( > input:user-invalid) > small:last-child {
+      color: var(--trace-input-error);
+    }
+
+    &:has( > input:disabled) {
+      color: color-mix(in srgb, var(--trace-input-text), transparent 50%);
+      cursor: not-allowed;
+    }
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+  }
+
+  :where(label:has(input) + small) {
+    margin-block-start: .25rem;
+    line-height: 1.5;
+    display: block;
+  }
+
+  :where(label:has(input[aria-invalid="true"], input:user-invalid) + small) {
+    color: var(--trace-input-error);
+  }
+
+  :where(label[for]:not(:has(input))) {
+    cursor: pointer;
+    color: var(--trace-input-text);
+    margin-block-end: .25rem;
+    display: inline-block;
+  }
+
+  :where(input[aria-invalid="true"] + small, input:user-invalid + small) {
+    color: var(--trace-input-error);
+  }
+
+  :where(label[for]:has( + input:disabled)) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  :where(:root) {
+    --trace-file-button-bg: var(--trace-primary-light);
+    --trace-file-button-text: var(--trace-secondary-lighter);
+  }
+
+  :where(input[type="file"]) {
+    cursor: pointer;
+    padding-block: 0;
+    padding-inline-start: 0;
+  }
+
+  :where(input[type="file"])::file-selector-button {
+    padding: var(--trace-input-padding-block) var(--trace-input-padding-inline);
+    background: var(--trace-file-button-bg);
+    color: var(--trace-file-button-text);
+    font: inherit;
+    line-height: inherit;
+    cursor: pointer;
+    border: 0;
+    border-radius: 0;
+    margin: 0;
+    margin-inline-end: var(--trace-input-padding-inline);
+  }
+
+  :where(input[type="file"]:hover:not(:disabled):not([readonly]):not(:focus)) {
+    box-shadow: none;
+  }
+
+  :where(input[type="file"]:disabled)::file-selector-button {
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="file"])::file-selector-button {
+      border-inline-end: 1px solid buttontext;
+    }
+  }
+
+  :where(:root) {
+    --trace-textarea-font-size: 1rem;
+    --trace-textarea-line-height: 1.5rem;
+    --trace-textarea-padding-block: .375rem;
+    --trace-textarea-padding-inline: .625rem;
+    --trace-textarea-radius: var(--trace-radius-control);
+    --trace-textarea-text: var(--trace-text);
+    --trace-textarea-border: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-textarea-focus: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
+    --trace-textarea-placeholder: light-dark(var(--trace-neutral), var(--trace-neutral-light));
+    --trace-textarea-error: var(--trace-danger);
+    --trace-textarea-shadow: var(--trace-shadow);
+  }
+
+  :where(textarea) {
+    --_trace-textarea-border: var(--trace-textarea-border);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--trace-textarea-padding-block)
+      var(--trace-textarea-padding-inline);
+    border: 2px solid var(--_trace-textarea-border);
+    border-radius: var(--trace-textarea-radius);
+    background: var(--trace-textarea-bg, var(--trace-control-bg));
+    color: var(--trace-textarea-text);
+    caret-color: var(--trace-textarea-focus);
+    font-family: var(--trace-font-body);
+    font-size: var(--trace-textarea-font-size);
+    line-height: var(--trace-textarea-line-height);
+    text-align: start;
+    resize: vertical;
+    cursor: text;
+    margin: 0;
+    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
+    display: block;
+
+    &::placeholder {
+      color: var(--trace-textarea-placeholder);
+      opacity: 1;
+    }
+
+    &:hover:not(:disabled):not([readonly]):not(:focus) {
+      box-shadow: var(--trace-textarea-shadow);
+    }
+
+    &:focus {
+      --_trace-textarea-border: var(--trace-textarea-focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px
+        color-mix(in srgb, var(--trace-textarea-focus), transparent 70%);
+      outline: 2px solid #0000;
+    }
+
+    &[aria-invalid="true"] {
+      --_trace-textarea-border: var(--trace-textarea-error);
+    }
+
+    &:user-invalid {
+      --_trace-textarea-border: var(--trace-textarea-error);
+    }
+
+    &[readonly] {
+      cursor: default;
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  :where(label:has( > textarea)) {
+    min-inline-size: 0;
+    color: var(--trace-textarea-text);
+    cursor: pointer;
+    gap: .25rem;
+    display: grid;
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    &:has( > textarea:disabled) {
+      color: color-mix(in srgb, var(--trace-textarea-text), transparent 50%);
+      cursor: not-allowed;
+    }
+
+    &:has( > textarea[aria-invalid="true"],  > textarea:user-invalid) > small:last-child {
+      color: var(--trace-textarea-error);
+    }
+  }
+
+  :where(label:has( > textarea) + small) {
+    margin-block-start: .25rem;
+    line-height: 1.5;
+    display: block;
+  }
+
+  :where(label:has( > textarea[aria-invalid="true"],  > textarea:user-invalid) + small) {
+    color: var(--trace-textarea-error);
+  }
+
+  :where(label[for]:has( + textarea:disabled)) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  :where(textarea[aria-invalid="true"] + small, textarea:user-invalid + small) {
+    color: var(--trace-textarea-error);
+  }
+
+  :where(:root) {
+    --trace-checkbox-size: 1.25rem;
+    --trace-checkbox-radius: var(--trace-radius-control);
+    --trace-checkbox-color: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-checkbox-mark: light-dark(var(--trace-neutral-lighter), var(--trace-primary-dark));
+  }
+
+  :where(input[type="checkbox"]:not([role="switch"])) {
+    appearance: none;
+    isolation: isolate;
+    box-sizing: border-box;
+    inline-size: var(--trace-checkbox-size);
+    block-size: var(--trace-checkbox-size);
+    border: 2px solid var(--trace-checkbox-color);
+    border-radius: var(--trace-checkbox-radius);
+    background-color: var(--trace-checkbox-bg, var(--trace-control-bg));
+    vertical-align: middle;
+    cursor: pointer;
+    flex-shrink: 0;
+    margin: 2px;
+    padding: 0;
+    transition: transform .2s ease-in-out, border-color .2s ease-in-out;
+    display: inline-block;
+    position: relative;
+
+    &:before {
+      content: "";
+      z-index: 1;
+      background: var(--trace-checkbox-mark);
+      opacity: 0;
+      transition: opacity .18s ease-in-out, transform .18s ease-in-out;
+      position: absolute;
+      inset: 10%;
+      transform: scale(.6);
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+
+    &:after {
+      content: "";
+      z-index: 0;
+      border-radius: max(0px, calc(var(--trace-checkbox-radius) - 2px));
+      background-color: var(--trace-checkbox-color);
+      opacity: 0;
+      transition: opacity .18s ease-in-out, transform .18s ease-in-out;
+      position: absolute;
+      inset: 0;
+      transform: scale(.6);
+    }
+
+    &:checked:after, &:indeterminate:after, &:checked:before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &:indeterminate:before {
+      opacity: 1;
+      border-radius: 1px;
+      block-size: 2px;
+      inline-size: 60%;
+      margin: auto;
+      inset: 0;
+      transform: scale(1);
+      mask: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--trace-checkbox-color);
+      outline-offset: 2px;
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(.9);
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+
+    &[aria-invalid="true"] {
+      --trace-checkbox-color: var(--trace-danger);
+      --trace-checkbox-mark: var(--trace-neutral-lighter);
+    }
+
+    &:user-invalid {
+      --trace-checkbox-color: var(--trace-danger);
+      --trace-checkbox-mark: var(--trace-neutral-lighter);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      transform: none;
+
+      &:before, &:after {
+        transition: none;
+        transform: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+      background: none;
+
+      &:before, &:after {
+        content: none;
+      }
+    }
+  }
+
+  :where(label:has( > input[type="checkbox"]:not([role="switch"]))) {
+    color: var(--trace-text);
+    cursor: pointer;
+    align-items: center;
+    gap: .5rem;
+    display: inline-flex;
+
+    &:has( > input:disabled) {
+      color: color-mix(in srgb, var(--trace-text), transparent 50%);
+      cursor: not-allowed;
+    }
+  }
+
+  :where(:root) {
+    --trace-select-font-size: 1rem;
+    --trace-select-line-height: 1.5rem;
+    --trace-select-padding-block: .375rem;
+    --trace-select-padding-inline: .625rem;
+    --trace-select-radius: var(--trace-radius-control);
+    --trace-select-text: var(--trace-text);
+    --trace-select-border: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-select-focus: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
+    --trace-select-error: var(--trace-danger);
+    --trace-select-shadow: var(--trace-shadow);
+    --trace-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --trace-select-arrow-offset: var(--trace-select-padding-inline);
+    --trace-select-arrow-size: 1.25em;
+  }
+
+  :where(select) {
+    --_trace-select-border: var(--trace-select-border);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--trace-select-padding-block)
+      var(--trace-select-padding-inline);
+    border: 2px solid var(--_trace-select-border);
+    border-radius: var(--trace-select-radius);
+    background: var(--trace-select-bg, var(--trace-control-bg));
+    color: var(--trace-select-text);
+    font-family: var(--trace-font-body);
+    font-size: var(--trace-select-font-size);
+    line-height: var(--trace-select-line-height);
+    text-align: start;
+    appearance: auto;
+    cursor: pointer;
+    margin: 0;
+    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
+    display: block;
+
+    &:hover:not(:disabled):not(:focus) {
+      box-shadow: var(--trace-select-shadow);
+    }
+
+    &:focus {
+      --_trace-select-border: var(--trace-select-focus);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 4px
+        color-mix(in srgb, var(--trace-select-focus), transparent 70%);
+      outline: 2px solid #0000;
+    }
+
+    &[aria-invalid="true"] {
+      --_trace-select-border: var(--trace-select-error);
+    }
+
+    &:user-invalid {
+      --_trace-select-border: var(--trace-select-error);
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  :where(select:not([multiple]):not([size]), select:not([multiple])[size="0"], select:not([multiple])[size="1"]) {
+    appearance: none;
+    background-image: var(--trace-select-arrow);
+    background-repeat: no-repeat;
+    background-size: var(--trace-select-arrow-size)
+      var(--trace-select-arrow-size);
+    background-position: right var(--trace-select-arrow-offset) center;
+    padding-inline-end: calc(var(--trace-select-arrow-offset) + var(--trace-select-arrow-size) +
+        var(--trace-select-padding-inline));
+
+    &:dir(rtl) {
+      background-position: left var(--trace-select-arrow-offset) center;
+    }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+      background-image: none;
+    }
+  }
+
+  :where(select option, select optgroup) {
+    background-color: var(--trace-select-bg, var(--trace-control-bg));
+    color: var(--trace-select-text);
+  }
+
+  :where(select[multiple], select[size]:not([size="1"])) {
+    cursor: default;
+  }
+
+  :where(label:has( > select)) {
+    min-inline-size: 0;
+    color: var(--trace-select-text);
+    cursor: pointer;
+    gap: .25rem;
+    display: grid;
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    &:has( > select:disabled) {
+      color: color-mix(in srgb, var(--trace-select-text), transparent 50%);
+      cursor: not-allowed;
+    }
+
+    &:has( > select[aria-invalid="true"]) > small:last-child {
+      color: var(--trace-select-error);
+    }
+
+    &:has( > select:user-invalid) > small:last-child {
+      color: var(--trace-select-error);
+    }
+  }
+
+  :where(label:has( > select) + small) {
+    margin-block-start: .25rem;
+    line-height: 1.5;
+    display: block;
+  }
+
+  :where(label:has( > select[aria-invalid="true"]) + small), :where(label:has( > select:user-invalid) + small) {
+    color: var(--trace-select-error);
+  }
+
+  :where(label[for]:has( + select:disabled)) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  :where(select[aria-invalid="true"] + small, select:user-invalid + small) {
+    color: var(--trace-select-error);
+  }
+
+  :where(:root) {
+    --trace-range-color: light-dark(var(--trace-primary), var(--trace-secondary));
+    --trace-range-track-color: light-dark(var(--trace-primary-light), var(--trace-secondary-dark));
+    --trace-range-error: var(--trace-danger);
+    --trace-range-track-size: .375rem;
+    --trace-range-thumb-size: 1.25rem;
+    --trace-range-height: 2rem;
+    --trace-range-active-scale: 1.15;
+    --trace-range-duration: .15s;
+  }
+
+  :where(input[type="range"]) {
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--trace-range-height);
+    color: var(--trace-range-color);
+    accent-color: var(--trace-range-color);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: block;
+
+    &:focus-visible {
+      outline: 2px solid var(--trace-range-color);
+      outline-offset: 2px;
+      border-radius: var(--trace-radius-control);
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+
+    &[aria-invalid="true"] {
+      --trace-range-color: var(--trace-range-error);
+      --trace-range-track-color: color-mix(in srgb,
+        var(--trace-range-error),
+        transparent 70%);
+    }
+  }
+
+  :where(input[type="range"])::-webkit-slider-runnable-track {
+    box-sizing: border-box;
+    block-size: var(--trace-range-track-size);
+    background: var(--trace-range-track-color);
+    border: 0;
+    border-radius: 999px;
+  }
+
+  :where(input[type="range"])::-moz-range-track {
+    box-sizing: border-box;
+    block-size: var(--trace-range-track-size);
+    background: var(--trace-range-track-color);
+    border: 0;
+    border-radius: 999px;
+  }
+
+  :where(input[type="range"])::-webkit-slider-thumb {
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--trace-range-thumb-size);
+    block-size: var(--trace-range-thumb-size);
+    border: 2px solid var(--trace-range-color);
+    background: var(--trace-range-color);
+    transition: transform var(--trace-range-duration) ease-out,
+      box-shadow .2s ease-in-out;
+    border-radius: 50%;
+    margin-block-start: calc((var(--trace-range-track-size) - var(--trace-range-thumb-size)) / 2);
+  }
+
+  :where(input[type="range"])::-moz-range-thumb {
+    appearance: none;
+    box-sizing: border-box;
+    inline-size: var(--trace-range-thumb-size);
+    block-size: var(--trace-range-thumb-size);
+    border: 2px solid var(--trace-range-color);
+    background: var(--trace-range-color);
+    transition: transform var(--trace-range-duration) ease-out,
+      box-shadow .2s ease-in-out;
+    border-radius: 50%;
+  }
+
+  :where(input[type="range"]:focus:not(:disabled))::-webkit-slider-thumb {
+    box-shadow: 0 0 0 4px
+      color-mix(in srgb, var(--trace-range-color), transparent 70%);
+  }
+
+  :where(input[type="range"]:focus:not(:disabled))::-moz-range-thumb {
+    box-shadow: 0 0 0 4px
+      color-mix(in srgb, var(--trace-range-color), transparent 70%);
+  }
+
+  :where(input[type="range"]:active:not(:disabled))::-webkit-slider-thumb {
+    transform: scale(var(--trace-range-active-scale));
+  }
+
+  :where(input[type="range"]:active:not(:disabled))::-moz-range-thumb {
+    transform: scale(var(--trace-range-active-scale));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(input[type="range"])::-webkit-slider-thumb {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="range"]:active:not(:disabled))::-webkit-slider-thumb {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="range"])::-moz-range-thumb {
+      transition: none;
+      transform: none;
+    }
+
+    :where(input[type="range"]:active:not(:disabled))::-moz-range-thumb {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  :where(label:has( > input[type="range"])) {
+    min-inline-size: 0;
+    color: var(--trace-text);
+    cursor: pointer;
+    gap: .25rem;
+    display: grid;
+
+    & > small {
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    &:has( > input[aria-invalid="true"]) > small:last-child {
+      color: var(--trace-range-error);
+    }
+
+    &:has( > input:disabled) {
+      cursor: not-allowed;
+      color: color-mix(in srgb, var(--trace-text), transparent 50%);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(input[type="range"]) {
+      --trace-range-color: ButtonText;
+      --trace-range-track-color: GrayText;
+    }
+  }
+}
+
+@layer trace.extensions;