@nldd/design-system 0.8.95 → 0.8.97

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js

@@ -1,294 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { breakpoints } from '../../../assets/styles/breakpoints.js';
-import { inheritedTextReset } from '../../../assets/styles/shadow-resets.js';
-const smMax = unsafeCSS(breakpoints.smMax);
-export const stepIndicatorStyles = css `
-	:host {
-		box-sizing: border-box;
-	}
-
-	:host {
-		--_compact-text-gap: var(--primitives-space-8);
-		--_compact-text-color: var(--semantics-content-color);
-		--_compact-count-color: var(--semantics-content-secondary-color);
-		--_compact-bar-gap: var(--primitives-space-4);
-		--_compact-bar-segment-gap: var(--primitives-space-2);
-		--_compact-bar-corner-radius: var(--primitives-corner-radius-full);
-		--_track-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
-		--_compact-bar-height: var(--primitives-space-6);
-		--_progress-color: var(--semantics-content-accent-color);
-		--_item-gap: var(--primitives-space-4);
-		--_marker-size: var(--primitives-space-24);
-		--_track-thickness: var(--primitives-space-2);
-		--_marker-z-index: 1;
-		--_marker-corner-radius: var(--primitives-corner-radius-full);
-		--_ring-thickness: var(--semantics-surfaces-ring-thickness);
-		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
-		--_marker-content-color: var(--semantics-content-secondary-color);
-		--_progress-content-color: var(--semantics-content-contrast-color);
-		--_current-fill-color: light-dark(var(--primitives-color-accent-75), var(--primitives-color-accent-100));
-		--_icon-size: var(--primitives-space-16);
-		--_title-color: var(--semantics-content-secondary-color);
-		--_current-title-color: var(--semantics-content-color);
-		--_control-corner-radius: var(--semantics-controls-md-corner-radius);
-		--_control-bleed-block: var(--primitives-space-4);
-		--_control-bleed-inline: var(--primitives-space-8);
-		--_control-fill-z-index: -1;
-		--_control-ring-z-index: 1;
-		--_control-hover-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
-
-		${inheritedTextReset}
-		isolation: isolate;
-		display: block;
-		container-type: inline-size;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-	.step-indicator__items {
-		display: flex;
-		align-items: start;
-
-		/* Stays in the DOM for assistive tech when the compact view takes over.
-		   Standard visually-hidden recipe. */
-		@container (max-width: ${smMax}) {
-			position: absolute;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
-			clip-path: inset(50%);
-			white-space: nowrap;
-		}
-	}
-
-	.step-indicator__compact-text {
-		display: none;
-		margin: 0;
-		gap: var(--_compact-text-gap);
-		justify-content: space-between;
-		align-items: baseline;
-		color: var(--_compact-text-color);
-		font: var(--primitives-font-body-md-regular-flat);
-
-		@container (max-width: ${smMax}) {
-			display: flex;
-		}
-	}
-
-	.step-indicator__compact-count {
-		color: var(--_compact-count-color);
-		font-variant-numeric: tabular-nums;
-		white-space: nowrap;
-	}
-
-	.step-indicator__compact-bar {
-		display: none;
-		margin-top: var(--_compact-bar-gap);
-		gap: var(--_compact-bar-segment-gap);
-
-		@container (max-width: ${smMax}) {
-			display: flex;
-		}
-	}
-
-	.step-indicator__compact-bar-segment {
-		flex: 1;
-		border-radius: var(--_compact-bar-corner-radius);
-		background-color: var(--_track-color);
-		height: var(--_compact-bar-height);
-	}
-
-	.step-indicator__compact-bar-segment[data-filled] {
-		background-color: var(--_progress-color);
-	}
-`;
-export const stepIndicatorItemStyles = css `
-	:host {
-		box-sizing: border-box;
-	}
-
-	:host {
-		${inheritedTextReset}
-		display: block;
-		flex: 1;
-		min-width: 0;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-	.step-indicator__item {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: var(--_item-gap);
-		text-align: center;
-	}
-
-	.step-indicator__item::before,
-	.step-indicator__item::after {
-		position: absolute;
-		top: calc(var(--_marker-size) / 2 - var(--_track-thickness) / 2);
-		height: var(--_track-thickness);
-		content: "";
-		background-color: var(--_track-color);
-	}
-
-	.step-indicator__item::before {
-		left: 0;
-		right: 50%;
-	}
-
-	.step-indicator__item::after {
-		left: 50%;
-		right: 0;
-	}
-
-	:host(:first-of-type) .step-indicator__item::before {
-		content: none;
-	}
-
-	:host(:last-of-type) .step-indicator__item::after {
-		content: none;
-	}
-
-	.step-indicator__item.is-past::before {
-		background-color: var(--_progress-color);
-	}
-
-	.step-indicator__item.is-past::after {
-		background-color: var(--_progress-color);
-	}
-
-	.step-indicator__item.is-current::before {
-		background-color: var(--_progress-color);
-	}
-
-	.step-indicator__item-marker {
-		box-sizing: border-box;
-		position: relative;
-		z-index: var(--_marker-z-index);
-		display: flex;
-		width: var(--_marker-size);
-		height: var(--_marker-size);
-		align-items: center;
-		justify-content: center;
-		border-radius: var(--_marker-corner-radius);
-		/* Ring in the background color: masks the track running underneath, so
-		   the marker gets breathing room without shortening the track. */
-		box-shadow: 0 0 0 var(--_ring-thickness) var(--_ring-color);
-		background-color: var(--_track-color);
-		color: var(--_marker-content-color);
-		font: var(--primitives-font-body-sm-medium-flat);
-
-		@media (forced-colors: active) {
-			border: var(--primitives-border-width-regular) solid CanvasText;
-		}
-	}
-
-	.step-indicator__item.is-past .step-indicator__item-marker {
-		background-color: var(--_progress-color);
-		color: var(--_progress-content-color);
-	}
-
-	.step-indicator__item.is-current .step-indicator__item-marker {
-		border: var(--_track-thickness) solid var(--_progress-color);
-		background-color: var(--_current-fill-color);
-		color: var(--_progress-color);
-	}
-
-	.step-indicator__item-icon {
-		width: var(--_icon-size);
-		height: var(--_icon-size);
-	}
-
-	.step-indicator__item-title {
-		color: var(--_title-color);
-		font: var(--primitives-font-body-sm-regular-flat);
-		overflow-wrap: anywhere;
-	}
-
-	.step-indicator__item.is-current .step-indicator__item-title {
-		color: var(--_current-title-color);
-	}
-
-	/* Standard visually-hidden recipe. */
-	.step-indicator__item-status {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-		white-space: nowrap;
-	}
-
-	.step-indicator__item-control {
-		position: relative;
-		display: flex;
-		width: fit-content;
-		max-width: 100%;
-		flex-direction: column;
-		align-items: center;
-		gap: var(--_item-gap);
-		padding: 0;
-		border: none;
-		border-radius: var(--_control-corner-radius);
-		background: none;
-		color: inherit;
-		cursor: var(--semantics-controls-link-cursor);
-		font: inherit;
-		text-decoration: none;
-	}
-
-	/* Two layers on the same box, bleeding past the control rather than padding
-	   it: padding would move the marker down while the track sits at a fixed
-	   offset, and the two would no longer line up. ::before carries the fill and
-	   stays under the track; ::after carries the focus ring and goes over it. */
-	.step-indicator__item-control::before,
-	.step-indicator__item-control::after {
-		position: absolute;
-		inset: calc(var(--_control-bleed-block) * -1) calc(var(--_control-bleed-inline) * -1);
-		border-radius: var(--_control-corner-radius);
-		content: "";
-		pointer-events: none;
-	}
-
-	.step-indicator__item-control::before {
-		z-index: var(--_control-fill-z-index);
-	}
-
-	.step-indicator__item-control::after {
-		z-index: var(--_control-ring-z-index);
-	}
-
-	.step-indicator__item-control:focus-visible {
-		/* The ring lives on ::after, so the control's own must go — two rings on
-		   one control is what the browser default would add here. */
-		outline: none;
-	}
-
-	.step-indicator__item-control:focus-visible::after {
-		outline: var(--semantics-focus-ring-outline);
-		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow);
-	}
-
-	/* Hover only on hover-capable devices: keeps a touch-scroll from lighting up
-	   the step under the finger. */
-	@media (hover: hover) {
-		.step-indicator__item-control:hover {
-			/* The marker's ring masks the track in the surrounding color, so it
-			   has to follow the hover fill or it paints a halo on top of it. */
-			--_ring-color: var(--_control-hover-background-color);
-		}
-
-		.step-indicator__item-control:hover::before {
-			background-color: var(--_control-hover-background-color);
-		}
-	}
-`;
-//# sourceMappingURL=step-indicator.styles.js.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"step-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmClC,kBAAkB;;;;;;;;;;;;;;;;2BAgBK,KAAK;;;;;;;;;;;;;;;;;;;2BAmBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;;;;;;;;CAe/B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;IAMtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLrB,CAAC"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts

@@ -1,5 +0,0 @@
-import { type TemplateResult } from 'lit';
-import type { NLDDStepIndicator, NLDDStepIndicatorItem } from './step-indicator.js';
-export declare function stepIndicatorTemplate(component: NLDDStepIndicator): TemplateResult;
-export declare function stepIndicatorItemTemplate(component: NLDDStepIndicatorItem): TemplateResult;
-//# sourceMappingURL=step-indicator.template.d.ts.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"step-indicator.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEpF,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAmClF;AAED,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB,GAAG,cAAc,CAiC1F"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js

@@ -1,69 +0,0 @@
-import { html, nothing } from 'lit';
-export function stepIndicatorTemplate(component) {
-    const label = component.accessibleLabel || component._t('components.step-indicator.accessible-label');
-    const current = component.resolvedCurrent;
-    const total = component.total;
-    const currentTitle = component.currentItem?.text ?? '';
-    const compactText = component._t('components.step-indicator.compact-text', { current, total });
-    return html `
-		<nav class="step-indicator"
-			aria-label=${label || nothing}
-		>
-			<div class="step-indicator__items"
-				role="list"
-			>
-				<slot @slotchange=${component._onSlotChange}></slot>
-			</div>
-			${total > 0 ? html `
-				<p class="step-indicator__compact-text"
-					aria-hidden="true"
-				>
-					${currentTitle ? html `<span class="step-indicator__compact-title">${currentTitle}</span>` : nothing}
-					<span class="step-indicator__compact-count">${compactText}</span>
-				</p>
-				<div class="step-indicator__compact-bar"
-					aria-hidden="true"
-				>
-					${Array.from({ length: total }, (_, index) => html `
-						<span class="step-indicator__compact-bar-segment"
-							?data-filled=${index + 1 <= current}
-						></span>
-					`)}
-				</div>
-			` : nothing}
-		</nav>
-	`;
-}
-export function stepIndicatorItemTemplate(component) {
-    const status = component.resolvedStatus;
-    // A past step shows a check mark instead of its number; the number stays in
-    // the status text for anyone who can't see it.
-    const marker = component.icon
-        ? html `<nldd-icon class="step-indicator__item-icon" icon=${component.icon}></nldd-icon>`
-        : status === 'past'
-            ? html `<nldd-icon class="step-indicator__item-icon" icon="check-mark"></nldd-icon>`
-            : html `<span class="step-indicator__item-number">${component._index}</span>`;
-    const content = html `
-		<span class="step-indicator__item-marker"
-			aria-hidden="true"
-		>${marker}</span>
-		<span class="step-indicator__item-title">
-			${component.text || html `<slot></slot>`}
-			<span class="step-indicator__item-status">, ${component._statusText}</span>
-		</span>
-	`;
-    return html `
-		<div class="step-indicator__item is-${status}">
-			${component.href ? html `
-				<a class="step-indicator__item-control"
-					href=${component.href}
-				>${content}</a>
-			` : component.button ? html `
-				<button class="step-indicator__item-control"
-					type="button"
-				>${content}</button>
-			` : content}
-		</div>
-	`;
-}
-//# sourceMappingURL=step-indicator.template.js.map

package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"step-indicator.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/step-indicator/step-indicator.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,qBAAqB,CAAC,SAA4B;IACjE,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,EAAE,CAAC,4CAA4C,CAAC,CAAC;IACtG,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe,CAAC;IAC1C,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;IAC9B,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;IACvD,MAAM,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC,wCAAwC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAE/F,OAAO,IAAI,CAAA;;gBAEI,KAAK,IAAI,OAAO;;;;;wBAKR,SAAS,CAAC,aAAa;;KAE1C,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;;;OAId,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,YAAY,SAAS,CAAC,CAAC,CAAC,OAAO;mDACrD,WAAW;;;;;OAKvD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEjC,KAAK,GAAG,CAAC,IAAI,OAAO;;MAEpC,CAAC;;IAEH,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,SAAgC;IACzE,MAAM,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC;IACxC,4EAA4E;IAC5E,+CAA+C;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI;QAC5B,CAAC,CAAC,IAAI,CAAA,qDAAqD,SAAS,CAAC,IAAI,eAAe;QACxF,CAAC,CAAC,MAAM,KAAK,MAAM;YAClB,CAAC,CAAC,IAAI,CAAA,6EAA6E;YACnF,CAAC,CAAC,IAAI,CAAA,6CAA6C,SAAS,CAAC,MAAM,SAAS,CAAC;IAE/E,MAAM,OAAO,GAAG,IAAI,CAAA;;;KAGhB,MAAM;;KAEN,SAAS,CAAC,IAAI,IAAI,IAAI,CAAA,eAAe;iDACO,SAAS,CAAC,WAAW;;EAEpE,CAAC;IAEF,OAAO,IAAI,CAAA;wCAC4B,MAAM;KACzC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;YAEd,SAAS,CAAC,IAAI;OACnB,OAAO;IACV,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;OAGvB,OAAO;IACV,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

package/dist/palettes.html

@@ -1,245 +0,0 @@
-<!DOCTYPE html>
-<html lang="nl" data-scheme="light">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>NLDD Paletten</title>
-	<link rel="stylesheet" href="/css/settings.css">
-	<style>
-		body {
-			margin: 0;
-			padding: 2rem;
-			font-family: 'RijksSansVF', system-ui, sans-serif;
-			background: light-dark(#fff, #111);
-			color: light-dark(#111, #fff);
-		}
-
-		header {
-			display: flex;
-			align-items: baseline;
-			justify-content: space-between;
-			gap: 1rem;
-			max-width: 1400px;
-			margin: 0 auto 2rem;
-		}
-
-		h1 {
-			margin: 0;
-			font-size: 1.5rem;
-			font-weight: 600;
-		}
-
-		h2 {
-			margin: 2rem 0 0.5rem;
-			font-size: 1rem;
-			font-weight: 600;
-			text-transform: capitalize;
-			display: flex;
-			align-items: baseline;
-			gap: 0.75rem;
-		}
-
-		h2 small {
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-			font-size: 0.75rem;
-			opacity: 0.6;
-			font-weight: 400;
-		}
-
-		main {
-			max-width: 1400px;
-			margin: 0 auto;
-		}
-
-		section + section h1 {
-			margin-top: 3rem;
-		}
-
-		.section-title {
-			margin: 2.5rem 0 0.5rem;
-			font-size: 0.875rem;
-			font-weight: 600;
-			text-transform: uppercase;
-			letter-spacing: 0.05em;
-			opacity: 0.6;
-		}
-
-		.strip {
-			display: grid;
-			grid-template-columns: repeat(25, 1fr);
-			gap: 2px;
-			border-radius: 6px;
-			overflow: hidden;
-		}
-
-		.swatch {
-			aspect-ratio: 1 / 2;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-end;
-			padding: 4px;
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-			font-size: 9px;
-			line-height: 1;
-			position: relative;
-		}
-
-		.swatch.light-text { color: rgba(255,255,255,0.85); }
-		.swatch.dark-text { color: rgba(0,0,0,0.7); }
-
-		.swatch span {
-			text-align: center;
-		}
-
-		.swatch.is-ref::before {
-			content: '★';
-			position: absolute;
-			top: 4px;
-			right: 4px;
-			font-size: 10px;
-		}
-
-		button.toggle {
-			padding: 0.4rem 0.8rem;
-			border: 1px solid currentColor;
-			background: transparent;
-			color: inherit;
-			border-radius: 4px;
-			font: inherit;
-			font-size: 0.8rem;
-			cursor: pointer;
-		}
-
-		button.toggle:hover {
-			background: light-dark(#0001, #fff1);
-		}
-
-		footer {
-			max-width: 1400px;
-			margin: 3rem auto 0;
-			font-size: 0.75rem;
-			opacity: 0.6;
-			line-height: 1.5;
-		}
-
-		footer code {
-			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		}
-	</style>
-</head>
-<body>
-	<header>
-		<h1>NLDD Paletten</h1>
-		<button class="toggle" type="button" aria-label="Wissel kleurenschema">Light / Dark</button>
-	</header>
-
-	<main>
-		<div class="section-title">Functionele aliassen</div>
-		<div id="aliases"></div>
-
-		<div class="section-title">Descriptive paletten</div>
-		<div id="descriptive"></div>
-	</main>
-
-	<footer>
-		<p>★ markeert de step die het dichtst bij de oorspronkelijke referentiekleur ligt.
-		Step 500 = peak chroma. Plateau van mirror(ref) tot ref op volle chroma; daarbuiten taper.</p>
-		<p>Hex-waarden vind je in <code>src/assets/styles/palettes.generated.css</code>.</p>
-	</footer>
-
-	<script type="module">
-		const STEPS = [0, 25, 50, 75, 100, 150, 200, 250, 300, 350, 400, 450, 500,
-			550, 600, 650, 700, 750, 800, 850, 900, 925, 950, 975, 1000];
-
-		const ALIASES = ['accent', 'critical', 'mark', 'neutral', 'success', 'warning'];
-
-		const DESCRIPTIVE = [
-			{ name: 'coolgray',    hex: '#64748B' },
-			{ name: 'lintblauw',   hex: '#154273' },
-			{ name: 'donkerblauw', hex: '#01689B' },
-			{ name: 'hemelblauw',  hex: '#007BC7' },
-			{ name: 'lichtblauw',  hex: '#8FCAE7' },
-			{ name: 'paars',       hex: '#42145F' },
-			{ name: 'violet',      hex: '#A90061' },
-			{ name: 'robijnrood',  hex: '#CA005D' },
-			{ name: 'roze',        hex: '#F092CD' },
-			{ name: 'rood',        hex: '#D52B1E' },
-			{ name: 'oranje',      hex: '#E17000' },
-			{ name: 'donkergeel',  hex: '#FFB612' },
-			{ name: 'geel',        hex: '#F9E11E' },
-			{ name: 'donkerbruin', hex: '#673327' },
-			{ name: 'bruin',       hex: '#94710A' },
-			{ name: 'donkergroen', hex: '#275937' },
-			{ name: 'groen',       hex: '#39870C' },
-			{ name: 'mosgroen',    hex: '#777B00' },
-			{ name: 'mintgroen',   hex: '#76D2B6' },
-		];
-
-		// WCAG luminance from hex
-		function relLum(hex) {
-			const c = hex.slice(1).match(/.{2}/g).map(h => {
-				const v = parseInt(h, 16) / 255;
-				return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-			});
-			return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-		}
-
-		// Find the step whose target_lum is closest to the reference color's lum
-		function nearestStep(refHex) {
-			const lum = relLum(refHex);
-			const centerLum = Math.sqrt(1.05 * 0.05) - 0.05;
-			const logTarget = Math.log(Math.max(lum, 0.0001) + 0.05);
-			const logWhite = Math.log(1.05);
-			const logCenter = Math.log(centerLum + 0.05);
-			const logBlack = Math.log(0.05);
-
-			let pos;
-			if (logTarget >= logCenter) {
-				const t = (logTarget - logWhite) / (logCenter - logWhite);
-				pos = Math.max(0, Math.min(0.5, t * 0.5));
-			} else {
-				const t = (logTarget - logCenter) / (logBlack - logCenter);
-				pos = Math.max(0.5, Math.min(1.0, 0.5 + t * 0.5));
-			}
-			const target = pos * 1000;
-			return STEPS.reduce((a, b) =>
-				Math.abs(b - target) < Math.abs(a - target) ? b : a
-			);
-		}
-
-		// Decide light/dark text per swatch based on step (rough proxy for lightness in current scheme)
-		function textClass(step, scheme) {
-			// In light scheme, lower steps = lighter; in dark scheme, mirrored
-			const effective = scheme === 'dark' ? 1000 - step : step;
-			return effective < 500 ? 'dark-text' : 'light-text';
-		}
-
-		function renderPalette(name, refHex) {
-			const refStep = refHex ? nearestStep(refHex) : null;
-			const scheme = document.documentElement.dataset.scheme;
-			const swatches = STEPS.map(step => {
-				const cls = ['swatch', textClass(step, scheme)];
-				if (step === refStep) cls.push('is-ref');
-				return `<div class="${cls.join(' ')}" style="background:var(--primitives-color-${name}-${step})"><span>${step}</span></div>`;
-			}).join('');
-			const refLabel = refHex ? `<small>${refHex}</small>` : '';
-			return `<h2>${name}${refLabel}</h2><div class="strip">${swatches}</div>`;
-		}
-
-		function render() {
-			document.getElementById('aliases').innerHTML =
-				ALIASES.map(name => renderPalette(name)).join('');
-			document.getElementById('descriptive').innerHTML =
-				DESCRIPTIVE.map(({ name, hex }) => renderPalette(name, hex)).join('');
-		}
-
-		document.querySelector('button.toggle').addEventListener('click', () => {
-			const root = document.documentElement;
-			root.dataset.scheme = root.dataset.scheme === 'light' ? 'dark' : 'light';
-			render();
-		});
-
-		render();
-	</script>
-</body>
-</html>