@refrakt-md/skeleton 0.22.0

package/styles/runes/mockup.css

@@ -0,0 +1,144 @@
+/* mockup — structure. The generic device-frame layout primitives: the root sizing
+ * + container context, the fit-mode scaling, the frame/viewport/bezel layout, and
+ * the positioning/flex of the shared chrome parts (notch, status bar, home
+ * indicator, title bar, traffic lights, address bar, keyboard, trackpad). The
+ * per-device dimensions + frame chrome (border/radius/bezel colours/glyphs) and
+ * the device-specific overrides are skin (Lumina's styles/runes/mockup.css) — a
+ * cohesive "device skin" that overrides this generic layout by specificity/order. */
+
+.rf-mockup {
+	display: block;
+	width: 100%;
+	container-type: inline-size;
+}
+.rf-showcase[data-place] .rf-mockup {
+	width: auto;
+	max-width: 100%;
+	container-type: normal;
+}
+.rf-showcase[data-place] .rf-mockup__frame {
+	zoom: var(--mockup-scale, 1);
+}
+
+/* Fit mode: none (native pixel size + scale transform). */
+.rf-mockup[data-fit="none"] {
+	display: inline-block;
+	width: auto;
+	container-type: normal;
+}
+.rf-mockup[data-fit="none"] .rf-mockup__frame {
+	zoom: normal;
+	transform: scale(var(--mockup-scale, 1));
+	transform-origin: top center;
+	margin-inline: 0;
+}
+.rf-mockup[data-fit="none"].rf-mockup--browser,
+.rf-mockup[data-fit="none"].rf-mockup--browser-dark {
+	display: block;
+}
+
+.rf-mockup__frame {
+	position: relative;
+	margin-inline: auto;
+	zoom: calc(var(--mockup-scale, 1) * min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi)))));
+}
+
+.rf-mockup__viewport {
+	overflow: auto;
+}
+.rf-mockup__viewport img {
+	display: block;
+}
+
+.rf-mockup__bezel {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+/* Notch positioning (per-device size + colour is skin; iPhone SE re-anchors it). */
+.rf-mockup__notch {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2;
+}
+.rf-mockup__notch[data-notch="dynamic-island"] {
+	width: 120px;
+	height: 34px;
+	top: 12px;
+}
+.rf-mockup__notch[data-notch="classic"] {
+	width: 150px;
+	height: 28px;
+	top: 0;
+}
+.rf-mockup__notch[data-notch="punch-hole"] {
+	width: 12px;
+	height: 12px;
+	top: 16px;
+}
+
+.rf-mockup__status-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 44px;
+	position: relative;
+	z-index: 1;
+}
+
+.rf-mockup__home-indicator {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 32px;
+}
+.rf-mockup__home-indicator::after {
+	content: '';
+	display: block;
+	width: 134px;
+	height: 5px;
+}
+
+.rf-mockup__title-bar {
+	display: flex;
+	align-items: center;
+	min-height: 2.5rem;
+}
+
+.rf-mockup__traffic-lights {
+	display: flex;
+	flex-shrink: 0;
+}
+.rf-mockup__traffic-light {
+	display: block;
+	width: 12px;
+	height: 12px;
+}
+
+.rf-mockup__address-bar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	max-width: 60%;
+	min-height: 1.75rem;
+}
+.rf-mockup__url {
+	overflow: hidden;
+}
+
+.rf-mockup__keyboard {
+	display: flex;
+	justify-content: center;
+}
+.rf-mockup__trackpad {
+	width: 40%;
+	height: 6px;
+}
+
+/* Context: centred in a grid cell. */
+.rf-grid .rf-mockup {
+	justify-self: center;
+}

package/styles/runes/nav.css

@@ -0,0 +1,258 @@
+/* nav — structure. The layout systems behind each nav mode — sidebar list reset +
+ * link box, collapsible group disclosure, the menubar flex bar + dropdown
+ * show/hide mechanism, the columns/cards grids, the strip flex, and the responsive
+ * reflows. Type, colour, spacing, borders, radii, the dropdown chrome, and the
+ * chevron glyph stay skin (Lumina's styles/runes/nav.css). */
+
+.rf-nav ul { list-style: none; }
+.rf-nav-item__link { display: block; }
+
+/* Inline-badge items sit on one row. */
+.rf-nav-item:has(> .rf-badge[data-name="badge"]) {
+	display: flex;
+	align-items: center;
+}
+.rf-nav-item:has(> .rf-badge[data-name="badge"]) > .rf-nav-item__link {
+	flex: 0 1 auto;
+	min-width: 0;
+}
+
+/* ── Collapsible groups ── */
+.rf-nav--collapsible .rf-nav-group h2,
+.rf-nav--collapsible .rf-nav-group h3 {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.rf-nav--collapsible .rf-nav-group h2::after,
+.rf-nav--collapsible .rf-nav-group h3::after {
+	content: '';
+	width: 0.5rem;
+	height: 0.5rem;
+	transform: rotate(45deg);
+}
+.rf-nav--collapsible .rf-nav-group > .rf-nav-group__panel,
+.rf-nav--collapsible .rf-nav-group > ul,
+.rf-nav--collapsible .rf-nav-group > ol {
+	overflow: hidden;
+}
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > .rf-nav-group__panel,
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ul,
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ol {
+	height: 0;
+}
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] h2::after,
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] h3::after {
+	transform: rotate(-45deg);
+}
+
+/* ── Menubar layout ── */
+.rf-nav--menubar > .rf-nav__top-level > ul,
+.rf-nav--menubar > .rf-nav__top-level ul {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+.rf-nav--menubar > .rf-nav__top-level .rf-nav-item__link {
+	display: inline-block;
+}
+.rf-nav--menubar .rf-nav-group {
+	position: relative;
+	display: inline-block;
+}
+.rf-nav--menubar .rf-nav-group > .rf-nav-group__panel {
+	display: block;
+	position: absolute;
+	top: 100%;
+	right: 0;
+	left: auto;
+	min-width: 14rem;
+	z-index: 50;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transform: translateY(-4px);
+}
+.rf-nav--menubar .rf-nav-group:hover > .rf-nav-group__panel,
+.rf-nav--menubar .rf-nav-group:focus-within > .rf-nav-group__panel,
+.rf-nav--menubar .rf-nav-group[data-open="true"] > .rf-nav-group__panel {
+	opacity: 1;
+	visibility: visible;
+	pointer-events: auto;
+	transform: translateY(0);
+}
+.rf-nav--menubar .rf-nav-group__panel ul { list-style: none; }
+.rf-nav--menubar .rf-nav-group__panel > ul > li > .rf-nav-item__link {
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+}
+.rf-nav--menubar > nav,
+.rf-nav--menubar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+.rf-nav--menubar [data-name="trigger"] {
+	display: none;
+}
+
+@media (max-width: 768px) {
+	.rf-nav--menubar [data-name="trigger"] {
+		display: none;
+	}
+	.rf-nav--menubar {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.rf-nav--menubar > .rf-nav__top-level,
+	.rf-nav--menubar > .rf-nav-group {
+		display: block;
+		width: 100%;
+	}
+	.rf-nav--menubar > .rf-nav__top-level > ul {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.rf-nav--menubar > .rf-nav__top-level .rf-nav-item__link {
+		display: block;
+	}
+	.rf-nav--menubar .rf-nav-group {
+		position: static;
+		display: block;
+	}
+	.rf-nav--menubar .rf-nav-group > .rf-nav-group__panel {
+		position: static;
+		display: block;
+		min-width: 0;
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
+		transform: none;
+	}
+}
+
+/* ── Columns layout ── */
+.rf-nav--columns {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
+.rf-nav--columns .rf-nav__top-level {
+	grid-column: 1 / -1;
+}
+
+@media (max-width: 600px) {
+	.rf-nav--columns {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+/* ── Cards layout ── */
+.rf-nav--cards > .rf-nav__top-level > ul,
+.rf-nav--cards > ul {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	list-style: none;
+}
+.rf-nav--cards .rf-nav-group > ul {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+}
+.rf-nav--cards .rf-nav-item__link {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+.rf-nav--cards .rf-nav-item__icon {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+@media (max-width: 500px) {
+	.rf-nav--cards > ul,
+	.rf-nav--cards > .rf-nav__top-level > ul,
+	.rf-nav--cards .rf-nav-group > ul {
+		grid-template-columns: 1fr;
+	}
+}
+
+/* ── Per-item description (any layout) ── */
+.rf-nav-item__description {
+	display: block;
+}
+
+/* ── Rich menubar panels ── */
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__intro),
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__footer),
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav) {
+	min-width: 20rem;
+	max-width: 36rem;
+}
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav--columns > div[data-name="column"]) {
+	min-width: 36rem;
+	max-width: 56rem;
+}
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
+	display: block;
+}
+
+/* ── Multi-section columns ── */
+.rf-nav--columns .rf-nav-group__column,
+.rf-nav--columns .rf-nav__column,
+.rf-nav--columns > div[data-name="column"] {
+	display: flex;
+	flex-direction: column;
+}
+.rf-nav--columns:has(> div[data-name="column"]) {
+	display: grid;
+	grid-template-columns: unset;
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(14rem, 1fr);
+}
+@media (max-width: 900px) {
+	.rf-nav--columns:has(> div[data-name="column"]) {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+@media (max-width: 600px) {
+	.rf-nav--columns:has(> div[data-name="column"]) {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+/* ── Strip layout ── */
+.rf-nav--strip {
+	display: flex;
+	flex-wrap: wrap;
+}
+.rf-nav--strip ul {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+}
+.rf-nav--strip .rf-nav-item__link {
+	display: inline-block;
+}
+
+/* ── Mobile menubar: nested columns collapse ── */
+@media (max-width: 768px) {
+	.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-template-columns: 1fr;
+	}
+	.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__description {
+		display: none;
+	}
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__intro),
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__footer),
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav),
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav--columns > div[data-name="column"]) {
+		min-width: 0;
+		max-width: 100%;
+	}
+}

package/styles/runes/organization.css

@@ -0,0 +1,6 @@
+/* organization — structure. Only the logo image sizing box; type, list indents,
+ * and link colour are skin. */
+.rf-organization__body img {
+	max-height: 80px;
+	width: auto;
+}

package/styles/runes/page-section.css

@@ -0,0 +1,12 @@
+/* page-section — structure. The split two-column grid (+ mobile collapse). Padding,
+ * heading resets, and the gap are skin. */
+.rf-page-section--split {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	align-items: start;
+}
+@media (max-width: 768px) {
+	.rf-page-section--split {
+		grid-template-columns: 1fr;
+	}
+}

package/styles/runes/pagination.css

@@ -0,0 +1,39 @@
+/* pagination — structure. The prev/next flex row, each box as an equal-width flex
+ * column (flex/min-width/max-width), the prev/next cross-axis alignment + the next
+ * auto-push, and the marker flex order. Spacing, borders, radius, type, and colour
+ * are skin (Lumina's styles/runes/pagination.css). */
+
+.rf-pagination {
+	display: flex;
+	align-items: stretch;
+}
+
+.rf-pagination__prev,
+.rf-pagination__next {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 0;
+	min-width: 0;
+	max-width: calc(50% - 0.5rem);
+}
+
+.rf-pagination__prev {
+	align-items: flex-start;
+}
+
+.rf-pagination__next {
+	align-items: flex-end;
+	margin-left: auto;
+}
+
+/* The next box emits `<label> <marker>`; force the marker to the top to match prev. */
+.rf-pagination__next [data-name="marker"] {
+	order: -1;
+}
+
+@media (max-width: 768px) {
+	.rf-pagination__prev,
+	.rf-pagination__next {
+		max-width: calc(50% - 0.25rem);
+	}
+}

package/styles/runes/palette.css

@@ -0,0 +1,33 @@
+/* palette — structure. The swatch grid (+ mobile cap), the swatch flex column, the
+ * swatch-colour height, the a11y flex, and the neutral-scale flex strip + stops.
+ * Radii, borders, gaps, and type are skin. */
+.rf-palette__grid {
+	display: grid;
+	grid-template-columns: repeat(var(--rf-palette-cols, 4), 1fr);
+}
+@media (max-width: 768px) {
+	.rf-palette__grid {
+		grid-template-columns: repeat(min(var(--rf-palette-cols, 4), 3), 1fr);
+	}
+}
+.rf-palette__swatch {
+	display: flex;
+	flex-direction: column;
+}
+.rf-palette__swatch-color {
+	height: 5rem;
+}
+.rf-palette__swatch-a11y {
+	display: flex;
+}
+.rf-palette__scale {
+	display: flex;
+	overflow: hidden;
+}
+.rf-palette__scale-stop {
+	flex: 1;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	min-height: 4rem;
+}

package/styles/runes/placeholder.css

@@ -0,0 +1,7 @@
+/* placeholder — structure. The responsive replaced-element box. Radii (incl. the
+ * avatar round) are skin. */
+.rf-placeholder {
+	display: block;
+	width: 100%;
+	height: auto;
+}

package/styles/runes/plan-history.css

@@ -0,0 +1,38 @@
+/* plan-history — structure (mirrors the vertical timeline). The events list reset,
+ * event positioning + marker box placement (+ responsive), the inline date, the
+ * change/entity-summary flex, the criteria list reset, the commit-message block,
+ * and the mobile change wrap. Connector borders, marker chrome, badges, and type
+ * are skin. */
+.rf-plan-history__events { list-style: none; }
+.rf-plan-history__event { position: relative; }
+.rf-plan-history__event::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}
+.rf-plan-history__date { display: inline; }
+.rf-plan-history__change {
+	display: flex;
+	align-items: center;
+}
+.rf-plan-history__criteria { list-style: none; }
+.rf-plan-history--global .rf-plan-history__commit-message {
+	display: block;
+}
+.rf-plan-history--global .rf-plan-history__entity-summary {
+	display: flex;
+	align-items: baseline;
+}
+@media (max-width: 640px) {
+	.rf-plan-history__event::before {
+		width: 0.625rem;
+		height: 0.625rem;
+		left: -0.375rem;
+	}
+	.rf-plan-history__change {
+		flex-wrap: wrap;
+	}
+}

package/styles/runes/plan-progress.css

@@ -0,0 +1,10 @@
+/* plan-progress — structure. The per-type block stack + group flex columns. The
+ * heading type and gaps are skin. */
+.rf-plan-progress {
+	display: flex;
+	flex-direction: column;
+}
+.rf-plan-progress__group {
+	display: flex;
+	flex-direction: column;
+}

package/styles/runes/playlist.css

@@ -0,0 +1,61 @@
+/* playlist — structure. The inner-header flex, the tracks list reset + counter +
+ * clip, the track-row flex (overriding the sequence dimension's absolute dot), the
+ * track-cell flex sizing + ellipsis overflow + duration auto-push, the meta hide,
+ * the cover aspect, and the narrow-screen column hides. The inset padding + split
+ * gaps + chrome + the track-number glyph stay skin. */
+.rf-playlist__content > .rf-playlist__header {
+	flex-direction: column;
+	align-items: flex-start;
+}
+.rf-playlist__tracks {
+	list-style: none;
+	counter-reset: track;
+	overflow: hidden;
+}
+.rf-playlist__tracks > li {
+	display: flex;
+	align-items: baseline;
+	position: static;
+}
+.rf-playlist__tracks > li > meta {
+	display: none;
+}
+.rf-playlist__tracks > li::before {
+	position: static;
+	width: auto;
+	height: auto;
+	min-width: 1.5rem;
+	flex-shrink: 0;
+}
+.rf-playlist__tracks [data-name="track-name"] {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+.rf-playlist__tracks [data-name="track-artist"] {
+	flex-shrink: 0;
+}
+.rf-playlist__tracks [data-name="track-duration"] {
+	flex-shrink: 0;
+	margin-left: auto;
+	min-width: 3rem;
+}
+.rf-playlist__tracks [data-name="track-meta"] {
+	flex-shrink: 0;
+}
+/* Cover aspect — defaults to square (album convention). Authors override via
+ * `frame-aspect="..."`; the engine lands `--frame-aspect` on the media zone
+ * (frameTarget defaults to 'media' since playlist has a media section), and
+ * the global `[data-section="media"] > :is(img, video)` rule already fills
+ * the zone with the image (height: 100%, object-fit: cover). The media zone
+ * carries both `data-section="media"` and `data-name="media"`, so the canonical
+ * BEM element selector `.rf-playlist__media` targets the same node. */
+.rf-playlist__media {
+	aspect-ratio: var(--frame-aspect, 1);
+}
+@media (max-width: 480px) {
+	.rf-playlist__tracks [data-name="track-artist"],
+	.rf-playlist__tracks [data-name="track-meta"] {
+		display: none;
+	}
+}

package/styles/runes/plot.css

@@ -0,0 +1,23 @@
+/* plot — structure. The column stack, the name block, the beats list reset, the
+ * beat positioning + dot box placement (incl. the linear connector dot offset and
+ * the linear label block). Dot colours, connector borders, type, and spacing are
+ * skin. */
+.rf-plot { display: flex; flex-direction: column; }
+.rf-plot > span[property="name"] { display: block; }
+.rf-plot ol { list-style: none; }
+.rf-beat { position: relative; }
+.rf-beat::before {
+	content: '';
+	position: absolute;
+	left: 0.375rem;
+	top: 1rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}
+.rf-plot--linear .rf-beat::before {
+	left: -0.4375rem;
+	top: 0.125rem;
+}
+.rf-plot--linear .rf-beat > span[data-field="label"] {
+	display: block;
+}

package/styles/runes/preview.css

@@ -0,0 +1,45 @@
+/* preview — structure. The toolbar/controls/toggle flex rows + toggle-button box,
+ * the canvas clip, the viewport-frame positioning + the constrained auto-centre,
+ * the viewport-label placement, the source-tabs flex, and the in-feature breakout.
+ * Surface chrome, radii, borders, type, padding, and text-align are skin. */
+.rf-preview__toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 2rem;
+}
+.rf-preview__controls {
+	display: flex;
+	align-items: center;
+}
+.rf-preview__view-toggle { display: flex; }
+.rf-preview__toggle { display: flex; }
+.rf-preview__toggle-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.625rem;
+	height: 1.625rem;
+}
+.rf-preview__canvas { overflow: hidden; }
+.rf-preview__viewport-toggle { display: flex; }
+.rf-preview__viewport-frame {
+	position: relative;
+	overflow: hidden;
+}
+.rf-preview__viewport-frame--constrained {
+	margin: 0 auto;
+}
+.rf-preview__viewport-label {
+	position: absolute;
+	top: 0.25rem;
+	right: 0.5rem;
+	pointer-events: none;
+	z-index: 1;
+}
+.rf-preview__source-tabs { display: flex; }
+@container (max-width: 1280px) {
+	.rf-preview--in-feature {
+		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
+	}
+}