kss-modern 0.0.48 → 1.1.0

package/README.md

@@ -47,7 +47,7 @@ This scans all `.css` and `.scss` files in `contentDir` for KSS comment blocks a
 ## Documentation
 
 - **[Setup Guide](docs/setup.md)** — Installation, configuration reference, watch mode, project structure, and API reference
-- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, etc.), and styleguide UI features
+- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, wrapper, html/body classes, etc.), and styleguide UI features
 - **[Changelog](CHANGELOG.md)** — Version history and release notes
 
 ## Basic KSS Example

package/dist/node/lib/index.mjs

@@ -952,14 +952,13 @@ async function generateFullPageFile(data) {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="generator" content="styleguide">
-    ${typeof data.theme === "object" && "dark" in data.theme && "light" in data.theme ? `
-          <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/fullpage.svg">
-      ` : `
-        <meta name="theme-color" content="${data.theme}">
-        <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/fullpage-light.svg">
-      `}
+    <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/fullpage.svg">
     ${data.ogImageUrl ? `<meta property="og:image" content="${data.ogImageUrl}">` : ""}
-    <script type="module" src="/styleguide-assets/fullpage-B4TYMCjK.js"><\/script>
+    ${typeof data.theme === "object" && "dark" in data.theme && "light" in data.theme ? `
+          <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
+          <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
+      ` : `<meta name="theme-color" content="${data.theme}">`}
+    <script type="module" src="/styleguide-assets/fullpage-Bu4DpBQh.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -1756,15 +1755,13 @@ async function generatePreviewFile(data) {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="generator" content="styleguide">
+    <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/preview.svg">
+    ${data.ogImageUrl ? `<meta property="og:image" content="${data.ogImageUrl}">` : ""}
     ${typeof data.theme === "object" && "dark" in data.theme && "light" in data.theme ? `
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
-          <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/preview.svg">
-      ` : `
-        <meta name="theme-color" content="${data.theme}">
-        <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/preview-light.svg">
-      `}
-    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-BiyuVoXa.css">
+      ` : `<meta name="theme-color" content="${data.theme}">`}
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-BWQ6E3TR.css">
     <script>
   //#region client/lib/iframe-resize.ts
 var e = [
@@ -1917,7 +1914,7 @@ document.addEventListener("DOMContentLoaded", () => {
 //#endregion
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-B9hjQPp8.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-8L8aaFj4.js"><\/script>
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">

package/dist/styleguide-assets/.vite/manifest.json

@@ -1,6 +1,6 @@
 {
-  "_animate-C4Uc6ztd.js": {
-    "file": "animate-C4Uc6ztd.js",
+  "_animate-BwJZPSbF.js": {
+    "file": "animate-BwJZPSbF.js",
     "name": "animate"
   },
   "_code-highlight-ClkzHTGA.js": {
@@ -16,7 +16,7 @@
     "name": "utils"
   },
   "client/fullpage.ts": {
-    "file": "fullpage-B4TYMCjK.js",
+    "file": "fullpage-Bu4DpBQh.js",
     "name": "fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true,
@@ -26,14 +26,14 @@
     ]
   },
   "client/lib/clipboard.ts": {
-    "file": "clipboard-BQf2MokQ.js",
+    "file": "clipboard-BqN2XQ0C.js",
     "name": "clipboard",
     "src": "client/lib/clipboard.ts",
     "isDynamicEntry": true,
     "imports": [
       "_signal-ZVBNTRLw.js",
       "_utils-DrMb1LbR.js",
-      "_animate-C4Uc6ztd.js"
+      "_animate-BwJZPSbF.js"
     ]
   },
   "client/lib/editor-select.ts": {
@@ -53,13 +53,13 @@
     ]
   },
   "client/lib/icons.ts": {
-    "file": "icons-v8DzEgTa.js",
+    "file": "icons-DICmq5xt.js",
     "name": "icons",
     "src": "client/lib/icons.ts",
     "isDynamicEntry": true,
     "imports": [
       "_utils-DrMb1LbR.js",
-      "_animate-C4Uc6ztd.js"
+      "_animate-BwJZPSbF.js"
     ]
   },
   "client/preview-inline.ts": {
@@ -69,7 +69,7 @@
     "isEntry": true
   },
   "client/preview.ts": {
-    "file": "preview-B9hjQPp8.js",
+    "file": "preview-8L8aaFj4.js",
     "name": "preview",
     "src": "client/preview.ts",
     "isEntry": true,
@@ -77,7 +77,7 @@
       "_code-highlight-ClkzHTGA.js",
       "_signal-ZVBNTRLw.js",
       "_utils-DrMb1LbR.js",
-      "_animate-C4Uc6ztd.js"
+      "_animate-BwJZPSbF.js"
     ],
     "dynamicImports": [
       "client/lib/html-validator.ts",
@@ -87,7 +87,7 @@
     ]
   },
   "node_modules/axe-core/axe.js": {
-    "file": "axe-B_niXOpn.js",
+    "file": "axe-Cd_oCzvh.js",
     "name": "axe",
     "src": "node_modules/axe-core/axe.js",
     "isDynamicEntry": true,
@@ -96,7 +96,7 @@
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {
-    "file": "browser-C209ZHDH.js",
+    "file": "browser-DfbHtzxK.js",
     "name": "browser",
     "src": "node_modules/html-validate/dist/esm/browser.js",
     "isDynamicEntry": true,
@@ -105,7 +105,7 @@
     ]
   },
   "style.css": {
-    "file": "kss-modern-BiyuVoXa.css",
+    "file": "kss-modern-BWQ6E3TR.css",
     "src": "style.css"
   }
 }

package/dist/styleguide-assets/{animate-C4Uc6ztd.js → animate-BwJZPSbF.js}

@@ -11,7 +11,7 @@ function t(e, t) {
 var n = (e, t, n) => n > t ? t : n < e ? e : n, r = {}, i = (e) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e), a = (e) => typeof e == "object" && !!e, o = (e) => /^0[^.\s]+$/u.test(e);
 //#endregion
 //#region node_modules/motion-utils/dist/es/memo.mjs
-/* @__NO_SIDE_EFFECTS__ */
+/*#__NO_SIDE_EFFECTS__*/
 function s(e) {
 	let t;
 	return () => (t === void 0 && (t = e()), t);
@@ -53,7 +53,7 @@ function y(e, t, n, r, i) {
 	while (Math.abs(a) > _ && ++s < v);
 	return o;
 }
-/* @__NO_SIDE_EFFECTS__ */
+/*#__NO_SIDE_EFFECTS__*/
 function b(e, t, n, r) {
 	if (e === t && n === r) return c;
 	let i = (t) => y(t, 0, 1, e, n);
@@ -61,10 +61,10 @@ function b(e, t, n, r) {
 }
 //#endregion
 //#region node_modules/motion-utils/dist/es/easing/modifiers/mirror.mjs
-var x = /* @__NO_SIDE_EFFECTS__ */ (e) => (t) => t <= .5 ? e(2 * t) / 2 : (2 - e(2 * (1 - t))) / 2, S = /* @__NO_SIDE_EFFECTS__ */ (e) => (t) => 1 - e(1 - t), C = /* @__PURE__ */ b(.33, 1.53, .69, .99), w = /* @__PURE__ */ S(C), T = /* @__PURE__ */ x(w), E = (e) => e >= 1 ? 1 : (e *= 2) < 1 ? .5 * w(e) : .5 * (2 - 2 ** (-10 * (e - 1))), D = (e) => 1 - Math.sin(Math.acos(e)), ee = /* @__PURE__ */ S(D), te = /* @__PURE__ */ x(D), ne = /* @__PURE__ */ b(.42, 0, 1, 1), re = /* @__PURE__ */ b(0, 0, .58, 1), ie = /* @__PURE__ */ b(.42, 0, .58, 1), ae = /* @__NO_SIDE_EFFECTS__ */ (e) => Array.isArray(e) && typeof e[0] != "number";
+var x = /* @__NO_SIDE_EFFECTS__ */ (e) => (t) => t <= .5 ? e(2 * t) / 2 : (2 - e(2 * (1 - t))) / 2, S = /* @__NO_SIDE_EFFECTS__ */ (e) => (t) => 1 - e(1 - t), C = /*@__PURE__*/ b(.33, 1.53, .69, .99), w = /*@__PURE__*/ S(C), T = /*@__PURE__*/ x(w), E = (e) => e >= 1 ? 1 : (e *= 2) < 1 ? .5 * w(e) : .5 * (2 - 2 ** (-10 * (e - 1))), D = (e) => 1 - Math.sin(Math.acos(e)), ee = /* @__PURE__ */ S(D), te = /* @__PURE__ */ x(D), ne = /*@__PURE__*/ b(.42, 0, 1, 1), re = /*@__PURE__*/ b(0, 0, .58, 1), ie = /*@__PURE__*/ b(.42, 0, .58, 1), ae = /* @__NO_SIDE_EFFECTS__ */ (e) => Array.isArray(e) && typeof e[0] != "number";
 //#endregion
 //#region node_modules/motion-utils/dist/es/easing/utils/get-easing-for-segment.mjs
-/* @__NO_SIDE_EFFECTS__ */
+/*#__NO_SIDE_EFFECTS__*/
 function oe(e, t) {
 	return /* @__PURE__ */ ae(e) ? e[h(0, e.length, t)] : e;
 }
@@ -174,7 +174,7 @@ var k = {
 	layout: 0,
 	mainThread: 0,
 	waapi: 0
-}, Se = (e) => (t) => typeof t == "string" && t.startsWith(e), Ce = /* @__PURE__ */ Se("--"), we = /* @__PURE__ */ Se("var(--"), Te = (e) => we(e) ? Ee.test(e.split("/*")[0].trim()) : !1, Ee = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
+}, Se = (e) => (t) => typeof t == "string" && t.startsWith(e), Ce = /*@__PURE__*/ Se("--"), we = /*@__PURE__*/ Se("var(--"), Te = (e) => we(e) ? Ee.test(e.split("/*")[0].trim()) : !1, Ee = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
 function De(e) {
 	return typeof e == "string" ? e.split("/*")[0].includes("var(--") : !1;
 }
@@ -211,8 +211,8 @@ var je = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(
 	...A,
 	transform: (e) => Math.round(Pe(e))
 }, N = {
-	test: /* @__PURE__ */ Me("rgb", "red"),
-	parse: /* @__PURE__ */ Ne("red", "green", "blue"),
+	test: /*@__PURE__*/ Me("rgb", "red"),
+	parse: /*@__PURE__*/ Ne("red", "green", "blue"),
 	transform: ({ red: e, green: t, blue: n, alpha: r = 1 }) => "rgba(" + Fe.transform(e) + ", " + Fe.transform(t) + ", " + Fe.transform(n) + ", " + M(j.transform(r)) + ")"
 };
 //#endregion
@@ -227,20 +227,20 @@ function Ie(e) {
 	};
 }
 var Le = {
-	test: /* @__PURE__ */ Me("#"),
+	test: /*@__PURE__*/ Me("#"),
 	parse: Ie,
 	transform: N.transform
 }, P = /* @__NO_SIDE_EFFECTS__ */ (e) => ({
 	test: (t) => typeof t == "string" && t.endsWith(e) && t.split(" ").length === 1,
 	parse: parseFloat,
 	transform: (t) => `${t}${e}`
-}), F = /* @__PURE__ */ P("deg"), I = /* @__PURE__ */ P("%"), L = /* @__PURE__ */ P("px"), Re = /* @__PURE__ */ P("vh"), ze = /* @__PURE__ */ P("vw"), Be = {
+}), F = /*@__PURE__*/ P("deg"), I = /*@__PURE__*/ P("%"), L = /*@__PURE__*/ P("px"), Re = /*@__PURE__*/ P("vh"), ze = /*@__PURE__*/ P("vw"), Be = {
 	...I,
 	parse: (e) => I.parse(e) / 100,
 	transform: (e) => I.transform(e * 100)
 }, R = {
-	test: /* @__PURE__ */ Me("hsl", "hue"),
-	parse: /* @__PURE__ */ Ne("hue", "saturation", "lightness"),
+	test: /*@__PURE__*/ Me("hsl", "hue"),
+	parse: /*@__PURE__*/ Ne("hue", "saturation", "lightness"),
 	transform: ({ hue: e, saturation: t, lightness: n, alpha: r = 1 }) => "hsla(" + Math.round(e) + ", " + I.transform(M(t)) + ", " + I.transform(M(n)) + ", " + M(j.transform(r)) + ")"
 }, z = {
 	test: (e) => N.test(e) || Le.test(e) || R.test(e),
@@ -1018,7 +1018,7 @@ function xn(e, t) {
 }
 //#endregion
 //#region node_modules/motion-dom/dist/es/utils/supports/scroll-timeline.mjs
-var Sn = /* @__PURE__ */ xn(() => window.ScrollTimeline !== void 0, "scrollTimeline"), Cn = /* @__PURE__ */ xn(() => {
+var Sn = /* @__PURE__ */ xn(() => window.ScrollTimeline !== void 0, "scrollTimeline"), Cn = /*@__PURE__*/ xn(() => {
 	try {
 		document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
 	} catch {
@@ -1031,25 +1031,25 @@ var Sn = /* @__PURE__ */ xn(() => window.ScrollTimeline !== void 0, "scrollTimel
 	easeIn: "ease-in",
 	easeOut: "ease-out",
 	easeInOut: "ease-in-out",
-	circIn: /* @__PURE__ */ wn([
+	circIn: /*@__PURE__*/ wn([
 		0,
 		.65,
 		.55,
 		1
 	]),
-	circOut: /* @__PURE__ */ wn([
+	circOut: /*@__PURE__*/ wn([
 		.55,
 		0,
 		1,
 		.45
 	]),
-	backIn: /* @__PURE__ */ wn([
+	backIn: /*@__PURE__*/ wn([
 		.31,
 		.01,
 		.66,
 		-.59
 	]),
-	backOut: /* @__PURE__ */ wn([
+	backOut: /*@__PURE__*/ wn([
 		.33,
 		1.53,
 		.69,
@@ -1240,7 +1240,7 @@ var Un = new Set([
 	"borderRightColor",
 	"borderBottomColor",
 	"borderLeftColor"
-]), Wn = /* @__PURE__ */ s(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+]), Wn = /*@__PURE__*/ s(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 function Gn(e) {
 	let { motionValue: t, name: n, repeatDelay: r, repeatType: i, damping: a, type: o, keyframes: s } = e;
 	if (!(t?.owner?.current instanceof HTMLElement)) return !1;
@@ -1887,7 +1887,7 @@ var Ir = /\b([a-z-]*)\(.*?\)/gu, Lr = {
 	WebkitFilter: Lr,
 	mask: Rr,
 	WebkitMask: Rr
-}, Hr = (e) => Vr[e], Ur = /* @__PURE__ */ new Set([Lr, Rr]);
+}, Hr = (e) => Vr[e], Ur = /*@__PURE__*/ new Set([Lr, Rr]);
 function Wr(e, t) {
 	let n = Hr(e);
 	return Ur.has(n) || (n = V), n.getAnimatableNone ? n.getAnimatableNone(t) : void 0;

package/dist/styleguide-assets/{axe-B_niXOpn.js → axe-Cd_oCzvh.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./fullpage-B4TYMCjK.js";
+import { t as e } from "./fullpage-Bu4DpBQh.js";
 //#region node_modules/axe-core/axe.js
 var t = /* @__PURE__ */ e(((e, t) => {
 	(function e(n) {