layout-style-css 2.0.0 → 2.1.0

package/demo/demo.js

@@ -1,3 +1,82 @@
+const UI_STYLE_KIT_VERSION = "2.1.0";
+const UI_STYLE_KIT_MANIFEST_URL = `https://unpkg.com/ui-style-kit-css@${UI_STYLE_KIT_VERSION}/manifest.json`;
+const UI_STYLE_KIT_MANIFEST_FALLBACK = Object.freeze({
+  version: UI_STYLE_KIT_VERSION,
+  presets: Object.freeze([
+    Object.freeze({ id: "minimal-saas", label: "Minimal SaaS", prefix: "saas" }),
+    Object.freeze({ id: "bento", label: "Bento", prefix: "bento" }),
+    Object.freeze({ id: "maximalist", label: "Maximalist", prefix: "max" }),
+    Object.freeze({ id: "bauhaus", label: "Bauhaus", prefix: "bau" }),
+    Object.freeze({ id: "tactile", label: "Tactile", prefix: "tactile" }),
+    Object.freeze({ id: "neumorphism", label: "Neumorphism", prefix: "neo" }),
+    Object.freeze({ id: "retrofuturism", label: "Retrofuturism", prefix: "retro" }),
+    Object.freeze({ id: "brutalism", label: "Brutalism", prefix: "brutal" }),
+    Object.freeze({ id: "cyberpunk", label: "Cyberpunk", prefix: "cyber" }),
+    Object.freeze({ id: "y2k", label: "Y2K", prefix: "y2k" }),
+    Object.freeze({ id: "retro-glass", label: "Retro Glass", prefix: "rg" })
+  ]),
+  themes: Object.freeze([
+    "midnight-gold",
+    "ocean-steel",
+    "forest-moss",
+    "sunset-ember",
+    "royal-plum",
+    "graphite-cyan",
+    "desert-sage",
+    "rose-quartz",
+    "cyber-lime",
+    "arctic-indigo"
+  ]),
+  modes: Object.freeze(["light", "dark", "contrast"])
+});
+
+function normalizeUiStyleKitManifest(manifest) {
+  const normalized = {
+    version: String(manifest?.version ?? UI_STYLE_KIT_VERSION),
+    presets: Array.isArray(manifest?.presets) ? manifest.presets : [],
+    themes: Array.isArray(manifest?.themes) ? manifest.themes : [],
+    modes: Array.isArray(manifest?.modes) ? manifest.modes : []
+  };
+  const presets = normalized.presets
+    .map((preset) => ({
+      id: String(preset?.id ?? ""),
+      label: String(preset?.label ?? preset?.id ?? ""),
+      prefix: String(preset?.prefix ?? "")
+    }))
+    .filter((preset) => preset.id && preset.prefix);
+
+  if (presets.length === 0 || normalized.themes.length === 0 || normalized.modes.length === 0) {
+    throw new Error("UI Style Kit manifest is missing presets, themes, or modes.");
+  }
+
+  return Object.freeze({
+    version: normalized.version,
+    presets: Object.freeze(presets.map((preset) => Object.freeze(preset))),
+    themes: Object.freeze(normalized.themes.map(String)),
+    modes: Object.freeze(normalized.modes.map(String))
+  });
+}
+
+async function loadUiStyleKitManifest() {
+  try {
+    const response = await fetch(UI_STYLE_KIT_MANIFEST_URL, { cache: "force-cache" });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    return normalizeUiStyleKitManifest(await response.json());
+  } catch (error) {
+    /*
+      The published demo can render before the companion UI release reaches every CDN edge.
+      The fallback mirrors the 2.1 manifest contract so layout behavior stays testable.
+    */
+    console.warn("UI Style Kit 2.1 manifest unavailable; using the packaged fallback.", error);
+    return UI_STYLE_KIT_MANIFEST_FALLBACK;
+  }
+}
+
+const UI_STYLE_KIT_MANIFEST = await loadUiStyleKitManifest();
 const ALLOWLISTS = Object.freeze({
   wrapper: Object.freeze(["default", "compact", "prose", "content", "wide", "full", "breakout"]),
   recipe: Object.freeze([
@@ -29,31 +108,9 @@ const ALLOWLISTS = Object.freeze({
   ]),
   container: Object.freeze(["auto", "40rem", "47rem", "49rem", "63rem", "65rem", "80rem"]),
   density: Object.freeze(["compact", "comfortable", "spacious"]),
-  ui: Object.freeze([
-    "minimal-saas",
-    "bento",
-    "maximalist",
-    "bauhaus",
-    "tactile",
-    "neumorphism",
-    "retrofuturism",
-    "brutalism",
-    "cyberpunk",
-    "y2k",
-    "retro-glass"
-  ]),
-  theme: Object.freeze([
-    "arctic-indigo",
-    "ocean-steel",
-    "graphite-cyan",
-    "forest-moss",
-    "rose-quartz",
-    "desert-sage",
-    "midnight-gold",
-    "cyber-lime",
-    "sunset-ember"
-  ]),
-  mode: Object.freeze(["light", "dark", "contrast"]),
+  ui: Object.freeze(UI_STYLE_KIT_MANIFEST.presets.map((preset) => preset.id)),
+  theme: Object.freeze(UI_STYLE_KIT_MANIFEST.themes),
+  mode: Object.freeze(UI_STYLE_KIT_MANIFEST.modes),
   ecosystem: Object.freeze(["layout-only", "layout-ui", "all-three"])
 });
 
@@ -85,19 +142,9 @@ const DENSITY_GAPS = Object.freeze({
   spacious: "1.5rem"
 });
 
-const UI_CLASS_PREFIXES = Object.freeze({
-  "minimal-saas": "saas",
-  bento: "bento",
-  maximalist: "max",
-  bauhaus: "bau",
-  tactile: "tactile",
-  neumorphism: "neo",
-  retrofuturism: "retro",
-  brutalism: "brutal",
-  cyberpunk: "cyber",
-  y2k: "y2k",
-  "retro-glass": "rg"
-});
+const UI_CLASS_PREFIXES = Object.freeze(
+  Object.fromEntries(UI_STYLE_KIT_MANIFEST.presets.map((preset) => [preset.id, preset.prefix]))
+);
 
 const RECIPE_CLASSES = Object.freeze({
   "app-shell": "ly-app-shell",
@@ -120,14 +167,13 @@ const RECIPE_AREAS = Object.freeze({
 const ECOSYSTEM_IMPORTS = Object.freeze({
   "layout-only": Object.freeze(['import "layout-style-css";']),
   "layout-ui": Object.freeze([
-    'import "ui-style-kit-css/with-bridge.css";',
-    'import "layout-style-css/integrations/ui-style-kit.css";',
+    'import "ui-style-kit-css/visual.css";',
     'import "layout-style-css";'
   ]),
   "all-three": Object.freeze([
-    'import "ui-style-kit-css/with-bridge.css";',
+    'import "ui-style-kit-css/visual.css";',
+    'import "ui-style-kit-css/interactive-surface-theme.css";',
     'import "interactive-surface-css/state-core.css";',
-    'import "layout-style-css/integrations/ui-style-kit.css";',
     'import "layout-style-css";'
   ])
 });
@@ -152,6 +198,7 @@ const copyStatus = document.querySelector("#copyStatus");
 const ecosystemStatus = document.querySelector("#ecosystemStatus");
 const containerReadout = document.querySelector("#containerReadout");
 const uiKitStylesheet = document.querySelector("#uiKitStylesheet");
+const uiKitInteractiveThemeStylesheet = document.querySelector("#uiKitInteractiveThemeStylesheet");
 const interactiveSurfaceStylesheet = document.querySelector("#interactiveSurfaceStylesheet");
 const layoutIntegrationStylesheet = document.querySelector("#layoutIntegrationStylesheet");
 const layoutCoreStylesheet = document.querySelector("#layoutCoreStylesheet");
@@ -162,6 +209,9 @@ const drawerBackdrop = document.querySelector("#demoControlsBackdrop");
 const stateToggle = document.querySelector("#stateToggle");
 const mobileControlsQuery = window.matchMedia("(max-width: 63.999rem)");
 
+body.dataset.uiManifestVersion = UI_STYLE_KIT_MANIFEST.version;
+syncUiManifestSelectOptions();
+
 let state = readStateFromQuery();
 let drawerReturnFocus = null;
 let querySyncTimer = null;
@@ -302,6 +352,40 @@ function formatLabel(value) {
     .join(" ");
 }
 
+function syncUiManifestSelectOptions() {
+  const optionGroups = {
+    ui: UI_STYLE_KIT_MANIFEST.presets.map((preset) => ({
+      value: preset.id,
+      label: preset.label || formatLabel(preset.id)
+    })),
+    theme: UI_STYLE_KIT_MANIFEST.themes.map((theme) => ({
+      value: theme,
+      label: formatLabel(theme)
+    })),
+    mode: UI_STYLE_KIT_MANIFEST.modes.map((mode) => ({
+      value: mode,
+      label: mode === "contrast" ? "High contrast" : formatLabel(mode)
+    }))
+  };
+
+  for (const [key, options] of Object.entries(optionGroups)) {
+    const select = controls[key];
+
+    if (!select) {
+      continue;
+    }
+
+    select.replaceChildren(
+      ...options.map(({ value, label }) => {
+        const option = document.createElement("option");
+        option.value = value;
+        option.textContent = label;
+        return option;
+      })
+    );
+  }
+}
+
 function syncUiKitClasses() {
   const prefix = UI_CLASS_PREFIXES[state.ui];
 
@@ -330,8 +414,9 @@ function syncEcosystem() {
   const includesInteractiveSurface = state.ecosystem === "all-three";
 
   uiKitStylesheet.disabled = !includesUi;
+  uiKitInteractiveThemeStylesheet.disabled = !includesInteractiveSurface;
   interactiveSurfaceStylesheet.disabled = !includesInteractiveSurface;
-  layoutIntegrationStylesheet.disabled = !includesUi;
+  layoutIntegrationStylesheet.disabled = true;
   layoutCoreStylesheet.disabled = false;
   ecosystemStatus.textContent = ECOSYSTEM_LABELS[state.ecosystem];
 }

package/demo/index.html

@@ -5,8 +5,8 @@
     <meta http-equiv="x-ua-compatible" content="IE=edge">
     <meta http-equiv="content-language" content="en-US">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="title" content="layout-style-css 2.0 Interactive Layout Lab">
-    <meta name="description" content="Explore container-first wrappers, recipes, and layout personalities in layout-style-css 2.0 with optional UI Style Kit and Interactive Surface integrations.">
+    <meta name="title" content="layout-style-css 2.1 Interactive Layout Lab">
+    <meta name="description" content="Explore container-first wrappers, recipes, and layout personalities in layout-style-css 2.1 with optional UI Style Kit and Interactive Surface integrations.">
     <meta name="keywords" content="CSS layout library, container queries, layout recipes, UI Style Kit CSS, Interactive Surface CSS, responsive CSS">
     <meta name="author" content="Foscat">
     <meta name="creator" content="Foscat">
@@ -36,7 +36,7 @@
     <meta name="color-scheme" content="light dark">
     <meta property="og:type" content="website">
     <meta property="og:locale" content="en_US">
-    <meta property="og:title" content="layout-style-css 2.0 Interactive Layout Lab">
+    <meta property="og:title" content="layout-style-css 2.1 Interactive Layout Lab">
     <meta property="og:description" content="Test semantic wrappers, container-responsive recipes, and sixteen spatial personalities without coupling layout to paint.">
     <meta property="og:image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
     <meta property="og:image:secure_url" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
@@ -48,11 +48,11 @@
     <meta property="og:site_name" content="layout-style-css">
     <meta property="og:updated_time" content="2026-07-20T00:00:00-05:00">
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="layout-style-css 2.0 Interactive Layout Lab">
-    <meta name="twitter:description" content="Container-first responsive layouts that pair cleanly with UI Style Kit CSS 2.0.1 and Interactive Surface CSS 1.4.0.">
+    <meta name="twitter:title" content="layout-style-css 2.1 Interactive Layout Lab">
+    <meta name="twitter:description" content="Container-first responsive layouts that pair cleanly with UI Style Kit CSS 2.1 visual builds and Interactive Surface CSS 1.5.0.">
     <meta name="twitter:image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
     <meta name="twitter:image:alt" content="layout-style-css interactive layout lab social card">
-    <meta itemprop="name" content="layout-style-css 2.0 Interactive Layout Lab">
+    <meta itemprop="name" content="layout-style-css 2.1 Interactive Layout Lab">
     <meta itemprop="description" content="A live workbench for semantic wrappers, responsive recipes, and spatial personalities.">
     <meta itemprop="image" content="https://foscat.github.io/layout-style-css/assets/social-card.png">
     <link rel="canonical" href="https://foscat.github.io/layout-style-css/">
@@ -65,11 +65,12 @@
     <link rel="mask-icon" href="./assets/favicon.svg" color="#111827">
     <link rel="manifest" href="./site.webmanifest">
     <link rel="sitemap" type="application/xml" title="Sitemap" href="./sitemap.xml">
-    <title>layout-style-css 2.0 Interactive Layout Lab</title>
+    <title>layout-style-css 2.1 Interactive Layout Lab</title>
 
-    <link id="uiKitStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.0.1/dist/ui-style-kit.with-bridge.min.css" integrity="sha384-3i/xBAMjaAMQiR/vK1Tq7SzY0TFLUvdYKQKJa4t4zMXXOSfZKY+FOtFtk43F/2J+" crossorigin="anonymous">
-    <link id="interactiveSurfaceStylesheet" rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.4.0/state-core.css" integrity="sha384-D2077FYjcZbu1Mk9p80y2x1I9XdkK3L6ndN1wyvfRq8icCgIXWdpsY0on2NSakA6" crossorigin="anonymous">
-    <link id="layoutIntegrationStylesheet" rel="stylesheet" href="../dist/integrations/ui-style-kit.css">
+    <link id="uiKitStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.1.0/dist/ui-style-kit.visual.min.css" integrity="sha384-DUhB5MkNLJffjy7NRg13prdEcPTUR6zdPtameCyfq3tId/cM8o3ojpyvU/xdxZ8t" crossorigin="anonymous">
+    <link id="uiKitInteractiveThemeStylesheet" rel="stylesheet" href="https://unpkg.com/ui-style-kit-css@2.1.0/styles/interactive-surface-theme.css" integrity="sha384-t7ZuirMM/Qoeoz+/5+S4JxIGXs076pqlgMxv6FymZW3tGj7snT8J2ZlV2+sH6++j" crossorigin="anonymous">
+    <link id="interactiveSurfaceStylesheet" rel="stylesheet" href="https://unpkg.com/interactive-surface-css@1.5.0/state-core.css" integrity="sha384-v2NwNOzOcQ5ed7W7OHahaKHXspqfD0p8XO+kueqrsyfEcuBO2izsAQb/J/PxF0eX" crossorigin="anonymous">
+    <link id="layoutIntegrationStylesheet" rel="stylesheet" href="../dist/integrations/ui-style-kit.css" disabled data-deprecated="true">
     <link id="layoutCoreStylesheet" rel="stylesheet" href="../dist/layout-style-css.css">
     <link rel="stylesheet" href="./demo.css">
 
@@ -78,7 +79,7 @@
         "@context": "https://schema.org",
         "@type": "SoftwareSourceCode",
         "name": "layout-style-css",
-        "version": "2.0.0",
+        "version": "2.1.0",
         "description": "A dependency-free, container-first CSS layout library for semantic wrappers, composition primitives, responsive recipes, and spatial personalities.",
         "programmingLanguage": "CSS",
         "applicationCategory": "DeveloperApplication",
@@ -97,7 +98,7 @@
 
     <header class="demo-topbar">
       <div class="demo-brand">
-        <span class="demo-kicker">layout-style-css 2.0</span>
+        <span class="demo-kicker">layout-style-css 2.1</span>
         <strong>Interactive Layout Lab</strong>
       </div>
       <div class="demo-topbar-actions">
@@ -206,15 +207,16 @@
 
           <label for="themeSelect">Theme
             <select id="themeSelect" data-query-key="theme" data-ui-kit="select">
-              <option value="arctic-indigo">Arctic Indigo</option>
+              <option value="midnight-gold">Midnight Gold</option>
               <option value="ocean-steel">Ocean Steel</option>
-              <option value="graphite-cyan">Graphite Cyan</option>
               <option value="forest-moss">Forest Moss</option>
-              <option value="rose-quartz">Rose Quartz</option>
+              <option value="sunset-ember">Sunset Ember</option>
+              <option value="royal-plum">Royal Plum</option>
+              <option value="graphite-cyan">Graphite Cyan</option>
               <option value="desert-sage">Desert Sage</option>
-              <option value="midnight-gold">Midnight Gold</option>
+              <option value="rose-quartz">Rose Quartz</option>
               <option value="cyber-lime">Cyber Lime</option>
-              <option value="sunset-ember">Sunset Ember</option>
+              <option value="arctic-indigo">Arctic Indigo</option>
             </select>
           </label>
 
@@ -246,7 +248,7 @@
             </p>
           </div>
           <div class="demo-state-panel">
-            <span>Interactive Surface 1.4.0 state</span>
+            <span>Interactive Surface 1.5.0 state</span>
             <button type="button" id="stateToggle" class="interactive-surface" aria-pressed="false" data-surface-level="2" data-surface-variant="primary" data-demo-button data-ui-kit="button button-primary">
               Toggle active state
             </button>

package/demo/robots.txt

@@ -1,4 +1,4 @@
-User-agent: *
-Allow: /
-
-Sitemap: https://foscat.github.io/layout-style-css/sitemap.xml
+User-agent: *
+Allow: /
+
+Sitemap: https://foscat.github.io/layout-style-css/sitemap.xml

package/demo/site.webmanifest

@@ -1,23 +1,23 @@
-{
-  "name": "layout-style-css",
-  "short_name": "Layout CSS",
-  "description": "Container-first layout-style-css 2.0 lab for wrappers, recipes, personalities, and optional ecosystem integrations.",
-  "start_url": "./index.html",
-  "display": "standalone",
-  "background_color": "#111827",
-  "theme_color": "#111827",
-  "icons": [
-    {
-      "src": "./assets/favicon.svg",
-      "sizes": "64x64",
-      "type": "image/svg+xml",
-      "purpose": "any"
-    },
-    {
-      "src": "./assets/apple-touch-icon.svg",
-      "sizes": "180x180",
-      "type": "image/svg+xml",
-      "purpose": "any maskable"
-    }
-  ]
-}
+{
+  "name": "layout-style-css",
+  "short_name": "Layout CSS",
+  "description": "Container-first layout-style-css 2.1 lab for wrappers, recipes, personalities, and optional ecosystem integrations.",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "#111827",
+  "theme_color": "#111827",
+  "icons": [
+    {
+      "src": "./assets/favicon.svg",
+      "sizes": "64x64",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "./assets/apple-touch-icon.svg",
+      "sizes": "180x180",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/demo/sitemap.xml

@@ -1,9 +1,9 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url>
-    <loc>https://foscat.github.io/layout-style-css/</loc>
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://foscat.github.io/layout-style-css/</loc>
     <lastmod>2026-07-20</lastmod>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-</urlset>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>