Reference

Every class and token Deck defines, read straight from src/*.css. 931 classes, 144 tokens, 26 stylesheets.

Clear

Showing 931 classes.

Classes Deck defines
ClassLayerWhat it doesSource
.absolute deck.utilities Sets position. 09-utilities.css:167
.accordion deck.components A bordered container for native <details>. The open state, the keyboard and the accessible name are the element's. Deck restyles the summary, replaces the marker with a chevron, and animates the height using ::details-content plus the interpolate-size opt-in in 02-reset.css — the first time a disclosure could animate to auto height without JavaScript. Give the details elements a shared name attribute for one-at-a-time. 07-components.css:431
.accordion-body deck.components No declarations. 07-components.css:460
.actions-cq deck.layout Button rows that go full width when cramped 18-container.css:89
.addon deck.components No declarations. 06-forms.css:145
.alert deck.components A block of prose the reader is meant to stop and read. The tone is a three-pixel border-inline-start, so it moves to the right edge under dir="rtl" with no second rule. Deck sets no ARIA role: role="alert" on a message that is present at page load interrupts a screen reader before it has read anything. 07-components.css:146
.alert-bad deck.components Something failed, or is about to. 07-components.css:169
.alert-body deck.components The explanatory line. min-inline-size: 0 so a long unbroken string cannot push the alert wider than its container. 07-components.css:160
.alert-good deck.components Confirmation that something worked. 07-components.css:165
.alert-info deck.components Something the reader should know before continuing. 07-components.css:163
.alert-title deck.components The first line of an alert. A weight change, not a heading — if it belongs in the document outline, put this class on a real h2-h4. 07-components.css:157
.alert-warn deck.components A consequence the reader should understand first. 07-components.css:167
.anchor deck.components Put .anchor on the trigger and --anchor on both trigger and panel. Each pair needs a unique name, so generate it server-side in Keel: <button class="anchor" style="--anchor:--menu-<?= $id ?>"> 25-anchor.css:24
.app-shell deck.layout Header, content, footer in a 100dvh grid whose middle row takes the remaining height — the sticky footer, without the hacks. dvh rather than vh so it tracks a phone browser hiding its chrome. It expects exactly three children. 04-layout.css:222
.avatar deck.components A round box holding an image or initials. --size drives the width, the height and the font size together, so a size variant is one declaration and the initials can never overflow the circle. 07-components.css:176
.avatar-lg deck.components 56px. 07-components.css:197
.avatar-sm deck.components 32px. 07-components.css:195
.avatar-square deck.components A square avatar, for anything that is not a person — an organisation, a project, a repository. 07-components.css:202
.avatar-stack deck.components Overlapping avatars. The offset is a fraction of --size, so it stays proportional at every size, and the ring is the surface colour, which is wrong on any other background. 07-components.css:207
.avatar-xl deck.components 80px. 07-components.css:199
.avatar-xs deck.components 24px. 07-components.css:193
.back-to-top deck.components A link, not a button. #top is a real target at the head of the document, so the browser moves focus there along with the scroll. A button calling scrollTo() leaves a keyboard user parked at the bottom of the page while looking at the top of it, which is the whole bug this component usually ships with. Showing and hiding is a scroll-driven animation, so there is no scroll listener anywhere -- same mechanism as .scroll-progress in 16-motion. visibility is in the keyframe on purpose: it takes the link out of the tab order and out of the accessibility tree while it is off screen, which is what aria-hidden reaches for and which CSS can actually do by itself. deck.js only steps in where animation-timeline is missing, and it uses an IntersectionObserver on a sentinel, not a scroll handler. 22-nav.css:432
.backface-hidden deck.effects Sets backface-visibility. 21-space3d.css:26
.badge deck.components A small inline status pill. Sized in em, so it tracks whatever text it sits next to rather than needing a size variant per context. 07-components.css:81
.badge-bad deck.components Failed, overdue, rejected. 07-components.css:102
.badge-brand deck.components Brand tint. For a label that names a category rather than a status. 07-components.css:96
.badge-dot deck.components Adds a leading dot in currentColor, so it takes the tone's text colour without a second class. The dot is decoration — never ship one with no text beside it, because colour alone is not a status. 07-components.css:109
.badge-good deck.components Paid, shipped, passing, active. 07-components.css:98
.badge-solid deck.components Filled with the brand colour. The highest-emphasis badge; use one per view or it stops meaning anything. 07-components.css:105
.badge-warn deck.components Pending, expiring: needs attention, nothing is broken. 07-components.css:100
.banner deck.components An announcement strip. Top or bottom, dismissible, out of the way. 22-nav.css:610
.banner-bottom deck.components Sets inset-block, border-block, border-block-start, border-block-end, and 1 more. 22-nav.css:624
.banner-close deck.components Sets margin-inline-start, opacity, cursor, flex. 22-nav.css:634
.banner-dark deck.components Sets background, color, border-color. 22-nav.css:632
.banner-fixed deck.components Sets position, inset-inline. 22-nav.css:631
.banner-warn deck.components Sets background, color, border-color. 22-nav.css:633
.bar deck.layout Push the last child away from the rest 04-layout.css:94
.bg-brand deck.utilities Sets background, color. 09-utilities.css:143
.bg-none deck.utilities Sets background. 09-utilities.css:145
.bg-soft deck.utilities Sets background, color. 09-utilities.css:144
.bg-sunken deck.utilities Sets background. 09-utilities.css:142
.bg-surface deck.utilities Sets background. 09-utilities.css:141
.bidi-isolate deck.utilities Sets unicode-bidi. 19-logical.css:116
.bidi-plaintext deck.utilities Sets unicode-bidi. 19-logical.css:117
.bie deck.utilities Sets border-inline-end. 19-logical.css:72
.bis deck.utilities Sets border-inline-start. 19-logical.css:71
.block deck.utilities Sets display. 09-utilities.css:11
.border deck.utilities Sets border. 09-utilities.css:147
.border-0 deck.utilities Sets border. 09-utilities.css:151
.border-b deck.utilities Sets border-block-end. 09-utilities.css:149
.border-brand deck.utilities Sets border-color. 09-utilities.css:150
.border-t deck.utilities Sets border-block-start. 09-utilities.css:148
.breadcrumb deck.components Sets display, flex-wrap, align-items, gap, and 1 more. 07-components.css:473
.btn deck.components Every button clears the 44px touch target even when it looks smaller 05-buttons.css:7
.btn-3d deck.effects A button with real thickness. The face moves down into the shadow instead of just changing color. 21-space3d.css:196
.btn-accent deck.components A secondary emphasis colour, for upsells and highlights. 05-buttons.css:81
.btn-block deck.components Full width. For a phone, or the primary action at the end of a form. 05-buttons.css:156
.btn-danger deck.components Destructive and irreversible. Pair it with a confirmation. 05-buttons.css:90
.btn-ghost deck.components No border or background until hover. For toolbars and dense rows where seven bordered buttons would be noise. 05-buttons.css:109
.btn-group deck.components Buttons joined into one control, with the inner radii and the doubled border between them removed. Logical radii, so it mirrors under RTL. 05-buttons.css:168
.btn-icon deck.components Square, icon-only button. It has no text, so it needs an aria-label. 05-buttons.css:159
.btn-lg deck.components The large size, from --control-h-lg. 05-buttons.css:149
.btn-link deck.components Looks like a link, behaves like a button. Only for a real <button> that has to sit in a row of links — on an anchor it adds a touch target, a ring offset and nowrap to something that wanted none of them. 05-buttons.css:128
.btn-outline deck.components Brand-coloured border, transparent fill. 05-buttons.css:117
.btn-primary deck.components The one important action in a view. Solid brand fill; use exactly one per screen so it keeps meaning something. 05-buttons.css:72
.btn-round deck.components A fully rounded button, usually paired with .btn-icon. 05-buttons.css:163
.btn-sm deck.components The 34px size. Still clears the 44px touch target, because the target is a pseudo-element rather than the box. 05-buttons.css:141
.btn-soft deck.components Tinted, low weight. Good for an action repeated down a list. 05-buttons.css:99
.bubble deck.components The message body. Its corner radii are logical, which is what lets the grouping flatten the correct side in either writing direction. 24-media.css:247
.bubble-attachment deck.components Sets margin, border-start-start-radius, border-start-end-radius, overflow. 24-media.css:283
.bubble-meta deck.components Sets display, align-items, gap, margin-block-start, and 4 more. 24-media.css:269
.bubble-name deck.components Sets font-weight, font-size, margin-block-end, color. 24-media.css:280
.bubble-system deck.components Sets align-self, background, border, color, and 3 more. 24-media.css:294
.bubble-typing deck.components Typing indicator 24-media.css:305
.capitalize deck.utilities Sets text-transform. 09-utilities.css:123
.card deck.components A surface with a border, radius and shadow. It brings no padding of its own — put .card-body inside so the header, body and footer can each own their spacing. 07-components.css:11
.card-body deck.components The padded region of a card. A column with a gap, so children stack without margins. 07-components.css:37
.card-brand deck.components Brand-tinted fill and border, for the one card on a page that is an offer rather than a record. 07-components.css:60
.card-flex deck.layout A card that turns into a horizontal media object once it has the room 18-container.css:44
.card-flush deck.components A card with no border, shadow or background. Grouping without a box drawn around it. 07-components.css:54
.card-footer deck.components The top region of a card. A flex row, so a title and a control sit on one line; the divider below it belongs to the header, so a card with no header has no stray line. 07-components.css:27
.card-header deck.components The top region of a card. A flex row, so a title and a control sit on one line; the divider below it belongs to the header, so a card with no header has no stray line. 07-components.css:27
.card-link deck.components Whole card is the link, but nested links still work 07-components.css:48
.card-media deck.components An image region that reaches the card's edges. The card's own overflow: clip does the rounding, so the image needs no radius. Put it beside .card-body, never inside it. 07-components.css:44
.card-raised deck.components A deeper shadow and no visible border, for a surface that should read as floating above the page. 07-components.css:57
.card-title deck.components The heading inside a card. Sized independently of h1-h6 so the same card works at any heading level. 07-components.css:40
.carousel deck.components Scroll snap does the work. Arrows and dots are progressive enhancement, so it still swipes correctly with JavaScript switched off. 22-nav.css:11
.carousel-arrow deck.components Previous and next. Hidden on a coarse pointer, where the reader swipes instead — so do not also hide the dots. 22-nav.css:47
.carousel-caption deck.components Text over a slide. The generous block-start padding is there to give the scrim room to fade — without a background the near-white text sits directly on the image and disappears over anything light. 22-nav.css:165
.carousel-dot deck.components the tap target is bigger than the dot 22-nav.css:78
.carousel-dots deck.components Sets display, justify-content, gap, padding-block-start. 22-nav.css:72
.carousel-multi deck.components No declarations. 22-nav.css:39
.carousel-next deck.components Sets inset-inline-end. 22-nav.css:69
.carousel-peek deck.components No declarations. 22-nav.css:38
.carousel-prev deck.components Sets inset-inline-start. 22-nav.css:68
.carousel-slide deck.components One slide. flex-basis: 100% by default; .carousel-peek makes it 86% so the next one is partly visible, which is the only persistent cue that the track scrolls once the scrollbar is hidden. 22-nav.css:28
.carousel-track deck.components The scroll-snap container holding the slides. 22-nav.css:14
.center deck.layout Center a thing with a max width and no side effects 04-layout.css:150
.chart deck.components The frame, and the palette. Six series colours are computed by rotating --hue-brand, so charts retheme with the rest of the app and stay in one family. That also makes them hard to tell apart for a colour-blind reader — label the marks directly rather than relying on hue. 14-charts.css:15
.chart-area deck.components Sets fill, opacity, stroke, animation. 14-charts.css:210
.chart-area-g deck.effects Area charts read better with a gradient falling off to nothing. 20-gradients.css:283
.chart-bar deck.components Sets display, grid-template-columns, align-items, gap, and 1 more. 14-charts.css:154
.chart-bar-fill deck.components The filled part of a horizontal bar, sized from --value. It grows from the starting edge, which needs transform-origin — a physical property — flipped for RTL in 19-logical.css. 14-charts.css:171
.chart-bar-label deck.components Sets color, overflow, text-overflow, white-space. 14-charts.css:161
.chart-bar-track deck.components Sets block-size, border-radius, background, overflow. 14-charts.css:162
.chart-bar-value deck.components The value printed beside a bar rather than inside it. Prefer this over text on the fill: contrast-color() raises the floor for text on a series colour but does not guarantee AA. 14-charts.css:183
.chart-bars deck.components Sets display, flex-direction, gap. 14-charts.css:153
.chart-baseline deck.components Sets stroke, stroke-width, vector-effect. 14-charts.css:231
.chart-col deck.components A column. Its height is calc(var(--value) * 1%), so rendering a chart is writing numbers into style attributes. data-label and data-value are drawn as generated content, which means they are for sighted readers only. 14-charts.css:74
.chart-col-stack deck.components Stacked columns: nest segments inside a .chart-col-stack 14-charts.css:136
.chart-columns deck.components <div class="chart-columns"> <div class="chart-col" style="--value:68" data-label="Mar" data-value="68"></div> 14-charts.css:56
.chart-dot deck.components Sets fill, stroke, stroke-width, vector-effect. 14-charts.css:218
.chart-dot-active deck.components Sets fill. 14-charts.css:224
.chart-gridline deck.components Sets stroke, stroke-width, vector-effect. 14-charts.css:226
.chart-group deck.components Grouped columns 14-charts.css:149
.chart-head deck.components Sets display, align-items, gap, flex-wrap. 14-charts.css:32
.chart-heat deck.components A grid of --cols columns whose cells mix the series colour with the sunken background by --value, interpolated in oklab. 14-charts.css:311
.chart-legend deck.components The key. Built from real buttons it gets a working toggle state for free, because the faded style keys off [aria-pressed="false"]. 14-charts.css:39
.chart-lg deck.components Sets --chart-h. 14-charts.css:30
.chart-line deck.components Sets fill, stroke, stroke-width, stroke-linecap, and 5 more. 14-charts.css:196
.chart-line-dashed deck.components Sets stroke-dasharray, animation, stroke-dashoffset, opacity. 14-charts.css:208
.chart-meter deck.components Sets display, block-size, border-radius, overflow, and 1 more. 14-charts.css:294
.chart-note deck.components Sets font-size, color. 14-charts.css:34
.chart-plot deck.components Sets display, grid-template-columns. 14-charts.css:252
.chart-sm deck.components Sets --chart-h. 14-charts.css:29
.chart-svg deck.components <svg class="chart-svg" viewBox="0 0 300 100" preserveAspectRatio="none"> <path class="chart-area" d="..."/> <path class="chart-line" d="..."/> 14-charts.css:191
.chart-title deck.components Sets font-size, font-weight. 14-charts.css:33
.chart-x deck.components Sets display, justify-content, font-size, color, and 1 more. 14-charts.css:234
.chart-y deck.components Sets display, flex-direction, justify-content, font-size, and 5 more. 14-charts.css:241
.chat deck.components Conversation view. Consecutive messages from one side group together and only the last one in a run gets the tail. 24-media.css:212
.chat-composer deck.components Composer pinned to the bottom 24-media.css:323
.chat-day deck.components A centred date pill between days. Styling, not structure — a screen reader hears ordinary text. 24-media.css:222
.check deck.components A checkbox or radio and its text, laid out as a row that clears the 44px touch target. Wrap the text in .check-text to add a second line. 06-forms.css:175
.check-card deck.components Card-style choice, good for pricing and plan pickers 06-forms.css:238
.check-note deck.components No declarations. 06-forms.css:235
.check-text deck.components No declarations. 06-forms.css:231
.chip deck.components Sets display, align-items, gap, min-block-size, and 9 more. 07-components.css:116
.chip-remove deck.components Sets display, place-items, opacity. 07-components.css:137
.clamp-2 deck.utilities Sets display, -webkit-box-orient, overflow. 09-utilities.css:132
.clamp-3 deck.utilities Sets display, -webkit-box-orient, overflow. 09-utilities.css:132
.cluster deck.layout Horizontal group that wraps instead of overflowing on a phone 04-layout.css:74
.cluster-between deck.layout First item to one end, last to the other. Beware of combining it with wrapping: each line is justified separately, so a lone item on the second line jumps to the far end and looks stranded. .bar with .push is the predictable version. 04-layout.css:91
.cluster-center deck.layout Centres the row. 04-layout.css:86
.cluster-end deck.layout Packs the row against the end edge, which follows the writing direction rather than always being the right. 04-layout.css:84
.cluster-tight deck.layout Kept as the readable name for step 2, which is what most clusters want 04-layout.css:81
.code-ltr deck.utilities Sets direction, unicode-bidi, text-align. 19-logical.css:123
.combo deck.components A filtering select. It wraps a real <select> that stays in the DOM and stays in sync, so an ordinary form post works with no server-side handling, server-side rendering is just marking options selected, and without JavaScript the reader still gets a working control. 11-combobox.css:12
.combo-check deck.components No declarations. 11-combobox.css:173
.combo-clear deck.components Sets color. 11-combobox.css:74
.combo-control deck.components The box, styled to match .input so a combobox in a form does not look like a different species. Focus is handled twice — :has(.combo-input:focus) and :focus-within — so a token's remove button lights the box too. 11-combobox.css:18
.combo-count deck.components Sets font-size, font-weight, color, flex. 11-combobox.css:109
.combo-create deck.components Sticky "create new" row for tag-style inputs 11-combobox.css:213
.combo-empty deck.components The no-matches row. Name what was searched for — "No repositories match 'deckk'" tells a reader who mistyped what they actually typed. 11-combobox.css:201
.combo-group deck.components A sticky heading above a group of options. 11-combobox.css:188
.combo-hint deck.components Sets display, gap, padding, border-block-start, and 2 more. 11-combobox.css:223
.combo-input deck.components The text field. deck.js gives it role="combobox" and keeps aria-expanded in step; arrow keys move .is-active rather than focus, so the reader can keep typing while the highlight moves. 11-combobox.css:48
.combo-list deck.components The option list. A positioned sibling by default, which a clipping ancestor can cut off; 25-anchor.css moves it to the top layer where anchor positioning exists, which is the fix for the combobox-inside-a-modal bug. 11-combobox.css:121
.combo-loading deck.components The no-matches row. Name what was searched for — "No repositories match 'deckk'" tells a reader who mistyped what they actually typed. 11-combobox.css:201
.combo-option deck.components The matched substring, wrapped by deck.js 11-combobox.css:143
.combo-option-main deck.components No declarations. 11-combobox.css:159
.combo-option-sub deck.components No declarations. 11-combobox.css:160
.combo-option-trail deck.components No declarations. 11-combobox.css:161
.combo-sep deck.components Sets block-size, background, margin. 11-combobox.css:197
.combo-toggle deck.components Sets inline-size, block-size, display, place-items, and 4 more. 11-combobox.css:61
.combo-token deck.components Sets display, align-items, gap, min-block-size, and 9 more. 11-combobox.css:78
.combo-tokens deck.components Sets display. 11-combobox.css:77
.contain deck.components Tell the engine that a component's layout cannot affect anything outside it. On a dashboard with twenty cards this is the difference between one layout pass and twenty. 26-perf.css:66
.contain-paint deck.components Sets contain. 26-perf.css:67
.container deck.layout Centres content and caps it at --container, with the responsive page gutter already applied. Nest one inside another and the inner one adds a second gutter, so use .container-full instead. 04-layout.css:11
.container-full deck.layout Keeps the page gutter, drops the max width. This is what to nest inside another container — a second .container would apply the gutter twice. 04-layout.css:30
.container-lg deck.layout The same 76rem as the bare .container, named. Use it when a page should say which width it means rather than rely on the default. 04-layout.css:24
.container-md deck.layout An article with a rail, or a form. 04-layout.css:21
.container-sm deck.layout A single column of prose: about 70 characters at the body size, which is inside the maximum line length WCAG recommends. 04-layout.css:19
.container-xl deck.layout A wide dashboard or a data grid. 04-layout.css:26
.contents deck.utilities Sets display. 09-utilities.css:15
.copy deck.components The behaviour hangs off [data-deck-copy], not off .copy-btn. The class is the look and nothing else, so a button with the class and no attribute looks exactly right and does nothing at all -- the single most common way to get this component wrong. Whether a successful copy raises a toast depends on what is inside the button: a .copy-done element swaps in place and no toast fires; without one, deck-extras.js toasts instead. .copy-inline never toasts. 23-inputs.css:358
.copy-btn deck.components Sets flex, display, align-items, gap, and 9 more. 23-inputs.css:386
.copy-done deck.components No declarations. 23-inputs.css:403
.copy-idle deck.components No declarations. 23-inputs.css:405
.copy-inline deck.components Inline icon-only variant, for an order number or an API key in a table 23-inputs.css:408
.copy-value deck.components No declarations. 23-inputs.css:367
.coverflow deck.effects A horizontal scroller where the off-center items rotate away. Uses scroll snap for the mechanics and 3D only for the read. 21-space3d.css:127
.cq deck.layout Container queries: components respond to their slot, not the viewport 04-layout.css:234
.cq-lg deck.layout No declarations. 18-container.css:170
.cq-md deck.layout No declarations. 18-container.css:160
.cq-normal deck.layout Sets container-type. 18-container.css:17
.cq-pane deck.layout Sets container. 18-container.css:20
.cq-panel deck.layout Sets container. 18-container.css:19
.cq-row deck.layout Sets container. 18-container.css:21
.cq-shell deck.layout Sets container. 18-container.css:22
.cq-size deck.layout Sets container-type. 18-container.css:16
.cq-sm deck.layout No declarations. 18-container.css:153
.cq-tone deck.layout Query a custom property rather than a size. Set --tone on a container and everything inside it adapts, with no extra classes on the children. Supported in current Chrome and Safari; the fallback is simply no change. 18-container.css:182
.cube deck.effects Six faces for a rotating status block or an empty-state illustration. 21-space3d.css:153
.cube-spin deck.effects Sets animation. 21-space3d.css:185
.cursor-pointer deck.utilities Sets cursor. 09-utilities.css:179
.datefield deck.components The trigger for a date picker: an input with a calendar icon inside its starting edge and a clear button at the end. The input is readonly and cursor: pointer, because the value comes from the calendar — which also means a reader who knows the date cannot type it. 10-datepicker.css:14
.datefield-clear deck.components No declarations. 10-datepicker.css:23
.datepicker deck.components The calendar panel: a native popover, anchored to its field by 25-anchor.css with the same fallback chain as a menu. Where there is no room below it opens upward, and position-try-order: most-block-size picks the direction with the most room rather than the first that fits — which matters more for a calendar than for a menu. 10-datepicker.css:43
.datepicker-day deck.components One day cell. 38px, raised to 42px on a coarse pointer so it approaches the touch target. Eight is- states compose on it, and the range band is built from is-in-range plus logical corner radii on the two ends. 10-datepicker.css:163
.datepicker-dow deck.components Sets text-align, font-size, font-weight, color, and 1 more. 10-datepicker.css:152
.datepicker-foot deck.components Sets display, align-items, gap, padding, and 2 more. 10-datepicker.css:265
.datepicker-grid deck.components Sets display, grid-template-columns, gap. 10-datepicker.css:147
.datepicker-head deck.components Sets display, align-items, gap, padding-block-end. 10-datepicker.css:111
.datepicker-jump deck.components Opens the month and year grid. A picker without one makes a reader press the next-month arrow twenty-four times to reach a date two years out. 10-datepicker.css:233
.datepicker-layout deck.components Sets display, flex-direction. 10-datepicker.css:66
.datepicker-main deck.components Sets padding. 10-datepicker.css:109
.datepicker-month deck.components Sets display, flex-direction. 10-datepicker.css:145
.datepicker-months deck.components Sets display, gap. 10-datepicker.css:144
.datepicker-nav deck.components Sets inline-size, block-size, display, place-items, and 3 more. 10-datepicker.css:132
.datepicker-preset deck.components Sets padding, min-block-size, border-radius, font-size, and 6 more. 10-datepicker.css:93
.datepicker-presets deck.components The shortcut rail — "Last 7 days", "This month". A horizontal scroller below 40rem and a column beside the calendar above it. 10-datepicker.css:74
.datepicker-readout deck.components Sets flex, font-size, color, font-variant-numeric, and 1 more. 10-datepicker.css:273
.datepicker-time deck.components Sets display, align-items, gap, padding, and 1 more. 10-datepicker.css:256
.datepicker-title deck.components Sets flex, display, align-items, justify-content, and 8 more. 10-datepicker.css:117
.defer deck.components Whole sections below the fold. Cheap and safe on any page. 26-perf.css:48
.delay-1 deck.motion Sets transition-delay, animation-delay. 16-motion.css:75
.delay-2 deck.motion Sets transition-delay, animation-delay. 16-motion.css:76
.delay-3 deck.motion Sets transition-delay, animation-delay. 16-motion.css:77
.dg deck.components A real table with a frozen header and pinned columns. Use it when the reader operates on data — sorts, selects, scans — rather than reads it; .table is lighter for presentation. Must sit inside .dg-wrap, which carries the scroll container and every custom property these rules read. 12-datagrid.css:29
.dg-actions deck.components No declarations. 12-datagrid.css:159
.dg-cards deck.components Below a breakpoint, restacks each row into a labelled card, taking the column name from data-label on the cell. Costs the column alignment that makes a grid comparable; prefer .dg-cq, which asks the container rather than the viewport. 12-datagrid.css:302
.dg-cards-wrap deck.components Sets max-block-size, overflow, border, background. 12-datagrid.css:296
.dg-center deck.components No declarations. 12-datagrid.css:150
.dg-check deck.components No declarations. 12-datagrid.css:156
.dg-comfy deck.components 56px rows, for a grid with two lines of content per cell. 12-datagrid.css:166
.dg-compact deck.components 34px rows and smaller text, for scanning many rows at once. 12-datagrid.css:163
.dg-cq deck.layout Sets display, inline-size. 18-container.css:101
.dg-empty deck.components The row that holds an empty state, with its height and padding released so the state can be any size. 12-datagrid.css:290
.dg-num deck.components No declarations. 12-datagrid.css:148
.dg-pin-end deck.components No declarations. 12-datagrid.css:73
.dg-pin-start deck.components No declarations. 12-datagrid.css:59
.dg-pin-start-2 deck.components No declarations. 12-datagrid.css:66
.dg-resize deck.components Column resize grip. deck.js writes the width to the th. 12-datagrid.css:198
.dg-selection deck.components Selection bar that slides in once rows are checked 12-datagrid.css:255
.dg-sort deck.components The button deck.js builds inside a th[data-sort]. The styling keys off th[aria-sort], so the arrow direction and the announced sort state are the same value and cannot drift apart. 12-datagrid.css:172
.dg-sort-icon deck.components No declarations. 12-datagrid.css:185
.dg-statusbar deck.components Sets display, align-items, gap, flex-wrap, and 3 more. 12-datagrid.css:244
.dg-tight deck.components No declarations. 12-datagrid.css:152
.dg-toolbar deck.components Sets display, align-items, gap, flex-wrap, and 1 more. 12-datagrid.css:235
.dg-virtual deck.components contain-intrinsic-size is the placeholder height for a skipped row. Get it roughly right and the scrollbar is stable; the `auto` keyword makes the browser remember the real height once a row has been rendered once. 26-perf.css:23
.dg-wrap deck.components The shadow only appears once the grid is actually scrolled sideways. A box-shadow offset is physical, so the geometry lives here and 19-logical mirrors it for RTL once, rather than once per branch below. 12-datagrid.css:10
.dg-wrap-text deck.components No declarations. 12-datagrid.css:151
.dg-zebra deck.components Zebra is opt-in, and it never fights the pinned column background 12-datagrid.css:137
.dir-ltr deck.utilities Sometimes a value has one true direction regardless of the page. An order number, an account number, a URL, and a code block read left to right even on an Arabic page. Isolate them so they do not scramble the text around them. 19-logical.css:114
.dir-rtl deck.utilities Sets direction, unicode-bidi. 19-logical.css:115
.disclosure deck.components No declarations. 07-components.css:433
.disclosure-body deck.components No declarations. 07-components.css:460
.display deck.type Sets font-size, font-weight, line-height, letter-spacing. 03-type.css:22
.display-cq deck.layout No declarations. 18-container.css:33
.donut deck.components A conic gradient driven by --value, with .donut-center holding a figure in the hole. One element, no SVG. Give it role="img" and a label — the shape carries the meaning and nothing else conveys it. 14-charts.css:270
.donut-center deck.components Sets position, display, place-items, text-align, and 1 more. 14-charts.css:283
.donut-label deck.components No declarations. 14-charts.css:291
.donut-value deck.components No declarations. 14-charts.css:290
.donut-wrap deck.components Sets position, display, place-items. 14-charts.css:282
.drag-handle deck.components Sets cursor, touch-action. 26-perf.css:76
.drawer deck.components A side panel. The bottom sheet is in 08-mobile; this one comes in from an edge and is the right shape for filters, settings, and a mobile nav. 22-nav.css:180
.drawer-body deck.components The scrolling region. overscroll-behavior: contain stops a scroll that reaches the end from chaining to the page behind. 22-nav.css:243
.drawer-end deck.components Pins the drawer to the ending edge instead of the starting one. The inset is logical and mirrors for free; the translate is not, which is why this rule declares its own. 22-nav.css:210
.drawer-footer deck.components The action row, pinned to the bottom. Pads for the home indicator with max(--space-4, safe-area-inset-bottom). 22-nav.css:254
.drawer-header deck.components The title row. Pads for a notch with max(--space-4, safe-area-inset-top). 22-nav.css:230
.drawer-title deck.components The drawer's heading. Point aria-labelledby at it. 22-nav.css:240
.drop-reject deck.components Sets outline-color, background. 26-perf.css:119
.drop-target deck.components A list that is accepting a drop 26-perf.css:113
.dur-1 deck.motion Sets transition-duration, animation-duration. 16-motion.css:62
.dur-2 deck.motion Sets transition-duration, animation-duration. 16-motion.css:63
.dur-3 deck.motion Sets transition-duration, animation-duration. 16-motion.css:64
.dur-4 deck.motion Sets transition-duration, animation-duration. 16-motion.css:65
.dur-5 deck.motion Sets transition-duration, animation-duration. 16-motion.css:66
.ease-bounce deck.motion Sets transition-timing-function, animation-timing-function. 16-motion.css:71
.ease-in deck.motion Sets transition-timing-function, animation-timing-function. 16-motion.css:69
.ease-linear deck.motion Sets transition-timing-function, animation-timing-function. 16-motion.css:73
.ease-out deck.motion Sets transition-timing-function, animation-timing-function. 16-motion.css:68
.ease-overshoot deck.motion Sets transition-timing-function, animation-timing-function. 16-motion.css:72
.ease-spring deck.motion Sets transition-timing-function, animation-timing-function. 16-motion.css:70
.editor deck.components A toolbar over a contenteditable region. Deck styles the chrome; deck.js wires the commands. The content area inherits .prose, so what you type looks the way it will look when it is published. 23-inputs.css:425
.editor-content deck.components The editable region. Its placeholder comes from data-placeholder through :empty::before, so it needs no element and no script to hide it. 23-inputs.css:481
.editor-count deck.components The character count. .is-over turns it red past data-limit — a soft limit, since silently refusing keystrokes reads as a broken keyboard. The server has to enforce it, and role="status" makes it audible. 23-inputs.css:520
.editor-footer deck.components Sets display, align-items, gap, padding, and 4 more. 23-inputs.css:507
.editor-select deck.components Sets block-size, padding-inline, border, border-radius, and 4 more. 23-inputs.css:467
.editor-sep deck.components Sets inline-size, block-size, background, margin-inline. 23-inputs.css:466
.editor-tool deck.components Sets inline-size, block-size, display, place-items, and 6 more. 23-inputs.css:451
.editor-tool-wide deck.components Sets inline-size, padding-inline. 23-inputs.css:465
.editor-toolbar deck.components The tool row. Pressed state is [aria-pressed="true"], which deck-extras.js rewrites from queryCommandState after every command and selection change, so the toolbar reflects the caret rather than the last button pressed. 23-inputs.css:439
.emoji deck.mobile Pins the emoji font stack and metrics so an emoji renders at the same size and baseline on Windows, iOS and Android instead of jumping between them. 08-mobile.css:183
.emoji-grid deck.mobile Emoji picker grid — drop your own set in 08-mobile.css:214
.emoji-hero deck.mobile Sets font-size, line-height. 08-mobile.css:197
.emoji-lg deck.mobile Sets font-size, vertical-align. 08-mobile.css:195
.emoji-tile deck.mobile Emoji as an avatar or a status marker 08-mobile.css:200
.emoji-tile-round deck.mobile Sets border-radius. 08-mobile.css:211
.emoji-xl deck.mobile Sets font-size, vertical-align. 08-mobile.css:196
.empty deck.components Sets display, place-items, gap, padding, and 2 more. 07-components.css:745
.empty-art deck.components Sets inline-size, block-size, display, place-items, and 4 more. 07-components.css:753
.empty-title deck.components Sets font-size, font-weight, color. 07-components.css:763
.enter deck.motion One-shot, on load. Use for content that appears, not for every section. 16-motion.css:89
.enter-blur deck.motion Sets animation. 16-motion.css:95
.enter-drop deck.motion Sets animation. 16-motion.css:91
.enter-end deck.motion Sets animation. 16-motion.css:93
.enter-pop deck.motion Sets animation. 16-motion.css:94
.enter-rise deck.motion Sets animation. 16-motion.css:90
.enter-start deck.motion Sets animation. 16-motion.css:92
.error deck.components A validation message below a control. Lightened for dark mode with light-dark(), and aligned to flex-start so an icon stays on the first line of a two-line message. 06-forms.css:41
.expand deck.motion Real height:auto transitions, no measuring in JS. Needs interpolate-size, which tokens opts into on :root. 16-motion.css:279
.fab deck.components Floating action button, parked above the tab bar and the notch 05-buttons.css:191
.face-back deck.effects No declarations. 21-space3d.css:171
.face-bottom deck.effects No declarations. 21-space3d.css:175
.face-end deck.effects No declarations. 21-space3d.css:172
.face-front deck.effects No declarations. 21-space3d.css:170
.face-start deck.effects No declarations. 21-space3d.css:173
.face-top deck.effects No declarations. 21-space3d.css:174
.fade-swap deck.motion Anything that goes display:none can still animate out. 16-motion.css:291
.field deck.components One form control and everything attached to it: label, input, help text, error. The vertical gap between them comes from here, so a field never needs margins. 06-forms.css:11
.field-row deck.components Two fields side by side on anything wider than a phone 06-forms.css:368
.field-row-cq deck.layout Form fields that pair up inside their own container, not the viewport. This is the one that keeps biting people: a two-up field row inside a narrow modal should stay stacked even on a desktop. 18-container.css:83
.fieldset deck.components A bordered group of controls that answer one question. Its legend is the group's accessible name, which is what a radio group needs and what a .label above one does not provide. 06-forms.css:351
.file deck.components A dashed drop zone wrapping a real file input. The input is 1px and transparent rather than display: none, so it keeps its place in the tab order, and :focus-within is what makes that focus visible. Deck styles the zone; dropping needs a handler of your own. 06-forms.css:331
.fixed deck.utilities Sets position. 09-utilities.css:168
.flash deck.motion Sets animation. 16-motion.css:196
.flash-good deck.motion Sets animation. 16-motion.css:201
.flat deck.effects Sets transform-style. 21-space3d.css:25
.flex deck.utilities Sets display. 09-utilities.css:13
.flex-col deck.utilities Sets flex-direction. 09-utilities.css:19
.flex-row deck.utilities Sets flex-direction. 09-utilities.css:18
.flip deck.effects Two faces, one footprint. Front and back are stacked in the same grid cell so the card is exactly as tall as its taller side. 21-space3d.css:32
.flip-back deck.effects No declarations. 21-space3d.css:37
.flip-front deck.effects No declarations. 21-space3d.css:37
.flip-hover deck.effects No declarations. 21-space3d.css:50
.flip-x deck.effects Sets transition. 21-space3d.css:44
.float deck.components Two things about the markup that this file cannot enforce and that fail silently when they are wrong: 1. The label must come AFTER the control. Every lift selector below is `~ label`, and the general sibling combinator only looks forward. Label first and it simply never moves. 2. The control needs placeholder=" " (one space). Without a placeholder attribute :placeholder-shown never matches, so the label sits lifted over an empty field. FINDINGS 61: .float.is-invalid only colours the label. .field.is-invalid in 06-forms.css also reddens the control's border; there is no equivalent rule here, so the same class name does two different amounts of work depending on which wrapper it is on. :user-invalid is unaffected -- it matches the control directly through the 06-forms.css rule. 23-inputs.css:27
.float-outline deck.components Outlined variant, where the label sits in a notch in the border 23-inputs.css:66
.footer deck.components A real component rather than the demo's ad-hoc one. 22-nav.css:672
.footer-bottom deck.components Sets display, flex-wrap, align-items, gap, and 3 more. 22-nav.css:702
.footer-brand deck.components Sets display, flex-direction, gap, max-inline-size. 22-nav.css:684
.footer-col deck.components Sets display, flex-direction, gap. 22-nav.css:685
.footer-grid deck.components Sets display, gap, grid-template-columns, padding-block-end. 22-nav.css:678
.footer-heading deck.components Sets font-size, font-weight, color, margin-block-end. 22-nav.css:686
.footer-social deck.components Sets display, gap, margin-inline-start. 22-nav.css:711
.form-actions deck.components Sticky save bar for long forms on mobile 06-forms.css:378
.form-actions-sticky deck.components Pins the action row to the bottom of the viewport with a blur behind it and a safe-area inset for the home indicator. Add matching bottom padding to the form, or the last field sits underneath it. 06-forms.css:386
.fw-bold deck.utilities Sets font-weight. 09-utilities.css:102
.fw-medium deck.utilities Sets font-weight. 09-utilities.css:98
.fw-normal deck.utilities Sets font-weight. 09-utilities.css:97
.fw-semi deck.utilities Semibold. The weight for a label or a name that needs to lead without becoming a heading. 09-utilities.css:101
.g-bad deck.effects Sets background-image, color. 20-gradients.css:221
.g-bar-fill deck.effects Sets background-image. 20-gradients.css:287
.g-border deck.effects Two backgrounds with different clip boxes. Works with any border-radius, unlike border-image, and leaves the inside a real surface color. 20-gradients.css:106
.g-border-soft deck.effects Sets background. 20-gradients.css:114
.g-border-spin deck.effects Sets animation. 20-gradients.css:123
.g-brand deck.effects Sets background-image, color. 20-gradients.css:23
.g-brand-soft deck.effects Sets background-image. 20-gradients.css:28
.g-conic deck.effects Sets background-image. 20-gradients.css:224
.g-dark deck.effects Sets background-image, color. 20-gradients.css:32
.g-dots deck.effects Sets background-image, background-size. 20-gradients.css:251
.g-fade-block deck.effects Sets mask-image, -webkit-mask-image. 20-gradients.css:176
.g-fade-end deck.effects Sets mask-image, -webkit-mask-image. 20-gradients.css:172
.g-fade-inline deck.effects Content that runs off the edge should fade, not be cut with a hard line. 20-gradients.css:166
.g-fade-more deck.effects Long text that is collapsed: fade the bottom instead of a hard cut 20-gradients.css:181
.g-good deck.effects Sets background-image, color. 20-gradients.css:219
.g-grid-lines deck.effects Not gradients as decoration — gradients standing in for an image. These cost nothing to download and retint automatically. 20-gradients.css:245
.g-hairline deck.effects A single glowing hairline along the top edge — good for a nav or a modal 20-gradients.css:128
.g-hatch deck.effects Hatching for a "pending" or "unavailable" block in a schedule 20-gradients.css:261
.g-mesh deck.effects Three soft radial blooms. No image, no SVG filter, no blur — blur on a large area is expensive and this reads the same. 20-gradients.css:41
.g-mesh-drift deck.effects Sets animation. 20-gradients.css:66
.g-mesh-subtle deck.effects Sets background-image, background-size, background-repeat. 20-gradients.css:56
.g-mesh-warm deck.effects Sets --hue-brand. 20-gradients.css:53
.g-ring deck.effects Sets border-radius, background, mask, -webkit-mask. 20-gradients.css:228
.g-ring-spin deck.effects Sets animation. 20-gradients.css:237
.g-scrim deck.effects A caption over a photo needs a legible floor. A flat 50% black overlay dulls the whole image; an eased scrim only darkens where the text sits. 20-gradients.css:145
.g-scrim-top deck.effects No declarations. 20-gradients.css:157
.g-sheen deck.effects A highlight that sweeps across on hover. --sheen is registered, so it animates as a real percentage instead of jumping. 20-gradients.css:198
.g-shimmer deck.effects Sets background-image, background-size, background-repeat. 20-gradients.css:268
.g-stripes deck.effects Sets background-image. 20-gradients.css:255
.g-sunken deck.effects Sets background-image. 20-gradients.css:18
.g-surface deck.effects Quiet. These sit behind content and must never fight it. 20-gradients.css:13
.g-text deck.effects background-clip on the text. Always keep a real color underneath so the text is still readable if the clip fails. 20-gradients.css:78
.g-text-shine deck.effects Sets color, background-image, background-size, -webkit-background-clip, and 2 more. 20-gradients.css:88
.g-warn deck.effects Sets background-image, color. 20-gradients.css:220
.gallery deck.components A simple gallery grid, when equal tiles are wanted instead 24-media.css:125
.gap-0 deck.utilities Sets gap. 09-utilities.css:38
.gap-1 deck.utilities Sets gap. 09-utilities.css:39
.gap-2 deck.utilities Sets gap. 09-utilities.css:40
.gap-3 deck.utilities Sets gap. 09-utilities.css:41
.gap-4 deck.utilities Sets gap. 09-utilities.css:42
.gap-6 deck.utilities Sets gap. 09-utilities.css:43
.gap-8 deck.utilities Sets gap. 09-utilities.css:44
.gap-cq deck.layout No declarations. 18-container.css:39
.grid deck.layout Auto-fitting grid: no breakpoints needed, it responds to its own width 04-layout.css:102
.grid-2 deck.layout Two-ish columns: an auto-fit grid with a 24rem floor. Identical in effect to .grid-wide, but it writes grid-template-columns directly rather than setting --min, so --min cannot adjust it afterwards. Prefer .grid-wide. 04-layout.css:111
.grid-fixed-2 deck.layout Exactly two equal columns at every width, including a phone. Only for a count that is part of the meaning — a 2x2 comparison. It does not reflow, so it does not satisfy the reflow criterion on its own. 04-layout.css:121
.grid-fixed-3 deck.layout Exactly three equal columns at every width. See .grid-fixed-2. 04-layout.css:123
.grid-fixed-4 deck.layout Exactly four equal columns at every width. On a phone that is four 70px columns; reach for .grid with a --min instead. 04-layout.css:126
.grid-tight deck.layout Narrows the auto-fit column floor to 12rem, so the grid packs more columns in before it wraps. 04-layout.css:114
.grid-wide deck.layout Widens the auto-fit column floor to 24rem, so the grid packs fewer, wider columns before it wraps. For cards with a paragraph in them. 04-layout.css:117
.grow deck.utilities Sets flex, min-inline-size. 09-utilities.css:32
.h-full deck.utilities Sets block-size. 09-utilities.css:78
.h1 deck.type Sets font-family, font-weight, line-height, letter-spacing, and 1 more. 03-type.css:7
.h2 deck.type Sets font-family, font-weight, line-height, letter-spacing, and 1 more. 03-type.css:7
.h3 deck.type Sets font-family, font-weight, line-height, letter-spacing, and 1 more. 03-type.css:7
.h4 deck.type Sets font-family, font-weight, line-height, letter-spacing, and 1 more. 03-type.css:7
.h5 deck.type Sets font-family, font-weight, line-height, letter-spacing, and 1 more. 03-type.css:7
.h6 deck.type Sets font-family, font-weight, line-height, letter-spacing, and 1 more. 03-type.css:7
.has-value deck.components No declarations. 10-datepicker.css:35
.help deck.components A hint below a control. Needs aria-describedby on the control to reach a screen reader — sitting next to it is not an association. 06-forms.css:37
.hidden deck.utilities Sets display. 09-utilities.css:10
.icon deck.mobile An SVG icon sized in em, so it scales with the text it sits beside and lands on the baseline. Icons are filled with currentColor and inherit the surrounding colour. 08-mobile.css:134
.icon-fill deck.mobile Sets fill, stroke. 08-mobile.css:156
.icon-follow deck.motion Sets transition. 16-motion.css:254
.icon-lg deck.mobile A 1.6em icon, for icon tiles and empty states where the default would look undersized. 08-mobile.css:154
.icon-muted deck.mobile Sets color. 08-mobile.css:157
.icon-sm deck.mobile Small icons reference the heavier cut of the sprite, not a thicker stroke: the symbols are filled outlines, so stroke-width does nothing to them. Every icon ships twice, #name at wght 400 and #name-sm at wght 500, and .icon-sm goes with the -sm symbol. CSS cannot rewrite a <use href>, so the pairing lives in the markup: <svg class="icon icon-sm"><use href="deck-icons.svg#check-sm"></use></svg> 08-mobile.css:151
.icon-spin deck.mobile Sets animation. 08-mobile.css:158
.icon-tile deck.mobile Icon in a tinted tile — for feature rows and empty states 08-mobile.css:161
.icon-tile-bad deck.mobile Sets background, color. 08-mobile.css:173
.icon-tile-good deck.mobile Sets background, color. 08-mobile.css:171
.icon-tile-lg deck.mobile Sets inline-size, block-size, border-radius. 08-mobile.css:174
.icon-tile-warn deck.mobile Sets background, color. 08-mobile.css:172
.icon-xl deck.mobile Sets inline-size, block-size, stroke-width. 08-mobile.css:155
.indicator deck.components Status dots, counts on an icon, and unread markers. 22-nav.css:724
.indicator-bad deck.components Sets background. 22-nav.css:734
.indicator-badge deck.components No declarations. 22-nav.css:741
.indicator-badge-brand deck.components No declarations. 22-nav.css:766
.indicator-badge-dot deck.components No declarations. 22-nav.css:758
.indicator-brand deck.components Sets background. 22-nav.css:735
.indicator-good deck.components Sets background. 22-nav.css:732
.indicator-lg deck.components Sets inline-size, block-size. 22-nav.css:736
.indicator-ring deck.components Sets box-shadow. 22-nav.css:737
.indicator-warn deck.components Sets background. 22-nav.css:733
.inline-block deck.utilities Sets display. 09-utilities.css:12
.inline-flex deck.utilities Sets display. 09-utilities.css:14
.input deck.components Marks a field invalid from your own validation, producing the same border and ring as :user-invalid without needing the browser to agree. One of the few states an author writes by hand. 06-forms.css:49
.input-group deck.components A prefix, suffix or attached button joined to a control. The group takes over the border, radius and shadow, and the input inside strips its own, so the seam does not double up. :focus-within puts the ring around the whole assembly. 06-forms.css:123
.inset-0 deck.utilities Sets inset. 09-utilities.css:170
.inset-be-0 deck.utilities Sets inset-block-end. 19-logical.css:79
.inset-bs-0 deck.utilities Sets inset-block-start. 19-logical.css:78
.inset-ie-0 deck.utilities Sets inset-inline-end. 19-logical.css:77
.inset-is-0 deck.utilities Sets inset-inline-start. 19-logical.css:76
.is-above deck.components No declarations. 11-combobox.css:141
.is-active deck.components No declarations. 07-components.css:132
.is-animating deck.motion No declarations. 16-motion.css:82
.is-behind-end deck.effects No declarations. 21-space3d.css:147
.is-behind-start deck.effects No declarations. 21-space3d.css:146
.is-blocked deck.components No declarations. 10-datepicker.css:181
.is-copied deck.components No declarations. 23-inputs.css:402
.is-current deck.components No declarations. 22-nav.css:585
.is-disabled deck.components No declarations. 05-buttons.css:63
.is-dismissed deck.effects No declarations. 21-space3d.css:114
.is-done deck.components No declarations. 07-components.css:807
.is-down deck.motion No declarations. 16-motion.css:322
.is-dragging deck.components No declarations. 13-toasts.css:191
.is-fanned deck.effects No declarations. 21-space3d.css:108
.is-flipped deck.effects No declarations. 21-space3d.css:43
.is-front deck.effects No declarations. 21-space3d.css:148
.is-in-range deck.components No declarations. 10-datepicker.css:207
.is-invalid deck.components No declarations. 06-forms.css:110
.is-leaving deck.components No declarations. 13-toasts.css:148
.is-lifted deck.components No declarations. 26-perf.css:223
.is-loaded deck.components No declarations. 24-media.css:161
.is-loading deck.reset No declarations. 02-reset.css:92
.is-new deck.components No declarations. 12-datagrid.css:140
.is-open deck.components No declarations. 11-combobox.css:73
.is-outside deck.components No declarations. 10-datepicker.css:180
.is-over deck.components No declarations. 23-inputs.css:521
.is-preview deck.components No declarations. 10-datepicker.css:227
.is-range-end deck.components No declarations. 10-datepicker.css:216
.is-range-start deck.components No declarations. 10-datepicker.css:212
.is-resizing deck.components No declarations. 12-datagrid.css:217
.is-revealed deck.motion No declarations. 16-motion.css:178
.is-scrolled-end deck.components No declarations. 12-datagrid.css:118
.is-scrolled-x deck.components No declarations. 12-datagrid.css:112
.is-selected deck.components No declarations. 10-datepicker.css:199
.is-tilting deck.effects No declarations. 21-space3d.css:64
.is-today deck.components No declarations. 10-datepicker.css:189
.is-up deck.motion No declarations. 16-motion.css:321
.is-valid deck.components No declarations. 23-inputs.css:201
.is-visible deck.components No declarations. 22-nav.css:506
.items-baseline deck.utilities Sets align-items. 09-utilities.css:26
.items-center deck.utilities Sets align-items. 09-utilities.css:23
.items-end deck.utilities Sets align-items. 09-utilities.css:24
.items-start deck.utilities Sets align-items. 09-utilities.css:22
.items-stretch deck.utilities Sets align-items. 09-utilities.css:25
.jumbotron deck.components A hero block. Kept deliberately plain so the content carries it. 22-nav.css:641
.jumbotron-actions deck.components Sets display, flex-wrap, gap. 22-nav.css:664
.jumbotron-center deck.components Sets text-align, align-items. 22-nav.css:651
.jumbotron-media deck.components Sets display, gap, align-items, grid-template-columns. 22-nav.css:653
.justify-between deck.utilities Sets justify-content. 09-utilities.css:30
.justify-center deck.utilities Sets justify-content. 09-utilities.css:28
.justify-end deck.utilities Sets justify-content. 09-utilities.css:29
.justify-start deck.utilities Sets justify-content. 09-utilities.css:27
.kanban deck.components The obvious thing to build once you have drag and drop. An issue queue by status is the same shape as a board. 26-perf.css:125
.kanban-body deck.components The scrolling card region, with a 5rem floor so an empty column is still something you can drop onto. 26-perf.css:176
.kanban-card deck.components One card. .kanban-card-title is styling, not a heading — if the card opens something, make the title a link. 26-perf.css:188
.kanban-card-meta deck.components Sets display, align-items, gap, font-size, and 1 more. 26-perf.css:202
.kanban-card-title deck.components Sets font-size, font-weight. 26-perf.css:201
.kanban-col deck.components One column: a fixed width with a viewport cap so a phone still shows a sliver of the next, capped in height by --kanban-height. 26-perf.css:136
.kanban-count deck.components Sets margin-inline-start, font-size, font-weight, color, and 5 more. 26-perf.css:163
.kanban-empty deck.components Shown in an empty column and hidden by :has(.kanban-card) as soon as one arrives, so nothing has to remember to toggle it. 26-perf.css:211
.kanban-head deck.components The column title and count, outside the scrolling area so they stay visible while cards scroll. 26-perf.css:148
.keep-together deck.print Sets break-inside, page-break-inside. 99-print.css:188
.label deck.components The label for a control. A flex row, so a "required" or "optional" marker sits beside the text without extra markup. 06-forms.css:20
.lazy deck.components A placeholder that holds the space so nothing shifts, and fades the image in once it decodes. Set the aspect ratio on the frame and the layout is stable before a byte arrives. 24-media.css:147
.lazy-block deck.components Generic content placeholder while a region streams in 24-media.css:198
.lazy-blur deck.components A blurred low-res preview underneath, if you have one 24-media.css:186
.lede deck.type Sets font-size, line-height, color, max-inline-size. 03-type.css:29
.lg deck.utilities No declarations. 09-utilities.css:229
.lift deck.motion Sets transition. 16-motion.css:230
.link-quiet deck.type Sets color, text-decoration. 03-type.css:50
.list deck.components A bordered, clipped column of rows. Use it when the reader reads one row at a time; if they compare values down a column, that is a table. 07-components.css:300
.list-header deck.components A group heading inside a list. Styling only: a screen reader hears ordinary text, so if the grouping is meaningful use a real heading. 07-components.css:337
.list-main deck.components No declarations. 07-components.css:326
.list-row deck.components One row. min-block-size: var(--tap) puts every row at the touch target, and the colour and text-decoration resets mean the row can be an <a> directly — one element, one tab stop, the whole row clickable. 07-components.css:311
.list-sub deck.components No declarations. 07-components.css:330
.list-title deck.components No declarations. 07-components.css:328
.list-trail deck.components No declarations. 07-components.css:334
.list-virtual deck.components No declarations. 26-perf.css:34
.m-0 deck.utilities Sets margin. 09-utilities.css:64
.marquee deck.motion For a status strip: recalls, open campaigns, parts on backorder. 16-motion.css:301
.marquee-track deck.motion Sets display, gap, flex, padding-inline-end, and 2 more. 16-motion.css:308
.masonry deck.components Two implementations. Columns is universal and good for photos where the reading order down each column is fine. Grid masonry is the real thing and preserves row order; it is used automatically where supported. 24-media.css:94
.masonry-2 deck.components Sets --cols. 24-media.css:101
.masonry-3 deck.components Sets --cols. 24-media.css:102
.max-w-lg deck.utilities Sets max-inline-size. 09-utilities.css:83
.max-w-md deck.utilities Sets max-inline-size. 09-utilities.css:82
.max-w-prose deck.utilities Sets max-inline-size. 09-utilities.css:80
.max-w-sm deck.utilities Sets max-inline-size. 09-utilities.css:81
.mb-0 deck.utilities Sets margin-block-end. 09-utilities.css:69
.mb-1 deck.utilities Sets margin-block-end. 09-utilities.css:69
.mb-2 deck.utilities Sets margin-block-end. 09-utilities.css:70
.mb-3 deck.utilities Sets margin-block-end. 09-utilities.css:70
.mb-4 deck.utilities Sets margin-block-end. 09-utilities.css:71
.mb-6 deck.utilities Sets margin-block-end. 09-utilities.css:71
.mb-8 deck.utilities Sets margin-block-end. 09-utilities.css:72
.md deck.utilities No declarations. 09-utilities.css:215
.mega deck.components A wide panel under a nav item. Built on the popover attribute, so escape and outside-click are the browser's job. 22-nav.css:269
.mega-col deck.components Sets display, flex-direction, gap. 22-nav.css:295
.mega-feature deck.components Sets grid-column, padding, border-radius, background, and 1 more. 22-nav.css:315
.mega-footer deck.components Sets display, gap, flex-wrap, margin-block-start, and 3 more. 22-nav.css:322
.mega-grid deck.components Sets display, gap, grid-template-columns. 22-nav.css:290
.mega-heading deck.components Sets font-size, font-weight, color, padding. 22-nav.css:296
.mega-item deck.components Sets display, align-items, gap, padding, and 4 more. 22-nav.css:302
.mega-item-note deck.components Sets font-size, color. 22-nav.css:314
.mega-item-title deck.components Sets font-weight, font-size. 22-nav.css:313
.menu deck.components A dropdown built on the native popover attribute: light dismiss, Escape, the top layer and one-at-a-time behaviour all come from the platform. 25-anchor.css positions it against its trigger with anchor positioning and a fallback chain, so it flips when there is no room below. 07-components.css:620
.menu-item deck.components One row in a menu. Works on a button or an anchor — colour and text-decoration are reset so a link needs no help. Hover and focus share a style, so a keyboard user sees what a mouse user sees. 40px tall, which is under the 44px target: a deliberate density trade for a list of eight. 07-components.css:647
.menu-item-danger deck.components A destructive item. Red is not announced, so the label has to say what it does and a confirmation should stand behind it. 07-components.css:665
.menu-label deck.components A small heading above a group of items. Styling only — a screen reader hears ordinary text. 07-components.css:672
.menu-match deck.components A dropdown that should match the width of the field it belongs to 25-anchor.css:50
.menu-sep deck.components A one-pixel divider between groups of items. 07-components.css:669
.metarow deck.layout List rows that reveal their metadata as space allows 18-container.css:70
.mie-0 deck.utilities Sets margin-inline-end. 19-logical.css:32
.mie-1 deck.utilities Sets margin-inline-end. 19-logical.css:33
.mie-2 deck.utilities Sets margin-inline-end. 19-logical.css:34
.mie-3 deck.utilities Sets margin-inline-end. 19-logical.css:35
.mie-4 deck.utilities Sets margin-inline-end. 19-logical.css:36
.mie-6 deck.utilities Sets margin-inline-end. 19-logical.css:37
.mie-8 deck.utilities Sets margin-inline-end. 19-logical.css:38
.mie-auto deck.utilities Sets margin-inline-end. 19-logical.css:22
.min-h-screen deck.utilities Sets min-block-size. 09-utilities.css:79
.min-is-0 deck.utilities Sets min-inline-size. 19-logical.css:74
.mirror-rtl deck.rtl No declarations. 19-logical.css:133
.mis-0 deck.utilities Same seven steps as every other spacing family: 0 1 2 3 4 6 8. 19-logical.css:25
.mis-1 deck.utilities Sets margin-inline-start. 19-logical.css:26
.mis-2 deck.utilities Sets margin-inline-start. 19-logical.css:27
.mis-3 deck.utilities Sets margin-inline-start. 19-logical.css:28
.mis-4 deck.utilities Sets margin-inline-start. 19-logical.css:29
.mis-6 deck.utilities Sets margin-inline-start. 19-logical.css:30
.mis-8 deck.utilities Sets margin-inline-start. 19-logical.css:31
.mis-auto deck.utilities The short physical-looking names in the utility layer (.mt-4, .px-3) are already logical underneath — .mt-4 sets margin-block-start. These are the explicitly named versions for when the distinction matters in review. 19-logical.css:21
.modal deck.components A native <dialog>. Open it with showModal(), never show() and never the open attribute: only showModal() gives the top layer, the backdrop, the focus trap and an inert background. The open and close animate because display and overlay are in the transition with allow-discrete, which is what keeps the element rendered long enough to fade out. 07-components.css:680
.modal-body deck.components The scrolling region. The modal caps at min(85dvh, 48rem) and clips, so a long body scrolls while the header and footer stay put — which is what keeps the actions above the fold. 07-components.css:726
.modal-footer deck.components The action row, end-aligned. Below 32rem it becomes column-reverse with full-width buttons, so the primary action — last in the markup — is on top where a thumb reaches it, without changing DOM order. 07-components.css:730
.modal-header deck.components The title row. A flex row aligned to flex-start, so a long title and a close button line up on the first line. 07-components.css:713
.modal-title deck.components The dialog's heading. Give it an id and point aria-labelledby at it, or the dialog is announced with no name. 07-components.css:722
.mono deck.utilities Sets font-family. 09-utilities.css:121
.mouse-only deck.utilities Sets display. 09-utilities.css:239
.msg deck.components One message row. .msg-out flips it to the other edge and reverses the row so the avatar swaps sides. The incoming/outgoing distinction is position and colour only, so name the sender in text for anyone not seeing it. 24-media.css:236
.msg-out deck.components Sets align-self, flex-direction. 24-media.css:243
.mt-0 deck.utilities Sets margin-block-start. 09-utilities.css:65
.mt-1 deck.utilities Sets margin-block-start. 09-utilities.css:65
.mt-2 deck.utilities Sets margin-block-start. 09-utilities.css:66
.mt-3 deck.utilities Sets margin-block-start. 09-utilities.css:66
.mt-4 deck.utilities Sets margin-block-start. 09-utilities.css:67
.mt-6 deck.utilities Sets margin-block-start. 09-utilities.css:67
.mt-8 deck.utilities Sets margin-block-start. 09-utilities.css:68
.mx-auto deck.utilities Sets margin-inline. 09-utilities.css:73
.nav-link deck.components One destination in a .navbar. Carries the hover and current-page states; use .btn only for actions, never for navigation. 07-components.css:832
.navbar deck.components Sets display, align-items, gap, min-block-size, and 2 more. 07-components.css:810
.navbar-brand deck.components Sets display, align-items, gap, font-weight, and 4 more. 07-components.css:818
.navbar-links deck.components Sets display, gap, align-items. 07-components.css:828
.no-flip deck.rtl No declarations. 19-logical.css:150
.no-motion deck.motion Sets transition, animation. 16-motion.css:78
.no-print deck.utilities Sets display. 09-utilities.css:240
.no-print-url deck.print No declarations. 99-print.css:125
.no-select deck.utilities Sets user-select. 09-utilities.css:178
.no-underline deck.utilities Sets text-decoration. 09-utilities.css:124
.nowrap deck.utilities Sets flex-wrap, white-space. 09-utilities.css:21
.nudge deck.motion Sets animation. 16-motion.css:226
.num deck.components No declarations. 07-components.css:262
.number deck.components Native spinners are tiny and inconsistent across browsers. These are real buttons that clear the touch target. 23-inputs.css:86
.number-sm deck.components Sets --number-width. 23-inputs.css:141
.number-unit deck.components Sets display, place-items, padding-inline, background, and 4 more. 23-inputs.css:131
.nums deck.utilities Tabular figures, so numbers line up in a column and do not jitter when they change. 09-utilities.css:120
.opacity-60 deck.utilities Sets opacity. 09-utilities.css:176
.optional deck.components No declarations. 06-forms.css:30
.overflow-auto deck.utilities Sets overflow. 09-utilities.css:173
.overflow-clip deck.utilities Sets overflow. 09-utilities.css:174
.overflow-hidden deck.utilities Sets overflow. 09-utilities.css:172
.p-0 deck.utilities The scale is 0 1 2 3 4 6 8, declared in 04-layout.css. Every family below implements all seven, so a step that exists anywhere exists everywhere. 09-utilities.css:49
.p-1 deck.utilities Sets padding. 09-utilities.css:49
.p-2 deck.utilities Sets padding. 09-utilities.css:50
.p-3 deck.utilities Sets padding. 09-utilities.css:50
.p-4 deck.utilities Sets padding. 09-utilities.css:51
.p-6 deck.utilities Sets padding. 09-utilities.css:51
.p-8 deck.utilities Sets padding. 09-utilities.css:52
.pad-cq deck.layout No declarations. 18-container.css:38
.page-break deck.print Sets break-before, page-break-before. 99-print.css:186
.page-break-after deck.print Sets break-after, page-break-after. 99-print.css:187
.pagination deck.components Sets display, gap, align-items, flex-wrap. 07-components.css:481
.panel deck.components Sets background, border-block, padding, margin-inline. 07-components.css:63
.parallax deck.effects True 3D parallax: layers sit at different Z depths inside a perspective container, so the browser does the math on the compositor. No scroll handler, no jank. 21-space3d.css:216
.parallax-back deck.effects Sets transform. 21-space3d.css:228
.parallax-front deck.effects Sets transform. 21-space3d.css:230
.parallax-layer deck.effects Sets position, inset, transform-origin. 21-space3d.css:223
.parallax-mid deck.effects Sets transform. 21-space3d.css:229
.pbe-0 deck.utilities Sets padding-block-end. 19-logical.css:63
.pbe-1 deck.utilities Sets padding-block-end. 19-logical.css:64
.pbe-2 deck.utilities Sets padding-block-end. 19-logical.css:65
.pbe-3 deck.utilities Sets padding-block-end. 19-logical.css:66
.pbe-4 deck.utilities Sets padding-block-end. 19-logical.css:67
.pbe-6 deck.utilities Sets padding-block-end. 19-logical.css:68
.pbe-8 deck.utilities Sets padding-block-end. 19-logical.css:69
.pbs-0 deck.utilities Sets padding-block-start. 19-logical.css:56
.pbs-1 deck.utilities Sets padding-block-start. 19-logical.css:57
.pbs-2 deck.utilities Sets padding-block-start. 19-logical.css:58
.pbs-3 deck.utilities Sets padding-block-start. 19-logical.css:59
.pbs-4 deck.utilities Sets padding-block-start. 19-logical.css:60
.pbs-6 deck.utilities Sets padding-block-start. 19-logical.css:61
.pbs-8 deck.utilities Sets padding-block-start. 19-logical.css:62
.phone deck.components Country select welded to the number. The number stays LTR even in an RTL document, because a phone number always reads left to right. 23-inputs.css:148
.phone-code deck.components Sets font-variant-numeric, color, font-weight. 23-inputs.css:184
.phone-country deck.components No declarations. 23-inputs.css:159
.phone-flag deck.components Sets font-size, line-height. 23-inputs.css:183
.phone-status deck.components Sets display, place-items, padding-inline, flex. 23-inputs.css:202
.pie-0 deck.utilities Sets padding-inline-end. 19-logical.css:48
.pie-1 deck.utilities Sets padding-inline-end. 19-logical.css:49
.pie-2 deck.utilities Sets padding-inline-end. 19-logical.css:50
.pie-3 deck.utilities Sets padding-inline-end. 19-logical.css:51
.pie-4 deck.utilities Sets padding-inline-end. 19-logical.css:52
.pie-6 deck.utilities Sets padding-inline-end. 19-logical.css:53
.pie-8 deck.utilities Sets padding-inline-end. 19-logical.css:54
.pile deck.effects Sets display, transform-style, perspective. 21-space3d.css:89
.ping deck.motion Ping ring for a live indicator — a dot with a halo going out 16-motion.css:211
.pis-0 deck.utilities Sets padding-inline-start. 19-logical.css:41
.pis-1 deck.utilities Sets padding-inline-start. 19-logical.css:42
.pis-2 deck.utilities Sets padding-inline-start. 19-logical.css:43
.pis-3 deck.utilities Sets padding-inline-start. 19-logical.css:44
.pis-4 deck.utilities Sets padding-inline-start. 19-logical.css:45
.pis-6 deck.utilities Sets padding-inline-start. 19-logical.css:46
.pis-8 deck.utilities Sets padding-inline-start. 19-logical.css:47
.place-center deck.utilities Sets place-items. 09-utilities.css:31
.pointer-none deck.utilities Sets pointer-events. 09-utilities.css:177
.pop deck.components A richer tooltip: a heading, body copy, and actions. Used for the "what does this labor code mean" pattern. 25-anchor.css:115
.pop-actions deck.components The action row at the bottom of a popover card. A button here can close the panel with popovertargetaction="hide" and no script. 25-anchor.css:145
.pop-body deck.components The explanatory text inside a popover card. 25-anchor.css:142
.pop-title deck.components The heading inside a popover card. 25-anchor.css:140
.presence deck.components Sets position. 07-components.css:211
.presence-away deck.components No declarations. 07-components.css:223
.presence-off deck.components No declarations. 07-components.css:224
.press deck.motion Sets transition. 16-motion.css:234
.print-footer deck.print Sets position, inset-block-end, inset-inline, font-size, and 1 more. 99-print.css:193
.print-header deck.print Repeat a header on every page of a long report 99-print.css:192
.print-keep deck.print No declarations. 99-print.css:168
.print-only deck.print Hidden on screen, shown on paper 99-print.css:197
.progress deck.components Three ways to say "something is happening", and the choice is only ever about one thing: whether you know how much is left. .progress and .ring do, .spinner does not. There is no standalone meter -- a bar drawn from a value rather than from an element is .chart-meter, in 14-charts.css. .progress goes on a real <progress>, so the element carries the value, the maximum and the role. The two vendor pseudo-elements have to be written as separate rules: a vendor pseudo-element in a shared selector invalidates the whole rule for the other engine. Same constraint as .range. 07-components.css:509
.prose deck.type Prose: for anything that came out of a WYSIWYG or markdown 03-type.css:105
.pulse deck.motion Sets animation. 16-motion.css:207
.push deck.utilities Pushes this element and everything after it to the far end of a flex row. The one-class replacement for a spacer div. 09-utilities.css:36
.px-0 deck.utilities Sets padding-inline. 09-utilities.css:54
.px-1 deck.utilities Sets padding-inline. 09-utilities.css:54
.px-2 deck.utilities Sets padding-inline. 09-utilities.css:55
.px-3 deck.utilities Sets padding-inline. 09-utilities.css:55
.px-4 deck.utilities Sets padding-inline. 09-utilities.css:56
.px-6 deck.utilities Sets padding-inline. 09-utilities.css:56
.px-8 deck.utilities Sets padding-inline. 09-utilities.css:57
.py-0 deck.utilities Sets padding-block. 09-utilities.css:59
.py-1 deck.utilities Sets padding-block. 09-utilities.css:59
.py-2 deck.utilities Sets padding-block. 09-utilities.css:60
.py-3 deck.utilities Sets padding-block. 09-utilities.css:60
.py-4 deck.utilities Sets padding-block. 09-utilities.css:61
.py-6 deck.utilities Sets padding-block. 09-utilities.css:61
.py-8 deck.utilities Sets padding-block. 09-utilities.css:62
.qr deck.components deck.js renders the modules into this frame. Kept square, with a quiet zone, so it stays scannable at any size. 24-media.css:344
.qr-caption deck.components Sets margin-block-start, font-size, color, text-align, and 2 more. 24-media.css:375
.qr-lg deck.components Sets --qr-size. 24-media.css:357
.qr-logo deck.components A logo punched out of the middle. Only safe at error correction Q or H. 24-media.css:360
.qr-logo-mark deck.components No declarations. 24-media.css:363
.qr-sm deck.components Sets --qr-size. 24-media.css:358
.r-end deck.utilities Sets border-start-end-radius, border-end-end-radius. 19-logical.css:83
.r-full deck.utilities Sets border-radius. 09-utilities.css:157
.r-lg deck.utilities Sets border-radius. 09-utilities.css:156
.r-md deck.utilities Sets border-radius. 09-utilities.css:155
.r-sm deck.utilities Sets border-radius. 09-utilities.css:154
.r-start deck.utilities Radius on the leading and trailing edges, not left and right 19-logical.css:82
.r-xs deck.utilities Sets border-radius. 09-utilities.css:153
.range deck.components A slider. The track and thumb are vendor pseudo-elements with different names and different box models per engine, so every declaration is written twice — WebKit needs a negative block-start margin to centre the thumb and Firefox does not. 06-forms.css:288
.range-pair deck.components Two stacked native range inputs. Real inputs mean real keyboard support and a real form post; the track between them is drawn from --lo and --hi. 23-inputs.css:272
.range-readout deck.components The current value of a slider. Put it on an <output>, which is an implicit live region, so the value is announced as the slider moves. 23-inputs.css:330
.range-ticks deck.components Ticks under a single or paired range 23-inputs.css:339
.rating deck.components The inputs are written HIGHEST value first -- 5, 4, 3, 2, 1 -- and row-reverse draws them 1 to 5. That is not a quirk, it is the whole mechanism: to light a star and everything below it, the selector has to reach forward from the chosen one, and CSS has no previous-sibling combinator. Reversing the row turns "everything below" into "everything after". Get the order wrong and it fails recognisably: the stars fill from the wrong end and the posted value is the mirror of the one clicked. :focus-visible + label uses the ADJACENT sibling, so each label must come immediately after its own input. 23-inputs.css:220
.rating-fill deck.components No declarations. 23-inputs.css:255
.rating-lg deck.components Sets --star. 23-inputs.css:246
.rating-sm deck.components Sets --star. 23-inputs.css:245
.rating-static deck.components Read-only display: a fill percentage rather than whole stars 23-inputs.css:249
.ratio-16x9 deck.layout Aspect boxes for media 04-layout.css:229
.ratio-1x1 deck.layout Sets aspect-ratio, object-fit, inline-size. 04-layout.css:231
.ratio-4x3 deck.layout Sets aspect-ratio, object-fit, inline-size. 04-layout.css:230
.reaction deck.mobile Reaction pill, like a Slack or Teams reaction 08-mobile.css:230
.relative deck.utilities Sets position. 09-utilities.css:166
.reorder deck.components No declarations. 26-perf.css:222
.required deck.components No declarations. 06-forms.css:33
.reveal deck.motion Sets animation, animation-timeline, animation-range. 16-motion.css:143
.reveal-fade deck.motion Sets animation-name. 16-motion.css:148
.reveal-late deck.motion Sets animation-range. 16-motion.css:150
.reveal-pop deck.motion Sets animation-name. 16-motion.css:149
.ring deck.components A conic gradient for the fill, a radial mask for the hole. Three custom properties shape it: --value, --size, --thickness. The mask is the thing to understand. It applies to this element AND its whole subtree, so a label centred inside a .ring is punched out along with the middle -- it renders, it takes up space, it is in the accessibility tree, and it is invisible. That is what .ring-wrap and .ring-label below exist for: an unmasked wrapper that stacks the label over the ring as a sibling rather than a child. FINDINGS 60: place-items and the three font declarations here are the fossil of the approach that does not work. They style a child nobody can see -- .ring-label repeats all three on the sibling, which is the tell. Due for removal; kept for now because the API is frozen. 07-components.css:536
.ring-label deck.components No declarations. 07-components.css:553
.ring-wrap deck.components Sets position, display, place-items. 07-components.css:552
.ripple deck.motion Ripple. deck.js sets --rx/--ry from the pointer position. 16-motion.css:257
.ripple-ink deck.motion No declarations. 16-motion.css:258
.row-meta deck.layout No declarations. 18-container.css:71
.row-meta-wide deck.layout No declarations. 18-container.css:76
.s-bad deck.components Sets --series. 14-charts.css:330
.s-good deck.components Sets --series. 14-charts.css:328
.s-muted deck.components Sets --series. 14-charts.css:331
.s-warn deck.components Sets --series. 14-charts.css:329
.s1 deck.components Series 1. Every chart mark reads --series, so a colour is set once on the element and the fill, stroke and legend swatch all follow. 14-charts.css:322
.s2 deck.components Sets --series. 14-charts.css:323
.s3 deck.components Sets --series. 14-charts.css:324
.s4 deck.components Sets --series. 14-charts.css:325
.s5 deck.components Sets --series. 14-charts.css:326
.s6 deck.components Sets --series. 14-charts.css:327
.safe-bottom deck.mobile Sets padding-block-end. 08-mobile.css:124
.safe-top deck.mobile Sets padding-block-start. 08-mobile.css:123
.safe-x deck.mobile Sets padding-inline. 08-mobile.css:125
.scene deck.effects A scene establishes the vanishing point. Children need preserve-3d to stay in the same space instead of being flattened. 21-space3d.css:18
.scene-far deck.effects Sets --perspective. 21-space3d.css:23
.scene-near deck.effects Sets --perspective. 21-space3d.css:22
.scroll-progress deck.motion A progress bar that fills as the page scrolls — good for long reports 16-motion.css:153
.scroller deck.layout Everything stays on one line and scrolls sideways — cards, chips, dates 04-layout.css:164
.search deck.components A control with an icon inside its starting edge. The icon is pointer-events: none, so clicking it focuses the field underneath rather than doing nothing. 06-forms.css:163
.section deck.layout Vertical page rhythm: a block of --space-section, which is a clamp that grows with the viewport. For spacing inside a component reach for .stack instead. 04-layout.css:161
.segmented deck.components A one-of-N control: equal-width children in a sunken track with the selected one raised. Styled from [aria-selected="true"] or .is-active. Built from radio inputs it needs no JavaScript and gets arrow keys free — but Deck does not style :has(:checked), so that version needs one rule of your own. 07-components.css:393
.select deck.components Marks a field invalid from your own validation, producing the same border and ring as :user-invalid without needing the browser to agree. One of the few states an author writes by hand. 06-forms.css:49
.shadow-0 deck.utilities Sets box-shadow. 09-utilities.css:159
.shadow-1 deck.utilities Sets box-shadow. 09-utilities.css:160
.shadow-2 deck.utilities Sets box-shadow. 09-utilities.css:161
.shadow-3 deck.utilities Sets box-shadow. 09-utilities.css:162
.shadow-4 deck.utilities Sets box-shadow. 09-utilities.css:163
.shake deck.motion Sets animation. 16-motion.css:184
.sheet deck.mobile <dialog class="sheet"> on a phone, a centred modal from 40rem up. 08-mobile.css:11
.sheet-body deck.mobile The scrolling region. Pads for the home indicator, and contains its overscroll so reaching the end does not scroll the page behind. 08-mobile.css:59
.sheet-grip deck.mobile The drag handle at the top of a bottom sheet. Deck draws it and does not implement the drag — swiping down does nothing — so always ship a real close button as well. 08-mobile.css:46
.sheet-header deck.mobile The title row of a sheet. 08-mobile.css:54
.sheet-title deck.mobile The sheet's heading. Point aria-labelledby at it. 08-mobile.css:56
.shrink-0 deck.utilities Sets flex. 09-utilities.css:33
.shrink-on-scroll deck.motion Sticky header that condenses once you scroll past the top 16-motion.css:167
.sidebar deck.components Sets display, flex-direction, gap, padding. 07-components.css:845
.sidebar-group deck.components Sets font-size, font-weight, color, padding. 07-components.css:851
.sidebar-link deck.components Sets display, align-items, gap, min-block-size, and 7 more. 07-components.css:852
.skeleton deck.components Sets background, background-size, animation, border-radius, and 3 more. 07-components.css:570
.skeleton-circle deck.components Sets border-radius. 07-components.css:581
.skeleton-text deck.components Sets block-size, margin-block. 07-components.css:580
.skip-link deck.utilities Sets position, inset-block-start, inset-inline-start, z-index, and 4 more. 09-utilities.css:193
.sm deck.utilities No declarations. 09-utilities.css:207
.sortable deck.components Deck styles the states; deck-adapters.js drives them with SortableJS when it is present, or with the native HTML drag and drop API when it is not. The class names are SortableJS's defaults, so no configuration is needed. 26-perf.css:75
.sortable-chosen deck.components Sets background. 26-perf.css:109
.sortable-drag deck.components The item being dragged, following the pointer 26-perf.css:94
.sortable-fallback deck.components Sets opacity. 26-perf.css:110
.sortable-ghost deck.components The gap left where the item will land 26-perf.css:102
.space deck.effects Sets transform-style. 21-space3d.css:24
.span-2 deck.components No declarations. 24-media.css:139
.span-wide deck.components No declarations. 24-media.css:140
.sparkline deck.components A tiny inline chart for a table cell or a stat block. 14-charts.css:256
.sparkline-bad deck.components No declarations. 14-charts.css:264
.sparkline-good deck.components No declarations. 14-charts.css:263
.speed-dial deck.components A FAB that fans out into related actions. 22-nav.css:335
.speed-dial-action deck.components Sets display, align-items, gap, opacity, and 5 more. 22-nav.css:371
.speed-dial-actions deck.components Sets display, flex-direction, align-items, gap. 22-nav.css:352
.speed-dial-button deck.components Sets inline-size, block-size, border-radius, display, and 6 more. 22-nav.css:400
.speed-dial-label deck.components Sets padding, border-radius, background, color, and 4 more. 22-nav.css:390
.spinner deck.components Exempt from the reduced-motion reset in 02-reset.css: instead of freezing it slows to 2.4s. A frozen spinner reads as a hung page, which is worse for everyone than a slow one. Note border-block-start-color rather than border-top-color -- the lit segment starts at the block start in any writing mode. 07-components.css:560
.spinner-lg deck.components Sets inline-size, block-size, border-width. 07-components.css:568
.split deck.layout Content + rail. Collapses to one column below the width it needs. 04-layout.css:129
.split-rail-start deck.layout Puts the rail on the starting edge without touching markup order, so the main column stays first for a screen reader and for the keyboard. Use it for supplementary navigation; not for a rail holding the first thing a reader needs. 04-layout.css:146
.square deck.utilities Sets aspect-ratio. 09-utilities.css:84
.sr-only deck.utilities Sets position, inline-size, block-size, padding, and 5 more. 09-utilities.css:182
.stack deck.layout Vertical rhythm without margin collapse surprises 04-layout.css:51
.stack-0 deck.layout No gap. For two elements that must touch. 04-layout.css:57
.stack-1 deck.layout A hairline. A label and the control it names, when the two read as one thing. 04-layout.css:60
.stack-2 deck.layout Tight vertical rhythm, for a label and its control or a title and its subtitle. 04-layout.css:63
.stack-3 deck.layout The default rhythm for related blocks inside a card or a section. 04-layout.css:65
.stack-4 deck.layout The default, named. Same as .stack with no step class. 04-layout.css:67
.stack-6 deck.layout Loose vertical rhythm, for separating whole sections of a page. 04-layout.css:69
.stack-8 deck.layout Very loose, for whole sections of a page where .section is too much. 04-layout.css:71
.stagger deck.motion Past twelve everything holds the last step rather than snapping back to zero. Without sibling-index() that is as far as CSS can count. .pile in 21-space3d.css has the same fallback and is MISSING this line, so its ninth card stacks on top of the first. 16-motion.css:112
.stagger-fast deck.motion Sets --stagger-step. 16-motion.css:134
.stagger-slow deck.motion Sets --stagger-step. 16-motion.css:135
.stat deck.components Sets display, flex-direction, gap. 07-components.css:767
.stat-cq deck.layout A stat block that stacks tight, then spreads, then goes inline 18-container.css:55
.stat-delta deck.components Sets display, align-items, gap, font-size, and 1 more. 07-components.css:776
.stat-delta-down deck.components Sets color. 07-components.css:778
.stat-delta-up deck.components Sets color. 07-components.css:777
.stat-label deck.components Sets font-size, color. 07-components.css:775
.stat-value deck.components Sets font-size, font-weight, letter-spacing, font-variant-numeric, and 1 more. 07-components.css:768
.status-line deck.components Live status line: dot plus label, the pattern used in status pages 22-nav.css:769
.step deck.components Sets flex, min-inline-size, display, flex-direction, and 3 more. 22-nav.css:530
.step-label deck.components Sets font-size, font-weight, color. 22-nav.css:569
.step-marker deck.components Sets display, align-items, gap. 22-nav.css:539
.step-note deck.components Sets font-size, color. 22-nav.css:570
.stepper deck.components A wizard. The timeline in 07 records what happened; this one shows where you are in a process you are actively moving through. 22-nav.css:522
.stepper-auto deck.components Horizontal where there is room, vertical below a breakpoint. Prefer this over .stepper-vertical: four steps with notes do not fit across a phone, and a horizontal stepper that squashes is unreadable. 22-nav.css:601
.stepper-vertical deck.components Vertical on a phone, where five steps side by side never fits 22-nav.css:593
.sticky deck.utilities Sets position. 09-utilities.css:169
.sticky-top deck.layout A sticky header. Where scroll-state container queries are supported the blur and shadow live on an ::after that is transparent until the header actually sticks, so in flow it looks like part of the page. The treatment rides on a pseudo-element because a scroll-state container can style its descendants but not itself. 04-layout.css:183
.stretch deck.components No declarations. 07-components.css:50
.sweep deck.motion Underline that draws in from the start edge 16-motion.css:238
.switch deck.components An on/off control that takes effect immediately, drawn over a real checkbox. If the reader has to press Save afterwards, use .check instead. Add role="switch" when "on"/"off" reads better than "checked"/"unchecked". 06-forms.css:255
.tab deck.components One trigger. Styled from [aria-selected="true"], so the visual state and the accessible state are the same attribute and cannot disagree. The unselected state carries the same transparent border, so selecting one changes a colour and never moves anything. 07-components.css:365
.tabbar deck.mobile Sets position, inset-inline, inset-block-end, z-index, and 6 more. 08-mobile.css:84
.tabbar-item deck.mobile Sets flex, min-block-size, padding-block, display, and 10 more. 08-mobile.css:98
.table deck.components A real table, kept a table at every width, because values in a column are only comparable while the columns exist. 07-components.css:241
.table-compact deck.components Tighter cell padding, for a table the reader scans rather than reads. 07-components.css:264
.table-stack deck.components Below 40rem, restacks each row into labelled lines, taking the label from data-label on the cell. Every cell needs one. The thead is clipped rather than removed, so header association survives; print undoes the whole thing, because paper is never narrow. 07-components.css:274
.table-wrap deck.components The scroll container for a table, and not optional. It carries the border, radius, background and overflow-x, without which a wide table pushes the whole page sideways. Add tabindex="0" when the table overflows, or a keyboard user cannot scroll it. 07-components.css:231
.tabs deck.components The strip. Scrolls sideways rather than wrapping, because tabs that wrap stop reading as a strip. Deck styles the tabs and ships no keyboard behaviour: if you use role="tablist" you must add the roving tabindex and the arrow keys yourself, or the role promises what the page does not do. 07-components.css:353
.text-2xl deck.utilities Sets font-size. 09-utilities.css:95
.text-2xs deck.utilities Sets font-size. 09-utilities.css:87
.text-bad deck.utilities Sets color. 09-utilities.css:115
.text-base deck.utilities Sets font-size. 09-utilities.css:91
.text-brand deck.utilities Sets color. 09-utilities.css:112
.text-center deck.utilities Sets text-align. 09-utilities.css:105
.text-cq deck.layout No declarations. 18-container.css:32
.text-end deck.utilities Sets text-align. 09-utilities.css:106
.text-faint deck.utilities Sets color. 09-utilities.css:111
.text-good deck.utilities Sets color. 09-utilities.css:113
.text-inherit deck.utilities Sets color. 09-utilities.css:116
.text-lg deck.utilities Sets font-size. 09-utilities.css:93
.text-md deck.utilities Sets font-size. 09-utilities.css:92
.text-muted deck.utilities Secondary text colour. Still meets contrast against every surface Deck defines, so it is safe for body copy rather than decoration only. 09-utilities.css:110
.text-sm deck.utilities One step down the type scale, for secondary text and dense rows. 09-utilities.css:90
.text-start deck.utilities Sets text-align. 09-utilities.css:104
.text-warn deck.utilities Sets color. 09-utilities.css:114
.text-xl deck.utilities Sets font-size. 09-utilities.css:94
.text-xs deck.utilities Sets font-size. 09-utilities.css:88
.textarea deck.components Grows with its content instead of scrolling in a 4-row box 06-forms.css:49
.th-vertical deck.utilities A rotated column header that still measures and aligns correctly 19-logical.css:99
.theme-dock deck.print Sets display. 99-print.css:61
.tick deck.motion Sets transition. 16-motion.css:320
.tilt deck.effects deck.js writes --tilt-x and --tilt-y from the pointer position. Both are registered angles, so they interpolate smoothly back to rest. 21-space3d.css:57
.tilt-lift deck.effects No declarations. 21-space3d.css:67
.tilt-lift-sm deck.effects No declarations. 21-space3d.css:68
.timeline deck.components Sets display, flex-direction. 07-components.css:781
.timeline-dot deck.components Sets inline-size, block-size, border-radius, background, and 4 more. 07-components.css:797
.timeline-item deck.components Sets display, grid-template-columns, gap, padding-block-end, and 1 more. 07-components.css:782
.tip deck.components The ::after tooltip could never flip. This one can, and it can carry a real arrow that stays pointed at the anchor. 25-anchor.css:72
.tip-arrow deck.components The arrow on a .tip. background: inherit takes the tip's colour, and justify-self: anchor-center keeps it pointed at the trigger whichever way the tip has flipped. 25-anchor.css:101
.toast deck.components One notification. The accent colour is a single custom property, --toast-accent, which paints the edge, the icon and the timer together, so a kind is one declaration. Built by Deck.toast() rather than written by hand; touch-action: pan-y lets a horizontal swipe dismiss it while a vertical drag still scrolls the page. 13-toasts.css:49
.toast-action deck.components Sets font-size, font-weight, color, cursor, and 1 more. 13-toasts.css:102
.toast-actions deck.components Sets display, gap, margin-block-start. 13-toasts.css:101
.toast-bad deck.components Sets --toast-accent. 13-toasts.css:114
.toast-close deck.components Sets flex, inline-size, block-size, display, and 6 more. 13-toasts.css:88
.toast-good deck.components Sets --toast-accent. 13-toasts.css:112
.toast-icon deck.components The leading glyph, coloured by --toast-accent so it matches the kind without a rule of its own. 13-toasts.css:82
.toast-info deck.components Sets --toast-accent. 13-toasts.css:115
.toast-loading deck.components Sets --toast-accent. 13-toasts.css:116
.toast-main deck.components The text column of a toast. min-inline-size: 0 so a long unbroken string cannot push the close button off the end. 13-toasts.css:85
.toast-region deck.components The fixed container. pointer-events: none on the region and auto on each toast, so the empty area does not swallow clicks on the page beneath. Sits above a .tabbar when the page has one, and clears the home indicator. 13-toasts.css:12
.toast-region-center deck.components Sets inset-inline, margin-inline. 13-toasts.css:32
.toast-region-stacked deck.components No declarations. 13-toasts.css:161
.toast-region-start deck.components Sets inset-inline. 13-toasts.css:31
.toast-region-top deck.components Sets inset-block, flex-direction. 13-toasts.css:33
.toast-text deck.components Sets color. 13-toasts.css:87
.toast-timer deck.components The auto-dismiss bar. A CSS animation rather than a JavaScript countdown, which is what allows hovering or focusing the region to pause every timer in it with one declaration — so a reader moving toward an Undo button does not have it vanish as they arrive. 13-toasts.css:123
.toast-title deck.components Sets font-weight. 13-toasts.css:86
.toast-undo deck.components Sets --toast-accent. 13-toasts.css:194
.toast-warn deck.components Sets --toast-accent. 13-toasts.css:113
.tone-icon deck.layout Sets color. 18-container.css:187
.tone-surface deck.layout Sets background, border-color. 18-container.css:185
.tone-text deck.layout Sets color. 18-container.css:186
.tooltip deck.components A CSS-only tooltip: the text comes from data-tip through ::after, so there is no second element. It cannot flip near a window edge, cannot escape an overflow:hidden ancestor, and is hidden entirely on a coarse pointer. Never put anything essential in it, and pair it with aria-label — generated content is not a reliable accessible name. 07-components.css:590
.touch-only deck.utilities Sets display. 09-utilities.css:238
.transition deck.motion Sets transition. 16-motion.css:49
.transition-colors deck.motion Sets transition. 16-motion.css:50
.transition-move deck.motion Sets transition. 16-motion.css:55
.transition-opacity deck.motion Sets transition. 16-motion.css:60
.transition-size deck.motion Sets transition. 16-motion.css:58
.truncate deck.utilities Sets overflow, text-overflow, white-space, min-inline-size. 09-utilities.css:126
.turn-in deck.effects Sets animation, transform-origin. 21-space3d.css:243
.turn-out deck.effects Sets animation, transform-origin. 21-space3d.css:242
.uppercase deck.utilities Sets text-transform, letter-spacing. 09-utilities.css:122
.video deck.components A responsive frame for a native video or an embed, plus styling for the native controls where the browser allows it. 24-media.css:11
.video-cover deck.components No declarations. 24-media.css:28
.video-duration deck.components Sets padding, border-radius, background, font-variant-numeric. 24-media.css:82
.video-meta deck.components Sets position, inset-block-end, inset-inline-start, z-index, and 5 more. 24-media.css:71
.video-play deck.components Sets position, z-index, inline-size, block-size, and 9 more. 24-media.css:55
.video-portrait deck.components Sets --ratio. 24-media.css:30
.video-poster deck.components Poster overlay with a play button, for a click-to-load embed 24-media.css:37
.video-square deck.components Sets --ratio. 24-media.css:29
.video-wide deck.components Sets --ratio. 24-media.css:31
.virtual deck.components Any long stack of cards: an activity feed, a chat log, search results 26-perf.css:40
.virtual-lg deck.components No declarations. 26-perf.css:45
.virtual-sm deck.components No declarations. 26-perf.css:44
.vt-header deck.motion Sets view-transition-name. 16-motion.css:359
.vt-hold deck.motion Elements that persist across the navigation. Give the same view-transition-name to the matching element on both pages and the browser tweens between them — a row in a list morphing into a detail header. 16-motion.css:358
.vt-main deck.motion Sets view-transition-name. 16-motion.css:360
.vt-tabbar deck.motion Sets view-transition-name. 16-motion.css:361
.w-auto deck.utilities Sets inline-size. 09-utilities.css:77
.w-full deck.utilities Sets inline-size. 09-utilities.css:76
.was-shaken deck.motion No declarations. 16-motion.css:192
.will-move deck.motion No declarations. 16-motion.css:82
.with-indicator deck.components A count or dot anchored to a corner of something 22-nav.css:740
.wrap deck.utilities Sets flex-wrap. 09-utilities.css:20
.writing-normal deck.utilities Sets writing-mode. 19-logical.css:96
.writing-sideways deck.utilities Sets writing-mode. 19-logical.css:95
.writing-upright deck.utilities Sets text-orientation, letter-spacing. 19-logical.css:94
.writing-vertical deck.utilities Vertical text for a table header that would otherwise need a 40 character column, or for a sidebar label. 19-logical.css:89
.writing-vertical-lr deck.utilities Sets writing-mode. 19-logical.css:93
.z-1 deck.utilities Sets z-index. 09-utilities.css:171
.z-lift-1 deck.effects Lift an element toward the viewer inside a scene, rather than faking it with a bigger shadow. 21-space3d.css:257
.z-lift-2 deck.effects Sets transform. 21-space3d.css:258
.z-lift-3 deck.effects Sets transform. 21-space3d.css:259
.z-sink deck.effects Sets transform. 21-space3d.css:260