@refrakt-md/skeleton 0.22.0

package/styles/dimensions/sequence.css

@@ -0,0 +1,109 @@
+/* sequence — structure. The counter mechanism + list resets, item gutters, the
+ * numbered counter-circle box placement, and the connected-timeline geometry
+ * (item position/gutter, marker box). The connector *lines* are borders (skin),
+ * as are the marker fill / radius / shadow / colour / type — those live in
+ * Lumina's dimensions/sequence.css. [data-sequence] is uncontested by layouts and
+ * sections, so the split is behavior-preserving. */
+
+/* Numbered — counter circle to the left of each item */
+[data-sequence="numbered"] {
+	counter-reset: sequence;
+	list-style: none;
+	padding-left: 0;
+}
+
+[data-sequence="numbered"] > li {
+	counter-increment: sequence;
+	position: relative;
+	padding-left: 2.25rem;
+}
+
+[data-sequence="numbered"] > li::before {
+	content: counter(sequence);
+	position: absolute;
+	left: 0;
+	top: 0.625rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* Connected vertical — line with dots */
+[data-sequence="connected"] {
+	list-style: none;
+	padding-left: 0;
+}
+
+[data-sequence="connected"] > li {
+	position: relative;
+	padding-left: 2rem;
+	padding-bottom: 2rem;
+	margin-left: 0.375rem;
+}
+
+[data-sequence="connected"] > li:last-child {
+	padding-bottom: 0;
+}
+
+[data-sequence="connected"] > li::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}
+
+/* Connected horizontal — line with dots */
+[data-sequence="connected"][data-sequence-direction="horizontal"] {
+	display: flex;
+	overflow-x: auto;
+}
+
+[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
+	position: relative;
+	min-width: 12rem;
+	padding-top: 1.5rem;
+	padding-left: 0;
+	padding-bottom: 0;
+	margin-left: 0;
+}
+
+[data-sequence="connected"][data-sequence-direction="horizontal"] > li::before {
+	left: 0.5rem;
+	top: -0.4375rem;
+}
+
+/* Plain — no indicators, just ordered semantics */
+[data-sequence="plain"] {
+	list-style: none;
+	padding-left: 0;
+}
+
+/* === Density interaction === */
+
+/* Compact: smaller circles, tighter spacing */
+[data-density="compact"] [data-sequence="numbered"] > li {
+	padding-left: 1.75rem;
+}
+
+[data-density="compact"] [data-sequence="numbered"] > li::before {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+[data-density="compact"] [data-sequence="connected"] > li {
+	padding-bottom: 1rem;
+}
+
+/* Minimal: no indicators, collapsed list */
+[data-density="minimal"] [data-sequence] > li::before {
+	display: none;
+}
+
+[data-density="minimal"] [data-sequence="connected"] > li {
+	padding-left: 0;
+	margin-left: 0;
+}

package/styles/dimensions/state.css

@@ -0,0 +1,28 @@
+/* Interactive State Dimension — structure layer.
+ * The visibility/interaction mechanisms a stateful rune breaks without:
+ * collapse, panel switching, and disabled pointer suppression. The aesthetic
+ * state treatments (active/inactive indicators, selection highlight, dim,
+ * expand animation) live in the skin. */
+
+/* Open/closed collapse */
+[data-state="closed"] > [class*="__body"],
+[data-state="closed"] > [class*="__content"] {
+	display: none;
+}
+[data-state="open"] > [class*="__body"],
+[data-state="open"] > [class*="__content"] {
+	display: block;
+}
+
+/* Tab/toggle panel switching */
+[role="tabpanel"][data-state="inactive"] {
+	display: none;
+}
+[role="tabpanel"][data-state="active"] {
+	display: block;
+}
+
+/* Disabled — non-interactive (the dim is skin) */
+[data-state="disabled"] {
+	pointer-events: none;
+}

package/styles/global.css

@@ -0,0 +1,37 @@
+/* Global base — structure (SPEC-094 §3 / WORK-438). Box model, the consumed-meta
+ * hide, prose/heading/list/table rhythm, and the responsive-image + scroll
+ * mechanisms a page breaks without. Typography, colour, chrome
+ * (scrollbars/selection/focus/reduced-motion), and the surface treatment of
+ * code/pre/tables are skin (Lumina's styles/global.css).
+ *
+ * The prose rhythm (heading/paragraph/list margins) lives here, not in skin, so a
+ * rune's structural zone resets (`__title { margin-top:0 }`,
+ * `__body > :last-child { margin-bottom:0 }`) — also skeleton — can cancel it by
+ * specificity within the same layer. In skin it would beat those resets
+ * regardless of specificity, opening gaps at zone edges. */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body { margin: 0; }
+
+/* Consumed meta tags never render. */
+meta { display: none; }
+
+/* Heading + paragraph vertical rhythm. */
+h1, h2, h3, h4, h5, h6 { margin-top: 2em; margin-bottom: 0.5em; }
+p { margin-top: 0; margin-bottom: 1rem; }
+hr { margin: 2rem 0; }
+
+/* Lists — indent + rhythm (rune list resets override these in-layer). */
+ul, ol { padding-left: 1.5rem; margin-top: 0; margin-bottom: 1rem; }
+li { margin-bottom: 0.25rem; }
+li > p { margin-bottom: 0.5rem; }
+
+/* Responsive image constraint. */
+img { max-width: 100%; height: auto; }
+
+/* Code block scroll + rhythm (its surface treatment is skin). */
+pre { overflow-x: auto; margin: 1.5rem 0; }
+
+/* Table layout + rhythm (cell treatment is skin). */
+table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }

package/styles/layouts/blog.css

@@ -0,0 +1,38 @@
+/* blog layout — structure. The sticky header bar + order + brand box, the layout
+ * container width cap, the has-sidebar grid, the index/article width caps, the empty
+ * hide, the posts flex, the card block, the meta/tags flex rows, the sticky sidebar
+ * + list reset, and the responsive grid/sidebar reflow. Header height var, colours,
+ * borders, type, padding, and gaps are skin. */
+.rf-blog-header { position: sticky; top: 0; z-index: 100; }
+.rf-blog-header__inner { display: flex; align-items: center; }
+.rf-blog-header__inner .rf-search-trigger { margin-left: auto; }
+.rf-blog-header__inner p ~ p { order: 1; }
+.rf-blog-header__inner .rf-mobile-menu-btn { order: 2; }
+.rf-blog-header a { display: inline-block; }
+.rf-blog-header p:first-child a { display: inline-flex; align-items: center; }
+.rf-blog-header img,
+.rf-blog-header p:first-child a > .rf-icon { height: 2rem; width: 2rem; }
+.rf-blog-header p:first-child a > .rf-icon { display: inline-block; }
+.rf-blog-header__inner p ~ p a svg { width: 1.1rem; height: 1.1rem; }
+.rf-blog { max-width: 72rem; margin: 0 auto; }
+.rf-blog--has-sidebar {
+	display: grid;
+	grid-template-columns: 1fr 16rem;
+	align-items: start;
+}
+.rf-blog-index { max-width: 42rem; }
+.rf-blog-index__body:empty { display: none; }
+.rf-blog-index__posts { display: flex; flex-direction: column; }
+.rf-blog-card { display: block; }
+.rf-blog-card__meta { display: flex; align-items: center; }
+.rf-blog-card__tags { display: flex; flex-wrap: wrap; }
+.rf-blog-article { max-width: 42rem; }
+.rf-blog-article__meta { display: flex; align-items: center; }
+.rf-blog-article__tags { display: flex; flex-wrap: wrap; }
+.rf-blog-sidebar { position: sticky; top: 2.5rem; }
+.rf-blog-sidebar ul { list-style: none; }
+@media (max-width: 768px) {
+	.rf-blog-header__inner p ~ p { display: none; }
+	.rf-blog--has-sidebar { grid-template-columns: 1fr; }
+	.rf-blog-sidebar { position: static; }
+}

package/styles/layouts/default.css

@@ -0,0 +1,51 @@
+/* default layout — structure. The sticky header bar + order, the brand/logo box,
+ * the named-track content grid + width-variant placement, the container context,
+ * and the footer flex + width cap. Colours, borders, type, padding, and the section
+ * rhythm/inset margins are skin (Lumina's layouts/default.css). */
+.rf-header { position: sticky; top: 0; z-index: 100; }
+.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-page-content > article {
+	display: grid;
+	grid-template-columns:
+		[full-start] 1fr
+		[wide-start] minmax(0, var(--rf-wide-inset, 8rem))
+		[content-start] min(var(--rf-content-max), 100% - var(--rf-content-gutter) * 2)
+		[content-end] minmax(0, var(--rf-wide-inset, 8rem))
+		[wide-end] 1fr
+		[full-end];
+}
+.rf-page-content > article > * { grid-column: content; }
+.rf-page-content > article > [data-width="compact"] {
+	max-width: var(--rf-width-compact, 30rem);
+	margin-inline: auto;
+}
+.rf-page-content > article > [data-width="narrow"] {
+	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 > :is([data-tint], [data-color-scheme]):not([data-width]) {
+	grid-column: full;
+}
+@media (max-width: 768px) {
+	.rf-header__inner p ~ p { display: none; }
+}
+.rf-footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.rf-footer > * { width: 100%; max-width: 80rem; }

package/styles/layouts/docs.css

@@ -0,0 +1,82 @@
+/* docs layout — structure. Fixed header bar + order + brand box, the sidebar/content
+ * flex row, the sticky sidebar box + fixed-header clearance, the content flex +
+ * container + width-variant grid, the has-toc flex + sticky TOC, the scroll-padding
+ * offset, the mobile toolbar flex + breadcrumb ellipsis, and the responsive hides.
+ * Colours, borders, type, padding, scrollbar chrome, and content padding are skin. */
+.rf-docs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
+.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-sidebar {
+	position: sticky;
+	top: 3.125rem;
+	align-self: flex-start;
+	flex-shrink: 0;
+	width: 240px;
+	height: calc(100vh - 3.125rem);
+	overflow-y: auto;
+	z-index: 5;
+}
+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--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__body > div > article {
+	display: grid;
+	grid-template-columns:
+		[wide-start] minmax(var(--rf-content-padding, 2.5rem), var(--rf-docs-wide-inset, 3rem))
+		[content-start] minmax(0, 1fr)
+		[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 > [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-toc {
+	width: 220px;
+	flex-shrink: 0;
+	position: sticky;
+	top: 5.75rem;
+	align-self: flex-start;
+	max-height: calc(100vh - 5.75rem);
+	overflow-y: auto;
+}
+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; }
+@media (max-width: 1100px) {
+	.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-toolbar { display: flex; position: sticky; top: calc(3.5rem - 1px); z-index: 100; }
+	.rf-mobile-panel--nav { top: calc(6.25rem - 1px); }
+	.rf-docs-sidebar { display: none; }
+}

package/styles/layouts/mobile.css

@@ -0,0 +1,39 @@
+/* mobile — structure. The menu-button hide/show + icon-state swaps, the docked
+ * 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-panel {
+	display: none;
+	position: fixed;
+	top: var(--rf-header-height, 3.5rem);
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	max-width: 100vw;
+	z-index: 99;
+	overflow-x: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.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; }
+@media (max-width: 768px) {
+	.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; }
+}

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

@@ -0,0 +1,4 @@
+/* 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; }

package/styles/layouts/plan.css

@@ -0,0 +1,103 @@
+/* plan layout — structure. The dashboard grid, the fixed sidebar box + content
+ * offset, the sidebar trigger/title/status flex + disclosure, the link blocks +
+ * flex sizing, the content flex/has-toc + sticky TOC, the sticky mobile toolbar, the
+ * section-nav dropdown positioning + open, and the responsive hides/reflows.
+ * Colours, borders, radii, type, padding, scrollbar chrome, and the disclosure
+ * glyph are skin. */
+.rf-plan-dashboard {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+}
+.rf-plan-dashboard__section { min-width: 0; }
+.rf-plan-sidebar {
+	position: fixed;
+	inset-block: 0;
+	inset-inline-start: 0;
+	width: var(--plan-sidebar-width, 240px);
+	overflow-y: auto;
+}
+.rf-plan-sidebar__title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.rf-plan-sidebar__search-trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+.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__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__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-toc {
+	width: 200px;
+	flex-shrink: 0;
+	position: sticky;
+	top: var(--rf-spacing-lg, 1.5rem);
+	align-self: flex-start;
+	max-height: calc(100vh - var(--rf-spacing-xl, 2rem) * 2);
+	overflow-y: auto;
+}
+.rf-plan-toolbar {
+	display: none;
+	align-items: center;
+	position: sticky;
+	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-section-nav {
+	display: none;
+	position: absolute;
+	top: 100%;
+	right: 0.5rem;
+	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; }
+@media (max-width: 64rem) {
+	.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; }
+}

package/styles/layouts/search.css

@@ -0,0 +1,80 @@
+/* search — structure. The trigger inline-flex + icon box, the kbd box, the dialog
+ * modal positioning + open flex column, the header/footer flex, the input flex, the
+ * body scroll, the result/excerpt blocks, the native-clear hide, and the mobile
+ * full-screen dialog + footer hide. Surface chrome, borders, radii, type, and
+ * padding are skin. */
+.rf-search-trigger {
+	display: inline-flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+.rf-search-trigger svg {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+}
+.rf-search-trigger__label { pointer-events: none; }
+.rf-search-trigger__kbd {
+	display: inline-flex;
+	align-items: center;
+}
+.rf-search-dialog {
+	position: fixed;
+	top: 15vh;
+	left: 50%;
+	transform: translateX(-50%);
+	width: min(560px, calc(100vw - 2rem));
+	max-height: 70vh;
+	overflow: hidden;
+}
+.rf-search-dialog[open] {
+	display: flex;
+	flex-direction: column;
+}
+.rf-search-dialog__header {
+	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__esc {
+	display: inline-flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+.rf-search-dialog__body {
+	flex: 1;
+	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-dialog__footer {
+	display: flex;
+	align-items: center;
+}
+.rf-search-dialog__footer kbd {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 1.25rem;
+}
+@media (max-width: 768px) {
+	.rf-search-trigger__label,
+	.rf-search-trigger__kbd { display: none; }
+	.rf-search-dialog[open] {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		transform: none;
+		width: 100%;
+		height: 100vh;
+		height: 100dvh;
+		max-height: 100vh;
+		max-height: 100dvh;
+	}
+	.rf-search-dialog__footer { display: none; }
+}