[layout]{display:flex;flex-direction:row;flex-wrap:nowrap;&[layout~=row]{flex-direction:row}&[layout~=col]{flex-direction:column}&[layout~=row-reverse]{flex-direction:row-reverse}&[layout~=col-reverse]{flex-direction:column-reverse}&[layout~=wrap]{flex-wrap:wrap}&[layout~=nowrap]{flex-wrap:nowrap}&[layout~=start]{justify-content:flex-start}&[layout~=center]{justify-content:center}&[layout~=end]{justify-content:flex-end}&[layout~=between]{justify-content:space-between}&[layout~=around]{justify-content:space-around}&[layout~=evenly]{justify-content:space-evenly}&[layout~=top]{align-items:flex-start}&[layout~=middle]{align-items:center}&[layout~=bottom]{align-items:flex-end}&[layout~=stretch]{align-items:stretch}&[layout~=baseline]{align-items:baseline}&[layout~=divide] > * + *{border-left:1px solid var(--l1);padding-left:16px}&[layout~=divide][layout~=col] > * + *, &[layout~=divide][layout~=col-reverse] > * + *{border-left:0;padding-left:0;border-top:1px solid var(--l1);padding-top:16px}}[grid]{display:grid;&[cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}&[cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}&[cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}&[cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}&[cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}&[cols="12"]{grid-template-columns:repeat(12,minmax(0,1fr))}&[cols=auto]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}&[cols=aside]{grid-template-columns:minmax(0,1fr)minmax(0,2fr)}&[fit]{align-items:start}}@media(max-width:960px){[grid][cols="4"],[grid][cols="5"],[grid][cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){[grid][cols]{grid-template-columns:minmax(0,1fr)}}[gap]{gap:8px}[gap="1"]{gap:4px}[gap="2"]{gap:12px}[gap="3"]{gap:16px}[gap="4"]{gap:24px}[gap="5"]{gap:32px}[gap="6"]{gap:48px}[gap="7"]{gap:64px}[gap="8"]{gap:96px}[flex]{flex:1;min-width:0}[flex="0"]{flex:none}[flex="2"]{flex:2;min-width:0}[flex="3"]{flex:3;min-width:0}[flex=auto]{flex:auto;min-width:0}[flex=none]{flex:none}[ui~=eyebrow]{margin:0 0 12px;color:var(--a1);font-family:var(--mono);font-size:var(--t1);font-weight:600;line-height:16px;letter-spacing:.18em;text-transform:uppercase;&[tone=neutral]{color:var(--fg3)}}[ui~=lede]{max-width:720px;margin:0;color:var(--fg2);font-size:var(--t4);line-height:28px}article-head{display:block;margin-bottom:32px;h1 + [ui~=lede]{margin-top:16px}}an-alert>[part=body]>[part=desc]>:where(p,ul,ol,blockquote,table,pre,div,code-block,code-compare,code-tabs)+:where(p,ul,ol,blockquote,table,pre,div,code-block,code-compare,code-tabs){margin-top:12px}input-field:not([multiline]) [part=input],search-bar [part=input],select-field [part=input],a-command [part=input]{padding-top:calc(2 * round(.5cap,1px) + round(.366em,1px) - round(1em,1px));@supports(hanging-punctuation:first){padding-top: 1px;}}input-field,text-area{display:block;width:100%; [part="label"] { display: block; margin-bottom: 8px; color: var(--fg2); font-size: var(--t2); font-weight: 600; line-height: 1.3; } [part="req"] { color: var(--e1); } [part="well"] { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: var(--r3); background: var(--sf5); box-shadow: var(--hl); color: var(--fg1); cursor: text; transition: border-color var(--dur2) var(--ease1), box-shadow var(--dur0) var(--ease1), background var(--dur2) var(--ease1); } [part="well"]:hover { border-color: var(--l3); } [part="input"] { flex: 1; min-width: 0; height: 32px; background: transparent; color: var(--fg1); font: inherit; box-shadow: none; } [part="input"]::placeholder { color: var(--fg4); } [part="icon"], [part="suffix"] { flex-shrink: 0; } [part="icon"] { color: var(--fg3); } [part="prefix"] { align-self: stretch; display: flex; align-items: center; margin: 0 12px 0 -12px; padding: 0 12px; border-right: 1px solid var(--l1); color: var(--fg3); font-size: var(--t2); white-space: nowrap; } [part="footer"] { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--fg3); font-size: var(--t2); line-height: 1.4; } [part="counter"] { flex-shrink: 0; color: var(--fg4); font-variant-numeric: tabular-nums; } [part="well"]:focus-within, &[state="focus"] [part="well"] { border-color: var(--p2); box-shadow: var(--gl1); } &[state="success"] { [part="well"] { border-color: var(--s2); } [part="well"]:focus-within { border-color: var(--s1); box-shadow: var(--gls); } [part="suffix"] { color: var(--s1); } [part="msg"][tone="success"] { color: var(--s1); } } &[state="error"] { [part="well"] { border-color: var(--e2); background: var(--e3); } [part="well"]:focus-within { border-color: var(--e1); box-shadow: var(--gle); } [part="suffix"] { color: var(--e1); } [part="input"] { color: var(--e1); } [part="msg"] { color: var(--e1); } } &[size="xs"] { [part="well"] { min-height: 24px; padding: 0 8px; } [part="input"] { height: 22px; font-size: var(--t2); } [part="prefix"] { margin: 0 8px 0 -8px; padding: 0 8px; } } &[size="sm"] { [part="well"] { min-height: 28px; } [part="input"] { height: 26px; font-size: var(--t2); } } &[size="lg"] { [part="well"] { min-height: 40px; } [part="input"] { height: 38px; font-size: var(--t4); } } &[readonly] [part="well"] { background: transparent; border-color: var(--l1); box-shadow: none; cursor: default; } &[readonly] [part="well"]:focus-within { border-color: var(--p2); box-shadow: var(--gl1); } &[disabled] { opacity: .4; pointer-events: none; }}input-field[multiline],text-area{ [part="well"] { position: relative; flex-direction: column; align-items: stretch; padding: 12px; } &:is([state="error"], [state="success"]) [part="well"] { padding-right: 36px; } [part="input"] { height: auto; min-height: 2lh; line-height: 1.5; resize: vertical; } [part="suffix"] { position: absolute; right: 12px; bottom: 12px; }}check-controls>[part=msg]{margin-top:4px;padding-left:28px;color:var(--fg3);font-size:var(--t2);line-height:1.4}check-controls[type=switch]>[part=msg]{padding-left:46px}check-controls[state=error]>[part=msg]{color:var(--e1)}check-controls{display:block; [part="row"] { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; } [part="native"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } [part="copy"] { display: flex; align-items: baseline; gap: 8px; } [part="label"] { color: var(--fg1); font-size: var(--t3); font-weight: 500; } [part="desc"] { color: var(--fg4); font-size: var(--t2); } [part="box"] { position: relative; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--input-border); border-radius: var(--r1); background: var(--sf5); box-shadow: var(--hl); transition: background var(--dur2) var(--ease1), border-color var(--dur2) var(--ease1), box-shadow var(--dur0) var(--ease1); } [part="box"]::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur1) var(--ease1), transform var(--dur2) var(--ease1); } [part="row"]:hover [part="native"]:not(:checked, [type="checkbox"]:indeterminate) + [part="box"] { border-color: var(--l3); } [part="native"]:focus-visible + [part="box"] { border-color: var(--p2); box-shadow: var(--gl1); } &[state="error"] { [part="native"]:not(:checked, [type="checkbox"]:indeterminate) + [part="box"] { border-color: var(--e1); background: var(--e3); } [part="label"] { color: var(--e1); } } &[type="checkbox"] { [part="box"]::after { background: var(--p5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L10 17L20 7'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L10 17L20 7'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; } [part="native"]:checked + [part="box"], [part="native"]:indeterminate + [part="box"] { background: var(--p2); border-color: var(--p2); } [part="native"]:checked + [part="box"]::after { opacity: 1; } [part="native"]:indeterminate + [part="box"]::after { inset: 6px 3px; border-radius: 1px; -webkit-mask: none; mask: none; opacity: 1; } } &[type="radio"] { [part="box"] { border-radius: var(--pill); border-color: var(--input-border); } [part="box"]::after { inset: 4px; border-radius: var(--pill); background: var(--p2); } [part="native"]:checked + [part="box"] { border-color: var(--p2); } [part="native"]:checked + [part="box"]::after { opacity: 1; } } &[type="switch"] { [part="box"] { width: 34px; height: 20px; border-radius: var(--pill); background: var(--l1); } [part="box"]::after { inset: auto; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--pill); background: var(--slider-thumb); opacity: 1; } [part="native"]:checked + [part="box"] { background: var(--p2); border-color: var(--p2); } [part="native"]:checked + [part="box"]::after { transform: translateX(14px); background: var(--p5); } &[size="sm"] { [part="label"] { font-size: var(--t2); } [part="box"] { width: 30px; height: 18px; } [part="box"]::after { width: 12px; height: 12px; } [part="native"]:checked + [part="box"]::after { transform: translateX(12px); } } } &[type="slider"], &[type="range"] { width: 100%; } [part="head"] { display: flex; align-items: center; gap: 12px; } [part="head"] [part="label"] { flex-shrink: 0; color: var(--fg2); font-size: var(--t2); font-weight: 600; } [part="head"] [part="track"], [part="grow"] { flex: 1; min-width: 0; } [part="grow"] { position: relative; } [part="value"] { flex-shrink: 0; min-width: 24px; text-align: right; color: var(--fg1); font-variant-numeric: tabular-nums; } [part="track"] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: pointer; } [part="track"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--pill); --stop: calc(8px + (100% - 16px) * var(--val, 0)); background: linear-gradient(to right, var(--p2) var(--stop), var(--sf3) var(--stop)); } [part="track"]::-moz-range-track { height: 4px; border-radius: var(--pill); background: var(--sf3); } [part="track"]::-moz-range-progress { height: 4px; border-radius: var(--pill); background: var(--p2); } [part="track"]::-webkit-slider-thumb, [part="thumb"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--slider-thumb); box-shadow: var(--hl); transition: border-color var(--dur2) var(--ease1), box-shadow var(--dur0) var(--ease1); } [part="track"]::-moz-range-thumb, [part="thumb"]::-moz-range-thumb { width: 16px; height: 16px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--slider-thumb); box-shadow: var(--hl); } [part="thumb"]::-webkit-slider-runnable-track { height: 16px; background: transparent; } [part="thumb"]::-webkit-slider-thumb { margin-top: 0; pointer-events: auto; cursor: grab; } [part="thumb"]::-moz-range-thumb { pointer-events: auto; cursor: grab; } [part="track"]:hover::-webkit-slider-thumb, [part="thumb"]:hover::-webkit-slider-thumb { border-color: var(--l3); } [part="track"]:hover::-moz-range-thumb, [part="thumb"]:hover::-moz-range-thumb { border-color: var(--l3); } [part="track"]:focus-visible::-webkit-slider-thumb, &[state="focus"] [part="track"]::-webkit-slider-thumb, [part="thumb"]:focus-visible::-webkit-slider-thumb, &[state="focus"] [part="thumb"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border-color: var(--p2); box-shadow: var(--gl1); } [part="track"]:focus-visible::-moz-range-thumb, &[state="focus"] [part="track"]::-moz-range-thumb, [part="thumb"]:focus-visible::-moz-range-thumb, &[state="focus"] [part="thumb"]::-moz-range-thumb { width: 18px; height: 18px; border-color: var(--p2); box-shadow: var(--gl1); } [part="thumb"]:focus-visible::-webkit-slider-thumb, &[state="focus"] [part="thumb"]::-webkit-slider-thumb { margin-top: -1px; } [part="range"] { position: relative; height: 16px; } [part="rail"] { position: absolute; top: 6px; left: 0; right: 0; height: 4px; border-radius: var(--pill); background: var(--sf3); } [part="fill"] { position: absolute; top: 6px; height: 4px; left: calc(8px + (100% - 16px) * var(--lo)); right: calc(8px + (100% - 16px) * (1 - var(--hi))); border-radius: var(--pill); background: var(--p2); } [part="thumb"] { position: absolute; top: 0; left: 0; width: 100%; height: 16px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; } &[type="range"] { padding-bottom: 20px; } [part="ends"] { position: absolute; top: 100%; left: 0; right: 0; height: 16px; margin-top: 4px; color: var(--fg3); font-size: var(--t2); font-variant-numeric: tabular-nums; } [part="ends"] span { position: absolute; transform: translateX(-50%); white-space: nowrap; } &[disabled] [part="track"]::-webkit-slider-runnable-track { background: var(--sf3); } &[disabled] [part="track"]::-moz-range-progress { background: var(--sf3); } &[disabled] [part="fill"] { background: var(--sf3); } &[disabled] { opacity: .4; pointer-events: none; }}a-tab-rail{display:inline-flex;align-self:flex-start;min-width:0;max-width:100%;padding:4px;border:1px solid var(--input-border);border-radius:var(--r4);background:var(--sf2);box-shadow:var(--hl);overflow-x:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}@supports(animation-timeline:scroll()){mask-image: linear-gradient(90deg,transparent,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent); animation: tab-rail-fade linear both; animation-timeline: scroll(self inline);} [part="tab"] { flex: none; position: relative; height: 24px; padding-inline: 12px; border-radius: var(--r2); color: var(--fg2); line-height: 1; white-space: nowrap; transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1); + [part="tab"]::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 1px; background: var(--l1); } &:hover { color: var(--fg1); } &[selected] { background: var(--p2); color: var(--p5); } &[selected]::before, &[selected] + [part="tab"]::before, &:focus-visible::before, &:focus-visible + [part="tab"]::before { content: none; } &:focus-visible { z-index: 1; } &:focus-visible:not([selected]) { color: var(--fg1); } &[selected]:focus-visible { box-shadow: 0 0 0 2px var(--sf2), 0 0 0 4px var(--p2); } &:disabled { opacity: .4; cursor: not-allowed; } }}a-tab-rail[variant=underline],a-tab-rail[variant=pill]{padding:0;border:0;border-radius:0;background:0 0;box-shadow:none; [part="tab"] { color: var(--fg3); &::before { content: none; } &:hover { color: var(--fg1); } }}a-tab-rail[variant=underline] [part=tab]{height:36px;border-radius:var(--r2)var(--r2)0 0;&[selected]{background:0 0;color:var(--a1);box-shadow:inset 0 -2px 0 var(--a1)}&:focus-visible{box-shadow:var(--gl1)}&[selected]:focus-visible{box-shadow:inset 0 -2px 0 var(--a1),var(--gl1)}}a-tab-rail[block]{width:100%; [part="tab"] { flex: 1; min-width: 0; white-space: normal; }}a-tab-rail[variant=pill]{flex-wrap:wrap;gap:8px;overflow:visible; [part="tab"] { height: 28px; border: 1px solid var(--l1); border-radius: var(--pill); background: var(--sf1); box-shadow: var(--hl); &[selected] { border-color: var(--p2); background: var(--p2); color: var(--p5); box-shadow: none; } &:focus-visible { box-shadow: var(--gl1); } &[selected]:focus-visible { box-shadow: 0 0 0 2px var(--bg1), 0 0 0 4px var(--p2); } }}a-chip{display:inline-flex;align-items:center;gap:4px;height:24px;max-width:100%;padding:0 8px;border:1px solid var(--l1);border-radius:var(--r1);background:var(--sf1);box-shadow:var(--hl);color:var(--fg2);font-size:var(--t2);white-space:nowrap;outline:none;user-select:none;transition:background var(--dur2)var(--ease1),border-color var(--dur0)var(--ease1),color var(--dur2)var(--ease1),box-shadow var(--dur0)var(--ease1);&:has([part=dismiss]){padding-right:2px}&:has(> a-button:first-child){padding-left:1px}> a-button, > a-button[size], [part=dismiss]{border-radius:calc(var(--r1) - 2px)}> an-icon{color:var(--fg3)} [part="lbl"] { overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } [part="dismiss"] { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; color: var(--fg4); cursor: pointer; transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1); &:hover { color: var(--fg1); background: var(--sf3); } } &[aria-pressed] { cursor: pointer; } &[aria-pressed]:hover, &[aria-pressed][state="hover"] { background: var(--sf3); color: var(--fg1); } &[aria-pressed="true"], &[aria-pressed="true"]:hover { border-color: var(--l3); background: var(--a3); color: var(--a1); } &[aria-pressed="true"] > an-icon { color: inherit; } &:focus-visible { border-color: var(--p2); box-shadow: var(--gl1); } &[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }}a-chip[tone=success]{color:var(--s1);border-color:var(--s2);background:var(--s3)}a-chip[tone=warning]{color:var(--w1);border-color:var(--w2);background:var(--w3)}a-chip[tone=error]{color:var(--e1);border-color:var(--e2);background:var(--e3)}a-chip[tone=info]{color:var(--i1);border-color:var(--i2);background:var(--i3)}a-chip[tone=amber]{color:var(--a1);border-color:var(--l3);background:var(--a3)}a-chip[tone=neutral]{color:var(--fg3);border-color:var(--l1);background:var(--sf3)}a-chip[tone] [part=dismiss]:hover{color:inherit;opacity:1;background:var(--sf3)}code-block,[ui~=code-wrap]{.kw{color:var(--code-keyword)}.fn{color:var(--code-function)}.str{color:var(--code-string)}.num{color:var(--code-number)}.cm{color:var(--code-comment);font-style:italic}}code-block{display:block;position:relative;min-width:0;border:1px solid var(--l1);border-radius:var(--r3);background:var(--code-bg);box-shadow:var(--hl);container-type:inline-size; [part="head"] { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--l2); } [part="label"] { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; } [part="file"] { overflow: hidden; color: var(--fg2); font-family: var(--mono); font-size: var(--t2); text-overflow: ellipsis; white-space: nowrap; } [part="lang"] { flex: none; color: var(--fg3); font-family: var(--mono); font-size: var(--t1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } [part="note"] { flex: none; margin-right: 4px; color: var(--fg4); font-size: var(--t1); } [part="tabs"] { display: flex; flex: 1; align-self: stretch; min-width: 0; margin-left: -16px; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } [part="tab"] { flex: none; padding-inline: 16px; color: var(--fg3); font-size: var(--t2); @supports (text-box: trim-both cap alphabetic) { padding-top: max(0px, 2 * (round(.5cap + .5px, 1px) - .5px - .5cap) + .02px); padding-bottom: max(0px, 2 * (.5cap + .5px - round(.5cap + .5px, 1px)) - .02px); text-box: trim-both cap alphabetic; } white-space: nowrap; transition: color var(--dur2) var(--ease1), box-shadow var(--dur2) var(--ease1); &:hover { color: var(--fg1); } &[selected] { color: var(--a1); box-shadow: inset 0 -2px 0 var(--a1); } &:focus-visible { color: var(--a1); box-shadow: inset 0 0 0 1px var(--p2), inset 0 -2px 0 var(--a1); } &:first-child:focus-visible { border-top-left-radius: var(--r3); } } [part="play"], [part="copy"] { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r2); color: var(--fg3); font-size: var(--t2); white-space: nowrap; transition: color var(--dur2) var(--ease1), background var(--dur2) var(--ease1), border-color var(--dur2) var(--ease1); &:hover { background: var(--sf3); color: var(--fg1); } &:active { background: var(--sf1); } &:focus-visible { border-color: var(--p2); box-shadow: var(--gl1); } &[hidden] { display: none; } } [part="play"] { color: var(--a1); } [part="play"]:hover { color: var(--a1); } [part="ico"], [part="done"] { display: inline-flex; } [part="done"] { display: none; } [part="copy"][state~="copied"] { border-color: var(--s2); background: var(--s3); color: var(--s1); [part="ico"] { display: none; } [part="done"] { display: inline-flex; } } [part="copy"][state~="error"] { border-color: var(--e2); background: var(--e3); color: var(--e1); } [part="body"] { margin: 0; padding: 16px 0; border-radius: 0 0 var(--r3) var(--r3); overflow-x: auto; overscroll-behavior-x: contain; color: var(--fg2); font-family: var(--mono); font-size: var(--t2); line-height: 20px; tab-size: 4; &:focus-visible { box-shadow: var(--gl1); } &[hidden] { display: none; } } [part="body"] > code { display: inline-block; min-width: 100%; } [part="line"] { display: block; padding: 0 20px; &[mark] { background: var(--a4); box-shadow: inset 2px 0 0 var(--a1); } } &[lines] code { counter-reset: line; } &[lines] [part="line"] { position: relative; padding-left: 52px; counter-increment: line; &::before { content: counter(line); position: absolute; left: 0; width: 36px; color: var(--fg4); text-align: right; user-select: none; } } [part="status"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } > [part="body"]:first-child { border-radius: var(--r3); } &[verdict] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; } &[verdict] [part="body"] { grid-column: 1; padding: 12px 0; border-radius: var(--r3); [part="line"] { padding: 0 8px 0 16px; } } &[verdict="bad"] { border-color: var(--e2); } &[verdict="good"] { border-color: var(--s2); } [part="caption"] { grid-column: 1; padding: 12px 8px 0 16px; font-family: var(--mono); font-size: var(--t1); } &[verdict="bad"] [part="caption"] { color: var(--e1); } &[verdict="good"] [part="caption"] { color: var(--s1); } &[verdict] [part="caption"] + [part="body"] { padding-top: 4px; } [part="aside"] { display: flex; align-items: center; gap: 4px; grid-column: 2; grid-row: 1; align-self: start; padding: 8px 8px 8px 12px; } [part="caption"] ~ [part="aside"] { grid-row: 1 / span 2; } [part="verdict"] { display: inline-flex; align-items: center; height: 28px; } &[verdict] [part="copy"] { width: 28px; padding: 0; justify-content: center; [part="text"] { display: none; } } &[verdict="bad"] [part="verdict"] { color: var(--e1); } &[verdict="good"] [part="verdict"] { color: var(--s1); } &[verdict]:has(> [part="body"]:focus-visible) { border-color: var(--p2); box-shadow: var(--gl1); } &[verdict] > [part="body"]:focus-visible { box-shadow: none; } @container (max-width: 400px) { [part="play"] [part="text"], [part="copy"]:not([state]) [part="text"] { display: none; } }}example-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-template-rows:auto;grid-auto-rows:1fr;gap:16px;min-width:0;padding:16px;border:1px solid var(--l1);border-radius:var(--r3);background:var(--sf1);box-shadow:var(--hl);color:var(--fg1);&[hidden]{display:none}& > [part=text]{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}& > [part=text] > [part=title]{margin:0;color:var(--fg1);font-size:var(--t3);font-weight:700;line-height:20px}& > [part=text] > [part=desc]{margin:0;color:var(--fg3);font-size:var(--t2);line-height:1.5}& > [part=text] > [part=link]{display:inline-flex;align-items:center;gap:4px;margin:auto -4px 0;padding:2px 4px;border-radius:var(--r1);color:var(--a1);font-size:var(--t2);font-weight:600;text-decoration:none;& > an-icon{transition:transform var(--dur2)var(--ease1)}&:hover > an-icon{transform:translateX(2px)}&:focus-visible{outline:none;box-shadow:var(--gl1)}}& > [part=text] > :has(+ [part=link]){margin-bottom:6px}& > [part=preview]{display:flex;align-items:center;justify-content:center;min-width:0;min-height:96px;padding:12px;overflow:hidden;border:1px solid var(--l2);border-radius:var(--r2);background:var(--sf4)}}.demo{border:1px solid var(--l1);border-radius:var(--r3);background:var(--code-bg);box-shadow:var(--hl);overflow:hidden;.demo-tabs{display:flex;gap:4px;padding:8px 8px 0}.demo-tab{height:28px;padding:0 12px;border:1px solid transparent;border-radius:var(--r2);color:var(--fg3);font-size:var(--t2);font-weight:600;cursor:pointer;transition:color var(--dur2)var(--ease1),background var(--dur2)var(--ease1);&:hover{color:var(--fg1);background:var(--sf3)}&[aria-selected=true]{border-color:var(--l3);background:var(--a3);color:var(--a1)}&:focus-visible{border-color:var(--p2);box-shadow:var(--gl1)}}.demo-panel > code-block{border:0;border-radius:0;box-shadow:none}}mini-modal>dialog{max-width:320px;margin:auto;padding:16px;border:1px solid var(--l1);border-radius:var(--r5);background:var(--sf1);box-shadow:var(--hl),var(--sh1);color:var(--fg1);&::backdrop{background:var(--scrim);backdrop-filter:blur(4px)}}.demo-result{min-height:96px;margin:8px;padding:24px;border:1px dashed var(--l1);border-radius:var(--r2);background:var(--bg1);color:var(--fg2);font-size:var(--t3);line-height:1.5;overflow-x:auto;&:focus-visible{border-style:solid;border-color:var(--p2)} :is(h1, h2, h3, h4) { margin: 0 0 8px; color: var(--fg1); } h1 { font-size: var(--t6); } h2 { font-size: var(--t5); } h3 { font-size: var(--t4); margin-top: 16px; } p { margin: 4px 0; } :is(ul, ol) { margin: 8px 0; padding-left: 20px; list-style: disc; } li { padding: 2px 0; list-style: inherit; } li.done > label { text-decoration: line-through; opacity: .6; } button { height: 28px; padding: 0 12px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf1); box-shadow: var(--hl); color: var(--fg1); font-size: var(--t2); font-weight: 600; cursor: pointer; @supports (text-box: trim-both cap alphabetic) { &:not([style*="height"]) { padding-top: max(0px, 2 * (round(.5cap, 1px) - .5cap) + .01px); padding-bottom: max(0px, 2 * (.5cap - round(.5cap, 1px)) - .01px); text-box: trim-both cap alphabetic; } } &:hover { border-color: var(--l3); } &:focus-visible { box-shadow: var(--gl1); } } button[type="submit"] { background: var(--p2); border-color: var(--p2); color: var(--p5); } button[style*="background"] { color: light-dark(var(--fg1), var(--bg1)); } form, fieldset { display: flex; flex-direction: column; gap: 8px; max-width: 400px; } fieldset { padding: 16px; border: 1px solid var(--l1); border-radius: var(--r3); } legend { padding: 0 4px; color: var(--fg1); font-size: var(--t3); font-weight: 600; } :is(form, fieldset) > :is(button, a-button) { align-self: flex-start; } ol.steps { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: step; } ol.steps > li { display: flex; align-items: center; gap: 6px; padding: 0; color: var(--fg3); font-size: var(--t2); counter-increment: step; } ol.steps > li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--l1); border-radius: var(--pill); font-size: var(--t1); } ol.steps > li:is([aria-current], .done) { color: var(--a1); } ol.steps > li:is([aria-current], .done)::before { border-color: var(--l3); background: var(--a3); } label { color: var(--fg3); font-size: var(--t2); } label:has(input[type="checkbox"], input[type="radio"]) { display: flex; align-items: center; gap: 8px; color: var(--fg1); font-size: var(--t3); } input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select { width: 100%; max-width: 400px; height: 34px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: var(--r3); background: var(--sf5); color: var(--fg1); transition: border-color var(--dur2) var(--ease1); &:hover { border-color: var(--l3); } &:focus-visible { border-color: var(--l3); box-shadow: var(--gl1); } &[aria-invalid="true"] { border-color: var(--e2); } &[aria-invalid="true"]:focus-visible { border-color: var(--e1); box-shadow: var(--gle); } } textarea { height: auto; min-height: 34px; padding: 6px 12px; } input::placeholder { color: var(--fg4); } input:is([type="checkbox"], [type="radio"]) { position: relative; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--input-border); border-radius: var(--r1); background: var(--sf5); box-shadow: var(--hl); appearance: none; -webkit-appearance: none; cursor: pointer; &:hover:not(:checked) { border-color: var(--l3); } &:focus-visible { border-color: var(--p2); box-shadow: var(--gl1); } &:checked::after { content: ""; position: absolute; } } input[type="checkbox"]:checked { border-color: var(--p2); background: var(--p2); &::after { inset: 0; background: var(--p5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L10 17L20 7'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12L10 17L20 7'%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat; } } input[type="radio"] { border-radius: var(--pill); } input[type="radio"]:checked { border-color: var(--p2); &::after { inset: 3px; border-radius: var(--pill); background: var(--p2); } } table { width: 100%; border-collapse: collapse; } th { padding: 8px 12px; border-bottom: 1px solid var(--l1); color: var(--fg3); font-size: var(--t2); text-align: left; } td { padding: 8px 12px; border-bottom: 1px solid var(--l2); } tr:hover td { background: var(--table-hover); } small, [role="status"] { color: var(--fg3); font-size: var(--t2); } .error, [role="alert"], [aria-invalid="true"] ~ [role="status"] { color: var(--e1); font-size: var(--t2); } .card, .user-card, .box { max-width: 360px; padding: 16px; border: 1px solid var(--l1); border-radius: var(--r3); background: var(--sf1); } .box { margin: 4px 0; padding: 12px 16px; } :is(.card, .user-card) + :is(.card, .user-card), * + * > :is(.card, .user-card) { margin-top: 8px; } .card-header { display: flex; align-items: center; gap: 8px; } .badge { display: inline-block; padding: 2px 8px; border-radius: var(--pill); background: var(--a3); color: var(--a1); font-size: var(--t1); font-weight: 700; text-transform: uppercase; } .todo { max-width: 400px; } .todo > div { display: flex; gap: 8px; margin: 12px 0; } .todo li { display: flex; align-items: center; gap: 8px; } .date-picker { max-width: 320px; } .date-picker > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .date-picker td { text-align: center; cursor: pointer; border-radius: var(--r2); } .date-picker td:hover { background: var(--sf3); } .date-picker td.selected { background: var(--p2); color: var(--p5); font-weight: 700; } v-c { display: block; overflow: hidden auto; border: 1px solid var(--l1); border-radius: var(--r3); } a-row { display: flex; border-bottom: 1px solid var(--l2); } a-row:hover { background: var(--table-hover); } .table-header { position: sticky; top: 0; z-index: 1; display: flex; border-bottom: 1px solid var(--l1); background: var(--sf1); } .table-cell { flex: 1; padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-header .table-cell { color: var(--fg3); font-size: var(--t2); font-weight: 600; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }}