@use "/shell" as *; @use "quark:list" as list; #release-notice { /* opens once: sheet re-runs restart a delay, so gate it on the fact it writes */ &:not([data-did-open]) { @delay 7000 { is-open: ""; data-did-open: ""; } } /* prevent clicks from bubbling to the sheet */ @on mouseup, click (stop-propagation); } provider-fetch[api-url*="package-metas/index.json"][is-success] { $package-indices: prop("provision").body; /* `excom.navGroup` moves a package out of its type's list, into that group */ $ungrouped: list.reject($package-indices.packages, "navGroup"); .package-links { [bind-elements] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "kit-element")); } [bind-element-bases] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "element-base")); } [bind-tools] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "tool")); } /* the standalone libraries: same rows, rendered flat (shell.css) */ [bind-libraries] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "library")); } [bind-library-group] ul:not(ul ul) { content: iterate(list.filter($package-indices.packages, "navGroup", "libraries")); } ul:not(ul ul) > li { $pkg: item.shortName; > spa-a { route-href: "/packages/#{item.shortName}"; } } /* one `content` rule per link: a second one would rewrite the first's text on every pass */ ul:not(ul ul, [bind-libraries] ul) > li > spa-a { content: item.shortName; } [bind-libraries] ul:not(ul ul) > li > spa-a { content: displayName(item.shortName); } /* packages whose docs span several pages: one collapsible group per section */ [bind-sections] { content: iterate(item.docSections); summary { content: item.title; } details > ul { content: iterate(item.docs); spa-a { route-href: "/packages/#{$pkg}/#{item.name}"; content: item.title; } } details:not(:has(spa-a[is-active])) { open: none; } } } /* page titles: the page, then the site. The docs home keeps the title in the document head; the other routes carry theirs in markup */ spa-route[is-active] { /* a site guide */ &[route-href$=":name"] { $title-guide: list.find($package-indices.docs, "name", $route.params.name); document-title: "#{$title-guide.title or $route.params.name} · Nucleus · docs"; } /* a package README */ &[route-href$=":packageName"] { document-title: "#{displayName($route.params.packageName)} · Nucleus · docs"; } /* one page of a package's docs */ &[route-href$=":docName"] { $title-package: list.find($package-indices.packages, "shortName", $route.params.packageName); document-title: "#{docTitle($title-package, $route.params.docName)} · #{displayName($route.params.packageName)} · Nucleus · docs"; } } /* the page's markdown file, for the footer link: the docs home and each guide the index lists, and a package's page whose index entry says `markdown` (build-docs-index sets it; the dev server's index has none, so no link there). siteDocHref and the path check say which URL is the page's own: the 404 and a package's doc pages have none */ > spa-manager[active-url] { $page-path: attr("active-url").split("#").at(0).split("?").at(0); $page-name: if($page-path == SITE_HOME: SITE_HOME_DOC; else: $page-path.split("/").at(-1)); $page-guide: list.find($package-indices.docs, "name", $page-name); $page-package: list.find($package-indices.packages, "shortName", $page-name); $page-markdown: if($page-guide and siteDocHref($page-guide.name) == $page-path: "/docs/#{$page-guide.name}.md"; $page-package.markdown and "#{SITE_BASE}/packages/#{$page-package.shortName}" == $page-path: "/#{$page-package.shortName}.md"); footer [bind-page-markdown] { href: $page-markdown; content: ternary($page-markdown, "Markdown version of this page"); } } } spa-route { $route: prop("provision"); /* paramless routes name their guide in markup (the docs home, `/`); /docs/:name gets it from params */ $route-doc-name: attr("data-doc-name"); } /* the desktop aside and the mobile sheet stamp the same nav template */ [data-site-nav] { details:has(spa-a[is-active]) { /* not kosher */ open: ""; } spa-a[is-active] { aria-current: ""; } spa-a:not([is-active]) { aria-current: none; } } /* mobile sheet: Escape / back gesture while open; a tapped link closes it */ #site-menu { &[is-open] dismiss-watcher { is-active: ""; } &:not([is-open]) dismiss-watcher { is-active: none; } @on click (target: "spa-a") { is-open: none; } } #site-menu-gesture { &:has(> #site-menu[is-open]) { progress-offset: 1; } &:not(:has(> #site-menu[is-open])) { progress-offset: 0; } @on gesture-handler-start { #site-menu { is-scrubbing: ""; } } @on gesture-handler-end { #site-menu { is-open: event.detail.snap == 1; is-scrubbing: none; } } } main { @on copy-source (handle: copySource); } #search-dialog[open] { > include-content { is-active: ""; /* for some reason this is necessary on first render */ @on include-content-did-render (handle: focusInput); } input[type="search"] { /* works on all subsequent opens */ autofocus: ""; } } #search-dialog:not([open]) input[type="search"] { autofocus: none; }

Valence.css

Classless CSS that still loves your custom elements — Pico's elegance, remixed for the modern web.

Valence.css is a lightly modified fork of the excellent Pico CSS. Pico styles are tightly bound to native tag names (article, button, …), which custom elements cannot reuse. Valence.css keeps Pico's look and adds:

  • Tag aliases — @custom-selector synonyms so [role="…"] / .tag-* (and custom element tags) share the same semantic styles
  • Opt-outs — .unstyled / .unstyled-all (and .unanimated*) for document flexibility where framework styles would fight you
  • Drop-in themes — basic (Pico-faithful) ships today; further themes share the same tokens so they can be swapped without touching markup. Light/dark is a scheme ([data-scheme])
  • Molecules — cards, dropdowns, modals (dialog::backdrop / [role="presentation"] / .tag-backdrop), nav, progress, and native [popover] styles on top of Pico's element styles
  • Tokens — --pico-* renamed to --v-* for a clear Valence.css namespace

Features

  • Semantic tag aliases Style article, dialog, button, … — the same rules apply to the [role="…"] / .tag-* forms
  • Custom-element friendly class="tag-article" on any host inherits Valence.css styles without rewriting selectors
  • Drop-in themes basic (Pico-flavor) ships; further themes share the same tokens. Scheme via [data-scheme="light|dark"]
  • Opt-outs .unstyled / .unstyled-all (and motion: .unanimated*)
  • Molecules Cards, dropdowns, modals (dialog::backdrop / [role="presentation"] / .tag-backdrop), nav, progress, popovers, tooltips

Installation

This package is available in the NucleusKit. Or it can be used by itself:

CDN Package Manager 
<link rel="stylesheet" href="https://unpkg.com/@excom/valence@0.1.3/dist/basic.css">
 
npm install @excom/valence
HTML Imports JS / CSS Imports 
@import "@excom/valence/basic.css";
Peer dependencies (0)

Packages a consumer must install alongside this one. Workspace deps are bundled.

Package Version
View Dist Files

All exports:

./basic-vars.bundle.min.css
  • default: ./dist/basic-vars.bundle.min.css
./basic-vars.css
  • default: ./dist/basic-vars.css
./basic-vars.min.css
  • default: ./dist/basic-vars.min.css
./basic.bundle.min.css
  • default: ./dist/basic.bundle.min.css
./basic.css
  • default: ./dist/basic.css
./basic.min.css
  • default: ./dist/basic.min.css

Usage

Import a theme entry (CSS). Prefer aliases when styling custom elements.

@import "@excom/valence/basic.css";
 
<article>Native card</article>
<event-handler class="tag-article">Aliased card</event-handler>
<button class="outline secondary">Outline</button>

Documentation

Getting started

  • Color schemes — automatic light / dark, data-scheme
  • Aliases — tag, role and .tag-* forms of every alias; custom elements
  • Opt-outs — .unstyled, .unanimated, .abstract

Customization

  • CSS variables — the --v-* tokens
  • Themes & layers — entries, @layer strategy, mixins for element authors

Layout

  • Container · Landmarks & section · Grid · Overflow auto

Content

  • Typography · Link · Button · Table · Code · Embedded content

Forms

  • Forms · Input · Textarea · Select · Checkboxes, radios & switches · Range

Components

  • Accordion · Card · Dropdown · Group · Loading · Modal · Nav · Popover · Progress · Tooltip

API Reference

valence

Attributes (0) Role — option is configurable, state is managed by the element (read-only), or hybrid which is both. Role Attribute Type Values Prop Default
Provision (0) This provision property lives on the DOM node. Read / watch it with Quark’s prop("provision"), or listen for the neutron-provision event from app JS. Property Type
Events (0)
Dispatches — events that valence fires and their default actions. Dispatch Default Action
A "default action" is subsequent logic executed by the element if e.preventDefault() is not synchronously called on the event.
Listeners — events that valence listens for which will trigger subsequent actions. Listener Type Action
Commands — verbs valence accepts as a command event (HTML Command API): from a <button command commandfor>, an <event-handler command-name>, or a CommandEvent. Command Action
Recognized Elements (0) Child or descendant elements are recognized by valence and relevant to its functionality. Element Relationship Required
Styles (243)
Classes — optional classes that change the appearance of valence. Class Description .close Close control — .close or :--button / :--link with rel="prev" Renders the theme close icon (empty content). .container Centered page column with responsive max-width. .container-fluid Full-width fluid column (padding only, no max-width). .contrast High-contrast link flavor. .dropdown Dropdown menu — apply to <details> / :--details. .grid Auto-fit responsive columns. .nested Nested card — quieter border / shadow inside another card. .outline Outline (ghost) button flavor — pair with .secondary / .contrast. .overflow-auto Scrollable overflow container. .secondary Muted / secondary link flavor. .show-scrollbar Always show a styled vertical scrollbar. .sticky Sticky table header row. .striped Alternating row background. .unanimated Disable transitions / animations on one element. .unanimated-all Disable transitions / animations on an element and all descendants. .unstyled Opt out of Valence.css styles on one element. .unstyled-all Opt out of Valence.css styles on an element and all descendants.
Variables — public CSS variables for theming valence. Opt-out:
If you wish to opt-out of these styles on a case-to-case basis, use property all: revert-layer. Valence.css ships this as .unstyled and .unstyled-all for the entire tree.
Variable Syntax Default --v-accordion-active-summary-color var(--v-primary-hover) --v-accordion-border-color var(--v-muted-border-color) --v-accordion-close-summary-color var(--v-color) --v-accordion-open-summary-color var(--v-muted-color) --v-background-color #fff --v-block-spacing-horizontal var(--v-spacing) --v-block-spacing-vertical var(--v-spacing) --v-blockquote-border-color var(--v-muted-border-color) --v-blockquote-footer-color var(--v-muted-color) --v-border-radius 0.25rem --v-border-width 0.0625rem --v-box-shadow 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015) --v-button-box-shadow 0 0 0 rgba(0, 0, 0, 0) --v-button-hover-box-shadow 0 0 0 rgba(0, 0, 0, 0) --v-card-background-color var(--v-background-color) --v-card-border-color var(--v-muted-border-color) --v-card-box-shadow var(--v-box-shadow) --v-card-sectioning-background-color rgb(251, 251.5, 252.25) --v-code-background-color rgb(243, 244.5, 246.75) --v-code-color #646b79 --v-code-kbd-background-color var(--v-color) --v-code-kbd-color var(--v-background-color) --v-color #373c44 --v-contrast #181c25 --v-contrast-background #181c25 --v-contrast-border var(--v-contrast-background) --v-contrast-focus rgba(93, 107, 137, 0.25) --v-contrast-hover #000 --v-contrast-hover-background #000 --v-contrast-hover-border var(--v-contrast-hover-background) --v-contrast-hover-underline var(--v-secondary-hover) --v-contrast-inverse #fff --v-contrast-underline rgba(24, 28, 37, 0.5) --v-del-color rgb(136, 56.5, 53) --v-dropdown-background-color #fff --v-dropdown-border-color #eff1f4 --v-dropdown-box-shadow var(--v-box-shadow) --v-dropdown-color var(--v-color) --v-dropdown-hover-background-color #eff1f4 --v-font-family var(--v-font-family-sans-serif) --v-font-family-emoji "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" --v-font-family-monospace ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--v-font-family-emoji) --v-font-family-sans-serif system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--v-font-family-emoji) --v-font-size 100% --v-font-weight 400 --v-form-element-active-background-color #fff --v-form-element-active-border-color var(--v-primary-border) --v-form-element-background-color rgb(251, 251.5, 252.25) --v-form-element-border-color #cfd5e2 --v-form-element-color #23262c --v-form-element-disabled-opacity 0.5 --v-form-element-focus-color var(--v-primary-border) --v-form-element-invalid-active-border-color rgb(200.25, 79.25, 72.25) --v-form-element-invalid-border-color rgb(183.5, 105.5, 106.5) --v-form-element-invalid-focus-color var( --v-form-element-invalid-active-border-color ) --v-form-element-placeholder-color var(--v-muted-color) --v-form-element-selected-background-color #dfe3eb --v-form-element-spacing-horizontal 1rem --v-form-element-spacing-vertical 0.75rem --v-form-element-valid-active-border-color rgb(39, 152.75, 118.75) --v-form-element-valid-border-color rgb(76, 154.5, 137.5) --v-form-element-valid-focus-color var( --v-form-element-valid-active-border-color ) --v-grid-column-gap var(--v-spacing) --v-grid-row-gap var(--v-spacing) --v-group-box-shadow 0 0 0 rgba(0, 0, 0, 0) --v-group-box-shadow-focus-with-button 0 0 0 var(--v-outline-width) var(--v-primary-focus) --v-group-box-shadow-focus-with-input 0 0 0 0.0625rem var(--v-form-element-border-color) --v-h1-color #2d3138 --v-h2-color #373c44 --v-h3-color #424751 --v-h4-color #4d535e --v-h5-color #5c6370 --v-h6-color #646b79 --v-icon-checkbox url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") --v-icon-chevron url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") --v-icon-close url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") --v-icon-date url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") --v-icon-invalid url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") --v-icon-loading url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite --v-icon-minus url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") --v-icon-search url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") --v-icon-time url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") --v-icon-valid url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") --v-ins-color rgb(28.5, 105.5, 84) --v-line-height 1.5 --v-loading-spinner-opacity 0.5 --v-mark-background-color rgb(252.5, 230.5, 191.5) --v-mark-color #0f1114 --v-modal-overlay-backdrop-filter blur(0.375rem) --v-modal-overlay-background-color rgba(232, 234, 237, 0.75) --v-multiply-color-0 rgba(0, 0, 0, 0.02) --v-multiply-color-1 rgba(0, 0, 0, 0.04) --v-muted-border-color rgb(231, 234, 239.5) --v-muted-color #646b79 --v-nav-breadcrumb-divider ">" --v-nav-element-spacing-horizontal 0.5rem --v-nav-element-spacing-vertical 1rem --v-nav-link-spacing-horizontal 0.5rem --v-nav-link-spacing-vertical 0.5rem --v-outline-width 0.125rem --v-popover-background-color #fff --v-popover-border-color #eff1f4 --v-popover-box-shadow var(--v-box-shadow) --v-popover-color var(--v-color) --v-popover-max-width 20rem --v-primary #0172ad --v-primary-background #0172ad --v-primary-border var(--v-primary-background) --v-primary-focus rgba(2, 154, 232, 0.5) --v-primary-hover #015887 --v-primary-hover-background #02659a --v-primary-hover-border var(--v-primary-hover-background) --v-primary-hover-underline var(--v-primary-hover) --v-primary-inverse #fff --v-primary-underline rgba(1, 114, 173, 0.5) --v-progress-background-color #dfe3eb --v-progress-color var(--v-primary-background) --v-range-active-border-color #bfc7d9 --v-range-border-color #dfe3eb --v-range-thumb-active-color var(--v-primary-background) --v-range-thumb-border-color var(--v-background-color) --v-range-thumb-color var(--v-secondary-background) --v-secondary #5d6b89 --v-secondary-background #525f7a --v-secondary-border var(--v-secondary-background) --v-secondary-focus rgba(93, 107, 137, 0.25) --v-secondary-hover #48536b --v-secondary-hover-background #48536b --v-secondary-hover-border var(--v-secondary-hover-background) --v-secondary-hover-underline var(--v-secondary-hover) --v-secondary-inverse #fff --v-secondary-underline rgba(93, 107, 137, 0.5) --v-spacing 1rem --v-switch-background-color #bfc7d9 --v-switch-checked-background-color var(--v-primary-background) --v-switch-color #fff --v-switch-thumb-box-shadow 0 0 0 rgba(0, 0, 0, 0) --v-table-border-color var(--v-muted-border-color) --v-table-row-stripped-background-color rgba(111, 120, 135, 0.0375) --v-table-sticky-top 0px --v-text-selection-color rgba(2, 154, 232, 0.25) --v-text-underline-offset 0.1rem --v-tooltip-background-color var(--v-contrast-background) --v-tooltip-color var(--v-contrast-inverse) --v-transition var(--v-transition-duration-standard) var(--v-transition-ease-out) --v-transition-duration-fast 0.15s --v-transition-duration-slow 0.4s --v-transition-duration-standard 0.25s --v-transition-ease-in cubic-bezier(0.4, 0, 1, 1) --v-transition-ease-in-out cubic-bezier(0.4, 0, 0.2, 1) --v-transition-ease-out cubic-bezier(0, 0, 0.2, 1) --v-typography-spacing-vertical 1rem
Aliases — @custom-selector synonyms so custom elements can share semantic styles. Element aliases match the host tag / .tag-* class; state aliases match attributes (nested under the element alias). Alias Kind Matches :--abbr element abbr, .tag-abbr :--address element address, .tag-address :--article element article, [role="article"], .tag-article :--aside element aside, [role="complementary"], .tag-aside :--b element b, .tag-b :--blockquote element blockquote, [role="blockquote"], .tag-blockquote :--button element button, [role="button"], [type="button"], .tag-button :--button--disabled state [disabled], [aria-disabled="true"] :--code element code, [role="code"], .tag-code :--del element del, [role="deletion"], .tag-del :--details element details, .tag-details :--details--open state [open], [aria-expanded="true"] :--dialog element dialog, [role="dialog"], .tag-dialog :--dialog--open state :is(dialog)[open], [aria-expanded="true"] :--dialog-backdrop-aliases element [role="presentation"], .tag-backdrop :--dialog-close element .close, :is(:--link, :--button)[rel="prev"] :--dl element dl, .tag-dl :--figcaption element figcaption, [role="caption"]:is(figure *, [role="figure"] *), .tag-figcaption :--figure element figure, [role="figure"], .tag-figure :--footer element footer, [role="footer"], .tag-footer :--form element form, [role="form"], .tag-form :--group element [role="group"], .tag-group :--h1 element h1, [role="heading"][aria-level="1"], .tag-h1 :--h2 element h2, [role="heading"][aria-level="2"], .tag-h2 :--h3 element h3, [role="heading"][aria-level="3"], .tag-h3 :--h4 element h4, [role="heading"][aria-level="4"], .tag-h4 :--h5 element h5, [role="heading"][aria-level="5"], .tag-h5 :--h6 element h6, [role="heading"][aria-level="6"], .tag-h6 :--header element header, [role="header"], .tag-header :--heading element h1, h2, h3, h4, h5, h6, [role="heading"], .tag-heading :--hgroup element hgroup, .tag-hgroup :--hr element hr, [role="separator"], .tag-hr :--img element img, [role="img"], .tag-img :--ins element ins, [role="insertion"], .tag-ins :--kbd element kbd, .tag-kbd :--label element label, [role="label"], .tag-label :--li element li, [role="listitem"], .tag-li :--link element a, [role="link"], .tag-link :--list element ul, ol, [role="list"], .tag-list :--main element main, [role="main"], .tag-main :--mark element mark, [role="mark"], .tag-mark :--nav element nav, [role="navigation"], .tag-nav :--note element [role="note"], .tag-note :--ol element ol, .tag-ol :--p element p, [role="paragraph"], .tag-p :--popover element [popover], .tag-popover :--popover--open state :popover-open, [aria-expanded="true"] :--pre element pre, .tag-pre :--progress element progress, [role="progressbar"], .tag-progress :--progress--indeterminate state :is(progress):indeterminate, :is([role="progressbar"], .tag-progress):not(:--progress--value) :--progress--value state [value], [aria-valuenow] :--progress-aliases element [role="progressbar"], .tag-progress :--samp element samp, .tag-samp :--search element [role="search"], .tag-search :--section element section, [role="section"], .tag-section :--small element small, .tag-small :--strong element strong, .tag-strong :--sub element sub, .tag-sub :--summary element summary, .tag-summary :--sup element sup, .tag-sup :--table element table, [role="table"], .tag-table :--tbody element tbody, [role="rowgroup"]:has(:--tbody-th, :--td), .tag-tbody :--tbody-th element th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row :--td element td, [role="cell"], [role="gridcell"], .tag-td :--tfoot element tfoot, .tag-tfoot :--th element th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th :--th--sort state [aria-sort] :--th--sort-asc state [aria-sort="ascending"] :--th--sort-desc state [aria-sort="descending"] :--thead element thead, [role="rowgroup"]:has(:--thead-th), .tag-thead :--thead-th element th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col :--tr element tr, [role="row"], .tag-tr :--tree element [role="tree"], .tag-tree :--ul element ul, .tag-ul
Release notes (3)

0.1.3

  • Fix dropdown menus being clipped inside details.dropdown
  • Fix the group focus ring showing while no button is focused
  • Fix the aria-busy Quark sample on the Loading page

0.1.2

  • Fix an issue where the parent of an .absolute dialog was forced to 600 by 600 px with a red background

0.1.1

  • Ship only dist (and declared extras) in the npm tarball; drop build logs, tests and sources
View Source

Beta. The Nucleus Stack is in beta for a few weeks until features are stabilized and optimized.

Thanks — we'll email you when it ships.

Something went wrong. Please try again.