@profpowell/vb-design-system 0.1.0 → 0.2.0

package/README.md

@@ -55,7 +55,7 @@ Nineteen documentation components, grouped by role.
 npm install @profpowell/vb-design-system
 ```
 
-Or load from a CDN (after publish):
+Or load from a CDN:
 
 ```html
 <script type="module" src="https://unpkg.com/@profpowell/vb-design-system/dist/vb-design-system.min.js"></script>
@@ -78,7 +78,8 @@ import '@profpowell/vb-design-system/color-palette';
 ```
 
 ```html
-<color-palette ramp="--color-accent"></color-palette>
+<color-palette colors="#1d4ed8,#0f766e,#e11d48" names="Primary,Secondary,Accent"></color-palette>
+<token-specimen type="color"></token-specimen>
 <theme-export format="dtcg"></theme-export>
 ```
 
@@ -118,5 +119,6 @@ npm run build   # bundle dist/ (esm + minified, js + css) via esbuild
 A GitHub Pages demo site can depend on `vanilla-breeze` for tokens/themes and import this package directly.
 
 ## License
+MIT License
 
-MIT © Patrick Powell
+© 2026 Thomas A. Powell

package/dist/vb-design-system.css

@@ -98,7 +98,7 @@ palette-generator {
 }
 palette-generator .pg-seed-label {
   display: block;
-  font-size: var(--font-size-sm, 0.875rem);
+  font-size: var(--font-size-s, 0.875rem);
   font-weight: 600;
   color: var(--color-text-muted, #666);
   margin-block-end: var(--size-2xs, 0.25rem);
@@ -171,7 +171,7 @@ type-specimen .char-row {
   flex-wrap: wrap;
   gap: 2px;
   align-items: center;
-  font-size: var(--font-size-sm, 0.875rem);
+  font-size: var(--font-size-s, 0.875rem);
 }
 type-specimen .char-label {
   font-family: var(--font-sans, system-ui);
@@ -261,7 +261,7 @@ spacing-specimen .scale-step {
 }
 spacing-specimen .scale-name {
   font-family: var(--font-mono, monospace);
-  font-size: var(--font-size-sm, 0.875rem);
+  font-size: var(--font-size-s, 0.875rem);
   color: var(--color-text-muted, #666);
   text-align: end;
 }
@@ -517,7 +517,7 @@ breakpoint-specimen {
     font-weight: 600;
   }
   .bps-active {
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--font-size-s, 0.875rem);
     padding: var(--size-3xs, 0.125rem) var(--size-xs, 0.5rem);
     border-radius: var(--radius-s, 0.25rem);
     background: var(--color-surface-raised, oklch(96% 0 0));
@@ -583,7 +583,7 @@ breakpoint-specimen {
     grid-template-columns: max-content 1fr;
     gap: var(--size-2xs, 0.25rem) var(--size-m, 1rem);
     margin: 0;
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--font-size-s, 0.875rem);
   }
   .bps-row {
     display: contents;

package/dist/vb-design-system.js

@@ -458,7 +458,7 @@ var ColorPalette = class extends VBElement {
 };
 registerComponent("color-palette", ColorPalette);
 
-// src/web-components/color-picker/_color-utils.js
+// src/lib/color-utils.js
 function hslToRgb(h, s, l) {
   s /= 100;
   l /= 100;
@@ -886,7 +886,7 @@ var TypeSpecimen = class extends VBElement {
     const weights = weightsAttr.split(",").map((w) => w.trim());
     let html = "";
     const editable = this.hasAttribute("editable");
-    const labelHTML = editable ? `<input type="text" class="specimen-font-input" value="${fontFamily.replace(/"/g, "&quot;")}" aria-label="Font family" style="font:inherit;padding:0.25rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);min-inline-size:18rem;max-inline-size:100%;font-family:${fontFamily};font-size:var(--font-size-sm,0.875rem)">
+    const labelHTML = editable ? `<input type="text" class="specimen-font-input" value="${fontFamily.replace(/"/g, "&quot;")}" aria-label="Font family" style="font:inherit;padding:0.25rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);min-inline-size:18rem;max-inline-size:100%;font-family:${fontFamily};font-size:var(--font-size-s,0.875rem)">
           <span class="specimen-quick" style="display:inline-flex;flex-wrap:wrap;gap:0.25rem;margin-inline-start:0.5rem">
             ${QUICK_FONTS.map((f) => `<button type="button" class="specimen-quick-btn" data-font="${f.replace(/"/g, "&quot;")}" style="font:inherit;font-size:var(--font-size-xs,0.75rem);padding:0.125rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:999px;background:var(--color-surface,#fff);color:var(--color-text,#222);cursor:pointer">${f.split(",")[0].replace(/["']/g, "")}</button>`).join("")}
           </span>` : `<span class="specimen-label">${label}</span>`;
@@ -915,9 +915,9 @@ var TypeSpecimen = class extends VBElement {
     if (showScale) {
       const scale = [
         { name: "xs", rem: 0.75 },
-        { name: "sm", rem: 0.875 },
-        { name: "md", rem: 1 },
-        { name: "lg", rem: 1.125 },
+        { name: "s", rem: 0.875 },
+        { name: "m", rem: 1 },
+        { name: "l", rem: 1.125 },
         { name: "xl", rem: 1.25 },
         { name: "2xl", rem: 1.5 },
         { name: "3xl", rem: 1.875 },
@@ -1500,9 +1500,11 @@ var SemanticPalette = class extends VBElement {
   /** @type {HTMLElement|null} */
   #probe = null;
   setup() {
-    this.#probe = document.createElement("span");
-    this.#probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
-    this.append(this.#probe);
+    if (this.#probe?.parentNode !== this) {
+      this.#probe = document.createElement("span");
+      this.#probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
+      this.append(this.#probe);
+    }
     this.#source = this.querySelector("color-palette, palette-generator");
     this.#resolveRoles();
     this.#readColors();
@@ -1611,7 +1613,7 @@ var SemanticPalette = class extends VBElement {
     return `<article class="sp-card" data-role="${role}" aria-label="${roleLabel} role preview" style="${cardStyle}">
       <header style="display:flex;align-items:center;justify-content:space-between;gap:var(--size-s,0.75rem)">
         <div>
-          <code style="font-family:${MONO};font-size:var(--font-size-sm,0.875rem);font-weight:600">${role}</code>
+          <code style="font-family:${MONO};font-size:var(--font-size-s,0.875rem);font-weight:600">${role}</code>
           <span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${MUTED}">${roleLabel}</span>
         </div>
         <div style="display:flex;align-items:center;gap:0.5rem">
@@ -1629,13 +1631,13 @@ var SemanticPalette = class extends VBElement {
     const subtleFg = this.#darken(hex);
     return [
       this.#sample({
-        render: `<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${RADIUS_S};background:${hex};color:${textOnRole};font-family:inherit;font-size:var(--font-size-sm,0.875rem);font-weight:600;cursor:default">Button</button>`,
+        render: `<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${RADIUS_S};background:${hex};color:${textOnRole};font-family:inherit;font-size:var(--font-size-s,0.875rem);font-weight:600;cursor:default">Button</button>`,
         fg: textOnRole,
         bg: hex,
         caption: "On role"
       }),
       this.#sample({
-        render: `<span style="color:${hex};background:${surface};padding:0.25rem 0.5rem;border-radius:${RADIUS_S};font-size:var(--font-size-sm,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,
+        render: `<span style="color:${hex};background:${surface};padding:0.25rem 0.5rem;border-radius:${RADIUS_S};font-size:var(--font-size-s,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,
         fg: hex,
         bg: surface || "#ffffff",
         caption: "On surface"
@@ -1655,7 +1657,7 @@ var SemanticPalette = class extends VBElement {
     const onRole = pickContrastingHex(hex);
     return [
       this.#sample({
-        render: `<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${RADIUS_S};background:${subtleBg};color:${statusText};border:1px solid ${hex};font-size:var(--font-size-sm,0.875rem);max-inline-size:100%">
+        render: `<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${RADIUS_S};background:${subtleBg};color:${statusText};border:1px solid ${hex};font-size:var(--font-size-s,0.875rem);max-inline-size:100%">
           <span style="display:inline-block;inline-size:0.5rem;block-size:0.5rem;border-radius:50%;background:${hex};flex-shrink:0"></span>
           <span><strong>${ROLE_LABELS[role] || role}</strong> \u2014 message text</span>
         </div>`,
@@ -1670,7 +1672,7 @@ var SemanticPalette = class extends VBElement {
         caption: "Badge"
       }),
       this.#sample({
-        render: `<span style="color:${hex};background:${surface};padding:0.25rem 0.5rem;border-radius:${RADIUS_S};font-size:var(--font-size-sm,0.875rem);font-weight:600">Inline status</span>`,
+        render: `<span style="color:${hex};background:${surface};padding:0.25rem 0.5rem;border-radius:${RADIUS_S};font-size:var(--font-size-s,0.875rem);font-weight:600">Inline status</span>`,
         fg: hex,
         bg: surface || "#ffffff",
         caption: "On surface"
@@ -1694,7 +1696,7 @@ var SemanticPalette = class extends VBElement {
   }
   #renderExport() {
     const toolbar = `display:flex;gap:var(--size-2xs,0.375rem);padding-block-start:var(--size-xs,0.5rem);border-block-start:1px solid ${BORDER}`;
-    const btn = `padding:0.375rem 0.875rem;border:1px solid ${BORDER};border-radius:${RADIUS_S};background:${SURFACE};color:${TEXT};cursor:pointer;font:inherit;font-size:var(--font-size-sm,0.875rem)`;
+    const btn = `padding:0.375rem 0.875rem;border:1px solid ${BORDER};border-radius:${RADIUS_S};background:${SURFACE};color:${TEXT};cursor:pointer;font:inherit;font-size:var(--font-size-s,0.875rem)`;
     return `<div class="sp-export" role="toolbar" aria-label="Export semantic palette" style="${toolbar}">
       <button type="button" class="sp-copy-css" style="${btn}">Copy Theme CSS</button>
       <button type="button" class="sp-copy-json" style="${btn}">Copy JSON</button>
@@ -1872,7 +1874,7 @@ var MotionSpecimen = class extends VBElement {
     return `display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:var(--size-s,0.75rem);min-block-size:1.75rem`;
   }
   #nameStyle() {
-    return `font-family:${MONO2};font-size:var(--font-size-sm,0.875rem);color:${MUTED2};text-align:end`;
+    return `font-family:${MONO2};font-size:var(--font-size-s,0.875rem);color:${MUTED2};text-align:end`;
   }
   #valueStyle() {
     return `font-family:${MONO2};font-size:var(--font-size-xs,0.75rem);color:${MUTED2};font-variant-numeric:tabular-nums;white-space:nowrap`;
@@ -2981,11 +2983,11 @@ var PREVIEWS = {
     render: (f, t) => `
       <p style="font-family:${f.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15"
         ${E(f.display, "p", "heading")}>${t.heading}</p>
-      <h3 style="font-family:${f.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
+      <h3 style="font-family:${f.heading};font-size:var(--font-size-l,1.125rem);font-weight:600;margin:0"
         ${E(f.heading, "h3", "subheading")}>${t.subheading}</h3>
-      <p style="font-family:${f.body};font-size:var(--font-size-md,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
+      <p style="font-family:${f.body};font-size:var(--font-size-m,1rem);line-height:1.65;margin:0;color:var(--color-text-muted,#666)"
         ${E(f.body, "p", "body")}>${t.body}</p>
-      <pre style="font-family:${f.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${E(f.code, "code", "code")}>${t.code}</code></pre>`
+      <pre style="font-family:${f.code};font-size:var(--font-size-s,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${E(f.code, "code", "code")}>${t.code}</code></pre>`
   },
   article: {
     label: "Article",
@@ -2994,31 +2996,31 @@ var PREVIEWS = {
         ${E(f.body, "small", "eyebrow")}>${t.eyebrow}</small>
       <h2 style="font-family:${f.heading};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0;line-height:1.2"
         ${E(f.heading, "h2", "heading")}>${t.heading}</h2>
-      <p style="font-family:${f.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0"
+      <p style="font-family:${f.body};font-size:var(--font-size-s,0.875rem);color:var(--color-text-muted,#666);margin:0"
         ${E(f.body, "p", "byline")}>${t.byline}</p>
       <p style="font-family:${f.body};line-height:1.7;margin:0" ${E(f.body, "p", "body")}>${t.body}</p>
-      <h3 style="font-family:${f.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0"
+      <h3 style="font-family:${f.heading};font-size:var(--font-size-l,1.125rem);font-weight:600;margin:0"
         ${E(f.heading, "h3", "subheading")}>${t.subheading}</h3>
       <p style="font-family:${f.body};line-height:1.7;margin:0" ${E(f.body, "p", "body2")}>${t.body2}</p>
-      <blockquote style="font-family:${f.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
+      <blockquote style="font-family:${f.display};font-style:italic;font-size:var(--font-size-l,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)"
         ${E(f.display, "blockquote", "quote")}>${t.quote}</blockquote>
-      <pre style="font-family:${f.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${E(f.code, "code", "code")}>${t.code}</code></pre>`
+      <pre style="font-family:${f.code};font-size:var(--font-size-s,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code ${E(f.code, "code", "code")}>${t.code}</code></pre>`
   },
   "long-article": {
     label: "Long Article",
     render: (f, t) => `
       <small style="font-family:${f.body};font-size:var(--font-size-xs,0.75rem);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-interactive,oklch(55% .2 260));font-weight:600">${t.eyebrow}</small>
       <h1 style="font-family:${f.display};font-size:var(--font-size-3xl,2rem);font-weight:800;margin:0;line-height:1.15">${t.heading}</h1>
-      <p style="font-family:${f.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">${t.byline}</p>
-      <p style="font-family:${f.body};font-size:var(--font-size-lg,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${t.lead}</p>
+      <p style="font-family:${f.body};font-size:var(--font-size-s,0.875rem);color:var(--color-text-muted,#666);margin:0">${t.byline}</p>
+      <p style="font-family:${f.body};font-size:var(--font-size-l,1.125rem);line-height:1.6;margin:0;color:var(--color-text-muted,#666)">${t.lead}</p>
       <h2 style="font-family:${f.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">${t.subheading}</h2>
       <p style="font-family:${f.body};line-height:1.7;margin:0">${t.body}</p>
       <p style="font-family:${f.body};line-height:1.7;margin:0">${t.body2}</p>
-      <blockquote style="font-family:${f.display};font-style:italic;font-size:var(--font-size-lg,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${t.quote}</blockquote>
+      <blockquote style="font-family:${f.display};font-style:italic;font-size:var(--font-size-l,1.125rem);border-inline-start:3px solid var(--color-interactive,oklch(55% .2 260));padding-inline-start:var(--size-m,1rem);margin:0;color:var(--color-text-muted,#666)">${t.quote}</blockquote>
       <h2 style="font-family:${f.heading};font-size:var(--font-size-xl,1.375rem);font-weight:700;margin:0">Implementation Details</h2>
       <p style="font-family:${f.body};line-height:1.7;margin:0">Design tokens form the atomic layer of any visual system. Colors, spacing, typography, and motion are expressed as named variables that cascade through every component. When a token changes, every surface that references it updates automatically \u2014 no find-and-replace, no missed instances.</p>
-      <pre style="font-family:${f.code};font-size:var(--font-size-sm,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${t.code}</code></pre>
-      <h3 style="font-family:${f.heading};font-size:var(--font-size-lg,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
+      <pre style="font-family:${f.code};font-size:var(--font-size-s,0.875rem);line-height:1.5;margin:0;padding:var(--size-s,0.75rem);background:var(--color-surface-sunken,#eee);border-radius:var(--radius-s,0.25rem);overflow-x:auto"><code>${t.code}</code></pre>
+      <h3 style="font-family:${f.heading};font-size:var(--font-size-l,1.125rem);font-weight:600;margin:0">Key Takeaways</h3>
       <ul style="font-family:${f.body};line-height:1.7;margin:0;padding-inline-start:1.5rem">
         <li>Typography sets the emotional tone before a single word is read</li>
         <li>Pair contrast with harmony \u2014 serif headings with sans-serif body</li>
@@ -3033,13 +3035,13 @@ var PREVIEWS = {
         <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
           <h4 style="font-family:${f.heading};font-weight:600;margin:0" ${E(f.heading, "h4", "cardTitle")}>Premium Plan</h4>
           <p style="font-family:${f.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">$49<small style="font-size:0.5em;font-weight:400">/mo</small></p>
-          <p style="font-family:${f.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0" ${E(f.body, "p", "cardBody")}>Everything you need to build faster.</p>
+          <p style="font-family:${f.body};font-size:var(--font-size-s,0.875rem);color:var(--color-text-muted,#666);margin:0" ${E(f.body, "p", "cardBody")}>Everything you need to build faster.</p>
           <code style="font-family:${f.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem" ${E(f.code, "code", "cardCode")}>npm install acme</code>
         </div>
         <div style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)">
           <h4 style="font-family:${f.heading};font-weight:600;margin:0">Enterprise</h4>
           <p style="font-family:${f.display};font-size:var(--font-size-2xl,1.75rem);font-weight:700;margin:0">Custom</p>
-          <p style="font-family:${f.body};font-size:var(--font-size-sm,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
+          <p style="font-family:${f.body};font-size:var(--font-size-s,0.875rem);color:var(--color-text-muted,#666);margin:0">Dedicated support and SLA guarantees.</p>
           <code style="font-family:${f.code};font-size:var(--font-size-xs,0.75rem);background:var(--color-surface-sunken,#eee);padding:0.2rem 0.4rem;border-radius:0.25rem">contact@acme.dev</code>
         </div>
       </div>`
@@ -3052,7 +3054,7 @@ var PREVIEWS = {
           ${E(f.body, "p", "eyebrow")}>${t.eyebrow}</p>
         <h1 style="font-family:${f.display};font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0;line-height:1.1"
           ${E(f.display, "h1", "heading")}>${t.heading}</h1>
-        <p style="font-family:${f.body};font-size:var(--font-size-lg,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
+        <p style="font-family:${f.body};font-size:var(--font-size-l,1.125rem);color:var(--color-text-muted,#666);margin:var(--size-s,0.75rem) auto 0;max-width:40ch"
           ${E(f.body, "p", "body")}>${t.body}</p>
       </div>`
   }
@@ -3110,7 +3112,7 @@ var FontPairer = class extends VBElement {
     const surface = "var(--color-surface, #fff)";
     const raised = "var(--color-surface-raised, #f5f5f5)";
     const muted = "var(--color-text-muted, #666)";
-    const smFont = "var(--font-size-sm, 0.875rem)";
+    const smFont = "var(--font-size-s, 0.875rem)";
     const xsFont = "var(--font-size-xs, 0.75rem)";
     const selectStyle = `font:inherit;font-size:${smFont};padding:0.35rem 0.5rem;border:1px solid ${border};border-radius:4px;background:${surface}`;
     const roles = [
@@ -3395,7 +3397,7 @@ var GradientBuilder = class extends VBElement {
     const surface = "var(--color-surface, #fff)";
     const muted = "var(--color-text-muted, #666)";
     const mono = "var(--font-mono, monospace)";
-    const smFont = "var(--font-size-sm, 0.875rem)";
+    const smFont = "var(--font-size-s, 0.875rem)";
     const xsFont = "var(--font-size-xs, 0.75rem)";
     const preview = `<div class="gb-preview" style="height:4rem;border-radius:${radius};background:${css};border:1px solid ${border}"></div>`;
     const selectStyle = `font:inherit;font-size:${smFont};padding:0.25rem 0.5rem;border:1px solid ${border};border-radius:4px;background:${surface}`;
@@ -4148,12 +4150,12 @@ var ThemeCatalog = class extends VBElement {
     const card = `border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);background:var(--color-surface,#fff);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem);min-block-size:0`;
     const grid = `display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--size-s,0.75rem)`;
     const muted = `font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)`;
-    const title = `margin:0;font-size:var(--font-size-md,1rem);font-weight:600;color:var(--color-text,#222)`;
+    const title = `margin:0;font-size:var(--font-size-m,1rem);font-weight:600;color:var(--color-text,#222)`;
     const btn = `align-self:flex-start;padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-primary,#0066cc);color:var(--color-text-on-primary,#fff);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)`;
     const tag = `display:inline-block;padding:0.125rem 0.375rem;border-radius:0.25rem;background:var(--color-surface-raised,#f3f3f3);${muted};margin-inline-end:0.25rem`;
     this.innerHTML = `
       <div class="tc-head" style="display:flex;align-items:baseline;gap:var(--size-s,0.75rem);margin-block-end:var(--size-s,0.75rem);flex-wrap:wrap">
-        <strong style="font-size:var(--font-size-sm,0.875rem)">Start from a known system</strong>
+        <strong style="font-size:var(--font-size-s,0.875rem)">Start from a known system</strong>
         <span class="tc-target" style="${muted}"></span>
       </div>
       <div class="tc-grid" style="${grid}" role="list"></div>
@@ -4198,7 +4200,7 @@ var ThemeCatalog = class extends VBElement {
     const grid = this.querySelector(".tc-grid");
     if (!grid || !this.#entries) return;
     const card = `border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);background:var(--color-surface,#fff);padding:var(--size-m,1rem);display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)`;
-    const title = `margin:0;font-size:var(--font-size-md,1rem);font-weight:600;color:var(--color-text,#222)`;
+    const title = `margin:0;font-size:var(--font-size-m,1rem);font-weight:600;color:var(--color-text,#222)`;
     const btn = `align-self:flex-start;margin-block-start:auto;padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-primary,#0066cc);color:var(--color-text-on-primary,#fff);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)`;
     const muted = `font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)`;
     const tag = `display:inline-block;padding:0.125rem 0.375rem;border-radius:0.25rem;background:var(--color-surface-raised,#f3f3f3);${muted};margin-inline-end:0.25rem`;

package/dist/vb-design-system.min.css

@@ -1 +1 @@
-color-palette:not(:defined){display:block}color-palette{display:block}color-palette .palette{display:flex;flex-wrap:wrap;gap:var(--size-xs, .5rem)}color-palette .palette.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}color-palette .palette.list{flex-direction:column}color-palette .palette.list .swatch-wrap{flex-direction:row;align-items:center;gap:var(--size-s, .75rem)}color-palette .palette.list .color-box{inline-size:36px!important;block-size:36px!important}color-palette .swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--size-2xs, .25rem)}color-palette .color-box{position:relative;border:1px solid oklch(0% 0 0 / .15);border-radius:var(--radius-s, .25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono, monospace);transition:transform .15s ease,box-shadow .15s ease;overflow:hidden}color-palette .color-box:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026;z-index:1}color-palette .color-box:focus-visible{outline:2px solid var(--color-focus-ring, currentColor);outline-offset:2px}color-palette .color-value{font-size:.625rem;line-height:1.2;opacity:0;transition:opacity .15s ease;text-align:center;padding:2px 4px;word-break:break-all}color-palette .color-box:hover .color-value,color-palette .color-box:focus-visible .color-value,color-palette .color-value.visible{opacity:1}color-palette .color-box.copied:after{content:"Copied!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;font-size:var(--font-size-xs, .75rem);font-weight:600;font-family:var(--font-sans, system-ui);border-radius:inherit}color-palette .color-name{font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}palette-generator{display:block}palette-generator .pg-seed-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-text-muted, #666);margin-block-end:var(--size-2xs, .25rem)}palette-generator>color-picker,palette-generator>input[type=color]{margin-block-end:var(--size-s, .75rem);padding-block-end:var(--size-s, .75rem);border-block-end:1px solid var(--color-border-subtle, #e5e5e5)}palette-generator .pg-export{margin-block-start:var(--size-s, .75rem)}palette-generator .pg-export button:hover{background:var(--surface-hover, #f5f5f5)}palette-generator .pg-export button:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:2px}type-specimen:not(:defined){display:block}type-specimen{display:block}type-specimen .specimen-header{margin-block-end:var(--size-s, .75rem)}type-specimen .specimen-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-2xs, .25rem);font-family:var(--font-sans, system-ui)}type-specimen .specimen-sample{font-size:var(--font-size-3xl, 1.875rem);line-height:1.2;margin:0;padding:var(--size-xs, .5rem);border:1px dashed transparent;border-radius:var(--radius-s, .25rem);transition:border-color .15s ease;cursor:text}type-specimen .specimen-sample:hover{border-color:var(--color-border, #ddd)}type-specimen .specimen-sample:focus{outline:none;border-color:var(--color-primary, #333)}type-specimen .specimen-chars{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem);margin-block-end:var(--size-s, .75rem);padding:var(--size-xs, .5rem);background:var(--color-surface-raised, #f8f8f8);border-radius:var(--radius-s, .25rem)}type-specimen .char-row{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:var(--font-size-sm, .875rem)}type-specimen .char-label{font-family:var(--font-sans, system-ui);font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-muted, #666);inline-size:3.5rem;flex-shrink:0}type-specimen .char-row span:not(.char-label){inline-size:1.25em;text-align:center}type-specimen .specimen-weights{display:flex;flex-wrap:wrap;gap:var(--size-s, .75rem);margin-block-end:var(--size-s, .75rem)}type-specimen .weight-sample{display:flex;flex-direction:column;align-items:center;gap:2px}type-specimen .weight-label{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666)}type-specimen .weight-text{font-size:var(--font-size-2xl, 1.5rem)}type-specimen .specimen-scale{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}type-specimen .scale-step{display:flex;align-items:baseline;gap:var(--size-s, .75rem);line-height:1.3}type-specimen .scale-label{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);inline-size:2.5rem;flex-shrink:0;text-align:end}type-specimen .scale-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}spacing-specimen:not(:defined){display:block}spacing-specimen{display:block}spacing-specimen .specimen-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem);font-family:var(--font-sans, system-ui)}spacing-specimen .specimen-scale{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}spacing-specimen .scale-step{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:var(--size-s, .75rem);min-block-size:1.75rem}spacing-specimen .scale-name{font-family:var(--font-mono, monospace);font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #666);text-align:end}spacing-specimen .scale-bar{display:block;block-size:var(--size-m, 1rem);min-inline-size:2px;background:var(--color-interactive, oklch(55% .2 260));border-radius:var(--radius-s, .25rem);transition:inline-size .3s ease}spacing-specimen .scale-value{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end}token-specimen:not(:defined){display:block;min-height:2rem}token-specimen{display:block}component-sampler:not(:defined){display:block}component-sampler{display:block}semantic-palette[data-upgraded]>dl,semantic-palette[data-upgraded]>ul,semantic-palette[data-upgraded]>ol{display:none}semantic-palette .sp-export button:hover{background:var(--color-surface-hover, var(--color-surface-raised, #f5f5f5))}semantic-palette .sp-export button:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:2px}@keyframes ms-slide{0%{inset-inline-start:0}to{inset-inline-start:calc(100% - 1rem)}}@keyframes ms-fill{0%{transform:scaleX(0)}60%{transform:scaleX(1)}to{transform:scaleX(1);opacity:.3}}@media(prefers-reduced-motion:reduce){motion-specimen .ms-dot{animation:none!important;inset-inline-start:calc(50% - .5rem)!important}motion-specimen .ms-bar-fill{animation:none!important;transform:scaleX(.6)!important;opacity:.6!important}}accessibility-specimen{display:block;font:inherit}accessibility-specimen .as-contrast-table{inline-size:100%;border-collapse:collapse;border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-m, .5rem);overflow:hidden;font-size:.95em}accessibility-specimen .as-contrast-table th,accessibility-specimen .as-contrast-table td{padding-block:var(--size-2xs, .375rem);padding-inline:var(--size-s, .5rem);text-align:start;border-block-end:var(--border-width-thin, 1px) solid var(--color-border, #ddd)}accessibility-specimen .as-contrast-table tr:last-child th,accessibility-specimen .as-contrast-table tr:last-child td{border-block-end:none}accessibility-specimen .as-contrast-table thead{background:var(--color-surface-raised, var(--color-surface, #fff));font-size:.85em;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted, currentColor)}accessibility-specimen .as-pair-label{font-weight:500;display:flex;align-items:center;gap:var(--size-2xs, .375rem);font-variant-numeric:tabular-nums}accessibility-specimen .as-swatch{display:inline-block;inline-size:1.25rem;block-size:1.25rem;border-radius:var(--radius-s, .25rem);border:var(--border-width-thin, 1px) solid currentColor;flex-shrink:0}accessibility-specimen .as-pair-sample{font-weight:500;font-size:1em;white-space:nowrap;text-align:center}accessibility-specimen .as-pair-ratio{font-variant-numeric:tabular-nums;font-weight:600}accessibility-specimen .as-badge{text-align:center;font-weight:600;font-size:1.1em;inline-size:3em}accessibility-specimen .as-pass{color:var(--color-success, #2e7d32)}accessibility-specimen .as-fail{color:var(--color-error, #c62828)}accessibility-specimen .as-empty{text-align:center;font-style:italic;color:var(--color-text-muted, currentColor);padding-block:var(--size-l, 1.5rem)!important}accessibility-specimen .as-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs, .375rem)}accessibility-specimen .as-checklist>li{display:flex;align-items:flex-start;gap:var(--size-xs, .5rem);padding-block:var(--size-2xs, .375rem);padding-inline:var(--size-s, .5rem);border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-s, .25rem)}accessibility-specimen .as-checklist-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--radius-full, 999px);font-weight:700;line-height:1}accessibility-specimen .as-status-pass{border-color:var(--color-success, #2e7d32)}accessibility-specimen .as-status-pass .as-checklist-icon{background:var(--color-success, #2e7d32);color:var(--color-text-on-success, white)}accessibility-specimen .as-status-fail{border-color:var(--color-error, #c62828)}accessibility-specimen .as-status-fail .as-checklist-icon{background:var(--color-error, #c62828);color:var(--color-text-on-error, white)}accessibility-specimen .as-status-warn{border-color:var(--color-warning, #b8860b)}accessibility-specimen .as-status-warn .as-checklist-icon{background:var(--color-warning, #b8860b);color:var(--color-text-on-warning, white)}accessibility-specimen .as-status-na .as-checklist-icon{background:var(--color-text-muted, oklch(60% 0 0));color:var(--color-surface, white)}accessibility-specimen .as-sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}breakpoint-specimen:not(:defined){display:block}breakpoint-specimen{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(breakpoint-specimen){.bps-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.bps-readout{display:inline-flex;align-items:baseline;gap:var(--size-s, .75rem);font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;margin-block-end:var(--size-m, 1rem)}.bps-width{font-size:var(--font-size-l, 1.25rem);font-weight:600}.bps-active{font-size:var(--font-size-sm, .875rem);padding:var(--size-3xs, .125rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);background:var(--color-surface-raised, oklch(96% 0 0));color:var(--color-text-muted, #666);border:1px solid var(--color-border, oklch(85% 0 0))}.bps-active[data-active]:not([data-active=""]){background:var(--color-accent-soft, oklch(94% .04 260));color:var(--color-accent, oklch(45% .18 260));border-color:currentColor}.bps-ruler{position:relative;block-size:var(--size-xl, 2.5rem);margin:var(--size-s, .75rem) 0 var(--size-l, 1.5rem);border-block-start:2px solid var(--color-border, oklch(85% 0 0))}.bps-cursor{position:absolute;inset-block:-.5rem auto;inline-size:2px;block-size:calc(100% + 1rem);background:var(--color-accent, oklch(45% .18 260));inset-inline-start:var(--bps-pos, 0%);transform:translate(-1px);transition:inset-inline-start .12s linear;z-index:1}.bps-stop{position:absolute;inset-block-start:-2px;inset-inline-start:var(--bps-pos, 0%);display:block}.bps-tick{display:block;inline-size:1px;block-size:var(--size-xs, .5rem);background:var(--color-text-muted, #666)}.bps-stop-label{position:absolute;inset-block-start:var(--size-s, .75rem);inset-inline-start:0;transform:translate(-50%);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:center;white-space:nowrap;line-height:1.2}.bps-stop[data-current] .bps-stop-label{color:var(--color-accent, oklch(45% .18 260));font-weight:600}.bps-stop[data-current] .bps-tick{background:var(--color-accent, oklch(45% .18 260));inline-size:2px}.bps-list{display:grid;grid-template-columns:max-content 1fr;gap:var(--size-2xs, .25rem) var(--size-m, 1rem);margin:0;font-size:var(--font-size-sm, .875rem)}.bps-row{display:contents}.bps-row dt{font-family:var(--font-mono, ui-monospace, monospace);font-weight:600;color:var(--color-text-muted, #666)}.bps-row dd{margin:0;color:var(--color-text-muted, #666)}.bps-row[data-current] dt,.bps-row[data-current] dd{color:var(--color-accent, oklch(45% .18 260));font-weight:600}}breakpoint-specimen:not([data-observe]) [data-bp=sm]{font-style:italic}@media(width>=37.5rem){breakpoint-specimen:not([data-observe]) [data-bp=sm]{font-style:normal}breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dd{color:var(--color-text, currentColor)}}@media(width>=48rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dd{color:var(--color-text, currentColor)}}@media(width>=64rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dd{color:var(--color-text, currentColor)}}@media(width>=87.5rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dd{color:var(--color-text, currentColor)}}@media print{breakpoint-specimen .bps-readout,breakpoint-specimen .bps-ruler{display:none}}layout-specimen{display:flex;flex-direction:column;gap:var(--size-l, 1.5rem);font:inherit}layout-specimen .ls-entry{display:grid;grid-template-columns:1fr;gap:var(--size-s, .75rem);padding:var(--size-s, .75rem);border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-m, .5rem);background:var(--color-surface, #fff)}layout-specimen .ls-entry-head{display:flex;flex-direction:column;gap:var(--size-3xs, .125rem)}layout-specimen .ls-entry-name{margin:0;font-size:1em;font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text, #1a1a1a)}layout-specimen .ls-entry-desc{margin:0;font-size:.875em;color:var(--color-text-muted, currentColor)}layout-specimen .ls-live{padding:var(--size-s, .75rem);background:var(--color-surface-sunken, oklch(94% 0 0));border-radius:var(--radius-s, .25rem);min-block-size:4rem}layout-specimen .ls-snippet{margin:0;padding:var(--size-2xs, .375rem) var(--size-s, .5rem);background:var(--color-surface-sunken, oklch(94% 0 0));border-radius:var(--radius-s, .25rem);font-size:.8em;line-height:1.4;font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text, #1a1a1a);overflow-x:auto;white-space:pre}layout-specimen .ls-box{display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xs, .5rem);background:var(--color-action-subtle, color-mix(in oklch, var(--color-interactive, oklch(55% .2 260)) 15%, transparent));color:var(--color-text, #1a1a1a);border:var(--border-width-thin, 1px) solid var(--color-interactive, currentColor);border-radius:var(--radius-s, .25rem);font-size:.85em;font-weight:500;min-block-size:2rem}layout-specimen .ls-box-main{background:var(--color-surface, #fff);border-style:dashed}layout-specimen .ls-box-reel{inline-size:5rem;flex-shrink:0}layout-specimen .ls-chip{display:inline-flex;align-items:center;padding:var(--size-3xs, .125rem) var(--size-2xs, .375rem);background:var(--color-surface-raised, var(--color-surface, #fff));border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-full, 999px);font-size:.85em}font-pairer{display:block;max-inline-size:56rem}font-pairer:not(:defined){display:none}gradient-builder{display:block;max-inline-size:32rem}gradient-builder:not(:defined){display:none}.brand-specimen{display:grid;gap:var(--size-l, 1.5rem)}.bs-surfaces{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m, 1rem)}.bs-surfaces figure{margin:0;padding:var(--size-l, 1.5rem);border-radius:var(--radius-m, .5rem);display:grid;place-items:center;gap:var(--size-s, .75rem)}.bs-surfaces [data-surface=light]{background:#fff;color:#111}.bs-surfaces [data-surface=dark]{background:#111;color:#fff}.bs-scale{display:flex;align-items:end;gap:var(--size-l, 1.5rem);flex-wrap:wrap}.bs-scale span{display:grid;justify-items:center;gap:var(--size-2xs, .25rem)}.bs-clear-box{display:inline-block;padding:1em;outline:1px dashed var(--color-border, #d4d4d8);outline-offset:.25em}icon-set:not(:defined){display:block}icon-set{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(icon-set){.icon-set__search input{inline-size:100%;padding:var(--size-s, .5rem);border:1px solid var(--color-border, #d4d4d8);border-radius:var(--radius-s, .25rem);font:inherit;color:inherit;background:var(--color-surface, #fff)}.icon-set__grid{list-style:none;margin:var(--size-m, 1rem) 0 0;padding:0;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:var(--size-2xs, .25rem)}.icon-set__grid [hidden]{display:none}.icon-set__grid button{inline-size:100%;block-size:100%;display:grid;align-content:start;justify-items:center;gap:var(--size-2xs, .25rem);padding:var(--size-s, .75rem);background:none;border:1px solid transparent;border-radius:var(--radius-s, .25rem);cursor:pointer;font-size:var(--font-size-xs, .75rem);color:inherit}.icon-set__grid button>span:last-child{min-block-size:2lh;text-align:center;overflow-wrap:anywhere}.icon-set__grid button:hover{border-color:var(--color-border, #d4d4d8);background:var(--color-surface-2, #f4f4f5)}.icon-set__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}.icon-set__grid [data-icon]{font-size:1.5rem}}icon-specimen:not(:defined){display:block}icon-specimen{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(icon-specimen){.icon-specimen{inline-size:100%;border-collapse:collapse}.icon-specimen th,.icon-specimen td{text-align:start;padding:var(--size-s, .75rem);border-block-end:1px solid var(--color-border, #d4d4d8)}.icon-specimen thead th{font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #71717a)}.icon-specimen td [data-icon]{color:inherit;vertical-align:middle}}[data-list=do-dont],[data-list=pro-con]{list-style:none;padding-inline-start:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--size-s, .5rem)}[data-list]>[data-do],[data-list]>[data-pro]{padding:var(--size-s, .5rem) var(--size-m, 1rem);border-inline-start:4px solid var(--color-success, oklch(55% .2 145));background:var(--color-success-subtle, oklch(95% .03 145));border-radius:var(--radius-s, .25rem)}[data-list]>[data-dont],[data-list]>[data-con]{padding:var(--size-s, .5rem) var(--size-m, 1rem);border-inline-start:4px solid var(--color-error, oklch(55% .22 25));background:var(--color-error-subtle, oklch(95% .03 25));border-radius:var(--radius-s, .25rem)}[data-list=do-dont]>[data-do]:before{content:"Do";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-success, oklch(45% .2 145));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=do-dont]>[data-dont]:before{content:"Don\2019t";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-error, oklch(45% .22 25));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=pro-con]>[data-pro]:before{content:"Pro";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-success, oklch(45% .2 145));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=pro-con]>[data-con]:before{content:"Con";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-error, oklch(45% .22 25));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}.ds-token-table{width:100%;border-collapse:collapse;font-size:var(--font-size-s, .875rem)}.ds-token-table thead{border-block-end:2px solid var(--color-border, #ddd)}.ds-token-table th{text-align:start;padding:var(--size-xs, .25rem) var(--size-s, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666)}.ds-token-table td{padding:var(--size-xs, .25rem) var(--size-s, .5rem);border-block-end:1px solid var(--color-border, #eee);vertical-align:middle}.ds-token-table code{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem)}.ds-token-table .ds-swatch{display:inline-block;width:2.5rem;height:1.5rem;border-radius:var(--radius-s, .25rem);border:1px solid var(--color-border, #ddd);vertical-align:middle}.ds-token-table token-swatch{display:inline-flex}.ds-token-table token-swatch>[data-preview]{width:2.5rem;height:1.5rem;border-radius:var(--radius-s, .25rem);border:1px solid var(--color-border, #ddd)}
+color-palette:not(:defined){display:block}color-palette{display:block}color-palette .palette{display:flex;flex-wrap:wrap;gap:var(--size-xs, .5rem)}color-palette .palette.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}color-palette .palette.list{flex-direction:column}color-palette .palette.list .swatch-wrap{flex-direction:row;align-items:center;gap:var(--size-s, .75rem)}color-palette .palette.list .color-box{inline-size:36px!important;block-size:36px!important}color-palette .swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--size-2xs, .25rem)}color-palette .color-box{position:relative;border:1px solid oklch(0% 0 0 / .15);border-radius:var(--radius-s, .25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono, monospace);transition:transform .15s ease,box-shadow .15s ease;overflow:hidden}color-palette .color-box:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026;z-index:1}color-palette .color-box:focus-visible{outline:2px solid var(--color-focus-ring, currentColor);outline-offset:2px}color-palette .color-value{font-size:.625rem;line-height:1.2;opacity:0;transition:opacity .15s ease;text-align:center;padding:2px 4px;word-break:break-all}color-palette .color-box:hover .color-value,color-palette .color-box:focus-visible .color-value,color-palette .color-value.visible{opacity:1}color-palette .color-box.copied:after{content:"Copied!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;font-size:var(--font-size-xs, .75rem);font-weight:600;font-family:var(--font-sans, system-ui);border-radius:inherit}color-palette .color-name{font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}palette-generator{display:block}palette-generator .pg-seed-label{display:block;font-size:var(--font-size-s, .875rem);font-weight:600;color:var(--color-text-muted, #666);margin-block-end:var(--size-2xs, .25rem)}palette-generator>color-picker,palette-generator>input[type=color]{margin-block-end:var(--size-s, .75rem);padding-block-end:var(--size-s, .75rem);border-block-end:1px solid var(--color-border-subtle, #e5e5e5)}palette-generator .pg-export{margin-block-start:var(--size-s, .75rem)}palette-generator .pg-export button:hover{background:var(--surface-hover, #f5f5f5)}palette-generator .pg-export button:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:2px}type-specimen:not(:defined){display:block}type-specimen{display:block}type-specimen .specimen-header{margin-block-end:var(--size-s, .75rem)}type-specimen .specimen-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-2xs, .25rem);font-family:var(--font-sans, system-ui)}type-specimen .specimen-sample{font-size:var(--font-size-3xl, 1.875rem);line-height:1.2;margin:0;padding:var(--size-xs, .5rem);border:1px dashed transparent;border-radius:var(--radius-s, .25rem);transition:border-color .15s ease;cursor:text}type-specimen .specimen-sample:hover{border-color:var(--color-border, #ddd)}type-specimen .specimen-sample:focus{outline:none;border-color:var(--color-primary, #333)}type-specimen .specimen-chars{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem);margin-block-end:var(--size-s, .75rem);padding:var(--size-xs, .5rem);background:var(--color-surface-raised, #f8f8f8);border-radius:var(--radius-s, .25rem)}type-specimen .char-row{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:var(--font-size-s, .875rem)}type-specimen .char-label{font-family:var(--font-sans, system-ui);font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-muted, #666);inline-size:3.5rem;flex-shrink:0}type-specimen .char-row span:not(.char-label){inline-size:1.25em;text-align:center}type-specimen .specimen-weights{display:flex;flex-wrap:wrap;gap:var(--size-s, .75rem);margin-block-end:var(--size-s, .75rem)}type-specimen .weight-sample{display:flex;flex-direction:column;align-items:center;gap:2px}type-specimen .weight-label{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666)}type-specimen .weight-text{font-size:var(--font-size-2xl, 1.5rem)}type-specimen .specimen-scale{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}type-specimen .scale-step{display:flex;align-items:baseline;gap:var(--size-s, .75rem);line-height:1.3}type-specimen .scale-label{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);inline-size:2.5rem;flex-shrink:0;text-align:end}type-specimen .scale-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}spacing-specimen:not(:defined){display:block}spacing-specimen{display:block}spacing-specimen .specimen-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem);font-family:var(--font-sans, system-ui)}spacing-specimen .specimen-scale{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}spacing-specimen .scale-step{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:var(--size-s, .75rem);min-block-size:1.75rem}spacing-specimen .scale-name{font-family:var(--font-mono, monospace);font-size:var(--font-size-s, .875rem);color:var(--color-text-muted, #666);text-align:end}spacing-specimen .scale-bar{display:block;block-size:var(--size-m, 1rem);min-inline-size:2px;background:var(--color-interactive, oklch(55% .2 260));border-radius:var(--radius-s, .25rem);transition:inline-size .3s ease}spacing-specimen .scale-value{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end}token-specimen:not(:defined){display:block;min-height:2rem}token-specimen{display:block}component-sampler:not(:defined){display:block}component-sampler{display:block}semantic-palette[data-upgraded]>dl,semantic-palette[data-upgraded]>ul,semantic-palette[data-upgraded]>ol{display:none}semantic-palette .sp-export button:hover{background:var(--color-surface-hover, var(--color-surface-raised, #f5f5f5))}semantic-palette .sp-export button:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:2px}@keyframes ms-slide{0%{inset-inline-start:0}to{inset-inline-start:calc(100% - 1rem)}}@keyframes ms-fill{0%{transform:scaleX(0)}60%{transform:scaleX(1)}to{transform:scaleX(1);opacity:.3}}@media(prefers-reduced-motion:reduce){motion-specimen .ms-dot{animation:none!important;inset-inline-start:calc(50% - .5rem)!important}motion-specimen .ms-bar-fill{animation:none!important;transform:scaleX(.6)!important;opacity:.6!important}}accessibility-specimen{display:block;font:inherit}accessibility-specimen .as-contrast-table{inline-size:100%;border-collapse:collapse;border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-m, .5rem);overflow:hidden;font-size:.95em}accessibility-specimen .as-contrast-table th,accessibility-specimen .as-contrast-table td{padding-block:var(--size-2xs, .375rem);padding-inline:var(--size-s, .5rem);text-align:start;border-block-end:var(--border-width-thin, 1px) solid var(--color-border, #ddd)}accessibility-specimen .as-contrast-table tr:last-child th,accessibility-specimen .as-contrast-table tr:last-child td{border-block-end:none}accessibility-specimen .as-contrast-table thead{background:var(--color-surface-raised, var(--color-surface, #fff));font-size:.85em;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted, currentColor)}accessibility-specimen .as-pair-label{font-weight:500;display:flex;align-items:center;gap:var(--size-2xs, .375rem);font-variant-numeric:tabular-nums}accessibility-specimen .as-swatch{display:inline-block;inline-size:1.25rem;block-size:1.25rem;border-radius:var(--radius-s, .25rem);border:var(--border-width-thin, 1px) solid currentColor;flex-shrink:0}accessibility-specimen .as-pair-sample{font-weight:500;font-size:1em;white-space:nowrap;text-align:center}accessibility-specimen .as-pair-ratio{font-variant-numeric:tabular-nums;font-weight:600}accessibility-specimen .as-badge{text-align:center;font-weight:600;font-size:1.1em;inline-size:3em}accessibility-specimen .as-pass{color:var(--color-success, #2e7d32)}accessibility-specimen .as-fail{color:var(--color-error, #c62828)}accessibility-specimen .as-empty{text-align:center;font-style:italic;color:var(--color-text-muted, currentColor);padding-block:var(--size-l, 1.5rem)!important}accessibility-specimen .as-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs, .375rem)}accessibility-specimen .as-checklist>li{display:flex;align-items:flex-start;gap:var(--size-xs, .5rem);padding-block:var(--size-2xs, .375rem);padding-inline:var(--size-s, .5rem);border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-s, .25rem)}accessibility-specimen .as-checklist-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--radius-full, 999px);font-weight:700;line-height:1}accessibility-specimen .as-status-pass{border-color:var(--color-success, #2e7d32)}accessibility-specimen .as-status-pass .as-checklist-icon{background:var(--color-success, #2e7d32);color:var(--color-text-on-success, white)}accessibility-specimen .as-status-fail{border-color:var(--color-error, #c62828)}accessibility-specimen .as-status-fail .as-checklist-icon{background:var(--color-error, #c62828);color:var(--color-text-on-error, white)}accessibility-specimen .as-status-warn{border-color:var(--color-warning, #b8860b)}accessibility-specimen .as-status-warn .as-checklist-icon{background:var(--color-warning, #b8860b);color:var(--color-text-on-warning, white)}accessibility-specimen .as-status-na .as-checklist-icon{background:var(--color-text-muted, oklch(60% 0 0));color:var(--color-surface, white)}accessibility-specimen .as-sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}breakpoint-specimen:not(:defined){display:block}breakpoint-specimen{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(breakpoint-specimen){.bps-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.bps-readout{display:inline-flex;align-items:baseline;gap:var(--size-s, .75rem);font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;margin-block-end:var(--size-m, 1rem)}.bps-width{font-size:var(--font-size-l, 1.25rem);font-weight:600}.bps-active{font-size:var(--font-size-s, .875rem);padding:var(--size-3xs, .125rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);background:var(--color-surface-raised, oklch(96% 0 0));color:var(--color-text-muted, #666);border:1px solid var(--color-border, oklch(85% 0 0))}.bps-active[data-active]:not([data-active=""]){background:var(--color-accent-soft, oklch(94% .04 260));color:var(--color-accent, oklch(45% .18 260));border-color:currentColor}.bps-ruler{position:relative;block-size:var(--size-xl, 2.5rem);margin:var(--size-s, .75rem) 0 var(--size-l, 1.5rem);border-block-start:2px solid var(--color-border, oklch(85% 0 0))}.bps-cursor{position:absolute;inset-block:-.5rem auto;inline-size:2px;block-size:calc(100% + 1rem);background:var(--color-accent, oklch(45% .18 260));inset-inline-start:var(--bps-pos, 0%);transform:translate(-1px);transition:inset-inline-start .12s linear;z-index:1}.bps-stop{position:absolute;inset-block-start:-2px;inset-inline-start:var(--bps-pos, 0%);display:block}.bps-tick{display:block;inline-size:1px;block-size:var(--size-xs, .5rem);background:var(--color-text-muted, #666)}.bps-stop-label{position:absolute;inset-block-start:var(--size-s, .75rem);inset-inline-start:0;transform:translate(-50%);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:center;white-space:nowrap;line-height:1.2}.bps-stop[data-current] .bps-stop-label{color:var(--color-accent, oklch(45% .18 260));font-weight:600}.bps-stop[data-current] .bps-tick{background:var(--color-accent, oklch(45% .18 260));inline-size:2px}.bps-list{display:grid;grid-template-columns:max-content 1fr;gap:var(--size-2xs, .25rem) var(--size-m, 1rem);margin:0;font-size:var(--font-size-s, .875rem)}.bps-row{display:contents}.bps-row dt{font-family:var(--font-mono, ui-monospace, monospace);font-weight:600;color:var(--color-text-muted, #666)}.bps-row dd{margin:0;color:var(--color-text-muted, #666)}.bps-row[data-current] dt,.bps-row[data-current] dd{color:var(--color-accent, oklch(45% .18 260));font-weight:600}}breakpoint-specimen:not([data-observe]) [data-bp=sm]{font-style:italic}@media(width>=37.5rem){breakpoint-specimen:not([data-observe]) [data-bp=sm]{font-style:normal}breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dd{color:var(--color-text, currentColor)}}@media(width>=48rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dd{color:var(--color-text, currentColor)}}@media(width>=64rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dd{color:var(--color-text, currentColor)}}@media(width>=87.5rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dd{color:var(--color-text, currentColor)}}@media print{breakpoint-specimen .bps-readout,breakpoint-specimen .bps-ruler{display:none}}layout-specimen{display:flex;flex-direction:column;gap:var(--size-l, 1.5rem);font:inherit}layout-specimen .ls-entry{display:grid;grid-template-columns:1fr;gap:var(--size-s, .75rem);padding:var(--size-s, .75rem);border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-m, .5rem);background:var(--color-surface, #fff)}layout-specimen .ls-entry-head{display:flex;flex-direction:column;gap:var(--size-3xs, .125rem)}layout-specimen .ls-entry-name{margin:0;font-size:1em;font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text, #1a1a1a)}layout-specimen .ls-entry-desc{margin:0;font-size:.875em;color:var(--color-text-muted, currentColor)}layout-specimen .ls-live{padding:var(--size-s, .75rem);background:var(--color-surface-sunken, oklch(94% 0 0));border-radius:var(--radius-s, .25rem);min-block-size:4rem}layout-specimen .ls-snippet{margin:0;padding:var(--size-2xs, .375rem) var(--size-s, .5rem);background:var(--color-surface-sunken, oklch(94% 0 0));border-radius:var(--radius-s, .25rem);font-size:.8em;line-height:1.4;font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text, #1a1a1a);overflow-x:auto;white-space:pre}layout-specimen .ls-box{display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xs, .5rem);background:var(--color-action-subtle, color-mix(in oklch, var(--color-interactive, oklch(55% .2 260)) 15%, transparent));color:var(--color-text, #1a1a1a);border:var(--border-width-thin, 1px) solid var(--color-interactive, currentColor);border-radius:var(--radius-s, .25rem);font-size:.85em;font-weight:500;min-block-size:2rem}layout-specimen .ls-box-main{background:var(--color-surface, #fff);border-style:dashed}layout-specimen .ls-box-reel{inline-size:5rem;flex-shrink:0}layout-specimen .ls-chip{display:inline-flex;align-items:center;padding:var(--size-3xs, .125rem) var(--size-2xs, .375rem);background:var(--color-surface-raised, var(--color-surface, #fff));border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-full, 999px);font-size:.85em}font-pairer{display:block;max-inline-size:56rem}font-pairer:not(:defined){display:none}gradient-builder{display:block;max-inline-size:32rem}gradient-builder:not(:defined){display:none}.brand-specimen{display:grid;gap:var(--size-l, 1.5rem)}.bs-surfaces{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m, 1rem)}.bs-surfaces figure{margin:0;padding:var(--size-l, 1.5rem);border-radius:var(--radius-m, .5rem);display:grid;place-items:center;gap:var(--size-s, .75rem)}.bs-surfaces [data-surface=light]{background:#fff;color:#111}.bs-surfaces [data-surface=dark]{background:#111;color:#fff}.bs-scale{display:flex;align-items:end;gap:var(--size-l, 1.5rem);flex-wrap:wrap}.bs-scale span{display:grid;justify-items:center;gap:var(--size-2xs, .25rem)}.bs-clear-box{display:inline-block;padding:1em;outline:1px dashed var(--color-border, #d4d4d8);outline-offset:.25em}icon-set:not(:defined){display:block}icon-set{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(icon-set){.icon-set__search input{inline-size:100%;padding:var(--size-s, .5rem);border:1px solid var(--color-border, #d4d4d8);border-radius:var(--radius-s, .25rem);font:inherit;color:inherit;background:var(--color-surface, #fff)}.icon-set__grid{list-style:none;margin:var(--size-m, 1rem) 0 0;padding:0;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:var(--size-2xs, .25rem)}.icon-set__grid [hidden]{display:none}.icon-set__grid button{inline-size:100%;block-size:100%;display:grid;align-content:start;justify-items:center;gap:var(--size-2xs, .25rem);padding:var(--size-s, .75rem);background:none;border:1px solid transparent;border-radius:var(--radius-s, .25rem);cursor:pointer;font-size:var(--font-size-xs, .75rem);color:inherit}.icon-set__grid button>span:last-child{min-block-size:2lh;text-align:center;overflow-wrap:anywhere}.icon-set__grid button:hover{border-color:var(--color-border, #d4d4d8);background:var(--color-surface-2, #f4f4f5)}.icon-set__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}.icon-set__grid [data-icon]{font-size:1.5rem}}icon-specimen:not(:defined){display:block}icon-specimen{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(icon-specimen){.icon-specimen{inline-size:100%;border-collapse:collapse}.icon-specimen th,.icon-specimen td{text-align:start;padding:var(--size-s, .75rem);border-block-end:1px solid var(--color-border, #d4d4d8)}.icon-specimen thead th{font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #71717a)}.icon-specimen td [data-icon]{color:inherit;vertical-align:middle}}[data-list=do-dont],[data-list=pro-con]{list-style:none;padding-inline-start:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--size-s, .5rem)}[data-list]>[data-do],[data-list]>[data-pro]{padding:var(--size-s, .5rem) var(--size-m, 1rem);border-inline-start:4px solid var(--color-success, oklch(55% .2 145));background:var(--color-success-subtle, oklch(95% .03 145));border-radius:var(--radius-s, .25rem)}[data-list]>[data-dont],[data-list]>[data-con]{padding:var(--size-s, .5rem) var(--size-m, 1rem);border-inline-start:4px solid var(--color-error, oklch(55% .22 25));background:var(--color-error-subtle, oklch(95% .03 25));border-radius:var(--radius-s, .25rem)}[data-list=do-dont]>[data-do]:before{content:"Do";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-success, oklch(45% .2 145));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=do-dont]>[data-dont]:before{content:"Don\2019t";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-error, oklch(45% .22 25));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=pro-con]>[data-pro]:before{content:"Pro";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-success, oklch(45% .2 145));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=pro-con]>[data-con]:before{content:"Con";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-error, oklch(45% .22 25));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}.ds-token-table{width:100%;border-collapse:collapse;font-size:var(--font-size-s, .875rem)}.ds-token-table thead{border-block-end:2px solid var(--color-border, #ddd)}.ds-token-table th{text-align:start;padding:var(--size-xs, .25rem) var(--size-s, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666)}.ds-token-table td{padding:var(--size-xs, .25rem) var(--size-s, .5rem);border-block-end:1px solid var(--color-border, #eee);vertical-align:middle}.ds-token-table code{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem)}.ds-token-table .ds-swatch{display:inline-block;width:2.5rem;height:1.5rem;border-radius:var(--radius-s, .25rem);border:1px solid var(--color-border, #ddd);vertical-align:middle}.ds-token-table token-swatch{display:inline-flex}.ds-token-table token-swatch>[data-preview]{width:2.5rem;height:1.5rem;border-radius:var(--radius-s, .25rem);border:1px solid var(--color-border, #ddd)}