trace-css 0.0.0-stage → 0.1.0

package/dist/tracecss.min.css

@@ -0,0 +1 @@
+@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)}to{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:0 0}: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") 50%/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:0 0;&: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:0 0;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{:where(.trace-icon){inline-size:var(--trace-icon-size,1em);block-size:var(--trace-icon-size,1em);vertical-align:middle;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex}:where(.trace-icon>svg,.trace-icon>img){object-fit:contain;block-size:100%;inline-size:100%;display:block}:where(.trace-icon-directional:dir(rtl)){transform:scaleX(-1)}:where(.trace-loader){inline-size:var(--trace-loader-size,1em);block-size:var(--trace-loader-size,1em);vertical-align:middle;flex-shrink:0;place-items:center;display:inline-grid}:where(.trace-loader):before{content:"";border-radius:var(--trace-loader-radius,2px);background-color:var(--trace-loader-color,var(--trace-primary));block-size:100%;inline-size:100%;animation:trace-square-rotate var(--trace-loader-duration,3s) ease-in-out infinite}@media (prefers-reduced-motion:reduce){:where(.trace-loader):before{animation:none;transform:none}}:where(table.trace-striped>tbody>tr:nth-child(odd)>:is(th,td)){background-color:var(--trace-table-stripe-bg)}:where(table.trace-hover>tbody>tr:is(:hover,:focus-within)>:is(th,td)){background-color:var(--trace-table-hover-bg)}:where(table.trace-compact){--trace-table-padding-block:.375rem;--trace-table-padding-inline:.625rem;--trace-table-font-size:.875rem}:where(table>:is(thead,tbody,tfoot)>tr>.trace-numeric,table>tr>.trace-numeric){text-align:end;font-variant-numeric:tabular-nums}:where(.trace-table-wrap){min-inline-size:0;max-inline-size:100%;overflow-x:auto;&:focus-visible{outline:2px solid var(--trace-table-border);outline-offset:2px}}@media (forced-colors:active){:where(table.trace-hover>tbody>tr:is(:hover,:focus-within)>:is(th,td)){outline-offset:-1px;outline:1px solid highlight}}:where(button>.trace-icon){--trace-icon-size:var(--trace-button-line-height)}:where(button[aria-busy=true]>span.trace-icon){position:relative}:where(button[aria-busy=true]>span.trace-icon>*){opacity:0}:where(button[aria-busy=true]>span.trace-icon):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}:where(button.trace-icon-only){padding-inline:var(--trace-button-padding-block);aspect-ratio:1}:where(button.trace-small,input[type=button].trace-small,input[type=submit].trace-small,input[type=reset].trace-small){--trace-button-font-size:.875rem;--trace-button-line-height:1.25rem;--trace-button-padding-block:.25rem;--trace-button-padding-inline:.5rem}:where(button.trace-large,input[type=button].trace-large,input[type=submit].trace-large,input[type=reset].trace-large){--trace-button-font-size:1.125rem;--trace-button-line-height:1.75rem;--trace-button-padding-block:.5rem;--trace-button-padding-inline:1rem}:where(button.trace-primary,input[type=button].trace-primary,input[type=submit].trace-primary,input[type=reset].trace-primary){--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)}:where(button.trace-secondary,input[type=button].trace-secondary,input[type=submit].trace-secondary,input[type=reset].trace-secondary){--trace-button-color:var(--trace-primary-light);--trace-button-contrast:var(--trace-secondary-lighter);--trace-button-outline-color:var(--trace-button-color)}:where(button.trace-danger,input[type=button].trace-danger,input[type=submit].trace-danger,input[type=reset].trace-danger){--trace-button-color:var(--trace-danger);--trace-button-contrast:var(--trace-neutral-lighter);--trace-button-outline-color:var(--trace-button-color)}:where(button.trace-outline,input[type=button].trace-outline,input[type=submit].trace-outline,input[type=reset].trace-outline){--trace-button-bg:transparent;--trace-button-text:var(--trace-button-outline-color);--trace-button-border:var(--trace-button-outline-color)}:where(button.trace-outline:hover:not(:disabled):not([aria-busy=true]),input[type=button].trace-outline:hover:not(:disabled),input[type=submit].trace-outline:hover:not(:disabled),input[type=reset].trace-outline:hover:not(:disabled),button.trace-outline:active:not(:disabled):not([aria-busy=true]),input[type=button].trace-outline:active:not(:disabled),input[type=submit].trace-outline:active:not(:disabled),input[type=reset].trace-outline:active:not(:disabled),button.trace-outline[aria-busy=true]){background-color:var(--trace-button-color);color:var(--trace-button-contrast);border-color:var(--trace-button-color)}:where(button.trace-outline[aria-busy=true]){--trace-button-text:var(--trace-button-contrast);--trace-button-loader-color:var(--trace-button-contrast)}@media (prefers-reduced-motion:reduce){:where(button[aria-busy=true]>span.trace-icon):after{animation:none}}@media (forced-colors:active){:where(button[aria-busy=true]>span.trace-icon):after{background-color:buttontext}}:where(button[aria-busy=true]:has(>span.trace-icon)){color:var(--trace-button-text,var(--trace-button-contrast))}:where(button[aria-busy=true]:has(>span.trace-icon)):after{content:none}:where(button[aria-busy=true]:has(>span.trace-icon)>*){opacity:1}:where(button.trace-outline[aria-busy=true]:not(:has(>span.trace-icon))){color:#0000}@media (forced-colors:active){:where(button[aria-busy=true]:has(>span.trace-icon):disabled){border-color:graytext}:where(button[aria-busy=true]:has(>span.trace-icon)){forced-color-adjust:auto}:where(button.trace-outline[aria-busy=true]:not(:has(>span.trace-icon))){background-color:buttonface;border-color:buttontext}}:where(label:has(>.trace-switch>input[type=checkbox][role=switch])){cursor:pointer;align-items:center;gap:.5rem;display:inline-flex}:where(label:has(>.trace-switch>input[type=checkbox][role=switch]:disabled)){cursor:not-allowed}:where(.trace-switch){vertical-align:middle;flex-shrink:0;transition:transform .25s ease-in-out;display:inline-flex;position:relative}:where(.trace-switch>.trace-icon){--trace-icon-size:var(--trace-switch-icon-size,.75rem);color:var(--trace-switch-color);pointer-events:none;margin-block:auto;transition:color .2s ease-in-out;position:absolute;inset-block:0;inset-inline-end:calc(4px + var(--trace-switch-padding))}:where(.trace-switch:has(>input:checked)>.trace-icon){color:var(--trace-switch-dot-checked,var(--trace-switch-bg,var(--trace-control-bg)));inset-inline-start:calc(4px + var(--trace-switch-padding));inset-inline-end:auto}:where(.trace-switch:has(>input:disabled)>.trace-icon,label>.trace-switch:has(>input:disabled)~span){opacity:.5}:where(.trace-switch:has(>input:disabled)){cursor:not-allowed}:where(.trace-switch>input[type=checkbox][role=switch]){transform:none}:where(.trace-switch:has(>input:active:not(:disabled)),label:active>.trace-switch:has(>input:not(:disabled))){transform:scale(.9)}:where(label:active>.trace-switch>input[role=switch]:not(:disabled)):before{inline-size:var(--trace-switch-dot-active-size)}:where(label:active>.trace-switch>input[role=switch]:checked:not(:disabled)):before{inset-inline-start:calc(100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding))}@media (prefers-reduced-motion:reduce){:where(.trace-switch),:where(.trace-switch>.trace-icon){transition:none;transform:none}}@media (forced-colors:active){:where(.trace-switch>.trace-icon){display:none}}:where(.trace-switch:has(>input[aria-invalid=true])){--trace-switch-color:var(--trace-danger)}:where(.trace-switch:has(>input.trace-small)>.trace-icon){display:none}:where(.trace-switch:has(>input.trace-large)){--trace-switch-icon-size:1rem}:where(input[type=checkbox][role=switch].trace-small){--trace-switch-width:1.75rem;--trace-switch-height:1rem;--trace-switch-dot-size:.5rem;--trace-switch-dot-active-size:.625rem}:where(input[type=checkbox][role=switch].trace-large){--trace-switch-width:2.625rem;--trace-switch-height:1.5rem;--trace-switch-dot-size:1rem;--trace-switch-dot-active-size:1.125rem}:where(input[type=radio].trace-small){--trace-radio-size:1rem}:where(input[type=radio].trace-large){--trace-radio-size:1.5rem}:where(label:has(>.trace-input-wrap>input)){min-inline-size:0;color:var(--trace-input-text);cursor:pointer;gap:.25rem;display:grid;&>small{margin:0;line-height:1.5}&:has(>.trace-input-wrap>input:disabled){color:color-mix(in srgb, var(--trace-input-text), transparent 50%);cursor:not-allowed}&:has(>.trace-input-wrap>input[aria-invalid=true],>.trace-input-wrap>input:user-invalid)>small:last-child{color:var(--trace-input-error)}}:where(.trace-input-wrap){--trace-input-icon-size:1.25rem;grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;display:grid;position:relative}:where(.trace-input-wrap>input){grid-area:1/1/2/4}:where(.trace-input-wrap>.trace-input-icon-start,.trace-input-wrap>.trace-input-icon-end){--trace-icon-size:var(--trace-input-icon-size);margin-inline:calc(2px + var(--trace-input-padding-inline));color:var(--trace-input-border);pointer-events:none;grid-row:1;align-self:center;position:relative}:where(.trace-input-wrap>.trace-input-icon-start){grid-column:1}:where(.trace-input-wrap>.trace-input-icon-end){grid-column:3}:where(.trace-input-wrap:has(>.trace-input-icon-start)>input){padding-inline-start:calc(var(--trace-input-padding-inline) + var(--trace-input-icon-size) + .5rem)}:where(.trace-input-wrap:has(>.trace-input-icon-end)>input){padding-inline-end:calc(var(--trace-input-padding-inline) + var(--trace-input-icon-size) + .5rem)}:where(.trace-input-wrap:has(>input:focus)>.trace-icon){color:var(--trace-input-focus)}:where(.trace-input-wrap:has(>input[aria-invalid=true],>input:user-invalid)>.trace-icon){color:var(--trace-input-error)}:where(.trace-input-wrap:has(>input:disabled)>.trace-icon){opacity:.5}:where(.trace-input-wrap:has(>button)>input){padding-inline-end:calc(var(--trace-input-padding-inline) + 2rem)}:where(.trace-input-wrap>button){border-radius:var(--trace-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--trace-input-border);box-shadow:none;--trace-button-outline-color:var(--trace-input-focus);background:0 0;border:0;margin-block:auto;padding:0;position:absolute;inset-block:0;inset-inline-end:.5rem}:where(.trace-input-wrap>button:hover:not(:disabled)){color:var(--trace-input-focus);box-shadow:none}:where(.trace-input-wrap>button:active:not(:disabled)){box-shadow:none;transform:scale(.9)}@media (prefers-reduced-motion:reduce){:where(.trace-input-wrap>button){transition:none;transform:none}}:where(.trace-input-wrap>button>.trace-icon){--trace-icon-size:1.25rem}:where(.trace-input-wrap:has(>input.trace-small)){--trace-input-padding-inline:.5rem;--trace-input-icon-size:1rem}:where(.trace-input-wrap:has(>input.trace-large)){--trace-input-padding-inline:.75rem;--trace-input-icon-size:1.5rem}:where(input.trace-small:not([type=checkbox]):not([type=radio])){--trace-input-font-size:.875rem;--trace-input-line-height:1.25rem;--trace-input-padding-block:.25rem;--trace-input-padding-inline:.5rem}:where(input.trace-large:not([type=checkbox]):not([type=radio])){--trace-input-font-size:1.125rem;--trace-input-line-height:1.75rem;--trace-input-padding-block:.5rem;--trace-input-padding-inline:.75rem}:where(.trace-input-wrap>button[aria-busy=true]){cursor:wait;opacity:1;box-shadow:none;position:absolute;transform:none}:where(.trace-input-wrap>button[aria-busy=true]:not(:has(>span.trace-icon))){color:#0000}@media (forced-colors:active){:where(.trace-input-wrap>button[aria-busy=true]:not(:has(>span.trace-icon))){background-color:buttonface;border-color:buttontext}}:where(textarea.trace-small){--trace-textarea-font-size:.875rem;--trace-textarea-line-height:1.25rem;--trace-textarea-padding-block:.25rem;--trace-textarea-padding-inline:.5rem}:where(textarea.trace-large){--trace-textarea-font-size:1.125rem;--trace-textarea-line-height:1.75rem;--trace-textarea-padding-block:.5rem;--trace-textarea-padding-inline:.75rem}:where(input[type=checkbox]:not([role=switch]).trace-small){--trace-checkbox-size:1rem}:where(input[type=checkbox]:not([role=switch]).trace-large){--trace-checkbox-size:1.5rem}:where(label:has(>.trace-select>select)){min-inline-size:0;color:var(--trace-select-text);cursor:pointer;gap:.25rem;display:grid;&>small{margin:0;line-height:1.5}&:has(>.trace-select>select:disabled){color:color-mix(in srgb, var(--trace-select-text), transparent 50%);cursor:not-allowed}&:has(>.trace-select>select[aria-invalid=true],>.trace-select>select:user-invalid)>small:last-child{color:var(--trace-select-error)}}:where(label:has(>.trace-select>select)+small){margin-block-start:.25rem;line-height:1.5;display:block}:where(label:has(>.trace-select>select[aria-invalid=true],>.trace-select>select:user-invalid)+small){color:var(--trace-select-error)}:where(.trace-select){--_trace-select-arrow-color:var(--trace-select-border);min-inline-size:0;font-size:var(--trace-select-font-size);display:grid;position:relative;&:has(>select.trace-small){--trace-select-padding-inline:.5rem;font-size:.875rem}&:has(>select.trace-large){--trace-select-padding-inline:.75rem;font-size:1.125rem}&:has(>select:focus){--_trace-select-arrow-color:var(--trace-select-focus)}&:has(>select[aria-invalid=true],>select:user-invalid){--_trace-select-arrow-color:var(--trace-select-error)}}:where(.trace-select:has(>select:not([multiple]):not([size])),.trace-select:has(>select:not([multiple])[size="0"]),.trace-select:has(>select:not([multiple])[size="1"])):after{content:"";inline-size:var(--trace-select-arrow-size);block-size:var(--trace-select-arrow-size);background-color:var(--_trace-select-arrow-color);mask:var(--trace-select-arrow) center / contain no-repeat;pointer-events:none;margin-block:auto;position:absolute;inset-block:0;inset-inline-end:var(--trace-select-arrow-offset)}:where(.trace-select>select){background-image:none}:where(.trace-select:has(>select:disabled)):after{opacity:.5}@media (forced-colors:active){:where(.trace-select):after{display:none}}:where(select.trace-small){--trace-select-font-size:.875rem;--trace-select-line-height:1.25rem;--trace-select-padding-block:.25rem;--trace-select-padding-inline:.5rem}:where(select.trace-large){--trace-select-font-size:1.125rem;--trace-select-line-height:1.75rem;--trace-select-padding-block:.5rem;--trace-select-padding-inline:.75rem}:where(input[type=range].trace-small){--trace-range-thumb-size:1rem;--trace-range-track-size:.25rem;--trace-range-height:1.75rem}:where(input[type=range].trace-large){--trace-range-thumb-size:1.5rem;--trace-range-track-size:.5rem;--trace-range-height:2.5rem}}

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "trace-css",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "license": "MIT",
+  "type": "module",
+  "packageManager": "pnpm@10.30.1",
+  "devDependencies": {
+    "@commitlint/cli": "21.2.4",
+    "@commitlint/config-conventional": "21.2.4",
+    "editorconfig-checker": "7.0.0",
+    "husky": "9.1.7",
+    "lightningcss": "1.33.0",
+    "lint-staged": "17.6.0",
+    "prettier": "3.9.10",
+    "stylelint": "17.16.0",
+    "stylelint-config-standard": "40.0.0",
+    "vite": "8.3.5"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "check": "pnpm run check:styles && pnpm run check:format && pnpm run check:editorconfig",
+    "check:styles": "stylelint \"**/*.css\" --max-warnings 0",
+    "check:format": "prettier --check .",
+    "check:editorconfig": "editorconfig-checker",
+    "playground": "vite --port 3000 --open /playground/",
+    "prepack": "pnpm check && pnpm build",
+    "check:package": "node scripts/check-package.js"
+  },
+  "version": "0.1.0",
+  "description": "CSS library for native HTML elements, design tokens, and light and dark themes.",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "style": "./dist/trace.css",
+  "exports": {
+    ".": "./dist/trace.css",
+    "./dist/*.css": "./dist/*.css",
+    "./src/*.css": "./src/*.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "unpkg": "./dist/trace.min.css",
+  "jsdelivr": "./dist/trace.min.css",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": ">=24.14.0",
+      "onFail": "error"
+    }
+  }
+}

package/src/classless.css

@@ -0,0 +1,16 @@
+@layer trace.foundation, trace.elements, trace.extensions;
+
+@import "./foundation.css";
+@import "./content/typography.css";
+@import "./content/link.css";
+@import "./content/table.css";
+@import "./elements/loader.css";
+@import "./elements/button.css";
+@import "./forms/switch.css";
+@import "./forms/radio.css";
+@import "./forms/input.css";
+@import "./forms/file.css";
+@import "./forms/textarea.css";
+@import "./forms/checkbox.css";
+@import "./forms/select.css";
+@import "./forms/range.css";

package/src/content/link.css

@@ -0,0 +1,75 @@
+@layer trace.elements {
+  :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: 0.2em;
+    --trace-link-underline-thickness: 0.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);
+    text-decoration-skip-ink: auto;
+    border-radius: var(--trace-radius-sm);
+    transition: color 150ms 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;
+      }
+    }
+  }
+}

package/src/content/table.css

@@ -0,0 +1,108 @@
+@layer trace.elements {
+  :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: 0.75rem;
+    --trace-table-padding-inline: 0.75rem;
+    --trace-table-font-size: 1rem;
+    --trace-table-line-height: 1.5;
+  }
+
+  :where(table) {
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    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) {
+    padding-block: 0 1rem;
+    padding-inline: 0;
+    caption-side: top;
+    text-align: start;
+    font-weight: 600;
+    font-size: 1em;
+    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;
+    font-size: 0.875em;
+    letter-spacing: normal;
+  }
+
+  :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);
+  }
+}

package/src/content/table.extensions.css

@@ -0,0 +1,45 @@
+@layer trace.extensions {
+  :where(table.trace-striped > tbody > tr:nth-child(odd) > :is(th, td)) {
+    background-color: var(--trace-table-stripe-bg);
+  }
+
+  :where(
+    table.trace-hover > tbody > tr:is(:hover, :focus-within) > :is(th, td)
+  ) {
+    background-color: var(--trace-table-hover-bg);
+  }
+
+  :where(table.trace-compact) {
+    --trace-table-padding-block: 0.375rem;
+    --trace-table-padding-inline: 0.625rem;
+    --trace-table-font-size: 0.875rem;
+  }
+
+  :where(
+    table > :is(thead, tbody, tfoot) > tr > .trace-numeric,
+    table > tr > .trace-numeric
+  ) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.trace-table-wrap) {
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow-x: auto;
+
+    &:focus-visible {
+      outline: 2px solid var(--trace-table-border);
+      outline-offset: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(
+      table.trace-hover > tbody > tr:is(:hover, :focus-within) > :is(th, td)
+    ) {
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+    }
+  }
+}

package/src/content/typography.css

@@ -0,0 +1,201 @@
+@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: 0.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-decoration: underline dotted;
+    text-underline-offset: 0.2em;
+    cursor: help;
+  }
+
+  :where(strong, b) {
+    font-weight: 700;
+  }
+
+  :where(i, em, cite) {
+    font-style: italic;
+  }
+
+  :where(del, s) {
+    text-decoration: line-through;
+  }
+
+  :where(ins, u) {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  :where(kbd) {
+    display: inline-block;
+    padding: 0.125em 0.375em;
+    border: 1px solid var(--trace-kbd-border);
+    border-bottom-width: 2px;
+    border-radius: var(--trace-radius-sm);
+    background-color: var(--trace-kbd-bg);
+    color: var(--trace-kbd-text);
+    box-shadow: var(--trace-kbd-shadow);
+    font-size: 0.875em;
+    line-height: 1.25;
+    vertical-align: baseline;
+  }
+
+  :where(mark) {
+    padding: 0.125em 0.25em;
+    border-radius: var(--trace-radius-sm);
+    background-color: var(--trace-mark-bg);
+    color: var(--trace-mark-text);
+    box-decoration-break: clone;
+  }
+
+  :where(small) {
+    font-size: 0.875em;
+  }
+
+  :where(sub, sup) {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  :where(sub) {
+    bottom: -0.25em;
+  }
+
+  :where(sup) {
+    top: -0.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);
+    margin-inline: 0;
+    padding-block: var(--trace-blockquote-padding-block);
+    padding-inline: var(--trace-blockquote-padding-inline);
+    border-inline-start: 0.25rem solid var(--trace-blockquote-border);
+    background-color: var(--trace-blockquote-bg);
+    line-height: var(--trace-typography-line-height);
+  }
+
+  :where(blockquote > :last-child) {
+    margin-block-end: 0;
+  }
+}