@refrakt-md/skeleton 0.32.0 → 0.34.0

package/styles/layouts/default.css

@@ -5,20 +5,54 @@
 /* Height pinned to --rf-header-height so the docked mobile nav panel
    (top: var(--rf-header-height)) lines up exactly with the header bottom
    regardless of brand/logo size. */
-.rf-header { position: sticky; top: 0; z-index: 100; height: var(--rf-header-height, 3.5rem); }
-.rf-header__inner { display: flex; align-items: center; }
-.rf-header__inner .rf-search-trigger { margin-left: auto; order: 1; }
-.rf-header__inner > rf-nav { order: 3; }
-.rf-header__inner p ~ p { order: 1; }
-.rf-header__inner .rf-mobile-menu-btn { order: 3; }
-.rf-header a { display: inline-block; }
-.rf-header p:first-child a { display: inline-flex; align-items: center; }
+.rf-header {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	height: var(--rf-header-height, 3.5rem);
+}
+.rf-header__inner {
+	display: flex;
+	align-items: center;
+}
+.rf-header__inner .rf-search-trigger {
+	margin-left: auto;
+	order: 1;
+}
+.rf-header__inner > rf-nav {
+	order: 3;
+}
+.rf-header__inner p ~ p {
+	order: 1;
+}
+.rf-header__inner .rf-mobile-menu-btn {
+	order: 3;
+}
+.rf-header a {
+	display: inline-block;
+}
+.rf-header p:first-child a {
+	display: inline-flex;
+	align-items: center;
+}
 .rf-header img,
-.rf-header p:first-child a > .rf-icon { height: 2rem; width: 2rem; }
-.rf-header img { width: auto; }
-.rf-header p:first-child a > .rf-icon { display: inline-block; }
-.rf-header__inner p ~ p a svg { width: 1.1rem; height: 1.1rem; }
-.rf-page-content { container-type: inline-size; }
+.rf-header p:first-child a > .rf-icon {
+	height: 2rem;
+	width: 2rem;
+}
+.rf-header img {
+	width: auto;
+}
+.rf-header p:first-child a > .rf-icon {
+	display: inline-block;
+}
+.rf-header__inner p ~ p a svg {
+	width: 1.1rem;
+	height: 1.1rem;
+}
+.rf-page-content {
+	container-type: inline-size;
+}
 .rf-page-content > article {
 	display: grid;
 	grid-template-columns:
@@ -29,7 +63,9 @@
 		[wide-end] 1fr
 		[full-end];
 }
-.rf-page-content > article > * { grid-column: content; }
+.rf-page-content > article > * {
+	grid-column: content;
+}
 .rf-page-content > article > [data-width="compact"] {
 	max-width: var(--rf-width-compact, 30rem);
 	margin-inline: auto;
@@ -38,17 +74,26 @@
 	max-width: var(--rf-width-narrow, 40rem);
 	margin-inline: auto;
 }
-.rf-page-content > article > [data-width="wide"] { grid-column: wide; }
-.rf-page-content > article > [data-width="full"] { grid-column: full; }
+.rf-page-content > article > [data-width="wide"] {
+	grid-column: wide;
+}
+.rf-page-content > article > [data-width="full"] {
+	grid-column: full;
+}
 .rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
 	grid-column: full;
 }
 @media (max-width: 768px) {
-	.rf-header__inner p ~ p { display: none; }
+	.rf-header__inner p ~ p {
+		display: none;
+	}
 }
 .rf-footer {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
-.rf-footer > * { width: 100%; max-width: 80rem; }
+.rf-footer > * {
+	width: 100%;
+	max-width: 80rem;
+}

package/styles/layouts/docs.css

@@ -7,19 +7,54 @@
    toolbar and the docked mobile nav panel can offset against a known value —
    otherwise a header that renders shorter than the assumed height leaves a
    gap the page content scrolls through, and a taller one overlaps. */
-.rf-docs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--rf-header-height, 3.5rem); }
-.rf-docs-header__inner { display: flex; align-items: center; }
-.rf-docs-header__inner .rf-search-trigger { margin-left: auto; order: 1; }
-.rf-docs-header__inner > rf-nav { order: 3; }
-.rf-docs-header__inner p ~ p { order: 1; }
-.rf-docs-header__inner .rf-mobile-menu-btn { order: 3; }
-.rf-docs-header a { display: inline-block; }
-.rf-docs-header p:first-child a { display: inline-flex; align-items: center; }
+.rf-docs-header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 10;
+	height: var(--rf-header-height, 3.5rem);
+}
+.rf-docs-header__inner {
+	display: flex;
+	align-items: center;
+}
+.rf-docs-header__inner .rf-search-trigger {
+	margin-left: auto;
+	order: 1;
+}
+.rf-docs-header__inner > rf-nav {
+	order: 3;
+}
+.rf-docs-header__inner p ~ p {
+	order: 1;
+}
+.rf-docs-header__inner .rf-mobile-menu-btn {
+	order: 3;
+}
+.rf-docs-header a {
+	display: inline-block;
+}
+.rf-docs-header p:first-child a {
+	display: inline-flex;
+	align-items: center;
+}
 .rf-docs-header img,
-.rf-docs-header p:first-child a > .rf-icon { height: 2rem; width: 2rem; }
-.rf-docs-header p:first-child a > .rf-icon { display: inline-block; }
-.rf-docs-header__inner p ~ p a svg { width: 1.1rem; height: 1.1rem; }
-.rf-docs-body { display: flex; align-items: flex-start; }
+.rf-docs-header p:first-child a > .rf-icon {
+	height: 2rem;
+	width: 2rem;
+}
+.rf-docs-header p:first-child a > .rf-icon {
+	display: inline-block;
+}
+.rf-docs-header__inner p ~ p a svg {
+	width: 1.1rem;
+	height: 1.1rem;
+}
+.rf-docs-body {
+	display: flex;
+	align-items: flex-start;
+}
 .rf-docs-sidebar {
 	position: sticky;
 	top: 3.125rem;
@@ -30,18 +65,26 @@
 	overflow-y: auto;
 	z-index: 5;
 }
-html:has(.rf-docs-header) .rf-docs-sidebar { margin-top: 3.125rem; }
+html:has(.rf-docs-header) .rf-docs-sidebar {
+	margin-top: 3.125rem;
+}
 .rf-docs-content {
 	flex: 1;
 	min-width: 0;
 	container-type: inline-size;
 }
-.rf-docs-content__inner { max-width: 60rem; margin: 0 auto; }
+.rf-docs-content__inner {
+	max-width: 60rem;
+	margin: 0 auto;
+}
 .rf-docs-content__inner--has-toc {
 	display: flex;
 	max-width: calc(60rem + 220px + 6rem);
 }
-.rf-docs-content__inner--has-toc .rf-docs-content__body { flex: 1; min-width: 0; }
+.rf-docs-content__inner--has-toc .rf-docs-content__body {
+	flex: 1;
+	min-width: 0;
+}
 .rf-docs-content__body > div > article {
 	display: grid;
 	grid-template-columns:
@@ -50,11 +93,21 @@ html:has(.rf-docs-header) .rf-docs-sidebar { margin-top: 3.125rem; }
 		[content-end] minmax(var(--rf-content-padding, 2.5rem), var(--rf-docs-wide-inset, 3rem))
 		[wide-end];
 }
-.rf-docs-content__body > div > article > * { grid-column: content; }
+.rf-docs-content__body > div > article > * {
+	grid-column: content;
+}
 .rf-docs-content__body > div > article > [data-width="wide"],
-.rf-docs-content__body > div > article > [data-width="full"] { grid-column: wide; }
-.rf-docs-content__body > div > article > [data-width="compact"] { max-width: var(--rf-width-compact, 30rem); margin-inline: auto; }
-.rf-docs-content__body > div > article > [data-width="narrow"] { max-width: var(--rf-width-narrow, 40rem); margin-inline: auto; }
+.rf-docs-content__body > div > article > [data-width="full"] {
+	grid-column: wide;
+}
+.rf-docs-content__body > div > article > [data-width="compact"] {
+	max-width: var(--rf-width-compact, 30rem);
+	margin-inline: auto;
+}
+.rf-docs-content__body > div > article > [data-width="narrow"] {
+	max-width: var(--rf-width-narrow, 40rem);
+	margin-inline: auto;
+}
 .rf-docs-toc {
 	width: 220px;
 	flex-shrink: 0;
@@ -64,33 +117,62 @@ html:has(.rf-docs-header) .rf-docs-sidebar { margin-top: 3.125rem; }
 	max-height: calc(100vh - 5.75rem);
 	overflow-y: auto;
 }
-html:has(.rf-docs-header) { scroll-padding-top: 5rem; }
+html:has(.rf-docs-header) {
+	scroll-padding-top: 5rem;
+}
 .rf-docs-toolbar {
 	display: none;
 	align-items: center;
 	max-width: 100%;
 	overflow: hidden;
 }
-.rf-docs-toolbar__hamburger { flex-shrink: 0; }
-.rf-docs-toolbar__breadcrumb { flex: 1 1 0; min-width: 0; overflow: hidden; }
+.rf-docs-toolbar__hamburger {
+	flex-shrink: 0;
+}
+.rf-docs-toolbar__breadcrumb {
+	flex: 1 1 0;
+	min-width: 0;
+	overflow: hidden;
+}
 @media (max-width: 1100px) {
-	.rf-docs-toc { display: none; }
-	.rf-docs-content__inner--has-toc { display: block; max-width: 60rem; }
+	.rf-docs-toc {
+		display: none;
+	}
+	.rf-docs-content__inner--has-toc {
+		display: block;
+		max-width: 60rem;
+	}
 }
 @media (max-width: 768px) {
-	.rf-docs-header { position: sticky; top: 0; }
-	.rf-docs-header__inner p ~ p { display: none; }
+	.rf-docs-header {
+		position: sticky;
+		top: 0;
+	}
+	.rf-docs-header__inner p ~ p {
+		display: none;
+	}
 	/* Pin the toolbar to a known height (border-box, so padding + border are
 	   included) so the docked nav panel can offset against it exactly. A
 	   content-driven height let the panel's hardcoded guess undershoot the real
 	   toolbar, and the toolbar's higher z-index then covered the panel's first
 	   link. */
-	.rf-docs-toolbar { display: flex; position: sticky; top: var(--rf-header-height, 3.5rem); z-index: 100; height: var(--rf-docs-toolbar-height, 3.25rem); box-sizing: border-box; }
+	.rf-docs-toolbar {
+		display: flex;
+		position: sticky;
+		top: var(--rf-header-height, 3.5rem);
+		z-index: 100;
+		height: var(--rf-docs-toolbar-height, 3.25rem);
+		box-sizing: border-box;
+	}
 	/* Two classes (0,2,0) so this beats the base `.rf-mobile-panel { top }` rule
 	   in mobile.css — both live in @layer skeleton and mobile.css is imported
 	   later, so an equal-specificity single-class override would lose on source
 	   order and the panel would dock under the site header (hiding its first
 	   link behind the toolbar) instead of under the toolbar. */
-	.rf-mobile-panel.rf-mobile-panel--nav { top: calc(var(--rf-header-height, 3.5rem) + var(--rf-docs-toolbar-height, 3.25rem)); }
-	.rf-docs-sidebar { display: none; }
+	.rf-mobile-panel.rf-mobile-panel--nav {
+		top: calc(var(--rf-header-height, 3.5rem) + var(--rf-docs-toolbar-height, 3.25rem));
+	}
+	.rf-docs-sidebar {
+		display: none;
+	}
 }

package/styles/layouts/mobile.css

@@ -2,10 +2,18 @@
  * panel positioning + scroll, the panel-link block display, the panel open, and the
  * mobile media-query reveal/hide of the button + inline nav + duplicated brand.
  * Button/link chrome, padding, and type are skin. */
-.rf-mobile-menu-btn { display: none; }
-.rf-mobile-menu-btn__icon-close { display: none; }
-.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-open { display: none; }
-.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-close { display: inline; }
+.rf-mobile-menu-btn {
+	display: none;
+}
+.rf-mobile-menu-btn__icon-close {
+	display: none;
+}
+.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-open {
+	display: none;
+}
+.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-close {
+	display: inline;
+}
 .rf-mobile-panel {
 	display: none;
 	position: fixed;
@@ -20,20 +28,28 @@
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
 }
-.rf-mobile-panel__nav img { display: none; }
+.rf-mobile-panel__nav img {
+	display: none;
+}
 .rf-mobile-panel__nav a,
 .rf-mobile-panel .rf-nav--menubar .rf-nav__top-level .rf-nav-item__link,
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link,
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
 	display: block;
 }
-.rf-mobile-panel[data-open] { display: block; }
+.rf-mobile-panel[data-open] {
+	display: block;
+}
 @media (max-width: 768px) {
-	.rf-mobile-menu-btn { display: block; }
+	.rf-mobile-menu-btn {
+		display: block;
+	}
 	.rf-header__inner > rf-nav,
 	.rf-docs-header__inner > rf-nav,
 	.rf-blog-header__inner > rf-nav {
 		display: none;
 	}
-	.rf-mobile-panel__nav > p:first-child { display: none; }
+	.rf-mobile-panel__nav > p:first-child {
+		display: none;
+	}
 }

package/styles/layouts/on-this-page.css

@@ -1,4 +1,8 @@
 /* on-this-page — structure. The list reset + the block link box. Type, colours,
  * indents, and the active rail are skin. */
-.rf-on-this-page__list { list-style: none; }
-.rf-on-this-page__item a { display: block; }
+.rf-on-this-page__list {
+	list-style: none;
+}
+.rf-on-this-page__item a {
+	display: block;
+}

package/styles/layouts/plan.css

@@ -8,7 +8,9 @@
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
 }
-.rf-plan-dashboard__section { min-width: 0; }
+.rf-plan-dashboard__section {
+	min-width: 0;
+}
 .rf-plan-sidebar {
 	position: fixed;
 	inset-block: 0;
@@ -26,38 +28,81 @@
 	align-items: center;
 	justify-content: center;
 }
-.rf-plan-sidebar__search-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
+.rf-plan-sidebar__search-trigger svg {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+}
 .rf-plan-sidebar__status-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	width: 100%;
 }
-.rf-plan-sidebar__status-header::before { content: '\25B8'; display: inline-block; }
-.rf-plan-sidebar__status-header[aria-expanded="true"]::before { transform: rotate(90deg); }
-.rf-plan-sidebar__status-label { flex: 1; }
-.rf-plan-sidebar__status-count { min-width: 1.25rem; }
-.rf-plan-sidebar__status-items[hidden] { display: none; }
-.rf-plan-sidebar__link { display: block; }
-.rf-plan-sidebar__link--dashboard { display: flex; align-items: center; }
-.rf-plan-sidebar__dashboard-icon { flex-shrink: 0; }
-.rf-plan-sidebar__status-link { display: flex; align-items: center; justify-content: space-between; }
-.rf-plan-sidebar__blocker-icon { margin-left: auto; flex-shrink: 0; }
-.rf-plan-sidebar__link .rf-plan-sidebar__view-label { flex: 1; overflow: hidden; }
-.rf-plan-sidebar__link .rf-plan-sidebar__view-count { min-width: 1.25rem; }
+.rf-plan-sidebar__status-header::before {
+	content: "\25B8";
+	display: inline-block;
+}
+.rf-plan-sidebar__status-header[aria-expanded="true"]::before {
+	transform: rotate(90deg);
+}
+.rf-plan-sidebar__status-label {
+	flex: 1;
+}
+.rf-plan-sidebar__status-count {
+	min-width: 1.25rem;
+}
+.rf-plan-sidebar__status-items[hidden] {
+	display: none;
+}
+.rf-plan-sidebar__link {
+	display: block;
+}
+.rf-plan-sidebar__link--dashboard {
+	display: flex;
+	align-items: center;
+}
+.rf-plan-sidebar__dashboard-icon {
+	flex-shrink: 0;
+}
+.rf-plan-sidebar__status-link {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.rf-plan-sidebar__blocker-icon {
+	margin-left: auto;
+	flex-shrink: 0;
+}
+.rf-plan-sidebar__link .rf-plan-sidebar__view-label {
+	flex: 1;
+	overflow: hidden;
+}
+.rf-plan-sidebar__link .rf-plan-sidebar__view-count {
+	min-width: 1.25rem;
+}
 .rf-plan-sidebar__group[data-type="views"] .rf-plan-sidebar__link {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 }
-.rf-plan-main { margin-inline-start: var(--plan-sidebar-width, 240px); }
+.rf-plan-main {
+	margin-inline-start: var(--plan-sidebar-width, 240px);
+}
 .rf-plan-main__inner--has-toc {
 	display: flex;
 	max-width: calc(60rem + 200px + 2rem);
 	margin: 0 auto;
 }
-.rf-plan-main__inner--has-toc .rf-plan-main__body { flex: 1; min-width: 0; max-width: 60rem; }
-.rf-plan-main__body { max-width: 60rem; margin: 0 auto; }
+.rf-plan-main__inner--has-toc .rf-plan-main__body {
+	flex: 1;
+	min-width: 0;
+	max-width: 60rem;
+}
+.rf-plan-main__body {
+	max-width: 60rem;
+	margin: 0 auto;
+}
 .rf-plan-toc {
 	width: 200px;
 	flex-shrink: 0;
@@ -74,9 +119,16 @@
 	top: 0;
 	z-index: 100;
 }
-.rf-plan-toolbar__hamburger { flex-shrink: 0; }
-.rf-plan-toolbar__title { flex: 1; min-width: 0; }
-.rf-plan-toolbar__section-nav-toggle { flex-shrink: 0; }
+.rf-plan-toolbar__hamburger {
+	flex-shrink: 0;
+}
+.rf-plan-toolbar__title {
+	flex: 1;
+	min-width: 0;
+}
+.rf-plan-toolbar__section-nav-toggle {
+	flex-shrink: 0;
+}
 .rf-section-nav {
 	display: none;
 	position: absolute;
@@ -85,19 +137,43 @@
 	min-width: 14rem;
 	z-index: 200;
 }
-.rf-section-nav[data-open] { display: block; }
-.rf-section-nav__list { list-style: none; }
-.rf-section-nav__link { display: block; }
+.rf-section-nav[data-open] {
+	display: block;
+}
+.rf-section-nav__list {
+	list-style: none;
+}
+.rf-section-nav__link {
+	display: block;
+}
 @media (max-width: 64rem) {
-	.rf-plan-toc { display: none; }
-	.rf-plan-main__inner--has-toc { display: block; }
+	.rf-plan-toc {
+		display: none;
+	}
+	.rf-plan-main__inner--has-toc {
+		display: block;
+	}
 }
 @media (max-width: 48rem) {
-	html:has(.rf-plan-toolbar) { scroll-padding-top: 3.5rem; }
-	.rf-plan-toolbar { display: flex; }
-	.rf-plan-sidebar { display: none; }
-	.rf-mobile-panel .rf-plan-sidebar__search-trigger { display: none; }
-	.rf-layout-plan .rf-mobile-panel--nav { top: 3.0625rem; }
-	.rf-plan-main { margin-inline-start: 0; }
-	.rf-plan-dashboard { grid-template-columns: 1fr; }
+	html:has(.rf-plan-toolbar) {
+		scroll-padding-top: 3.5rem;
+	}
+	.rf-plan-toolbar {
+		display: flex;
+	}
+	.rf-plan-sidebar {
+		display: none;
+	}
+	.rf-mobile-panel .rf-plan-sidebar__search-trigger {
+		display: none;
+	}
+	.rf-layout-plan .rf-mobile-panel--nav {
+		top: 3.0625rem;
+	}
+	.rf-plan-main {
+		margin-inline-start: 0;
+	}
+	.rf-plan-dashboard {
+		grid-template-columns: 1fr;
+	}
 }

package/styles/layouts/search.css

@@ -13,7 +13,9 @@
 	height: 16px;
 	flex-shrink: 0;
 }
-.rf-search-trigger__label { pointer-events: none; }
+.rf-search-trigger__label {
+	pointer-events: none;
+}
 .rf-search-trigger__kbd {
 	display: inline-flex;
 	align-items: center;
@@ -35,9 +37,15 @@
 	display: flex;
 	align-items: center;
 }
-.rf-search-dialog__icon { flex-shrink: 0; }
-.rf-search-dialog__input { flex: 1; }
-.rf-search-dialog__input::-webkit-search-cancel-button { display: none; }
+.rf-search-dialog__icon {
+	flex-shrink: 0;
+}
+.rf-search-dialog__input {
+	flex: 1;
+}
+.rf-search-dialog__input::-webkit-search-cancel-button {
+	display: none;
+}
 .rf-search-dialog__esc {
 	display: inline-flex;
 	align-items: center;
@@ -48,9 +56,15 @@
 	overflow-y: auto;
 	overscroll-behavior: contain;
 }
-.rf-search-result { display: block; }
-.rf-search-result__title { display: block; }
-.rf-search-result__excerpt { display: block; }
+.rf-search-result {
+	display: block;
+}
+.rf-search-result__title {
+	display: block;
+}
+.rf-search-result__excerpt {
+	display: block;
+}
 .rf-search-dialog__footer {
 	display: flex;
 	align-items: center;
@@ -63,7 +77,9 @@
 }
 @media (max-width: 768px) {
 	.rf-search-trigger__label,
-	.rf-search-trigger__kbd { display: none; }
+	.rf-search-trigger__kbd {
+		display: none;
+	}
 	.rf-search-dialog[open] {
 		top: 0;
 		left: 0;
@@ -76,5 +92,7 @@
 		max-height: 100vh;
 		max-height: 100dvh;
 	}
-	.rf-search-dialog__footer { display: none; }
+	.rf-search-dialog__footer {
+		display: none;
+	}
 }