@refrakt-md/skeleton 0.22.0

package/styles/runes/cast.css

@@ -0,0 +1,33 @@
+/* cast — structure. The members list reset, grid/list arrangements, name/role
+ * block display, empty-body hide, the avatar box (size/crop/display), and the list
+ * variant flex. Surface chrome, type, radii, and margins are skin. */
+.rf-cast__members { list-style: none; }
+.rf-cast--grid .rf-cast__members {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.rf-cast--list .rf-cast__members {
+	display: flex;
+	flex-direction: column;
+}
+.rf-cast-member__name { display: block; }
+.rf-cast-member__role { display: block; }
+.rf-cast-member__body:empty { display: none; }
+.rf-cast-member img {
+	width: 80px;
+	height: 80px;
+	object-fit: cover;
+	display: block;
+}
+.rf-cast--list .rf-cast-member {
+	display: flex;
+	align-items: center;
+}
+.rf-cast--list .rf-cast-member img {
+	width: 48px;
+	height: 48px;
+	flex-shrink: 0;
+}
+.rf-cast--list .rf-cast-member__body {
+	flex: 1;
+}

package/styles/runes/changelog.css

@@ -0,0 +1,9 @@
+/* changelog — structure. The display:contents passthroughs (the releases list and
+ * each release body project their children into the flow) and the block date /
+ * inline-block badge displays. Spacing, borders, type, and colour are skin
+ * (Lumina's styles/runes/changelog.css). */
+
+.rf-changelog__releases { display: contents; }
+.rf-changelog-release__body { display: contents; }
+.rf-changelog-release time { display: block; }
+.rf-changelog-release strong { display: inline-block; }

package/styles/runes/character.css

@@ -0,0 +1,22 @@
+/* character — structure. The float-containment, the floated portrait box (float +
+ * size + clip), the avatar fill, the sections flex column, and the section-name
+ * block. Portrait margins/radius, type, borders, and list indents are skin. */
+.rf-character { display: flow-root; }
+.rf-character__portrait {
+	float: right;
+	width: 120px;
+	height: 120px;
+	overflow: hidden;
+}
+.rf-character__portrait img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.rf-character__sections {
+	display: flex;
+	flex-direction: column;
+}
+.rf-character-section__name {
+	display: block;
+}

package/styles/runes/chart.css

@@ -0,0 +1,32 @@
+/* chart — structure. The chart block, the responsive SVG + container, the legend
+ * flex, the legend-swatch box, and the sr-only data table once rendered. The
+ * --rf-chart-* theming contract (palette + geometry values), all SVG paint, the
+ * data-table chrome, and type stay skin (Lumina's styles/runes/chart.css). */
+
+.rf-chart { display: block; }
+.rf-chart__container { width: 100%; }
+.rf-chart__svg { width: 100%; height: auto; }
+.rf-chart__legend {
+	display: flex;
+	justify-content: center;
+}
+.rf-chart__legend-item {
+	display: flex;
+	align-items: center;
+}
+.rf-chart__legend-color {
+	width: 12px;
+	height: 12px;
+}
+/* Rendered: the data table becomes the sr-only source of truth. */
+.rf-chart[data-rendered] .rf-chart__data {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

package/styles/runes/codegroup.css

@@ -0,0 +1,25 @@
+/* codegroup — structure. The wrapper clip, the topbar flex, the list reset, the
+ * scrollable tab strip (display + overflow), and the tab-button flex. The strip's
+ * `display: flex` is what guest-posture's hide rule overrides. The surface chrome,
+ * the window-dot decoration, type, borders, and all pre/code treatment are skin
+ * (Lumina's styles/runes/codegroup.css) — the pre/code rules deliberately override
+ * elements/code.css by source order, so they must stay skin. */
+
+.rf-codegroup { overflow: hidden; }
+
+.rf-codegroup__topbar {
+	display: flex;
+	align-items: center;
+}
+
+.rf-codegroup ul { list-style: none; }
+
+.rf-codegroup__tabs {
+	display: flex;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.rf-codegroup__tab {
+	flex: 0 0 auto;
+}

package/styles/runes/collection.css

@@ -0,0 +1,51 @@
+/* collection — structure. The list/grid arrangement (items flex/grid, grouped-grid
+ * passthrough, uniform-height item flex, the grid group + title span), the card
+ * flex column, and the block-content item display reset. Spacing, gaps, card
+ * chrome, type, and the table cell treatment are skin (Lumina's
+ * styles/runes/collection.css). The table width/border-collapse stays skin (the
+ * same value-identical contention with the table element + global table as
+ * comparison). */
+
+.rf-collection__items {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection[data-layout='grid'] .rf-collection__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	align-items: stretch;
+}
+.rf-collection[data-layout='grid'] .rf-collection__item {
+	display: flex;
+}
+.rf-collection[data-layout='grid'] .rf-collection__item > * {
+	flex: 1;
+	min-width: 0;
+}
+.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
+.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection[data-layout='grid'] .rf-collection__group {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	align-items: stretch;
+}
+.rf-collection[data-layout='grid'] .rf-collection__group-title {
+	grid-column: 1 / -1;
+}
+.rf-collection__item {
+	min-width: 0;
+}
+.rf-collection__card {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection__group {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection__item[data-block] {
+	display: block;
+}

package/styles/runes/compare.css

@@ -0,0 +1,19 @@
+/* compare — structure. The wrapper clip, the side-by-side grid / stacked flex
+ * panels, the panel min-width + scroll, and the label block. Borders, header/label
+ * chrome, and code resets are skin. */
+.rf-compare { overflow: hidden; }
+.rf-compare--side-by-side .rf-compare__panels {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+.rf-compare--stacked .rf-compare__panels {
+	display: flex;
+	flex-direction: column;
+}
+.rf-compare [data-panel] {
+	min-width: 0;
+	overflow: auto;
+}
+.rf-compare [data-label] {
+	display: block;
+}

package/styles/runes/comparison.css

@@ -0,0 +1,54 @@
+/* comparison — structure. The display:contents grid passthroughs, the table scroll
+ * + sticky-head geometry, the cards grid, the card flex rows + badge positioning,
+ * list resets, the fixed label-col width, and metadata/strong-label hiding.
+ * Surface chrome, type, colour, borders, spacing, table cell sizing, and the
+ * highlight transform stay skin (Lumina's styles/runes/comparison.css). The table
+ * width/border-collapse stays skin too (it contends with the table element
+ * override + global table by value-identical rules). */
+
+.rf-comparison__grid { display: contents; }
+.rf-comparison-column__body,
+.rf-comparison-row__body { display: contents; }
+
+.rf-comparison > meta,
+.rf-comparison > span[property] { display: none; }
+
+/* Table layout */
+.rf-comparison__table-wrapper {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-comparison__table thead {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+.rf-comparison__recommended-badge { display: block; }
+.rf-comparison__label-col { width: 1%; }
+.rf-comparison__cell strong { display: none; }
+.rf-comparison__callout-badge { display: inline-block; }
+
+/* Cards layout */
+.rf-comparison__cards {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	align-items: start;
+}
+.rf-comparison-card { position: relative; }
+.rf-comparison-card__badge {
+	position: absolute;
+	top: -0.625rem;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.rf-comparison-card__rows { list-style: none; }
+.rf-comparison-card__row {
+	display: flex;
+	align-items: baseline;
+}
+.rf-comparison-card__row p { display: inline; }
+
+/* Responsive */
+@media (max-width: 640px) {
+	.rf-comparison__cards { grid-template-columns: 1fr; }
+}

package/styles/runes/conversation.css

@@ -0,0 +1,29 @@
+/* conversation — structure. The column stack, the message bubble flex + width +
+ * side alignment, and the data-carrier hides. Bubble chrome, type, and gaps are
+ * skin (Lumina's styles/runes/conversation.css). */
+
+.rf-conversation {
+	display: flex;
+	flex-direction: column;
+}
+.rf-conversation__messages {
+	display: flex;
+	flex-direction: column;
+}
+.rf-conversation-message {
+	display: flex;
+	flex-direction: column;
+	max-width: 80%;
+}
+.rf-conversation-message--left {
+	align-self: flex-start;
+	align-items: flex-start;
+}
+.rf-conversation-message--right {
+	align-self: flex-end;
+	align-items: flex-end;
+}
+.rf-conversation-message > span[data-field="speaker"],
+.rf-conversation-message > meta[data-field] { display: none; }
+.rf-conversation-message__body > span[data-field],
+.rf-conversation-message__body > meta { display: none; }

package/styles/runes/cta.css

@@ -0,0 +1,46 @@
+/* cta — structure. The preamble layout + stretched-link eyebrow, the action-button
+ * flex row + its mobile stack, list resets. All spacing, type, the headline
+ * gradient, surface chrome, and colour stay skin (Lumina's styles/runes/cta.css). */
+
+.rf-cta__preamble {
+	flex-direction: column;
+	align-items: center;
+}
+
+/* Linked eyebrow → pill with a stretched link (chrome is skin). */
+.rf-cta .rf-cta__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-cta .rf-cta__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+/* Action-button row. */
+.rf-cta ul {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	list-style: none;
+}
+.rf-cta li a,
+.rf-cta nav a {
+	display: inline-flex;
+	align-items: center;
+}
+
+/* Mobile: stack action buttons full-width so multi-button CTAs line up. */
+@media (max-width: 640px) {
+	.rf-cta ul {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.rf-cta li a,
+	.rf-cta nav a {
+		justify-content: center;
+		width: 100%;
+		box-sizing: border-box;
+	}
+}

package/styles/runes/datatable.css

@@ -0,0 +1,16 @@
+/* datatable — structure. The toolbar + pagination flex rows and the full-width
+ * search input. The table chrome, type, borders, and the table overflow/width
+ * overrides (which override the table element wrapper by source order) stay skin
+ * (Lumina's styles/runes/datatable.css). */
+
+.rf-datatable__toolbar {
+	display: flex;
+}
+.rf-datatable__input {
+	width: 100%;
+}
+.rf-datatable__pagination {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}

package/styles/runes/design-context.css

@@ -0,0 +1,6 @@
+/* design-context — structure. The sections flex column. The title type and the
+ * child card-reset chrome are skin. */
+.rf-design-context__sections {
+	display: flex;
+	flex-direction: column;
+}

package/styles/runes/details.css

@@ -0,0 +1,19 @@
+/* details — structure. The summary flex + native-marker hide, the disclosure
+ * marker box (push + flex-shrink) and its open-rotate, and the list reset. Type,
+ * spacing, colour, the marker glyph, and transitions are skin (Lumina's
+ * styles/runes/details.css). */
+
+.rf-details__summary {
+	display: flex;
+	align-items: center;
+	list-style: none;
+}
+.rf-details__summary::-webkit-details-marker { display: none; }
+.rf-details__summary::marker { display: none; content: ''; }
+.rf-details__summary::after {
+	flex-shrink: 0;
+	margin-left: auto;
+}
+.rf-details[open] .rf-details__summary::after {
+	transform: rotate(90deg);
+}

package/styles/runes/diagram.css

@@ -0,0 +1,17 @@
+/* diagram — structure. The block + clip, the centered scrollable container, and
+ * the responsive SVG. Surface chrome, padding, type, text-align, and the Mermaid
+ * SVG colour overrides are skin (Lumina's styles/runes/diagram.css). */
+
+.rf-diagram {
+	display: block;
+	overflow: hidden;
+}
+.rf-diagram__container {
+	display: flex;
+	justify-content: center;
+	overflow-x: auto;
+}
+.rf-diagram__container svg {
+	max-width: 100%;
+	height: auto;
+}

package/styles/runes/diff.css

@@ -0,0 +1,40 @@
+/* diff — structure. The horizontal-scroll container, the sticky header pin, the
+ * split-panel grid, the rows max-content grid, the line flex + gutter sizing.
+ * Borders, radii, code background, the line-status tints, and type stay skin
+ * (Lumina's styles/runes/diff.css). */
+
+.rf-diff {
+	overflow-x: auto;
+	overflow-y: hidden;
+	overscroll-behavior-x: contain;
+}
+.rf-diff__header {
+	position: sticky;
+	left: 0;
+}
+.rf-diff__split-container {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	min-width: 40rem;
+}
+.rf-diff__code {
+	overflow-x: auto;
+	overscroll-behavior-x: contain;
+}
+.rf-diff__rows {
+	display: grid;
+	min-width: max-content;
+}
+.rf-diff__line {
+	display: flex;
+	min-height: 1.6em;
+}
+.rf-diff__gutter-num {
+	flex-shrink: 0;
+	width: 2.5em;
+	min-height: 1.6em;
+}
+.rf-diff__line-content {
+	flex: 1 0 auto;
+	min-height: 1.6em;
+}

package/styles/runes/drawer.css

@@ -0,0 +1,118 @@
+/* drawer — structure (SPEC-060). The scroll-lock, the in-flow header/footer flex,
+ * the dialog box model + flex column layout, the per-side inset positioning, and
+ * the size presets. Surface chrome (bg/fg/border/radius/shadow vars), the in-flow
+ * callout treatment, padding, the backdrop, and the slide animations + keyframes
+ * stay skin (Lumina's styles/runes/drawer.css) — the animation has no cross-layer
+ * competitor, so it lives with the motion-tuning vars. */
+
+.rf-drawer {
+	--rf-drawer-size-sm: 22rem;
+	--rf-drawer-size-md: 36rem;
+	--rf-drawer-size-lg: 52rem;
+}
+
+/* Body-scroll lock while any drawer is open. */
+html.rf-drawer-open,
+html.rf-drawer-open body {
+	overflow: hidden;
+}
+
+/* In-flow header/footer layout. */
+section.rf-drawer .rf-drawer__header {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+}
+section.rf-drawer .rf-drawer__footer {
+	display: block;
+}
+
+/* Dialog box model + flex column (display:flex scoped to [open] so the closed
+ * dialog keeps the UA display:none). */
+dialog.rf-drawer {
+	box-sizing: border-box;
+	overflow: hidden;
+	max-width: calc(100vw - 2 * var(--rf-drawer-gutter));
+	max-height: calc(100vh - 2 * var(--rf-drawer-gutter));
+}
+dialog.rf-drawer[open] {
+	display: flex;
+	flex-direction: column;
+}
+dialog.rf-drawer .rf-drawer__header {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+dialog.rf-drawer .rf-drawer__close {
+	flex-shrink: 0;
+}
+dialog.rf-drawer .rf-drawer__body {
+	flex: 1 1 auto;
+	overflow-y: auto;
+	min-height: 0;
+}
+dialog.rf-drawer .rf-drawer__footer {
+	flex: 0 0 auto;
+}
+
+/* Per-side inset positioning. */
+dialog.rf-drawer[data-side="right"] {
+	inset:
+		var(--rf-drawer-gutter)
+		var(--rf-drawer-gutter)
+		var(--rf-drawer-gutter)
+		auto;
+	height: auto;
+}
+dialog.rf-drawer[data-side="left"] {
+	inset:
+		var(--rf-drawer-gutter)
+		auto
+		var(--rf-drawer-gutter)
+		var(--rf-drawer-gutter);
+	height: auto;
+}
+dialog.rf-drawer[data-side="top"] {
+	inset:
+		var(--rf-drawer-gutter)
+		var(--rf-drawer-gutter)
+		auto
+		var(--rf-drawer-gutter);
+	width: auto;
+}
+dialog.rf-drawer[data-side="bottom"] {
+	inset:
+		auto
+		var(--rf-drawer-gutter)
+		var(--rf-drawer-gutter)
+		var(--rf-drawer-gutter);
+	width: auto;
+}
+
+/* Size presets (dialog mode). */
+dialog.rf-drawer[data-side="right"][data-size="sm"],
+dialog.rf-drawer[data-side="left"][data-size="sm"] {
+	width: var(--rf-drawer-size-sm);
+}
+dialog.rf-drawer[data-side="right"][data-size="md"],
+dialog.rf-drawer[data-side="left"][data-size="md"] {
+	width: var(--rf-drawer-size-md);
+}
+dialog.rf-drawer[data-side="right"][data-size="lg"],
+dialog.rf-drawer[data-side="left"][data-size="lg"] {
+	width: var(--rf-drawer-size-lg);
+}
+dialog.rf-drawer[data-side="top"][data-size="sm"],
+dialog.rf-drawer[data-side="bottom"][data-size="sm"] {
+	height: var(--rf-drawer-size-sm);
+}
+dialog.rf-drawer[data-side="top"][data-size="md"],
+dialog.rf-drawer[data-side="bottom"][data-size="md"] {
+	height: var(--rf-drawer-size-md);
+}
+dialog.rf-drawer[data-side="top"][data-size="lg"],
+dialog.rf-drawer[data-side="bottom"][data-size="lg"] {
+	height: var(--rf-drawer-size-lg);
+}

package/styles/runes/embed.css

@@ -0,0 +1,20 @@
+/* embed — structure. The responsive iframe wrapper (the position/overflow box + the
+ * absolutely-filled iframe) and the empty-fallback hide. Radius, surface, the
+ * iframe border reset, and fallback type are skin (Lumina's styles/runes/embed.css). */
+
+.rf-embed__wrapper {
+	position: relative;
+	width: 100%;
+	height: 0;
+	overflow: hidden;
+}
+.rf-embed__wrapper iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.rf-embed__fallback:empty {
+	display: none;
+}

package/styles/runes/event.css

@@ -0,0 +1,5 @@
+/* event — structure. Only the register CTA's inline-block button box; the button
+ * chrome, the def-list top margin, body spacing, and links are skin. */
+.rf-event__register a {
+	display: inline-block;
+}

package/styles/runes/expand.css

@@ -0,0 +1,7 @@
+/* expand — structure. Only the inline-block canonical-link box; everything else
+ * (the peer-document treatment, heading scale, error chrome, spacing) is skin
+ * (Lumina's styles/runes/expand.css). */
+
+.rf-expand__canonical-link {
+	display: inline-block;
+}

package/styles/runes/faction.css

@@ -0,0 +1,13 @@
+/* faction — structure (mirrors realm). The stacked-top flex flip, the sections flex
+ * column, and the section-name block. Inset padding + gaps + chrome stay skin. */
+.rf-faction[data-media-position="top"] {
+	display: flex;
+	flex-direction: column;
+}
+.rf-faction__sections {
+	display: flex;
+	flex-direction: column;
+}
+.rf-faction-section__name {
+	display: block;
+}

package/styles/runes/feature.css

@@ -0,0 +1,56 @@
+/* feature — structure. The preamble flex + eyebrow stretched-link, the content
+ * display reset, the definitions grid, the feature-item icon stack, and the
+ * media-position flip. Spacing, type, surface chrome, alignment (text-align), and
+ * colour stay skin (Lumina's styles/runes/feature.css). */
+
+.rf-feature__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.rf-feature__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-feature__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+.rf-feature__content {
+	display: contents;
+}
+
+/* Definitions stack by default; the grid modifier tiles them. */
+.rf-feature__definitions {
+	display: block;
+}
+.rf-feature--definitions-grid .rf-feature__definitions {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
+}
+
+/* Beside layouts: definitions stay stacked inside the content track. */
+.rf-feature[data-media-position="start"] .rf-feature__content,
+.rf-feature[data-media-position="end"] .rf-feature__content {
+	display: block;
+}
+
+.rf-feature__feature-item dt:has(> .rf-icon) {
+	display: flex;
+	flex-direction: column;
+}
+.rf-feature__feature-item dt > .rf-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+/* BUG-001 — content-first DOM inverts the shared media-first stacked contract. */
+.rf-feature[data-media-position="bottom"] {
+	display: block;
+}
+.rf-feature[data-media-position="top"] {
+	display: flex;
+	flex-direction: column-reverse;
+}

package/styles/runes/figure.css

@@ -0,0 +1,23 @@
+/* figure — structure. The image box (block + responsive max-width + centering),
+ * the frame-aspect fill, the named size max-widths, and the alignment auto-margins.
+ * The image radius and the caption type are skin (Lumina's styles/runes/figure.css). */
+
+.rf-figure :is(img, .rf-placeholder) {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	margin-inline: auto;
+}
+.rf-figure[style*="--frame-aspect"] :is(img, .rf-placeholder) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	margin: 0;
+}
+.rf-figure--small { max-width: 320px; }
+.rf-figure--medium { max-width: 640px; }
+.rf-figure--large { max-width: 960px; }
+.rf-figure--full { max-width: 100%; }
+.rf-figure--left { margin-right: auto; }
+.rf-figure--center { margin-left: auto; margin-right: auto; }
+.rf-figure--right { margin-left: auto; }