@refrakt-md/skeleton 0.33.0 → 0.35.0

package/index.css

@@ -28,120 +28,120 @@
  * { margin-bottom: 3rem }` would beat a rune header's tighter margin.) */
 
 /* ── Foundation ── */
-@import './styles/global.css' layer(skeleton);
+@import "./styles/global.css" layer(skeleton);
 
 /* ── Dimension structure ── */
-@import './styles/dimensions/state.css' layer(skeleton);
-@import './styles/dimensions/media.css' layer(skeleton);
-@import './styles/dimensions/cover.css' layer(skeleton);
-@import './styles/dimensions/metadata.css' layer(skeleton);
-@import './styles/dimensions/sections.css' layer(skeleton);
-@import './styles/dimensions/reading.css' layer(skeleton);
-@import './styles/dimensions/checklist.css' layer(skeleton);
-@import './styles/dimensions/sequence.css' layer(skeleton);
-@import './styles/dimensions/guest-posture.css' layer(skeleton);
+@import "./styles/dimensions/state.css" layer(skeleton);
+@import "./styles/dimensions/media.css" layer(skeleton);
+@import "./styles/dimensions/cover.css" layer(skeleton);
+@import "./styles/dimensions/metadata.css" layer(skeleton);
+@import "./styles/dimensions/sections.css" layer(skeleton);
+@import "./styles/dimensions/reading.css" layer(skeleton);
+@import "./styles/dimensions/checklist.css" layer(skeleton);
+@import "./styles/dimensions/sequence.css" layer(skeleton);
+@import "./styles/dimensions/guest-posture.css" layer(skeleton);
 
 /* ── Layout structure ── */
-@import './styles/layouts/split.css' layer(skeleton);
-@import './styles/layouts/default.css' layer(skeleton);
-@import './styles/layouts/docs.css' layer(skeleton);
-@import './styles/layouts/blog.css' layer(skeleton);
-@import './styles/layouts/mobile.css' layer(skeleton);
-@import './styles/layouts/on-this-page.css' layer(skeleton);
-@import './styles/layouts/search.css' layer(skeleton);
-@import './styles/layouts/theme-toggle.css' layer(skeleton);
-@import './styles/layouts/version-switcher.css' layer(skeleton);
-@import './styles/layouts/plan.css' layer(skeleton);
+@import "./styles/layouts/split.css" layer(skeleton);
+@import "./styles/layouts/default.css" layer(skeleton);
+@import "./styles/layouts/docs.css" layer(skeleton);
+@import "./styles/layouts/blog.css" layer(skeleton);
+@import "./styles/layouts/mobile.css" layer(skeleton);
+@import "./styles/layouts/on-this-page.css" layer(skeleton);
+@import "./styles/layouts/search.css" layer(skeleton);
+@import "./styles/layouts/theme-toggle.css" layer(skeleton);
+@import "./styles/layouts/version-switcher.css" layer(skeleton);
+@import "./styles/layouts/plan.css" layer(skeleton);
 
 /* ── Rune structure ── */
-@import './styles/runes/card.css' layer(skeleton);
-@import './styles/runes/hint.css' layer(skeleton);
-@import './styles/runes/steps.css' layer(skeleton);
-@import './styles/runes/pricing.css' layer(skeleton);
-@import './styles/runes/cta.css' layer(skeleton);
-@import './styles/runes/hero.css' layer(skeleton);
-@import './styles/runes/feature.css' layer(skeleton);
-@import './styles/runes/testimonial.css' layer(skeleton);
-@import './styles/runes/bento.css' layer(skeleton);
-@import './styles/runes/comparison.css' layer(skeleton);
-@import './styles/runes/symbol.css' layer(skeleton);
-@import './styles/runes/changelog.css' layer(skeleton);
-@import './styles/runes/tabs.css' layer(skeleton);
-@import './styles/runes/codegroup.css' layer(skeleton);
-@import './styles/runes/accordion.css' layer(skeleton);
-@import './styles/runes/details.css' layer(skeleton);
-@import './styles/runes/breadcrumb.css' layer(skeleton);
-@import './styles/runes/toc.css' layer(skeleton);
-@import './styles/runes/pagination.css' layer(skeleton);
-@import './styles/runes/reveal.css' layer(skeleton);
-@import './styles/runes/expand.css' layer(skeleton);
-@import './styles/runes/grid.css' layer(skeleton);
-@import './styles/runes/figure.css' layer(skeleton);
-@import './styles/runes/embed.css' layer(skeleton);
-@import './styles/runes/collection.css' layer(skeleton);
-@import './styles/runes/datatable.css' layer(skeleton);
-@import './styles/runes/sandbox.css' layer(skeleton);
-@import './styles/runes/conversation.css' layer(skeleton);
-@import './styles/runes/progress.css' layer(skeleton);
-@import './styles/runes/diagram.css' layer(skeleton);
-@import './styles/runes/gallery.css' layer(skeleton);
-@import './styles/runes/carousel.css' layer(skeleton);
-@import './styles/runes/diff.css' layer(skeleton);
-@import './styles/runes/chart.css' layer(skeleton);
-@import './styles/runes/juxtapose.css' layer(skeleton);
-@import './styles/runes/annotate.css' layer(skeleton);
-@import './styles/runes/drawer.css' layer(skeleton);
-@import './styles/runes/nav.css' layer(skeleton);
-@import './styles/runes/mockup.css' layer(skeleton);
+@import "./styles/runes/card.css" layer(skeleton);
+@import "./styles/runes/hint.css" layer(skeleton);
+@import "./styles/runes/steps.css" layer(skeleton);
+@import "./styles/runes/pricing.css" layer(skeleton);
+@import "./styles/runes/cta.css" layer(skeleton);
+@import "./styles/runes/hero.css" layer(skeleton);
+@import "./styles/runes/feature.css" layer(skeleton);
+@import "./styles/runes/testimonial.css" layer(skeleton);
+@import "./styles/runes/bento.css" layer(skeleton);
+@import "./styles/runes/comparison.css" layer(skeleton);
+@import "./styles/runes/symbol.css" layer(skeleton);
+@import "./styles/runes/changelog.css" layer(skeleton);
+@import "./styles/runes/tabs.css" layer(skeleton);
+@import "./styles/runes/codegroup.css" layer(skeleton);
+@import "./styles/runes/accordion.css" layer(skeleton);
+@import "./styles/runes/details.css" layer(skeleton);
+@import "./styles/runes/breadcrumb.css" layer(skeleton);
+@import "./styles/runes/toc.css" layer(skeleton);
+@import "./styles/runes/pagination.css" layer(skeleton);
+@import "./styles/runes/reveal.css" layer(skeleton);
+@import "./styles/runes/expand.css" layer(skeleton);
+@import "./styles/runes/grid.css" layer(skeleton);
+@import "./styles/runes/figure.css" layer(skeleton);
+@import "./styles/runes/embed.css" layer(skeleton);
+@import "./styles/runes/collection.css" layer(skeleton);
+@import "./styles/runes/datatable.css" layer(skeleton);
+@import "./styles/runes/sandbox.css" layer(skeleton);
+@import "./styles/runes/conversation.css" layer(skeleton);
+@import "./styles/runes/progress.css" layer(skeleton);
+@import "./styles/runes/diagram.css" layer(skeleton);
+@import "./styles/runes/gallery.css" layer(skeleton);
+@import "./styles/runes/carousel.css" layer(skeleton);
+@import "./styles/runes/diff.css" layer(skeleton);
+@import "./styles/runes/chart.css" layer(skeleton);
+@import "./styles/runes/juxtapose.css" layer(skeleton);
+@import "./styles/runes/annotate.css" layer(skeleton);
+@import "./styles/runes/drawer.css" layer(skeleton);
+@import "./styles/runes/nav.css" layer(skeleton);
+@import "./styles/runes/mockup.css" layer(skeleton);
 /* ── Plugin: storytelling ── */
-@import './styles/runes/character.css' layer(skeleton);
-@import './styles/runes/realm.css' layer(skeleton);
-@import './styles/runes/faction.css' layer(skeleton);
-@import './styles/runes/lore.css' layer(skeleton);
-@import './styles/runes/plot.css' layer(skeleton);
-@import './styles/runes/bond.css' layer(skeleton);
-@import './styles/runes/storyboard.css' layer(skeleton);
+@import "./styles/runes/character.css" layer(skeleton);
+@import "./styles/runes/realm.css" layer(skeleton);
+@import "./styles/runes/faction.css" layer(skeleton);
+@import "./styles/runes/lore.css" layer(skeleton);
+@import "./styles/runes/plot.css" layer(skeleton);
+@import "./styles/runes/bond.css" layer(skeleton);
+@import "./styles/runes/storyboard.css" layer(skeleton);
 
 /* ── Remaining core runes ── */
-@import './styles/runes/aggregate.css' layer(skeleton);
-@import './styles/runes/bg.css' layer(skeleton);
-@import './styles/runes/blog.css' layer(skeleton);
-@import './styles/runes/compare.css' layer(skeleton);
-@import './styles/runes/file-ref.css' layer(skeleton);
-@import './styles/runes/form.css' layer(skeleton);
-@import './styles/runes/mediatext.css' layer(skeleton);
-@import './styles/runes/page-section.css' layer(skeleton);
-@import './styles/runes/placeholder.css' layer(skeleton);
-@import './styles/runes/pullquote.css' layer(skeleton);
-@import './styles/runes/relationships.css' layer(skeleton);
-@import './styles/runes/section.css' layer(skeleton);
-@import './styles/runes/showcase.css' layer(skeleton);
-@import './styles/runes/textblock.css' layer(skeleton);
-@import './styles/runes/xref.css' layer(skeleton);
+@import "./styles/runes/aggregate.css" layer(skeleton);
+@import "./styles/runes/bg.css" layer(skeleton);
+@import "./styles/runes/blog.css" layer(skeleton);
+@import "./styles/runes/compare.css" layer(skeleton);
+@import "./styles/runes/file-ref.css" layer(skeleton);
+@import "./styles/runes/form.css" layer(skeleton);
+@import "./styles/runes/mediatext.css" layer(skeleton);
+@import "./styles/runes/page-section.css" layer(skeleton);
+@import "./styles/runes/placeholder.css" layer(skeleton);
+@import "./styles/runes/pullquote.css" layer(skeleton);
+@import "./styles/runes/relationships.css" layer(skeleton);
+@import "./styles/runes/section.css" layer(skeleton);
+@import "./styles/runes/showcase.css" layer(skeleton);
+@import "./styles/runes/textblock.css" layer(skeleton);
+@import "./styles/runes/xref.css" layer(skeleton);
 /* ── Plugin: business ── */
-@import './styles/runes/cast.css' layer(skeleton);
-@import './styles/runes/organization.css' layer(skeleton);
-@import './styles/runes/timeline.css' layer(skeleton);
-@import './styles/runes/budget.css' layer(skeleton);
+@import "./styles/runes/cast.css" layer(skeleton);
+@import "./styles/runes/organization.css" layer(skeleton);
+@import "./styles/runes/timeline.css" layer(skeleton);
+@import "./styles/runes/budget.css" layer(skeleton);
 /* ── Plugin: places ── */
-@import './styles/runes/event.css' layer(skeleton);
-@import './styles/runes/map.css' layer(skeleton);
-@import './styles/runes/itinerary.css' layer(skeleton);
+@import "./styles/runes/event.css" layer(skeleton);
+@import "./styles/runes/map.css" layer(skeleton);
+@import "./styles/runes/itinerary.css" layer(skeleton);
 /* ── Plugin: media ── */
-@import './styles/runes/playlist.css' layer(skeleton);
-@import './styles/runes/track.css' layer(skeleton);
-@import './styles/runes/audio.css' layer(skeleton);
+@import "./styles/runes/playlist.css" layer(skeleton);
+@import "./styles/runes/track.css" layer(skeleton);
+@import "./styles/runes/audio.css" layer(skeleton);
 /* ── Plugin: learning ── */
-@import './styles/runes/howto.css' layer(skeleton);
-@import './styles/runes/recipe.css' layer(skeleton);
+@import "./styles/runes/howto.css" layer(skeleton);
+@import "./styles/runes/recipe.css" layer(skeleton);
 /* ── Plugin: design ── */
-@import './styles/runes/swatch.css' layer(skeleton);
-@import './styles/runes/palette.css' layer(skeleton);
-@import './styles/runes/typography.css' layer(skeleton);
-@import './styles/runes/spacing.css' layer(skeleton);
-@import './styles/runes/design-context.css' layer(skeleton);
-@import './styles/runes/preview.css' layer(skeleton);
+@import "./styles/runes/swatch.css" layer(skeleton);
+@import "./styles/runes/palette.css" layer(skeleton);
+@import "./styles/runes/typography.css" layer(skeleton);
+@import "./styles/runes/spacing.css" layer(skeleton);
+@import "./styles/runes/design-context.css" layer(skeleton);
+@import "./styles/runes/preview.css" layer(skeleton);
 /* ── Plugin: plan ── */
-@import './styles/runes/plan-progress.css' layer(skeleton);
-@import './styles/runes/milestone.css' layer(skeleton);
-@import './styles/runes/plan-history.css' layer(skeleton);
+@import "./styles/runes/plan-progress.css" layer(skeleton);
+@import "./styles/runes/milestone.css" layer(skeleton);
+@import "./styles/runes/plan-history.css" layer(skeleton);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/skeleton",
   "description": "The structural cascade layer + layer-order contract every refrakt theme builds on — ships `@layer skeleton` and the `@layer skeleton, skin;` order declaration, plus the token-name contract",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "styles"
   ],
   "dependencies": {
-    "@refrakt-md/types": "0.33.0"
+    "@refrakt-md/types": "0.35.0"
   },
   "scripts": {
     "build": "tsc"

package/styles/dimensions/checklist.css

@@ -14,7 +14,7 @@
 
 /* Indicator base — positioned left of text (the box; its chrome is skin). */
 [data-checked]::before {
-	content: '';
+	content: "";
 	position: absolute;
 	left: 0.125rem;
 	top: 0.5em;

package/styles/dimensions/cover.css

@@ -78,13 +78,22 @@
 }
 
 /* ── auto / unset placement — adapts to the cover region's orientation ── */
-[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"],
-[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="cover-band"] > [data-name="preamble"] {
+[data-media-position="cover"]:not([data-cover-scope="header"]):is(
+	[data-content-place="auto"],
+	:not([data-content-place])
+) > [data-name="content"],
+[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place]))
+	> [data-name="cover-band"]
+	> [data-name="preamble"] {
 	align-self: end;
 	justify-self: stretch;
 }
 @container (min-aspect-ratio: 1 / 1) {
-	[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
+	[data-media-position="cover"]:not([data-cover-scope="header"]):is(
+			[data-content-place="auto"],
+			:not([data-content-place])
+		)
+		> [data-name="content"] {
 		align-self: center;
 		justify-self: start;
 	}

package/styles/dimensions/guest-posture.css

@@ -14,7 +14,8 @@
 [data-section="media"][data-guest-posture="presentational"] {
 	pointer-events: none;
 }
-[data-section="media"][data-guest-posture="presentational"] :is(.rf-tabs__tabs, .rf-codegroup__tabs) {
+[data-section="media"][data-guest-posture="presentational"]
+	:is(.rf-tabs__tabs, .rf-codegroup__tabs) {
 	display: none;
 }
 

package/styles/dimensions/metadata.css

@@ -6,7 +6,9 @@
  * dimensions/metadata.css). */
 
 /* Rating — star-row is an inline flex row (the glyph + colours are skin). */
-[data-meta-type="rating"] { display: inline-flex; }
+[data-meta-type="rating"] {
+	display: inline-flex;
+}
 
 /* ── Layout: bar (SPEC-080) ──
  * Horizontal flex row of fields; wraps by default (`data-wrap="false"` keeps it
@@ -17,8 +19,12 @@
 	flex-wrap: wrap;
 	align-items: center;
 }
-[data-zone-layout="bar"][data-wrap="false"] { flex-wrap: nowrap; }
-[data-zone-layout="bar"] [data-align="end"] { margin-left: auto; }
+[data-zone-layout="bar"][data-wrap="false"] {
+	flex-wrap: nowrap;
+}
+[data-zone-layout="bar"] [data-align="end"] {
+	margin-left: auto;
+}
 
 /* ── Layout: definition-list ──
  * Each row stacks dt over dd; rows flow into auto-fit columns that collapse to a
@@ -32,7 +38,9 @@
 	flex-direction: column;
 	min-width: 0;
 }
-[data-zone-layout="definition-list"] dd { margin: 0; }
+[data-zone-layout="definition-list"] dd {
+	margin: 0;
+}
 /* Multi-value dd (fields with `splitOn`) renders a row of chips inside the cell. */
 [data-zone-layout="definition-list"] dd[data-multi-value] {
 	display: flex;

package/styles/dimensions/sequence.css

@@ -48,7 +48,7 @@
 }
 
 [data-sequence="connected"] > li::before {
-	content: '';
+	content: "";
 	position: absolute;
 	left: -0.4375rem;
 	top: 0.25rem;

package/styles/global.css

@@ -10,28 +10,68 @@
  * 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; }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-body { margin: 0; }
+body {
+	margin: 0;
+}
 
 /* Consumed meta tags never render. */
-meta { display: none; }
+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; }
+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; }
+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; }
+img {
+	max-width: 100%;
+	height: auto;
+}
 
 /* Code block scroll + rhythm (its surface treatment is skin). */
-pre { overflow-x: auto; margin: 1.5rem 0; }
+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; }
+table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 1.5rem 0;
+}

package/styles/layouts/blog.css

@@ -5,36 +5,100 @@
  * borders, type, padding, and gaps are skin. */
 /* Height pinned to --rf-header-height so the docked mobile nav panel
    (top: var(--rf-header-height)) lines up with the header bottom. */
-.rf-blog-header { position: sticky; top: 0; z-index: 100; height: var(--rf-header-height, 3.5rem); }
-.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 {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	height: var(--rf-header-height, 3.5rem);
+}
+.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-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; }
+.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; }
+	.rf-blog-header__inner p ~ p {
+		display: none;
+	}
+	.rf-blog--has-sidebar {
+		grid-template-columns: 1fr;
+	}
+	.rf-blog-sidebar {
+		position: static;
+	}
 }