Search components & classesTHE FRAMEWORKGuides & releases Getting started ↗All components 40 Layout patterns Tokens & themes

EssentialsButtons Cards Forms Accordions Links Sliders & carousels WYSIWYG editor Tabs & accordions Breadcrumbs Pagination Text & input patterns Labels, help & forms Keyboard hints 72-component index

SMALL BY DESIGN

3.31 KB gzip.
Zero runtime JavaScript.

Get the core ↓

Find your building blocks.

Search component names, class names, module names and CSS properties. The class reference is generated from the actual framework stylesheets.

Search documentation

Browse all entries below. Without JavaScript, use your browser’s Find command.

Components

Buttons
Clear actions, comfortable targets, and visible keyboard focus.
Cards
Composable surfaces for ideas, projects, plans, and everyday content.
Headers
Navigation that wraps gracefully and lets native HTML do the work.
Hero sections
Give an idea a strong introduction with responsive type and clear next steps.
Footers
Close the page with a clear path to the next useful place.
Forms
Real labels, native controls, helpful descriptions, and clear error states.
Accordions
Native disclosures with familiar keyboard interaction. No state library required.
Tables
Readable rows and columns, with captions, header relationships, and scrollable boundaries.
Grid & columns
Equal columns, responsive breakpoints, and auto-fit arrangements.
Flex & rows
Wrapping rows, aligned actions, and responsive sidebar arrangements.
Hover & motion
Small CSS enhancements that respect the user’s motion preferences.
Alerts & badges
Context and status that remain understandable without color alone.
Typography
Fluid headings and comfortable text, grounded in the reader’s font settings.
Links
Clear destinations with underline, icon, and hover treatments.
Sliders & carousels
Swipeable scroll-snap galleries, card rails, vertical slides, and native range controls. CSS only.
Testimonials
Quote cards, responsive grids, and swipeable testimonial sliders. Ready to compose with CSS only.
WYSIWYG editor
Rich-text editor styling with a wrapping toolbar, native editable canvas, and clear focus and validation states.
Cursor effects
A branded mouse cursor across the site, section-specific shapes, a pulsing ring, and animated hover glows. CSS only.
Tabs & accordions
CSS-only tab layouts, including desktop tabs that become native accordions in narrow containers.
Avatars & groups
Avatars & groups patterns built with StyloftCSS and native HTML.
Breadcrumbs
Breadcrumbs patterns built with StyloftCSS and native HTML.
Pagination
Pagination patterns built with StyloftCSS and native HTML.
Selection controls
Selection controls patterns built with StyloftCSS and native HTML.
Chips & tag groups
Chips & tag groups patterns built with StyloftCSS and native HTML.
Dropdown & listbox
Dropdown & listbox patterns built with StyloftCSS and native HTML.
Text & input patterns
Text & input patterns patterns built with StyloftCSS and native HTML.
Labels, help & forms
Labels, help & forms patterns built with StyloftCSS and native HTML.
Autocomplete & combobox
Autocomplete & combobox patterns built with StyloftCSS and native HTML.
Color controls
Color controls patterns built with StyloftCSS and native HTML.
Dates & calendars
Dates & calendars patterns built with StyloftCSS and native HTML.
Progress & loading
Progress & loading patterns built with StyloftCSS and native HTML.
Surfaces & utilities
Surfaces & utilities patterns built with StyloftCSS and native HTML.
Keyboard hints
Keyboard hints patterns built with StyloftCSS and native HTML.
Modal dialogs
Modal dialogs patterns built with StyloftCSS and native HTML.
Alert dialogs
Alert dialogs patterns built with StyloftCSS and native HTML.
Drawers
Drawers patterns built with StyloftCSS and native HTML.
Popovers
Popovers patterns built with StyloftCSS and native HTML.
Tooltips
Tooltips patterns built with StyloftCSS and native HTML.
Toast notifications
Toast notifications patterns built with StyloftCSS and native HTML.
72-component index
Every component named on the referenced HeroUI React catalog, mapped to an original StyloftCSS example or a documented native alternative.

Class reference

Core classes load with styloft.min.css. Other modules load after the core unless you choose a standalone pack. Declarations may vary by responsive or interaction state; see the readable CSS for complete selectors.

sl-alert
Defined or extended in: core
View CSS declarations
padding: 1rem; border: 1px solid var(--sl-border); border-inline-start: .3rem solid var(--sl-accent); border-radius: var(--sl-radius); background: var(--sl-surface)
sl-alert--danger
Defined or extended in: core
View CSS declarations
border-inline-start-color: var(--sl-danger)
sl-auto-grid
Defined or extended in: core
View CSS declarations
display: grid; gap: var(--sl-gap, 1rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sl-card-min, 16rem)), 1fr))
sl-avatar
Defined or extended in: variants
View CSS declarations
display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 1px solid var(--sl-border); border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); font-weight: 700
sl-avatar-group
Defined or extended in: media
View CSS declarations
display: flex; align-items: center; padding-inline-start: .5rem | margin-inline-start: -.5rem
sl-avatar-status
Defined or extended in: media
View CSS declarations
position: relative; display: inline-flex | content: ''; position: absolute; inset-inline-end: .1rem; inset-block-end: .1rem; inline-size: .65rem; block-size: .65rem; border: 2px solid var(--sl-surface); border-radius: 50%; background: var(--sl-success)
sl-badge
Defined or extended in: core, tables
View CSS declarations
display: inline-block; padding: .15rem .6rem; border: 1px solid currentColor; border-radius: 100vmax; font-size: var(--sl-text-sm); font-weight: 600; color: var(--sl-accent) | white-space: normal
sl-block
Defined or extended in: core
View CSS declarations
display: block
sl-bold
Defined or extended in: core
View CSS declarations
font-weight: 700
sl-breadcrumbs
Defined or extended in: navigation
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: 0 | display: inline-flex; align-items: center; gap: .5rem
sl-btn
Defined or extended in: core, button-fx, collections, header, variants
View CSS declarations
border-color: ButtonText | display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 2.75rem; padding: .6rem 1.1rem; border: 1px solid transparent; border-radius: var(--sl-radius); background: var(--sl-accent); color: var(--sl-on-accent); text-decoration: none; font-weight: 650; line-height: 1.3; text-align: center | background: var(--sl-accent-hover) | position: relative; isolation: isolate; overflow: hidden; min-block-size: 3rem; padding: .8rem 1.4rem; border: 1px solid var(--sl-accent); background: var(--sl-fx-bg,var(--sl-surface)); color: var(--sl-fx-color,var(--sl-accent)) | background: var(--sl-fx-bg,var(--sl-surface)); color: var(--sl-fx-color,var(--sl-accent)) | border: 2px solid transparent | box-shadow: 0 6px 0 var(--sl-accent-hover) | transition: color 350ms ease,box-shadow 350ms ease,transform 350ms cubic-bezier(.2,.7,.2,1) | border-radius: .35rem | text-underline-offset: .3em | inline-size: 1.1em; block-size: 1.1em; flex-shrink: 0
sl-btn--fill
Defined or extended in: variants
View CSS declarations
background: var(--sl-accent); color: var(--sl-on-accent)
sl-btn--ghost
Defined or extended in: variants
View CSS declarations
background: transparent; color: var(--sl-accent) | background: var(--sl-soft); color: var(--sl-accent) | border-color: transparent
sl-btn--icon
Defined or extended in: variants
View CSS declarations
aspect-ratio: 1; padding: .6rem | inline-size: 1.1em; block-size: 1.1em; flex-shrink: 0
sl-btn--lg
Defined or extended in: variants
View CSS declarations
min-block-size: 3.25rem; padding: .85rem 1.5rem; font-size: 1.125rem
sl-btn--md
Defined or extended in: variants
View CSS declarations
min-block-size: 2.75rem; padding: .6rem 1.1rem; font-size: 1rem
sl-btn--outline
Defined or extended in: core, variants
View CSS declarations
background: transparent; border-color: currentColor; color: var(--sl-accent) | background: var(--sl-soft) | border-color: transparent
sl-btn--pill
Defined or extended in: variants
View CSS declarations
border-radius: 100vmax
sl-btn--sm
Defined or extended in: variants
View CSS declarations
min-block-size: 2.25rem; padding: .4rem .7rem; font-size: .8rem
sl-btn--soft
Defined or extended in: variants
View CSS declarations
background: var(--sl-soft); color: var(--sl-accent)
sl-button-group
Defined or extended in: collections
View CSS declarations
display: inline-flex; flex-wrap: wrap; gap: 1px; padding: .25rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-soft) | border-radius: .35rem
sl-calendar
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | inline-size: 100%; max-inline-size: 26rem; border-collapse: separate; border-spacing: .25rem; table-layout: fixed; text-align: center | padding: .75rem; font-weight: 650 | font-size: .8rem; color: var(--sl-muted); padding: .5rem 0 | padding: 0 | display: grid; place-items: center; min-block-size: 2.5rem; position: relative; border-radius: var(--sl-radius); cursor: pointer | position: absolute; inline-size: 1px; block-size: 1px; opacity: 0 | display: grid; place-items: center; inline-size: 100%; min-block-size: 2.5rem; border: 1px solid transparent; border-radius: var(--sl-radius) | background: var(--sl-accent); color: var(--sl-on-accent) | outline: 2px solid var(--sl-focus); outline-offset: -2px | background: var(--sl-soft)
sl-card
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-6); background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg)
sl-card--accent
Defined or extended in: variants
View CSS declarations
border-block-start: .25rem solid var(--sl-accent)
sl-card--horizontal
Defined or extended in: variants
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem | flex: 1 1 12rem; min-inline-size: 0
sl-card--outline
Defined or extended in: variants
View CSS declarations
background: transparent; border: 2px solid var(--sl-border)
sl-char
Defined or extended in: motion
View CSS declarations
display: inline-block | animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-range: entry calc(var(--sl-i,0) * 3%) entry calc(40% + var(--sl-i,0) * 3%)
sl-check
Defined or extended in: core
View CSS declarations
display: flex; align-items: baseline; gap: .5rem | accent-color: var(--sl-accent); inline-size: 1.1em; block-size: 1.1em
sl-chip
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 1px solid var(--sl-border); border-radius: 99rem; background: var(--sl-soft); font-size: var(--sl-text-sm) | transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease
sl-choice
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | display: flex; align-items: center; gap: .65rem; min-block-size: 2.75rem | inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--sl-accent); flex-shrink: 0
sl-close
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: .4rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); color: var(--sl-text); font: inherit; cursor: pointer | background: var(--sl-soft)
sl-cluster
Defined or extended in: core
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-gap, 1rem)
sl-color-area
Defined or extended in: colors
View CSS declarations
min-block-size: 12rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--sl-color,#6556dd)
sl-color-input
Defined or extended in: colors
View CSS declarations
inline-size: 4rem; block-size: 2.75rem; padding: .2rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface)
sl-color-range
Defined or extended in: colors
View CSS declarations
inline-size: 100%; min-block-size: 2.75rem; accent-color: var(--sl-accent)
sl-cols-1
Defined or extended in: core
View CSS declarations
--sl-cols: 1
sl-cols-10
Defined or extended in: core
View CSS declarations
--sl-cols: 10
sl-cols-11
Defined or extended in: core
View CSS declarations
--sl-cols: 11
sl-cols-12
Defined or extended in: core
View CSS declarations
--sl-cols: 12
sl-cols-2
Defined or extended in: core
View CSS declarations
--sl-cols: 2
sl-cols-3
Defined or extended in: core
View CSS declarations
--sl-cols: 3
sl-cols-4
Defined or extended in: core
View CSS declarations
--sl-cols: 4
sl-cols-5
Defined or extended in: core
View CSS declarations
--sl-cols: 5
sl-cols-6
Defined or extended in: core
View CSS declarations
--sl-cols: 6
sl-cols-7
Defined or extended in: core
View CSS declarations
--sl-cols: 7
sl-cols-8
Defined or extended in: core
View CSS declarations
--sl-cols: 8
sl-cols-9
Defined or extended in: core
View CSS declarations
--sl-cols: 9
sl-column
Defined or extended in: core
View CSS declarations
flex-direction: column
sl-container
Defined or extended in: core
View CSS declarations
inline-size: min(100% - 2rem, var(--sl-container)); margin-inline: auto
sl-cursor-action
Defined or extended in: cursor
View CSS declarations
cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M7%205v21l6-6%205%209%205-3-5-8h9Z%22%20fill%3D%22%23a78bfa%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 7 5, pointer
sl-cursor-glow
Defined or extended in: cursor
View CSS declarations
transition: border-color 300ms ease,box-shadow 300ms ease | border-color: var(--sl-accent); box-shadow: inset 0 0 36px var(--sl-soft),0 0 0 3px var(--sl-soft)
sl-cursor-grab
Defined or extended in: cursor
View CSS declarations
cursor: grab | cursor: grabbing
sl-cursor-precision
Defined or extended in: cursor
View CSS declarations
cursor: crosshair
sl-cursor-pulse
Defined or extended in: cursor
View CSS declarations
animation: sl-cursor-breathe 1400ms steps(1,end) infinite
sl-cursor-ring
Defined or extended in: cursor
View CSS declarations
--sl-cursor-small: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 16 16, auto; --sl-cursor-normal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 16 16, auto; --sl-cursor-large: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 16 16, auto; cursor: var(--sl-cursor-normal)
sl-cursor-site
Defined or extended in: cursor
View CSS declarations
--sl-cursor-small: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 16 16, auto; --sl-cursor-normal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 16 16, auto; --sl-cursor-large: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 16 16, auto; cursor: var(--sl-cursor-normal) | cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M7%205v21l6-6%205%209%205-3-5-8h9Z%22%20fill%3D%22%23a78bfa%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 7 5, pointer | cursor: text | cursor: not-allowed
sl-cursor-text
Defined or extended in: cursor
View CSS declarations
cursor: text
sl-cursor-zone
Defined or extended in: cursor
View CSS declarations
padding: 1.5rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface)
sl-cursor-zoom
Defined or extended in: cursor
View CSS declarations
cursor: zoom-in
sl-date-range
Defined or extended in: dates
View CSS declarations
display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem | grid-template-columns: minmax(0,1fr)
sl-details
Defined or extended in: core, motion
View CSS declarations
padding: 1rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface) | display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; font-weight: 650; cursor: pointer | display: none | content: "" | content: ""; flex: 0 0 .5rem; inline-size: .5rem; block-size: .5rem; margin-inline-start: auto; margin-inline-end: .2rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; rotate: 45deg | rotate: 225deg | padding-block-start: .75rem | transition: rotate 360ms cubic-bezier(.2,.7,.2,1) | interpolate-size: allow-keywords | block-size: 0; overflow: clip; transition: block-size 360ms cubic-bezier(.2,.7,.2,1), content-visibility 360ms allow-discrete | block-size: auto
sl-details--flush
Defined or extended in: variants
View CSS declarations
border-inline: 0; border-block-start: 0; border-radius: 0; background: transparent
sl-dialog
Defined or extended in: overlays
View CSS declarations
inline-size: min(32rem,calc(100% - 2rem)); max-block-size: calc(100dvh - 2rem); padding: 1.5rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface); color: var(--sl-text); box-shadow: var(--sl-shadow); overflow: auto | background: rgb(0 0 0 / .6) | opacity: 0; transition: opacity 220ms ease,display 220ms allow-discrete,overlay 220ms allow-discrete | opacity: 1 | opacity: 0
sl-dialog__head
Defined or extended in: overlays
View CSS declarations
display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1rem
sl-down-1023:block
Defined or extended in: responsive
View CSS declarations
display: block
sl-down-1023:cols-1
Defined or extended in: responsive
View CSS declarations
--sl-cols: 1
sl-down-1023:cols-2
Defined or extended in: responsive
View CSS declarations
--sl-cols: 2
sl-down-1023:cols-3
Defined or extended in: responsive
View CSS declarations
--sl-cols: 3
sl-down-1023:cols-4
Defined or extended in: responsive
View CSS declarations
--sl-cols: 4
sl-down-1023:column
Defined or extended in: responsive
View CSS declarations
flex-direction: column
sl-down-1023:hidden
Defined or extended in: responsive
View CSS declarations
display: none
sl-down-1200:block
Defined or extended in: responsive
View CSS declarations
display: block
sl-down-1200:cols-1
Defined or extended in: responsive
View CSS declarations
--sl-cols: 1
sl-down-1200:cols-2
Defined or extended in: responsive
View CSS declarations
--sl-cols: 2
sl-down-1200:cols-3
Defined or extended in: responsive
View CSS declarations
--sl-cols: 3
sl-down-1200:cols-4
Defined or extended in: responsive
View CSS declarations
--sl-cols: 4
sl-down-1200:column
Defined or extended in: responsive
View CSS declarations
flex-direction: column
sl-down-1200:hidden
Defined or extended in: responsive
View CSS declarations
display: none
sl-down-767:block
Defined or extended in: responsive
View CSS declarations
display: block
sl-down-767:cols-1
Defined or extended in: responsive
View CSS declarations
--sl-cols: 1
sl-down-767:cols-2
Defined or extended in: responsive
View CSS declarations
--sl-cols: 2
sl-down-767:cols-3
Defined or extended in: responsive
View CSS declarations
--sl-cols: 3
sl-down-767:cols-4
Defined or extended in: responsive
View CSS declarations
--sl-cols: 4
sl-down-767:column
Defined or extended in: responsive
View CSS declarations
flex-direction: column
sl-down-767:hidden
Defined or extended in: responsive
View CSS declarations
display: none
sl-down-991:block
Defined or extended in: responsive
View CSS declarations
display: block
sl-down-991:cols-1
Defined or extended in: responsive
View CSS declarations
--sl-cols: 1
sl-down-991:cols-2
Defined or extended in: responsive
View CSS declarations
--sl-cols: 2
sl-down-991:cols-3
Defined or extended in: responsive
View CSS declarations
--sl-cols: 3
sl-down-991:cols-4
Defined or extended in: responsive
View CSS declarations
--sl-cols: 4
sl-down-991:column
Defined or extended in: responsive
View CSS declarations
flex-direction: column
sl-down-991:hidden
Defined or extended in: responsive
View CSS declarations
display: none
sl-drawer
Defined or extended in: overlays
View CSS declarations
position: fixed; inset-block: 0; inset-inline-end: 0; margin: 0 0 0 auto; block-size: 100dvh; max-block-size: 100dvh; border-radius: var(--sl-radius-lg) 0 0 var(--sl-radius-lg) | translate: 100% 0; transition: translate 300ms ease,opacity 220ms ease,display 300ms allow-discrete,overlay 300ms allow-discrete | translate: 0 0 | translate: 100% 0
sl-dropdown
Defined or extended in: collections
View CSS declarations
position: relative; inline-size: fit-content; max-inline-size: 100% | list-style: none; cursor: pointer | display: none
sl-dropdown__items
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
display: grid; gap: .3rem; min-inline-size: min(15rem,100%); padding: .65rem; margin-block-start: .5rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); box-shadow: var(--sl-shadow) | padding: .55rem .7rem; border-radius: .35rem | background: var(--sl-soft) | transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease
sl-editor
Defined or extended in: editor
View CSS declarations
min-inline-size: 0; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface); color: var(--sl-text)
sl-editor__content
Defined or extended in: editor
View CSS declarations
min-block-size: 14rem; padding: 1.25rem; overflow-wrap: anywhere; line-height: 1.7; caret-color: var(--sl-accent) | outline: 2px solid var(--sl-focus); outline-offset: -4px | margin-block-start: 1rem | line-height: 1.3 | font-size: var(--sl-text-xl) | font-size: var(--sl-text-lg) | padding-inline-start: 1.5rem | margin-block-start: .25rem | padding-inline-start: 1rem; border-inline-start: 3px solid var(--sl-accent); color: var(--sl-muted) | max-inline-size: 100%; overflow: auto; padding: 1rem; border-radius: var(--sl-radius); background: var(--sl-soft) | max-inline-size: 100%; block-size: auto; border-radius: var(--sl-radius) | min-block-size: 7rem; padding: 1rem | min-block-size: 0 | padding: 1rem
sl-editor__footer
Defined or extended in: editor
View CSS declarations
display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .75rem 1.25rem; border-block-start: 1px solid var(--sl-border); color: var(--sl-muted); font-size: var(--sl-text-sm) | padding-inline: 1rem
sl-editor__group
Defined or extended in: editor
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; gap: .25rem
sl-editor__tool
Defined or extended in: editor
View CSS declarations
display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: .5rem .7rem; border: 1px solid transparent; border-radius: var(--sl-radius); background: transparent; color: inherit; font: inherit; line-height: 1.2; cursor: pointer | background: var(--sl-surface); border-color: var(--sl-border); color: var(--sl-accent) | opacity: .55; cursor: not-allowed | inline-size: 1.1em; block-size: 1.1em | transition: background-color 200ms ease,border-color 200ms ease,color 200ms ease
sl-editor__toolbar
Defined or extended in: editor
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem; border-block-end: 1px solid var(--sl-border); border-start-start-radius: inherit; border-start-end-radius: inherit; background: var(--sl-soft)
sl-editor--compact
Defined or extended in: editor
View CSS declarations
min-block-size: 7rem; padding: 1rem
sl-editor--invalid
Defined or extended in: editor
View CSS declarations
border-color: var(--sl-danger)
sl-editor--readonly
Defined or extended in: editor
View CSS declarations
min-block-size: 0
sl-error
Defined or extended in: core
View CSS declarations
color: var(--sl-danger); font-weight: 600
sl-field
Defined or extended in: core
View CSS declarations
display: grid; gap: .4rem
sl-fieldset
Defined or extended in: fields
View CSS declarations
min-inline-size: 0; padding: 1.25rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius) | padding-inline: .4rem; font-weight: 650
sl-flex
Defined or extended in: core
View CSS declarations
min-inline-size: 0 | display: flex; gap: var(--sl-gap, 1rem) | display: flex
sl-footer
Defined or extended in: variants
View CSS declarations
padding: 2rem; background: var(--sl-surface); border-block-start: 1px solid var(--sl-border)
sl-fx-arrow
Defined or extended in: button-fx
View CSS declarations
display: inline-block; transform: rotate(-45deg) | transition: transform 400ms cubic-bezier(.2,.7,.2,1) | transform: translateX(7px) rotate(0)
sl-fx-depth
Defined or extended in: button-fx
View CSS declarations
--sl-fx-bg: var(--sl-accent); --sl-fx-color: var(--sl-on-accent) | box-shadow: 0 6px 0 var(--sl-accent-hover) | transform: translateY(3px); box-shadow: 0 3px 0 var(--sl-accent-hover) | transform: translateY(6px); box-shadow: none
sl-fx-diagonal
Defined or extended in: button-fx
View CSS declarations
content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--sl-accent) | inset: -10% -30%; transform: skewX(-20deg) translateX(-120%) | transition: transform 450ms cubic-bezier(.2,.7,.2,1) | transform: skewX(-20deg) translateX(0) | --sl-fx-color: var(--sl-on-accent)
sl-fx-doors
Defined or extended in: button-fx
View CSS declarations
--sl-fx-color: var(--sl-on-accent) | content: ""; position: absolute; inset-block: 0; inline-size: 51%; background: var(--sl-accent); z-index: -1; pointer-events: none | inset-inline-start: 0 | inset-inline-end: 0 | transition: translate 450ms cubic-bezier(.2,.7,.2,1) | --sl-fx-color: var(--sl-accent) | translate: -100% 0 | translate: 100% 0
sl-fx-frame
Defined or extended in: button-fx
View CSS declarations
content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: .2rem; pointer-events: none | border-inline: 0; scale: 0 1 | border-block: 0; scale: 1 0 | transition: scale 400ms ease | scale: 1
sl-fx-label
Defined or extended in: button-fx
View CSS declarations
display: grid; overflow: hidden | grid-area: 1/1 | translate: 0 150% | transition: translate 400ms cubic-bezier(.2,.7,.2,1) | translate: 0 -150% | translate: 0 0
sl-fx-orbit
Defined or extended in: button-fx
View CSS declarations
--sl-fx-bg: linear-gradient(var(--sl-surface),var(--sl-surface)) padding-box,conic-gradient(from var(--sl-orbit),var(--sl-accent),#a78bfa,#38bdf8,var(--sl-accent)) border-box | border: 2px solid transparent | animation: sl-orbit 1800ms linear infinite
sl-fx-runway
Defined or extended in: button-fx
View CSS declarations
transform: translateX(7px) rotate(0)
sl-fx-spotlight
Defined or extended in: button-fx
View CSS declarations
content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--sl-accent) | inline-size: 3rem; block-size: 3rem; border-radius: 50%; inset-inline-start: -1.5rem; inset-block-end: -1.5rem; scale: 0 | transition: scale 550ms cubic-bezier(.2,.7,.2,1) | scale: 12 | --sl-fx-color: var(--sl-on-accent)
sl-fx-swap
Defined or extended in: button-fx
View CSS declarations
translate: 0 -150% | translate: 0 0
sl-gap-0
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-0); gap: var(--sl-space-0)
sl-gap-1
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-1); gap: var(--sl-space-1)
sl-gap-12
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-12); gap: var(--sl-space-12)
sl-gap-16
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-16); gap: var(--sl-space-16)
sl-gap-2
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-2); gap: var(--sl-space-2)
sl-gap-3
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-3); gap: var(--sl-space-3)
sl-gap-4
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-4); gap: var(--sl-space-4)
sl-gap-6
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-6); gap: var(--sl-space-6)
sl-gap-8
Defined or extended in: core
View CSS declarations
--sl-gap: var(--sl-space-8); gap: var(--sl-space-8)
sl-grid
Defined or extended in: core
View CSS declarations
--sl-cols: 1; display: grid; gap: var(--sl-gap, 1rem); grid-template-columns: repeat(var(--sl-cols, 1), minmax(0, 1fr)) | min-inline-size: 0 | display: grid
sl-grow
Defined or extended in: core
View CSS declarations
flex-grow: 1
sl-header
Defined or extended in: header
View CSS declarations
container: sl-header / inline-size; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface); color: var(--sl-text)
sl-header__brand
Defined or extended in: header
View CSS declarations
display: inline-flex; align-items: center; gap: .5rem; inline-size: fit-content; color: var(--sl-text); font-weight: 750; text-decoration: none; white-space: nowrap | inline-size: 2rem; block-size: 2rem; object-fit: contain | color: var(--sl-accent) | grid-column: 2; grid-row: 1; justify-self: center | grid-column: 1; grid-row: 1; justify-self: start; align-self: start; margin-block-start: .375rem; position: relative; z-index: 1 | grid-column: 2; justify-self: end
sl-header__menu
Defined or extended in: header
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1.25rem; min-inline-size: 0 | text-underline-offset: .3em | justify-content: flex-start | display: none
sl-header__menu--end
Defined or extended in: header
View CSS declarations
grid-column: 3; grid-row: 1
sl-header__menu--start
Defined or extended in: header
View CSS declarations
grid-column: 1; grid-row: 1; justify-content: flex-start
sl-header__mobile
Defined or extended in: header
View CSS declarations
display: none; min-inline-size: 0 | display: flex; align-items: center; gap: .6rem; inline-size: fit-content; min-block-size: 2.75rem; margin-inline-start: auto; padding: .45rem .75rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); list-style: none; cursor: pointer | display: none | transition: rotate 220ms ease | rotate: 90deg | interpolate-size: allow-keywords | block-size: 0; overflow: clip; transition: block-size 300ms ease,content-visibility 300ms allow-discrete | block-size: auto | display: block; grid-column: 1 / -1; grid-row: 1 | margin-inline-start: 0; margin-inline-end: auto
sl-header__mobile-nav
Defined or extended in: header
View CSS declarations
display: flex; flex-direction: column; gap: .4rem; padding: .75rem .3rem .3rem | padding: .65rem .75rem; border-radius: var(--sl-radius); color: var(--sl-accent) | background: var(--sl-soft) | transition: background-color 180ms ease,color 180ms ease
sl-header__row
Defined or extended in: header
View CSS declarations
display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 1.5rem; padding: 1rem | grid-template-columns: minmax(0,1fr) auto | grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) | grid-template-columns: minmax(0,1fr) auto; gap: 0; align-items: start | display: none | grid-column: 1; grid-row: 1; justify-self: start; align-self: start; margin-block-start: .375rem; position: relative; z-index: 1
sl-header__top
Defined or extended in: header
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .65rem 1rem; border-block-end: 1px solid var(--sl-border); border-start-start-radius: inherit; border-start-end-radius: inherit; background: var(--sl-soft); font-size: var(--sl-text-sm) | display: flex; flex-wrap: wrap; gap: .5rem 1rem
sl-header--center
Defined or extended in: header
View CSS declarations
grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) | grid-column: 2; grid-row: 1; justify-self: center | grid-column: 1; grid-row: 1; justify-content: flex-start | grid-column: 3; grid-row: 1 | grid-template-columns: minmax(0,1fr) auto; gap: 0; align-items: start | grid-column: 1; grid-row: 1; justify-self: start; align-self: start; margin-block-start: .375rem; position: relative; z-index: 1
sl-header--reverse
Defined or extended in: header
View CSS declarations
grid-template-columns: minmax(0,1fr) auto | justify-content: flex-start | grid-template-columns: minmax(0,1fr) auto; gap: 0; align-items: start | grid-column: 2; justify-self: end | margin-inline-start: 0; margin-inline-end: auto
sl-help
Defined or extended in: core
View CSS declarations
font-size: var(--sl-text-sm); color: var(--sl-muted)
sl-hidden
Defined or extended in: core
View CSS declarations
display: none
sl-hover-fill
Defined or extended in: motion
View CSS declarations
position: relative | background: linear-gradient(var(--sl-accent),var(--sl-accent)) 0 100% / 100% 0 no-repeat; color: var(--sl-accent); border: 1px solid currentColor | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | background-image: linear-gradient(var(--sl-accent),var(--sl-accent)); background-color: transparent; background-size: 100% 100%; color: var(--sl-on-accent)
sl-hover-glow
Defined or extended in: motion
View CSS declarations
position: relative | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | box-shadow: 0 0 0 4px var(--sl-soft),0 0 28px var(--sl-soft); border-color: var(--sl-accent)
sl-hover-lift
Defined or extended in: motion
View CSS declarations
position: relative | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | transform: translateY(-6px); box-shadow: 0 16px 32px rgb(0 0 0 / .14)
sl-hover-sheen
Defined or extended in: motion
View CSS declarations
position: relative | overflow: hidden; isolation: isolate | content: ""; position: absolute; inset: -50%; background: linear-gradient(110deg,transparent 35%,rgb(255 255 255 / .3) 50%,transparent 65%); translate: -80% 0; pointer-events: none | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | transition: translate 550ms ease | translate: 80% 0
sl-hover-tilt
Defined or extended in: motion
View CSS declarations
position: relative | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | transform: perspective(800px) rotateX(3deg) rotateY(-3deg)
sl-hover-zoom
Defined or extended in: motion
View CSS declarations
position: relative | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | transform: scale(1.025)
sl-input
Defined or extended in: core, fields, select
View CSS declarations
inline-size: 100%; min-block-size: 2.75rem; padding: .6rem .75rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); color: var(--sl-text) | border-color: var(--sl-focus); outline: 1px solid var(--sl-focus); outline-offset: 1px | color: var(--sl-muted); opacity: 1 | border: 2px solid var(--sl-danger) | min-inline-size: 0; border: 0; background: transparent | inline-size: 100%; min-block-size: 2.75rem; padding: .6rem 2.5rem .6rem .8rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background-color: var(--sl-surface); color: var(--sl-text); font: inherit; line-height: 1.4; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23818ca4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; cursor: pointer | border-color: var(--sl-accent) | background: var(--sl-surface); color: var(--sl-text) | min-block-size: 9rem; padding: .5rem; background-image: none | padding: .5rem .75rem; border-radius: .35rem | appearance: base-select | background-image: none; padding-inline-end: .8rem; align-items: center | color: var(--sl-muted) | rotate: 180deg | margin-block-start: .4rem; padding: .35rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); color: var(--sl-text); box-shadow: var(--sl-shadow); max-block-size: 18rem | padding: .65rem .8rem; gap: .75rem; border-radius: .35rem | background: var(--sl-soft); color: var(--sl-accent) | color: var(--sl-accent) | transition: rotate 200ms ease | opacity: 0; translate: 0 -.25rem; transition: opacity 180ms ease,translate 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete | opacity: 1; translate: 0 0 | opacity: 0; translate: 0 -.25rem | transition: background-color 160ms ease,color 160ms ease | transition: border-color 180ms ease,background-color 180ms ease,color 180ms ease,outline-color 180ms ease | appearance: auto; background-image: none
sl-input-group
Defined or extended in: fields
View CSS declarations
display: flex; align-items: center; min-inline-size: 0; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface) | padding: .65rem .8rem; color: var(--sl-muted) | min-inline-size: 0; border: 0; background: transparent | border-color: var(--sl-focus)
sl-items-center
Defined or extended in: core
View CSS declarations
align-items: center
sl-items-start
Defined or extended in: core
View CSS declarations
align-items: flex-start
sl-justify-between
Defined or extended in: core
View CSS declarations
justify-content: space-between
sl-justify-center
Defined or extended in: core
View CSS declarations
justify-content: center
sl-kbd
Defined or extended in: surfaces
View CSS declarations
display: inline-block; padding: .2rem .5rem; border: 1px solid var(--sl-border); border-block-end-width: 3px; border-radius: .35rem; background: var(--sl-soft); color: var(--sl-text); font: .85em var(--sl-mono)
sl-label
Defined or extended in: core
View CSS declarations
font-weight: 650
sl-lg:block
Defined or extended in: core
View CSS declarations
display: block
sl-lg:cols-1
Defined or extended in: core
View CSS declarations
--sl-cols: 1
sl-lg:cols-10
Defined or extended in: core
View CSS declarations
--sl-cols: 10
sl-lg:cols-11
Defined or extended in: core
View CSS declarations
--sl-cols: 11
sl-lg:cols-12
Defined or extended in: core
View CSS declarations
--sl-cols: 12
sl-lg:cols-2
Defined or extended in: core
View CSS declarations
--sl-cols: 2
sl-lg:cols-3
Defined or extended in: core
View CSS declarations
--sl-cols: 3
sl-lg:cols-4
Defined or extended in: core
View CSS declarations
--sl-cols: 4
sl-lg:cols-5
Defined or extended in: core
View CSS declarations
--sl-cols: 5
sl-lg:cols-6
Defined or extended in: core
View CSS declarations
--sl-cols: 6
sl-lg:cols-7
Defined or extended in: core
View CSS declarations
--sl-cols: 7
sl-lg:cols-8
Defined or extended in: core
View CSS declarations
--sl-cols: 8
sl-lg:cols-9
Defined or extended in: core
View CSS declarations
--sl-cols: 9
sl-lg:column
Defined or extended in: core
View CSS declarations
flex-direction: column
sl-lg:flex
Defined or extended in: core
View CSS declarations
display: flex
sl-lg:grid
Defined or extended in: core
View CSS declarations
display: grid
sl-lg:hidden
Defined or extended in: core
View CSS declarations
display: none
sl-lg:row
Defined or extended in: core
View CSS declarations
flex-direction: row
sl-link
Defined or extended in: variants
View CSS declarations
display: inline-flex; align-items: center; gap: .4em; text-underline-offset: .25em | inline-size: 1.1em; block-size: 1.1em; flex-shrink: 0
sl-link--underline
Defined or extended in: motion
View CSS declarations
background: linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat; text-decoration: none; padding-block-end: .2em | transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color 300ms ease, background-size 300ms ease, color 300ms ease | background-size: 100% 2px
sl-listbox
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
inline-size: 100%; min-block-size: 12rem; padding: .4rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); color: var(--sl-text); font: inherit | padding: .65rem .8rem; border-radius: .35rem | background: var(--sl-soft); color: var(--sl-accent) | transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease
sl-loading
Defined or extended in: status
View CSS declarations
display: inline-block; inline-size: 1.5rem; block-size: 1.5rem; border: .2rem solid var(--sl-soft); border-block-start-color: var(--sl-accent); border-radius: 50% | animation: sl-loading-spin 900ms linear infinite
sl-m-0
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-0)
sl-m-1
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-1)
sl-m-12
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-12)
sl-m-16
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-16)
sl-m-2
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-2)
sl-m-3
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-3)
sl-m-4
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-4)
sl-m-6
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-6)
sl-m-8
Defined or extended in: core
View CSS declarations
margin: var(--sl-space-8)
sl-md:block
Defined or extended in: core
View CSS declarations
display: block
sl-md:cols-1
Defined or extended in: core
View CSS declarations
--sl-cols: 1
sl-md:cols-10
Defined or extended in: core
View CSS declarations
--sl-cols: 10
sl-md:cols-11
Defined or extended in: core
View CSS declarations
--sl-cols: 11
sl-md:cols-12
Defined or extended in: core
View CSS declarations
--sl-cols: 12
sl-md:cols-2
Defined or extended in: core
View CSS declarations
--sl-cols: 2
sl-md:cols-3
Defined or extended in: core
View CSS declarations
--sl-cols: 3
sl-md:cols-4
Defined or extended in: core
View CSS declarations
--sl-cols: 4
sl-md:cols-5
Defined or extended in: core
View CSS declarations
--sl-cols: 5
sl-md:cols-6
Defined or extended in: core
View CSS declarations
--sl-cols: 6
sl-md:cols-7
Defined or extended in: core
View CSS declarations
--sl-cols: 7
sl-md:cols-8
Defined or extended in: core
View CSS declarations
--sl-cols: 8
sl-md:cols-9
Defined or extended in: core
View CSS declarations
--sl-cols: 9
sl-md:column
Defined or extended in: core
View CSS declarations
flex-direction: column
sl-md:flex
Defined or extended in: core
View CSS declarations
display: flex
sl-md:grid
Defined or extended in: core
View CSS declarations
display: grid
sl-md:hidden
Defined or extended in: core
View CSS declarations
display: none
sl-md:row
Defined or extended in: core
View CSS declarations
flex-direction: row
sl-measure
Defined or extended in: core
View CSS declarations
max-inline-size: var(--sl-measure)
sl-meter
Defined or extended in: status
View CSS declarations
inline-size: 100%; block-size: 1.25rem; accent-color: var(--sl-accent)
sl-mx-0
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-0)
sl-mx-1
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-1)
sl-mx-12
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-12)
sl-mx-16
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-16)
sl-mx-2
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-2)
sl-mx-3
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-3)
sl-mx-4
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-4)
sl-mx-6
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-6)
sl-mx-8
Defined or extended in: core
View CSS declarations
margin-inline: var(--sl-space-8)
sl-mx-auto
Defined or extended in: core
View CSS declarations
margin-inline: auto
sl-my-0
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-0)
sl-my-1
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-1)
sl-my-12
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-12)
sl-my-16
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-16)
sl-my-2
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-2)
sl-my-3
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-3)
sl-my-4
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-4)
sl-my-6
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-6)
sl-my-8
Defined or extended in: core
View CSS declarations
margin-block: var(--sl-space-8)
sl-nav
Defined or extended in: variants
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius)
sl-otp
Defined or extended in: fields
View CSS declarations
font-family: var(--sl-mono); letter-spacing: .65em; max-inline-size: 18rem
sl-p-0
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-0)
sl-p-1
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-1)
sl-p-12
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-12)
sl-p-16
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-16)
sl-p-2
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-2)
sl-p-3
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-3)
sl-p-4
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-4)
sl-p-6
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-6)
sl-p-8
Defined or extended in: core
View CSS declarations
padding: var(--sl-space-8)
sl-pagination
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: 0 | display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: .4rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); text-decoration: none | background: var(--sl-accent); color: var(--sl-on-accent) | background: var(--sl-soft); color: var(--sl-accent)
sl-panel
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | min-inline-size: 0; padding: 1.5rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface); color: var(--sl-text)
sl-panel--soft
Defined or extended in: surfaces
View CSS declarations
background: var(--sl-soft)
sl-parallax
Defined or extended in: motion
View CSS declarations
animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-name: sl-parallax; animation-range: cover 0% cover 100% | animation-play-state: paused
sl-person
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; flex-shrink: 0; border: 2px solid var(--sl-surface); border-radius: 50%; background: var(--sl-soft); color: var(--sl-accent); font-weight: 650; overflow: hidden | margin-inline-start: -.5rem
sl-person--lg
Defined or extended in: media
View CSS declarations
inline-size: 4rem; block-size: 4rem
sl-person--sm
Defined or extended in: media
View CSS declarations
inline-size: 2.25rem; block-size: 2.25rem
sl-popover
Defined or extended in: overlays
View CSS declarations
position: fixed; inset: 20vh auto auto 50%; translate: -50% 0; inline-size: min(22rem,calc(100% - 2rem)); padding: 1.25rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); color: var(--sl-text); box-shadow: var(--sl-shadow) | inset: auto; position-area: bottom; position-try-fallbacks: flip-block; translate: 0 0; margin: .5rem 0 | opacity: 0; transition: opacity 220ms ease,display 220ms allow-discrete,overlay 220ms allow-discrete | opacity: 1 | opacity: 0
sl-progress
Defined or extended in: status
View CSS declarations
inline-size: 100%; block-size: .75rem; accent-color: var(--sl-accent); border: 0; border-radius: 99rem; overflow: hidden | background: var(--sl-soft) | background: var(--sl-accent)
sl-progress-circle
Defined or extended in: status
View CSS declarations
display: grid; place-items: center; inline-size: 6rem; block-size: 6rem; position: relative; border-radius: 50%; background: conic-gradient(var(--sl-accent) var(--sl-progress,60%),var(--sl-soft) 0) | content: ''; position: absolute; inset: .5rem; border-radius: 50%; background: var(--sl-surface) | position: relative; font-weight: 650
sl-prose
Defined or extended in: prose
View CSS declarations
max-inline-size: var(--sl-measure) | margin-block-start: 1.25em | padding-inline-start: 1.5em | margin-block-start: .4em | border-inline-start: .25rem solid var(--sl-accent); padding-inline-start: 1rem; color: var(--sl-muted) | padding: .1em .3em; border-radius: .25rem; background: var(--sl-soft)
sl-px-0
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-0)
sl-px-1
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-1)
sl-px-12
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-12)
sl-px-16
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-16)
sl-px-2
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-2)
sl-px-3
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-3)
sl-px-4
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-4)
sl-px-6
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-6)
sl-px-8
Defined or extended in: core
View CSS declarations
padding-inline: var(--sl-space-8)
sl-py-0
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-0)
sl-py-1
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-1)
sl-py-12
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-12)
sl-py-16
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-16)
sl-py-2
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-2)
sl-py-3
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-3)
sl-py-4
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-4)
sl-py-6
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-6)
sl-py-8
Defined or extended in: core
View CSS declarations
padding-block: var(--sl-space-8)
sl-range
Defined or extended in: slider
View CSS declarations
inline-size: 100%; min-block-size: 2.75rem; accent-color: var(--sl-accent)
sl-reveal
Defined or extended in: motion
View CSS declarations
animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-play-state: paused
sl-reveal-left
Defined or extended in: motion
View CSS declarations
animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-name: sl-slide-left | animation-play-state: paused
sl-reveal-scale
Defined or extended in: motion
View CSS declarations
animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-name: sl-scale-in | animation-play-state: paused
sl-reveal-text
Defined or extended in: motion
View CSS declarations
animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-name: sl-text-mask | animation-play-state: paused
sl-rounded
Defined or extended in: core
View CSS declarations
border-radius: var(--sl-radius)
sl-row
Defined or extended in: core
View CSS declarations
flex-direction: row
sl-scene
Defined or extended in: motion
View CSS declarations
display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; align-items: start | grid-template-columns: minmax(0,1fr)
sl-scene__step
Defined or extended in: motion
View CSS declarations
min-block-size: 40vh; padding-block: 2rem
sl-scene__visual
Defined or extended in: motion
View CSS declarations
position: sticky; top: 6rem; padding: 2rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-soft) | position: static
sl-scroll-progress
Defined or extended in: motion
View CSS declarations
block-size: .3rem; background: var(--sl-accent); transform-origin: left | animation: sl-progress 1s linear both; animation-timeline: scroll(root block)
sl-scroll-shadow
Defined or extended in: surfaces
View CSS declarations
max-block-size: 12rem; overflow: auto; padding: 1rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: linear-gradient(var(--sl-surface) 30%,transparent) center top,linear-gradient(transparent,var(--sl-surface) 70%) center bottom,radial-gradient(farthest-side at 50% 0,rgb(0 0 0 / .22),transparent) center top,radial-gradient(farthest-side at 50% 100%,rgb(0 0 0 / .22),transparent) center bottom; background-repeat: no-repeat; background-size: 100% 2rem,100% 2rem,100% .8rem,100% .8rem; background-attachment: local,local,scroll,scroll
sl-select
Defined or extended in: select
View CSS declarations
inline-size: 100%; min-block-size: 2.75rem; padding: .6rem 2.5rem .6rem .8rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background-color: var(--sl-surface); color: var(--sl-text); font: inherit; line-height: 1.4; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23818ca4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; cursor: pointer | border-color: var(--sl-accent) | border-color: var(--sl-focus); outline: 1px solid var(--sl-focus); outline-offset: 1px | background: var(--sl-surface); color: var(--sl-text) | min-block-size: 9rem; padding: .5rem; background-image: none | padding: .5rem .75rem; border-radius: .35rem | appearance: base-select | background-image: none; padding-inline-end: .8rem; align-items: center | color: var(--sl-muted) | rotate: 180deg | margin-block-start: .4rem; padding: .35rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface); color: var(--sl-text); box-shadow: var(--sl-shadow); max-block-size: 18rem | padding: .65rem .8rem; gap: .75rem; border-radius: .35rem | background: var(--sl-soft); color: var(--sl-accent) | color: var(--sl-accent) | transition: rotate 200ms ease | opacity: 0; translate: 0 -.25rem; transition: opacity 180ms ease,translate 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete | opacity: 1; translate: 0 0 | opacity: 0; translate: 0 -.25rem | transition: background-color 160ms ease,color 160ms ease | transition: border-color 180ms ease,background-color 180ms ease,color 180ms ease,outline-color 180ms ease | appearance: auto; background-image: none
sl-separator
Defined or extended in: surfaces
View CSS declarations
border: 0; border-block-start: 1px solid var(--sl-border); margin-block: 1rem
sl-shadow
Defined or extended in: core
View CSS declarations
box-shadow: var(--sl-shadow)
sl-sidebar
Defined or extended in: core
View CSS declarations
display: flex; flex-wrap: wrap; gap: var(--sl-gap, 1.5rem) | flex: 1 1 15rem | flex: 999 1 50%; min-inline-size: min(100%, 20rem)
sl-skeleton
Defined or extended in: status
View CSS declarations
min-block-size: 1rem; border-radius: .5rem; background: linear-gradient(100deg,var(--sl-soft) 30%,var(--sl-surface) 50%,var(--sl-soft) 70%); background-size: 200% 100% | animation: sl-skeleton-shimmer 1.8s linear infinite
sl-skeleton--cover
Defined or extended in: status
View CSS declarations
min-block-size: 8rem
sl-skip
Defined or extended in: core
View CSS declarations
position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-200%); z-index: 100 | transform: none
sl-slide
Defined or extended in: slider
View CSS declarations
flex: 0 0 100%; min-inline-size: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 1.5rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-lg); background: var(--sl-surface) | outline: 2px solid var(--sl-accent); outline-offset: -3px | flex-basis: calc((100% - 1rem) / 2) | flex-basis: min(85%,18rem) | padding: 1rem
sl-slide-art
Defined or extended in: slider
View CSS declarations
min-block-size: 8rem; border-radius: var(--sl-radius); background: radial-gradient(circle at 25% 120%,#0ea5e9 0 40%,transparent 41%),radial-gradient(circle at 75% 80%,#8b5cf6 0 45%,#12344a 46%)
sl-slide-art--mint
Defined or extended in: slider
View CSS declarations
background: radial-gradient(circle at 25% 120%,#14b8a6 0 40%,transparent 41%),radial-gradient(circle at 75% 80%,#38bdf8 0 45%,#153f45 46%)
sl-slide-art--warm
Defined or extended in: slider
View CSS declarations
background: radial-gradient(circle at 25% 120%,#ea9c75 0 40%,transparent 41%),radial-gradient(circle at 75% 80%,#b38ce8 0 45%,#382244 46%)
sl-slider
Defined or extended in: slider
View CSS declarations
min-inline-size: 0; max-inline-size: 100%
sl-slider__nav
Defined or extended in: slider
View CSS declarations
display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-block-start: 1rem | display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 1px solid var(--sl-border); border-radius: 50%; text-decoration: none; background: var(--sl-surface); color: var(--sl-accent) | background: var(--sl-soft); border-color: var(--sl-accent) | transition: background-color 250ms ease,border-color 250ms ease
sl-slider__track
Defined or extended in: slider
View CSS declarations
display: flex; gap: 1rem; overflow-x: auto; max-inline-size: 100%; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; padding-block-end: .65rem | display: grid; grid-auto-rows: 100%; block-size: 22rem; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; padding-block-end: 0 | scroll-behavior: smooth
sl-slider--cards
Defined or extended in: slider
View CSS declarations
flex-basis: calc((100% - 1rem) / 2) | flex-basis: min(85%,18rem)
sl-slider--vertical
Defined or extended in: slider
View CSS declarations
display: grid; grid-auto-rows: 100%; block-size: 22rem; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; padding-block-end: 0
sl-sm:block
Defined or extended in: core
View CSS declarations
display: block
sl-sm:cols-1
Defined or extended in: core
View CSS declarations
--sl-cols: 1
sl-sm:cols-10
Defined or extended in: core
View CSS declarations
--sl-cols: 10
sl-sm:cols-11
Defined or extended in: core
View CSS declarations
--sl-cols: 11
sl-sm:cols-12
Defined or extended in: core
View CSS declarations
--sl-cols: 12
sl-sm:cols-2
Defined or extended in: core
View CSS declarations
--sl-cols: 2
sl-sm:cols-3
Defined or extended in: core
View CSS declarations
--sl-cols: 3
sl-sm:cols-4
Defined or extended in: core
View CSS declarations
--sl-cols: 4
sl-sm:cols-5
Defined or extended in: core
View CSS declarations
--sl-cols: 5
sl-sm:cols-6
Defined or extended in: core
View CSS declarations
--sl-cols: 6
sl-sm:cols-7
Defined or extended in: core
View CSS declarations
--sl-cols: 7
sl-sm:cols-8
Defined or extended in: core
View CSS declarations
--sl-cols: 8
sl-sm:cols-9
Defined or extended in: core
View CSS declarations
--sl-cols: 9
sl-sm:column
Defined or extended in: core
View CSS declarations
flex-direction: column
sl-sm:flex
Defined or extended in: core
View CSS declarations
display: flex
sl-sm:grid
Defined or extended in: core
View CSS declarations
display: grid
sl-sm:hidden
Defined or extended in: core
View CSS declarations
display: none
sl-sm:row
Defined or extended in: core
View CSS declarations
flex-direction: row
sl-spinner
Defined or extended in: motion, variants
View CSS declarations
animation: sl-spin 900ms linear infinite | display: inline-block; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%
sl-split
Defined or extended in: motion
View CSS declarations
display: flex; flex-wrap: wrap; column-gap: .25em | animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-range: entry calc(var(--sl-i,0) * 3%) entry calc(40% + var(--sl-i,0) * 3%)
sl-sr-only
Defined or extended in: core
View CSS declarations
position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0
sl-stack
Defined or extended in: core
View CSS declarations
margin-block-start: var(--sl-gap, 1rem)
sl-stagger
Defined or extended in: motion
View CSS declarations
animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-range: entry calc(var(--sl-i,0) * 3%) entry calc(40% + var(--sl-i,0) * 3%) | animation-play-state: paused
sl-surface
Defined or extended in: core
View CSS declarations
background: var(--sl-surface)
sl-swatch
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | display: inline-block; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-color) | outline: 2px solid var(--sl-focus); outline-offset: 3px | outline: 2px dashed var(--sl-focus); outline-offset: 4px
sl-swatch-choice
Defined or extended in: colors
View CSS declarations
position: relative; display: inline-flex; cursor: pointer | position: absolute; inline-size: 1px; block-size: 1px; opacity: 0 | outline: 2px solid var(--sl-focus); outline-offset: 3px | outline: 2px dashed var(--sl-focus); outline-offset: 4px
sl-switch
Defined or extended in: fields
View CSS declarations
display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; position: relative | position: absolute; inline-size: 1px; block-size: 1px; opacity: 0 | background: var(--sl-accent); border-color: var(--sl-accent) | translate: 1.25rem 0; background: var(--sl-on-accent) | outline: 2px solid var(--sl-focus); outline-offset: 3px | opacity: .6; cursor: not-allowed
sl-switch__track
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease | display: block; inline-size: 3rem; block-size: 1.7rem; padding: .2rem; border: 1px solid var(--sl-border); border-radius: 99rem; background: var(--sl-surface) | content: ''; display: block; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--sl-muted) | background: var(--sl-accent); border-color: var(--sl-accent) | translate: 1.25rem 0; background: var(--sl-on-accent) | outline: 2px solid var(--sl-focus); outline-offset: 3px
sl-tab
Defined or extended in: tabs
View CSS declarations
min-inline-size: 0; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface) | display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 2.75rem; padding: .85rem 1rem; list-style: none; font-weight: 600; cursor: pointer; overflow-wrap: anywhere | display: none | content: '' | margin-inline-start: auto | color: var(--sl-accent) | rotate: 180deg | outline: 2px solid var(--sl-focus); outline-offset: -4px | block-size: 0; overflow: clip | block-size: auto | display: contents | grid-row: 1; border: 1px solid var(--sl-border); border-block-end: 2px solid var(--sl-border); border-radius: var(--sl-radius) var(--sl-radius) 0 0; background: var(--sl-surface) | background: var(--sl-soft); border-block-end-color: var(--sl-accent); color: var(--sl-accent) | grid-row: 2; grid-column: 1 / -1 | border: 1px solid var(--sl-border); border-block-start: 0; border-radius: 0 0 var(--sl-radius) var(--sl-radius); background: var(--sl-surface) | transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease | transition: rotate 300ms ease | interpolate-size: allow-keywords | transition: block-size 360ms cubic-bezier(.2,.7,.2,1),content-visibility 360ms allow-discrete
sl-tab__panel
Defined or extended in: tabs
View CSS declarations
padding: 1.25rem; overflow-wrap: anywhere
sl-table
Defined or extended in: tables
View CSS declarations
inline-size: 100%; border-collapse: collapse; text-align: start | padding: .75rem 1rem; border-block-end: 1px solid var(--sl-border); text-align: start | font-weight: 700; background: var(--sl-surface) | text-align: start; font-weight: 650; padding-block: .75rem
sl-table--responsive
Defined or extended in: tables
View CSS declarations
display: block | position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap | display: grid; gap: 1rem | display: grid; padding: .25rem .85rem; background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius) | padding: .75rem 0; overflow-wrap: anywhere; min-inline-size: 0 | font-size: 1rem | display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: baseline; gap: .75rem | border-block-end: 0 | display: block; color: var(--sl-muted); font-weight: 600 | min-inline-size: 0 | white-space: normal
sl-table-label
Defined or extended in: tables
View CSS declarations
display: none | display: block; color: var(--sl-muted); font-weight: 600
sl-table-wrap
Defined or extended in: tables
View CSS declarations
min-inline-size: 0; max-inline-size: 100%; overflow-x: auto
sl-tabs
Defined or extended in: tabs
View CSS declarations
display: grid; gap: .75rem; min-inline-size: 0
sl-tabs--always
Defined or extended in: tabs
View CSS declarations
grid-template-columns: repeat(var(--sl-tabs-count,3),minmax(0,1fr)); gap: 0 | display: contents | grid-row: 1; border: 1px solid var(--sl-border); border-block-end: 2px solid var(--sl-border); border-radius: var(--sl-radius) var(--sl-radius) 0 0; background: var(--sl-surface) | background: var(--sl-soft); border-block-end-color: var(--sl-accent); color: var(--sl-accent) | display: none | grid-row: 2; grid-column: 1 / -1 | border: 1px solid var(--sl-border); border-block-start: 0; border-radius: 0 0 var(--sl-radius) var(--sl-radius); background: var(--sl-surface)
sl-tabs--responsive
Defined or extended in: tabs
View CSS declarations
grid-template-columns: repeat(var(--sl-tabs-count,3),minmax(0,1fr)); gap: 0 | display: contents | grid-row: 1; border: 1px solid var(--sl-border); border-block-end: 2px solid var(--sl-border); border-radius: var(--sl-radius) var(--sl-radius) 0 0; background: var(--sl-surface) | background: var(--sl-soft); border-block-end-color: var(--sl-accent); color: var(--sl-accent) | display: none | grid-row: 2; grid-column: 1 / -1 | border: 1px solid var(--sl-border); border-block-start: 0; border-radius: 0 0 var(--sl-radius) var(--sl-radius); background: var(--sl-surface)
sl-tabs-container
Defined or extended in: tabs
View CSS declarations
container: sl-tabs / inline-size; min-inline-size: 0
sl-text-center
Defined or extended in: core
View CSS declarations
text-align: center
sl-text-danger
Defined or extended in: core
View CSS declarations
color: var(--sl-danger)
sl-text-lg
Defined or extended in: core
View CSS declarations
font-size: var(--sl-text-lg)
sl-text-muted
Defined or extended in: core
View CSS declarations
color: var(--sl-muted)
sl-text-sm
Defined or extended in: core
View CSS declarations
font-size: var(--sl-text-sm)
sl-text-start
Defined or extended in: core
View CSS declarations
text-align: start
sl-text-success
Defined or extended in: core
View CSS declarations
color: var(--sl-success)
sl-text-xl
Defined or extended in: core
View CSS declarations
font-size: var(--sl-text-xl)
sl-toast
Defined or extended in: overlays
View CSS declarations
inset: auto 1rem 1rem auto; translate: 0 0 | inset: auto; position-area: bottom; position-try-fallbacks: flip-block; translate: 0 0; margin: .5rem 0
sl-toggle
Defined or extended in: collections, colors, dates, fields, media, navigation, overlays, status, surfaces
View CSS declarations
display: inline-flex; position: relative; align-items: center; gap: .5rem; cursor: pointer | position: absolute; inline-size: 1px; block-size: 1px; opacity: 0 | display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface) | background: var(--sl-soft); border-color: var(--sl-accent); color: var(--sl-accent) | outline: 2px solid var(--sl-focus); outline-offset: 2px | transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,translate 220ms ease,outline-color 220ms ease
sl-toolbar
Defined or extended in: surfaces
View CSS declarations
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem; border: 1px solid var(--sl-border); border-radius: var(--sl-radius); background: var(--sl-surface)
sl-tooltip
Defined or extended in: overlays
View CSS declarations
position: relative; display: inline-flex | visibility: visible; opacity: 1; translate: 0 0
sl-tooltip__text
Defined or extended in: overlays
View CSS declarations
position: absolute; z-index: 10; inset-block-end: calc(100% + .5rem); inset-inline-start: 0; inline-size: max-content; max-inline-size: min(16rem,75vw); padding: .5rem .7rem; border: 1px solid var(--sl-border); border-radius: .4rem; background: var(--sl-text); color: var(--sl-bg); font-size: .85rem; visibility: hidden; opacity: 0; translate: 0 .25rem; pointer-events: none | visibility: visible; opacity: 1; translate: 0 0 | transition: opacity 180ms ease,translate 180ms ease,visibility 180ms allow-discrete
sl-w-full
Defined or extended in: core
View CSS declarations
inline-size: 100%
sl-word
Defined or extended in: motion
View CSS declarations
display: inline-block; white-space: nowrap | animation: sl-reveal 1s linear both; animation-timeline: view(block); animation-range: entry 0% entry 50% | animation-range: entry calc(var(--sl-i,0) * 3%) entry calc(40% + var(--sl-i,0) * 3%)
sl-wrap
Defined or extended in: core
View CSS declarations
flex-wrap: wrap

Components

Class reference

sl-alert

sl-alert--danger

sl-auto-grid

sl-avatar

sl-avatar-group

sl-avatar-status

sl-badge

sl-block

sl-bold

sl-breadcrumbs

sl-btn

sl-btn--fill

sl-btn--ghost

sl-btn--icon

sl-btn--lg

sl-btn--md

sl-btn--outline

sl-btn--pill

sl-btn--sm

sl-btn--soft

sl-button-group

sl-calendar

sl-card

sl-card--accent

sl-card--horizontal

sl-card--outline

sl-char

sl-check

sl-chip

sl-choice

sl-close

sl-cluster

sl-color-area

sl-color-input

sl-color-range

sl-cols-1

sl-cols-10

sl-cols-11

sl-cols-12

sl-cols-2

sl-cols-3

sl-cols-4

sl-cols-5

sl-cols-6

sl-cols-7

sl-cols-8

sl-cols-9

sl-column

sl-container

sl-cursor-action

sl-cursor-glow

sl-cursor-grab

sl-cursor-precision

sl-cursor-pulse

sl-cursor-ring

sl-cursor-site

sl-cursor-text

sl-cursor-zone

sl-cursor-zoom

sl-date-range

sl-details

sl-details--flush

sl-dialog

sl-dialog__head

sl-down-1023:block

sl-down-1023:cols-1

sl-down-1023:cols-2

sl-down-1023:cols-3

sl-down-1023:cols-4

sl-down-1023:column

sl-down-1023:hidden

sl-down-1200:block

sl-down-1200:cols-1

sl-down-1200:cols-2

sl-down-1200:cols-3

sl-down-1200:cols-4

sl-down-1200:column

sl-down-1200:hidden

`sl-alert`

`sl-alert--danger`

`sl-auto-grid`

`sl-avatar`

`sl-avatar-group`

`sl-avatar-status`

`sl-badge`

`sl-block`

`sl-bold`

`sl-breadcrumbs`

`sl-btn`

`sl-btn--fill`

`sl-btn--ghost`

`sl-btn--icon`

`sl-btn--lg`

`sl-btn--md`

`sl-btn--outline`

`sl-btn--pill`

`sl-btn--sm`

`sl-btn--soft`

`sl-button-group`

`sl-calendar`

`sl-card`

`sl-card--accent`

`sl-card--horizontal`

`sl-card--outline`

`sl-char`

`sl-check`

`sl-chip`

`sl-choice`

`sl-close`

`sl-cluster`

`sl-color-area`

`sl-color-input`

`sl-color-range`

`sl-cols-1`

`sl-cols-10`

`sl-cols-11`

`sl-cols-12`

`sl-cols-2`

`sl-cols-3`

`sl-cols-4`

`sl-cols-5`

`sl-cols-6`

`sl-cols-7`

`sl-cols-8`

`sl-cols-9`

`sl-column`

`sl-container`

`sl-cursor-action`

`sl-cursor-glow`

`sl-cursor-grab`

`sl-cursor-precision`

`sl-cursor-pulse`

`sl-cursor-ring`

`sl-cursor-site`

`sl-cursor-text`

`sl-cursor-zone`

`sl-cursor-zoom`

`sl-date-range`

`sl-details`

`sl-details--flush`

`sl-dialog`

`sl-dialog__head`

`sl-down-1023:block`

`sl-down-1023:cols-1`

`sl-down-1023:cols-2`

`sl-down-1023:cols-3`

`sl-down-1023:cols-4`

`sl-down-1023:column`

`sl-down-1023:hidden`

`sl-down-1200:block`

`sl-down-1200:cols-1`

`sl-down-1200:cols-2`

`sl-down-1200:cols-3`

`sl-down-1200:cols-4`

`sl-down-1200:column`

`sl-down-1200:hidden`

`sl-down-767:block`

`sl-down-767:cols-1`