@use "/shell" as *;
#release-notice {
@delay 3000 {
is-open: "";
}
}
provider-fetch[api-url*="package-metas/index.json"][is-success] {
$package-indices: prop("provision").body;
.package-links {
[bind-elements] ul:not(ul ul) {
content: iterate(getPackagesByType($package-indices, "kit-element"));
}
[bind-element-bases] ul:not(ul ul) {
content: iterate(getPackagesByType($package-indices, "element-base"));
}
[bind-tools] ul:not(ul ul) {
content: iterate(getPackagesByType($package-indices, "tool"));
}
/* the standalone libraries: same rows, rendered flat (shell.css) */
[bind-libraries] ul:not(ul ul) {
content: iterate(getPackagesByType($package-indices, "library"));
}
ul:not(ul ul) > li {
$pkg: item.shortName;
> spa-a {
route-href: "/nucleus/packages/#{item.shortName}";
content: item.shortName;
}
}
/* No specificity, so this has to follow the rule above */
[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: "/nucleus/packages/#{$pkg}/#{item.name}";
content: item.title;
}
}
details:not(:has(spa-a[is-active])) {
open: none;
}
}
}
}
spa-route {
$route: prop("provision");
/* paramless routes name their guide in markup (the docs home); /nucleus/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;
}