@luz-ds/docs 0.0.0-stage → 0.1.0

package/dist/docs.css

@@ -0,0 +1,613 @@
+@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.site, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
+@layer luz.docs {
+/* ==========================================================================
+   LUZ DOCS
+   The pieces of a documentation page: the shell (sidebar, content, rail),
+   the page head, the rail ("On this page" and the page's actions), the
+   example frame, do and don't, Previous / Next and the page foot. Each is a
+   class on a native element, on core's objects and components (.o-shell,
+   .o-main, .luz-sidebar, .luz-code-block). Docs adds only its layout, its
+   skin and its rhythm. No JavaScript.
+   Requires: @luz-ds/tokens and @luz-ds/core loaded first; @luz-ds/site
+   optional, loaded before this file.
+   ========================================================================== */
+
+/* ==========================================================================
+   LUZ DOCS: shell.
+   body.o-shell.luz-docs-shell > header, nav.luz-sidebar.luz-docs-nav,
+   aside.luz-docs-rail, main.o-main.luz-docs-main, footer. "On this page"
+   comes before the content, in the markup and on screen: three columns
+   from 80rem (the sidebar, the content, the rail, which stretches over the
+   content's row), two from 60rem (the rail above the content, in its
+   column), one below, in the order of the markup: nothing is lost when the
+   third column goes (WCAG 1.4.10). The skip link goes to main, past the
+   sidebar and the rail. The header and the footer span the shell. The
+   content's children keep to the measure, --luz-docs-measure.
+   Core gives the grid, the sidebar and its drawer (a popover nav at 768px
+   and below); docs gives the tracks and the measure.
+   ========================================================================== */
+
+.luz-docs-shell {
+	--luz-docs-measure: 46rem;
+	--luz-docs-nav-w: 16.5rem;
+	--luz-docs-rail-w: 14rem;
+	--luz-docs-rail-top: var(--luz-space-lg);
+
+	/* The content takes the free height: on a short page the header keeps
+	   its own height (core's shell is at least the height of the window) */
+	grid-template:
+		"head" auto
+		"nav" auto
+		"rail" auto
+		"main" 1fr
+		"foot" auto / minmax(0, 1fr);
+}
+
+.luz-docs-shell > :where(header) {
+	grid-area: head;
+}
+
+.luz-docs-nav {
+	grid-area: nav;
+}
+
+.luz-docs-main {
+	grid-area: main;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	align-content: start;
+	gap: var(--luz-space-md);
+	min-inline-size: 0;
+	/* The footer follows the content: room for one break, not two */
+	padding: var(--luz-space-lg) var(--luz-space-md) var(--luz-space-xl);
+}
+
+.luz-docs-rail {
+	grid-area: rail;
+	min-inline-size: 0;
+}
+
+.luz-docs-shell > :where(footer) {
+	grid-area: foot;
+}
+
+/* Every child of the content keeps to the measure: a line of running text,
+   an example and its code alike. A section starts with more room above its
+   heading than between its blocks. */
+.luz-docs-main > * {
+	max-inline-size: var(--luz-docs-measure);
+}
+
+.luz-docs-main > :where(h2) {
+	margin-block-start: var(--luz-space-xl);
+}
+
+/* Between core's drawer (768px and below) and two columns, the sidebar is
+   the first block above the content, popover or not */
+@media (769px <= width < 60rem) {
+	.luz-docs-nav {
+		position: static;
+		block-size: auto;
+		inline-size: auto;
+		min-inline-size: 0;
+	}
+}
+
+@media (min-width: 60rem) {
+	.luz-docs-shell {
+		grid-template:
+			"head head" auto
+			"nav rail" auto
+			"nav main" 1fr
+			"nav foot" auto / var(--luz-docs-nav-w) minmax(0, 1fr);
+	}
+
+	.luz-docs-nav {
+		inline-size: auto;
+		min-inline-size: 0;
+	}
+
+	.luz-docs-main {
+		padding-inline: var(--luz-space-xl);
+	}
+}
+
+@media (min-width: 80rem) {
+	.luz-docs-shell {
+		grid-template:
+			"head head head" auto
+			"nav main rail" 1fr
+			"nav foot foot" auto / var(--luz-docs-nav-w) minmax(0, 1fr) var(--luz-docs-rail-w);
+	}
+
+	.luz-docs-main {
+		padding-block-end: var(--luz-space-3xl);
+	}
+}
+
+@media print {
+	.luz-docs-shell {
+		display: block;
+	}
+
+	.luz-docs-rail {
+		display: none;
+	}
+}
+
+/* ==========================================================================
+   LUZ DOCS: page head.
+   header.luz-docs-page-head > p.__eyebrow (the area · the group), h1,
+   p.__lead (one sentence), ul.__meta (chips: the files, the script or "No
+   JavaScript", the modes, whether it is tested, its known issues). A chip
+   is a word in a rounded outline; a link in one is a 28px target. A page
+   that is not a component says its files in p.__files instead, one quiet
+   line ("Files: <code>…</code>"), without the chips.
+   ========================================================================== */
+
+.luz-docs-page-head {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--luz-space-sm);
+}
+
+.luz-docs-page-head > :where(h1) {
+	margin: 0;
+	font-size: var(--luz-text-4xl);
+	line-height: 1.1;
+	text-wrap: balance;
+}
+
+.luz-docs-page-head__eyebrow {
+	margin: 0;
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-xs);
+	font-weight: 500;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--luz-text-secondary);
+}
+
+/* A package name in it keeps its own case: @luz-ds/core */
+.luz-docs-page-head__eyebrow :where(code) {
+	letter-spacing: 0;
+	text-transform: none;
+}
+
+/* Spacing between letters breaks the joins of Arabic script */
+.luz-docs-page-head__eyebrow:lang(ar) {
+	letter-spacing: 0;
+}
+
+.luz-docs-page-head__lead {
+	margin: 0;
+	font-size: var(--luz-text-lg);
+	color: var(--luz-text-secondary);
+}
+
+.luz-docs-page-head__meta {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--luz-space-xs);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-xs);
+	color: var(--luz-text-secondary);
+}
+
+.luz-docs-page-head__meta > :where(li) {
+	display: inline-flex;
+	align-items: center;
+	min-block-size: var(--luz-control-sm);
+	padding-inline: var(--luz-space-sm);
+	border: 1px solid var(--luz-divider);
+	border-radius: var(--luz-radius-full);
+	overflow-wrap: anywhere;
+}
+
+.luz-docs-page-head__meta :where(a) {
+	display: inline-flex;
+	align-items: center;
+	min-block-size: var(--luz-control-sm);
+}
+
+.luz-docs-page-head__files {
+	margin: 0;
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-xs);
+	color: var(--luz-text-secondary);
+	overflow-wrap: anywhere;
+}
+
+@media (max-width: 640px) {
+	.luz-docs-page-head > :where(h1) {
+		font-size: var(--luz-text-2xl);
+	}
+
+	.luz-docs-page-head__lead {
+		font-size: var(--luz-text-base);
+	}
+}
+
+/* ==========================================================================
+   LUZ DOCS: rail.
+   aside.luz-docs-rail > div.luz-docs-rail__inner > nav.luz-docs-rail__onpage
+   ("On this page": a details.__fold, its summary.__title, ul.__list of
+   a.__link, an h3 in a nested ul.__sub) + .luz-docs-rail__actions (Copy
+   page, Edit, Report). In the shell's third column from 80rem the aside
+   stretches over its grid area and its inner box stays in view while the
+   page scrolls (native sticky) inside it, so it never covers the footer
+   under it (WCAG 2.4.11); the inner box scrolls on its own when it is
+   taller than the window, with room at its start for a focus ring. Below
+   80rem the rail is drawn above the content (it comes before main in the
+   markup), in its column, and does not stick; a script may fold the list
+   there (its details is written open, so without one it reads in full). A link of the list also carries core's .luz-sidebar__link,
+   so core's scroll spy marks the section in view (aria-current="true"):
+   the mark is the weight and a start border, never the colour alone.
+   ========================================================================== */
+
+/* Above the content (below 80rem): the content's own top padding is the gap */
+.luz-docs-rail {
+	padding: var(--luz-space-lg) var(--luz-space-md) 0;
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-sm);
+}
+
+/* Above the content (below 80rem) it keeps the content's gutters */
+@media (min-width: 60rem) {
+	.luz-docs-rail {
+		padding-inline: var(--luz-space-xl);
+	}
+}
+
+@media (min-width: 80rem) {
+	.luz-docs-rail {
+		padding-block: var(--luz-space-lg);
+		padding-inline: 0 var(--luz-space-md);
+	}
+
+	.luz-docs-rail__inner {
+		position: sticky;
+		inset-block-start: var(--luz-docs-rail-top, 0);
+		max-block-size: calc(100dvh - var(--luz-docs-rail-top, 0rem));
+		overflow-y: auto;
+		/* The box clips: a focus ring (2px, 2px away) keeps its start edge */
+		padding-inline-start: var(--luz-space-xs);
+	}
+}
+
+.luz-docs-rail__title {
+	min-block-size: var(--luz-control-sm);
+	font-weight: 600;
+	color: var(--luz-text-primary);
+}
+
+/* In the rail, "On this page" is a list under its title, not core's box */
+.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__fold {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: none;
+}
+
+.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__title {
+	margin: 0 0 var(--luz-space-xs);
+	padding-inline: 0;
+}
+
+.luz-docs-rail__list,
+.luz-docs-rail__sub {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.luz-docs-rail__list {
+	border-inline-start: 1px solid var(--luz-divider);
+}
+
+/* Core's sidebar link is drawn for the sidebar's own surface: here it is
+   text on the page */
+.luz-docs-rail__link {
+	display: flex;
+	align-items: center;
+	min-block-size: var(--luz-control-sm);
+	margin-inline-start: -1px;
+	padding: var(--luz-space-2xs) var(--luz-space-sm);
+	border-inline-start: 2px solid transparent;
+	background: none;
+	color: var(--luz-text-secondary);
+	font-size: inherit;
+	font-weight: 400;
+	text-decoration: none;
+	/* A heading's long word ("accessibility" at 400 % text, 320 px) breaks
+	   inside the column instead of widening the page (WCAG 1.4.10) */
+	overflow-wrap: anywhere;
+}
+
+.luz-docs-rail__sub .luz-docs-rail__link {
+	padding-inline-start: var(--luz-space-lg);
+}
+
+.luz-docs-rail__link:hover {
+	background: var(--luz-surface-muted);
+	color: var(--luz-text-primary);
+}
+
+.luz-docs-rail__link[aria-current="true"] {
+	border-inline-start-color: var(--luz-brand-primary);
+	background: none;
+	color: var(--luz-text-primary);
+	font-weight: 600;
+}
+
+.luz-docs-rail__actions {
+	display: grid;
+	justify-items: start;
+}
+
+/* A rule between the list and the actions; without a list, none */
+.luz-docs-rail__onpage + .luz-docs-rail__actions {
+	margin-block-start: var(--luz-space-lg);
+	padding-block-start: var(--luz-space-md);
+	border-block-start: 1px solid var(--luz-divider);
+}
+
+.luz-docs-rail__actions > :where(a, button) {
+	display: inline-flex;
+	align-items: center;
+	min-block-size: var(--luz-control-sm);
+	overflow-wrap: anywhere;
+}
+
+/* An action a script turns into a button (copy, not go) reads as one of
+   the list: the same text, colour and underline as its links */
+.luz-docs-rail__actions > :where(button) {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--luz-brand-primary);
+	font: inherit;
+	text-align: start;
+	text-decoration: underline;
+	text-underline-offset: 0.18em;
+	cursor: pointer;
+}
+
+/* Forced colours drop the transparent start border to the text colour: the
+   current section is the only one with a border of its own */
+@media (forced-colors: active) {
+	.luz-docs-rail__link {
+		border-inline-start-color: Canvas;
+	}
+
+	.luz-docs-rail__link[aria-current="true"] {
+		border-inline-start-color: Highlight;
+	}
+}
+
+/* ==========================================================================
+   LUZ DOCS: example.
+   figure.luz-docs-example > div.__preview (the live markup, in a
+   div.__frame) + an optional div.__code (core's pre.luz-code-block). One
+   frame for both: the code sits under the preview, across its width, and a
+   long line scrolls inside its own box. The frame is as wide as the
+   preview, or as --luz-docs-example-w says (a width selector sets it:
+   20rem is a phone), never wider; it is a size container, so what is in it
+   answers to the frame.
+   ========================================================================== */
+
+.luz-docs-example {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	margin: 0;
+	padding: 0;
+	border: 1px solid var(--luz-divider);
+	border-radius: var(--luz-radius-md);
+	background: var(--luz-surface);
+}
+
+.luz-docs-example__preview {
+	padding: var(--luz-space-md);
+}
+
+.luz-docs-example__frame {
+	inline-size: min(100%, var(--luz-docs-example-w, 100%));
+	margin-inline: auto;
+	container-type: inline-size;
+}
+
+.luz-docs-example__code {
+	min-inline-size: 0;
+	border-block-start: 1px solid var(--luz-divider);
+}
+
+/* The frame draws the edge: the code block keeps only its inner corners */
+.luz-docs-example__code > :where(pre) {
+	margin: 0;
+	border: 0;
+	border-radius: 0 0 calc(var(--luz-radius-md) - 1px) calc(var(--luz-radius-md) - 1px);
+}
+
+/* ==========================================================================
+   LUZ DOCS: do and don't.
+   div.luz-docs-dodont > figure.__item.__item--do, then --dont, each a
+   figcaption > strong.__verdict ("Do", "Don't") and its reason, then a
+   div.__stage (the example, inert and aria-hidden: the caption says what it
+   shows) or a code block. Side by side when there is room, stacked below.
+   The verdict is a word; the mark before it (a tick, a cross) and the
+   frame (solid, dashed) are extra cues, never the only one, and so is the
+   colour (green, red).
+   ========================================================================== */
+
+.luz-docs-dodont {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
+	gap: var(--luz-space-md);
+}
+
+.luz-docs-dodont__item {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	gap: var(--luz-space-sm);
+	min-inline-size: 0;
+	margin: 0;
+	padding: var(--luz-space-sm);
+	border: 2px solid var(--luz-divider);
+	border-radius: var(--luz-radius-md);
+	background: var(--luz-surface);
+	color: var(--luz-text-primary);
+}
+
+.luz-docs-dodont__item--do {
+	border-color: var(--luz-color-success);
+}
+
+.luz-docs-dodont__item--dont {
+	border-style: dashed;
+	border-color: var(--luz-color-danger);
+}
+
+.luz-docs-dodont__item > :where(figcaption) {
+	font-style: normal;
+}
+
+.luz-docs-dodont__verdict {
+	display: block;
+	color: var(--luz-color-success);
+	font-family: var(--luz-font-sans);
+}
+
+.luz-docs-dodont__item--dont .luz-docs-dodont__verdict {
+	color: var(--luz-color-danger);
+}
+
+/* The mark is decoration: the word says it. A browser without alternative
+   text for content reads the first value */
+.luz-docs-dodont__verdict::before {
+	content: "\2713  ";
+	content: "\2713  " / "";
+}
+
+.luz-docs-dodont__item--dont .luz-docs-dodont__verdict::before {
+	content: "\2715  ";
+	content: "\2715  " / "";
+}
+
+.luz-docs-dodont__stage {
+	display: grid;
+	gap: var(--luz-space-sm);
+	align-content: center;
+	min-inline-size: 0;
+	padding: var(--luz-space-md);
+	border: 1px solid var(--luz-divider);
+	border-radius: var(--luz-radius-sm);
+	background: var(--luz-surface-page);
+	color: var(--luz-text-primary);
+	overflow-wrap: anywhere;
+}
+
+.luz-docs-dodont__stage > :where(*) {
+	margin-block: 0;
+}
+
+/* ==========================================================================
+   LUZ DOCS: pager.
+   nav[aria-label] > ul.luz-docs-pager > li.__prev / li.__next >
+   a.__link[rel] > span.__label ("Previous", "Next") + span.__title (the
+   page). Two link blocks side by side, Next at the end, the whole block the
+   link; stacked at 640px and below. Name each link from its visible text
+   first ("Previous: Badge").
+   ========================================================================== */
+
+.luz-docs-pager {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--luz-space-md);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.luz-docs-pager__prev {
+	grid-column: 1;
+}
+
+.luz-docs-pager__next {
+	grid-column: 2;
+	text-align: end;
+}
+
+.luz-docs-pager__link {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--luz-space-3xs);
+	block-size: 100%;
+	padding: var(--luz-space-sm) var(--luz-space-md);
+	border: 1px solid var(--luz-divider);
+	border-radius: var(--luz-radius-md);
+	text-decoration: none;
+}
+
+.luz-docs-pager__link:hover {
+	border-color: var(--luz-outline);
+	background: var(--luz-surface-hover);
+}
+
+.luz-docs-pager__link:hover .luz-docs-pager__title {
+	text-decoration: underline;
+}
+
+.luz-docs-pager__label {
+	font-size: var(--luz-text-sm);
+	color: var(--luz-text-secondary);
+}
+
+.luz-docs-pager__title {
+	font-size: var(--luz-text-lg);
+	font-weight: 600;
+}
+
+@media (max-width: 640px) {
+	.luz-docs-pager {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.luz-docs-pager__next {
+		grid-column: 1;
+	}
+}
+
+/* ==========================================================================
+   LUZ DOCS: page foot.
+   p.luz-docs-page-foot: "Last updated" and a <time>, then "Edit this page"
+   and "Report a problem", separated by a middle dot in the text. Small
+   print under the content, after the pager; it wraps on a narrow screen
+   and each link is a 28px target.
+   ========================================================================== */
+
+.luz-docs-page-foot {
+	margin: 0;
+	padding-block-start: var(--luz-space-md);
+	border-block-start: 1px solid var(--luz-divider);
+	font-family: var(--luz-font-sans);
+	font-size: var(--luz-text-sm);
+	color: var(--luz-text-secondary);
+}
+
+.luz-docs-page-foot > :where(a) {
+	display: inline-flex;
+	align-items: center;
+	min-block-size: var(--luz-control-sm);
+}
+
+/* The date in the size of the line, not core's smaller <time> */
+.luz-docs-page-foot > :where(time) {
+	font-size: inherit;
+}
+
+
+}

package/dist/docs.min.css

@@ -0,0 +1 @@
+@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.site,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.docs{.luz-docs-shell{--luz-docs-measure: 46rem;--luz-docs-nav-w: 16.5rem;--luz-docs-rail-w: 14rem;--luz-docs-rail-top: var(--luz-space-lg);grid-template:"head" auto "nav" auto "rail" auto "main" 1fr "foot" auto / minmax(0,1fr)}.luz-docs-shell>:where(header){grid-area:head}.luz-docs-nav{grid-area:nav}.luz-docs-main{grid-area:main;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--luz-space-md);min-inline-size:0;padding:var(--luz-space-lg) var(--luz-space-md) var(--luz-space-xl)}.luz-docs-rail{grid-area:rail;min-inline-size:0}.luz-docs-shell>:where(footer){grid-area:foot}.luz-docs-main>*{max-inline-size:var(--luz-docs-measure)}.luz-docs-main>:where(h2){margin-block-start:var(--luz-space-xl)}@media(769px<=width<60rem){.luz-docs-nav{position:static;block-size:auto;inline-size:auto;min-inline-size:0}}@media(min-width:60rem){.luz-docs-shell{grid-template:"head head" auto "nav rail" auto "nav main" 1fr "nav foot" auto / var(--luz-docs-nav-w) minmax(0,1fr)}.luz-docs-nav{inline-size:auto;min-inline-size:0}.luz-docs-main{padding-inline:var(--luz-space-xl)}}@media(min-width:80rem){.luz-docs-shell{grid-template:"head head head" auto "nav main rail" 1fr "nav foot foot" auto / var(--luz-docs-nav-w) minmax(0,1fr) var(--luz-docs-rail-w)}.luz-docs-main{padding-block-end:var(--luz-space-3xl)}}@media print{.luz-docs-shell{display:block}.luz-docs-rail{display:none}}.luz-docs-page-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--luz-space-sm)}.luz-docs-page-head>:where(h1){margin:0;font-size:var(--luz-text-4xl);line-height:1.1;text-wrap:balance}.luz-docs-page-head__eyebrow{margin:0;font-family:var(--luz-font-sans);font-size:var(--luz-text-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--luz-text-secondary)}.luz-docs-page-head__eyebrow :where(code){letter-spacing:0;text-transform:none}.luz-docs-page-head__eyebrow:lang(ar){letter-spacing:0}.luz-docs-page-head__lead{margin:0;font-size:var(--luz-text-lg);color:var(--luz-text-secondary)}.luz-docs-page-head__meta{display:flex;flex-wrap:wrap;gap:var(--luz-space-xs);margin:0;padding:0;list-style:none;font-family:var(--luz-font-sans);font-size:var(--luz-text-xs);color:var(--luz-text-secondary)}.luz-docs-page-head__meta>:where(li){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm);padding-inline:var(--luz-space-sm);border:1px solid var(--luz-divider);border-radius:var(--luz-radius-full);overflow-wrap:anywhere}.luz-docs-page-head__meta :where(a){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm)}.luz-docs-page-head__files{margin:0;font-family:var(--luz-font-sans);font-size:var(--luz-text-xs);color:var(--luz-text-secondary);overflow-wrap:anywhere}@media(max-width:640px){.luz-docs-page-head>:where(h1){font-size:var(--luz-text-2xl)}.luz-docs-page-head__lead{font-size:var(--luz-text-base)}}.luz-docs-rail{padding:var(--luz-space-lg) var(--luz-space-md) 0;font-family:var(--luz-font-sans);font-size:var(--luz-text-sm)}@media(min-width:60rem){.luz-docs-rail{padding-inline:var(--luz-space-xl)}}@media(min-width:80rem){.luz-docs-rail{padding-block:var(--luz-space-lg);padding-inline:0 var(--luz-space-md)}.luz-docs-rail__inner{position:sticky;inset-block-start:var(--luz-docs-rail-top, 0);max-block-size:calc(100dvh - var(--luz-docs-rail-top, 0rem));overflow-y:auto;padding-inline-start:var(--luz-space-xs)}}.luz-docs-rail__title{min-block-size:var(--luz-control-sm);font-weight:600;color:var(--luz-text-primary)}.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__fold{margin:0;padding:0;border:0;border-radius:0;background:none}.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__title{margin:0 0 var(--luz-space-xs);padding-inline:0}.luz-docs-rail__list,.luz-docs-rail__sub{margin:0;padding:0;list-style:none}.luz-docs-rail__list{border-inline-start:1px solid var(--luz-divider)}.luz-docs-rail__link{display:flex;align-items:center;min-block-size:var(--luz-control-sm);margin-inline-start:-1px;padding:var(--luz-space-2xs) var(--luz-space-sm);border-inline-start:2px solid transparent;background:none;color:var(--luz-text-secondary);font-size:inherit;font-weight:400;text-decoration:none;overflow-wrap:anywhere}.luz-docs-rail__sub .luz-docs-rail__link{padding-inline-start:var(--luz-space-lg)}.luz-docs-rail__link:hover{background:var(--luz-surface-muted);color:var(--luz-text-primary)}.luz-docs-rail__link[aria-current=true]{border-inline-start-color:var(--luz-brand-primary);background:none;color:var(--luz-text-primary);font-weight:600}.luz-docs-rail__actions{display:grid;justify-items:start}.luz-docs-rail__onpage+.luz-docs-rail__actions{margin-block-start:var(--luz-space-lg);padding-block-start:var(--luz-space-md);border-block-start:1px solid var(--luz-divider)}.luz-docs-rail__actions>:where(a,button){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm);overflow-wrap:anywhere}.luz-docs-rail__actions>:where(button){padding:0;border:0;background:none;color:var(--luz-brand-primary);font:inherit;text-align:start;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}@media(forced-colors:active){.luz-docs-rail__link{border-inline-start-color:Canvas}.luz-docs-rail__link[aria-current=true]{border-inline-start-color:Highlight}}.luz-docs-example{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;border:1px solid var(--luz-divider);border-radius:var(--luz-radius-md);background:var(--luz-surface)}.luz-docs-example__preview{padding:var(--luz-space-md)}.luz-docs-example__frame{inline-size:min(100%,var(--luz-docs-example-w, 100%));margin-inline:auto;container-type:inline-size}.luz-docs-example__code{min-inline-size:0;border-block-start:1px solid var(--luz-divider)}.luz-docs-example__code>:where(pre){margin:0;border:0;border-radius:0 0 calc(var(--luz-radius-md) - 1px) calc(var(--luz-radius-md) - 1px)}.luz-docs-dodont{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:var(--luz-space-md)}.luz-docs-dodont__item{display:grid;grid-template-rows:auto 1fr;gap:var(--luz-space-sm);min-inline-size:0;margin:0;padding:var(--luz-space-sm);border:2px solid var(--luz-divider);border-radius:var(--luz-radius-md);background:var(--luz-surface);color:var(--luz-text-primary)}.luz-docs-dodont__item--do{border-color:var(--luz-color-success)}.luz-docs-dodont__item--dont{border-style:dashed;border-color:var(--luz-color-danger)}.luz-docs-dodont__item>:where(figcaption){font-style:normal}.luz-docs-dodont__verdict{display:block;color:var(--luz-color-success);font-family:var(--luz-font-sans)}.luz-docs-dodont__item--dont .luz-docs-dodont__verdict{color:var(--luz-color-danger)}.luz-docs-dodont__verdict:before{content:"\2713  ";content:"\2713  " / ""}.luz-docs-dodont__item--dont .luz-docs-dodont__verdict:before{content:"\2715  ";content:"\2715  " / ""}.luz-docs-dodont__stage{display:grid;gap:var(--luz-space-sm);align-content:center;min-inline-size:0;padding:var(--luz-space-md);border:1px solid var(--luz-divider);border-radius:var(--luz-radius-sm);background:var(--luz-surface-page);color:var(--luz-text-primary);overflow-wrap:anywhere}.luz-docs-dodont__stage>:where(*){margin-block:0}.luz-docs-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--luz-space-md);margin:0;padding:0;list-style:none}.luz-docs-pager__prev{grid-column:1}.luz-docs-pager__next{grid-column:2;text-align:end}.luz-docs-pager__link{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--luz-space-3xs);block-size:100%;padding:var(--luz-space-sm) var(--luz-space-md);border:1px solid var(--luz-divider);border-radius:var(--luz-radius-md);text-decoration:none}.luz-docs-pager__link:hover{border-color:var(--luz-outline);background:var(--luz-surface-hover)}.luz-docs-pager__link:hover .luz-docs-pager__title{text-decoration:underline}.luz-docs-pager__label{font-size:var(--luz-text-sm);color:var(--luz-text-secondary)}.luz-docs-pager__title{font-size:var(--luz-text-lg);font-weight:600}@media(max-width:640px){.luz-docs-pager{grid-template-columns:minmax(0,1fr)}.luz-docs-pager__next{grid-column:1}}.luz-docs-page-foot{margin:0;padding-block-start:var(--luz-space-md);border-block-start:1px solid var(--luz-divider);font-family:var(--luz-font-sans);font-size:var(--luz-text-sm);color:var(--luz-text-secondary)}.luz-docs-page-foot>:where(a){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm)}.luz-docs-page-foot>:where(time){font-size:inherit}}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@luz-ds/docs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "LUZ Design System — the pieces of a documentation page (the shell, the page head, the rail, the example frame, do and don't, the pager and the page foot), built on @luz-ds/core",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./css": "./dist/docs.css",
+    "./css/min": "./dist/docs.min.css",
+    "./components/*": "./dist/components/*",
+    "./classes.json": "./dist/classes.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nandovejer/luz.git",
+    "directory": "packages/docs"
+  },
+  "homepage": "https://github.com/nandovejer/luz#readme",
+  "bugs": {
+    "url": "https://github.com/nandovejer/luz/issues"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "documentation",
+    "docs",
+    "patterns",
+    "vanilla"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@luz-ds/core": "^0.1.0",
+    "@luz-ds/site": "^0.1.0",
+    "@luz-ds/tokens": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@luz-ds/site": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@luz-ds/core": "0.1.0",
+    "@luz-ds/site": "0.1.0",
+    "@luz-ds/tokens": "0.1.0"
+  }
 }