@bookklik/senangstart-css 0.2.3 → 0.2.4

package/scripts/build-dist.js

@@ -6,7 +6,7 @@
  */
 
 import * as esbuild from 'esbuild';
-import { mkdirSync, statSync } from 'fs';
+import { mkdirSync, statSync, copyFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -49,6 +49,48 @@ await esbuild.build({
 const minSize = statSync(join(distDir, 'senangstart-css.min.js')).size;
 console.log(`✓ Created senangstart-css.min.js (${(minSize / 1024).toFixed(1)} KB)`);
 
+// Build Tailwind converter - unminified
+await esbuild.build({
+  entryPoints: [join(root, 'src', 'cdn', 'tw-conversion-engine.js')],
+  bundle: true,
+  format: 'iife',
+  outfile: join(distDir, 'senangstart-tw.js'),
+  minify: false,
+  banner: {
+    js: '/* SenangStart CSS - Tailwind Converter v0.2.0 | MIT License */'
+  }
+});
+
+const twUnminSize = statSync(join(distDir, 'senangstart-tw.js')).size;
+console.log(`✓ Created senangstart-tw.js (${(twUnminSize / 1024).toFixed(1)} KB)`);
+
+// Build Tailwind converter - minified
+await esbuild.build({
+  entryPoints: [join(root, 'src', 'cdn', 'tw-conversion-engine.js')],
+  bundle: true,
+  format: 'iife',
+  outfile: join(distDir, 'senangstart-tw.min.js'),
+  minify: true,
+  banner: {
+    js: '/* SenangStart TW v0.2.0 | MIT */'
+  }
+});
+
+const twMinSize = statSync(join(distDir, 'senangstart-tw.min.js')).size;
+console.log(`✓ Created senangstart-tw.min.js (${(twMinSize / 1024).toFixed(1)} KB)`);
+
+// Copy to docs/public/assets for VitePress
+const docsAssetsDir = join(root, 'docs', 'public', 'assets');
+mkdirSync(docsAssetsDir, { recursive: true });
+copyFileSync(
+  join(distDir, 'senangstart-css.min.js'),
+  join(docsAssetsDir, 'senangstart-css.min.js')
+);
+console.log(`✓ Copied to docs/public/assets/senangstart-css.min.js`);
+
 console.log('\n📦 Dist build complete!');
 console.log('   dist/senangstart-css.js');
 console.log('   dist/senangstart-css.min.js');
+console.log('   dist/senangstart-tw.js');
+console.log('   dist/senangstart-tw.min.js');
+

package/scripts/convert-tailwind.js

@@ -583,6 +583,30 @@ function convertClass(twClass, options = {}) {
     return { category: 'visual', value: prefix + "opacity:" + opacityMatch[1] };
   }
 
+  // Gradient direction (bg-gradient-to-*)
+  const bgGradientMatch = baseClass.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);
+  if (bgGradientMatch) {
+    return { category: 'visual', value: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+  }
+
+  // Gradient from-* (starting color)
+  const fromMatch = baseClass.match(/^from-(.+)$/);
+  if (fromMatch) {
+    return { category: 'visual', value: prefix + "from:" + fromMatch[1] };
+  }
+
+  // Gradient via-* (middle color)
+  const viaMatch = baseClass.match(/^via-(.+)$/);
+  if (viaMatch) {
+    return { category: 'visual', value: prefix + "via:" + viaMatch[1] };
+  }
+
+  // Gradient to-* (ending color) - Note: must come after bg-gradient-to-*
+  const toMatch = baseClass.match(/^to-(.+)$/);
+  if (toMatch) {
+    return { category: 'visual', value: prefix + "to:" + toMatch[1] };
+  }
+
   return null;
 }
 

package/src/cdn/jit.js

@@ -25,6 +25,9 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
     theme: {
       spacing: {
         'none':   '0px',
+        'thin':   '1px', 
+        'regular': '2px',
+        'thick':  '3px', 
         'tiny':   '4px',
         'small':  '8px',
         'medium': '16px',
@@ -1658,6 +1661,22 @@ img, video {
         return `background-image: ${cssValue};`;
       },
       
+      // ============================================
+      // GRADIENT COLOR STOPS
+      // ============================================
+      'from': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-from: ${color}; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`;
+      },
+      'via': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-via: ${color}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);`;
+      },
+      'to': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-to: ${color};`;
+      },
+      
       // ============================================
       // BACKDROP FILTER UTILITIES
       // ============================================

package/src/cdn/tw-conversion-engine.js

@@ -0,0 +1,497 @@
+/**
+ * SenangStart CSS - Tailwind to SenangStart Conversion Engine
+ * Converts Tailwind CSS class syntax to SenangStart CSS attribute syntax
+ */
+
+// ============================
+// MAPPING SCALES
+// ============================
+
+const spacingScale = {
+  0: "none",
+  px: "[1px]",
+  0.5: "tiny",
+  1: "tiny",
+  1.5: "tiny",
+  2: "tiny",
+  2.5: "small",
+  3: "small",
+  3.5: "small",
+  4: "small",
+  5: "medium",
+  6: "medium",
+  7: "medium",
+  8: "big",
+  9: "big",
+  10: "big",
+  11: "big",
+  12: "giant",
+  14: "giant",
+  16: "giant",
+  20: "vast",
+  24: "vast",
+  28: "vast",
+  32: "vast",
+  36: "vast",
+  40: "vast",
+  44: "vast",
+  48: "vast",
+  52: "vast",
+  56: "vast",
+  60: "vast",
+  64: "vast",
+  72: "vast",
+  80: "vast",
+  96: "vast",
+  full: "[100%]",
+  screen: "[100vw]",
+  auto: "auto",
+};
+
+const radiusScale = {
+  none: "none",
+  sm: "small",
+  "": "small",
+  md: "medium",
+  lg: "medium",
+  xl: "big",
+  "2xl": "big",
+  "3xl": "big",
+  full: "round",
+};
+
+const shadowScale = {
+  sm: "small",
+  "": "small",
+  md: "medium",
+  lg: "big",
+  xl: "giant",
+  "2xl": "giant",
+  none: "none",
+};
+
+const fontSizeScale = {
+  xs: "mini",      // 0.75rem
+  sm: "small",     // 0.875rem
+  base: "base",    // 1rem
+  lg: "large",     // 1.125rem
+  xl: "big",       // 1.25rem
+  "2xl": "huge",   // 1.5rem
+  "3xl": "grand",  // 1.875rem
+  "4xl": "giant",  // 2.25rem
+  "5xl": "mount",  // 3rem
+  "6xl": "mega",   // 3.75rem
+  "7xl": "giga",   // 4.5rem
+  "8xl": "tera",   // 6rem
+  "9xl": "hero",   // 8rem
+};
+
+const layoutMappings = {
+  container: "container",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid",
+  "inline-grid": "inline-grid",
+  block: "block",
+  "inline-block": "inline",
+  hidden: "hidden",
+  "flex-row": "row",
+  "flex-col": "col",
+  "flex-row-reverse": "row-reverse",
+  "flex-col-reverse": "col-reverse",
+  "flex-wrap": "wrap",
+  "flex-nowrap": "nowrap",
+  "flex-wrap-reverse": "wrap-reverse",
+  "flex-grow": "grow",
+  "flex-grow-0": "grow-0",
+  grow: "grow",
+  "grow-0": "grow-0",
+  "flex-shrink": "shrink",
+  "flex-shrink-0": "shrink-0",
+  shrink: "shrink",
+  "shrink-0": "shrink-0",
+  "flex-1": "flex:1",
+  "flex-auto": "flex:auto",
+  "flex-initial": "flex:initial",
+  "flex-none": "flex:none",
+  "justify-start": "justify:start",
+  "justify-end": "justify:end",
+  "justify-center": "justify:center",
+  "justify-between": "justify:between",
+  "justify-around": "justify:around",
+  "justify-evenly": "justify:evenly",
+  "items-start": "items:start",
+  "items-end": "items:end",
+  "items-center": "items:center",
+  "items-baseline": "items:baseline",
+  "items-stretch": "items:stretch",
+  "self-auto": "self:auto",
+  "self-start": "self:start",
+  "self-end": "self:end",
+  "self-center": "self:center",
+  "self-stretch": "self:stretch",
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky",
+  static: "static",
+  "overflow-auto": "overflow:auto",
+  "overflow-hidden": "overflow:hidden",
+  "overflow-visible": "overflow:visible",
+  "overflow-scroll": "overflow:scroll",
+  "object-contain": "object:contain",
+  "object-cover": "object:cover",
+  "object-fill": "object:fill",
+  "object-none": "object:none",
+  "object-scale-down": "object:scale-down",
+};
+
+const visualKeywords = {
+  italic: "italic",
+  "not-italic": "not-italic",
+  antialiased: "antialiased",
+  uppercase: "uppercase",
+  lowercase: "lowercase",
+  capitalize: "capitalize",
+  "normal-case": "normal-case",
+  underline: "underline",
+  "line-through": "line-through",
+  "no-underline": "no-underline",
+  truncate: "truncate",
+  "cursor-pointer": "cursor:pointer",
+  "cursor-default": "cursor:default",
+  "cursor-not-allowed": "cursor:not-allowed",
+  "select-none": "select:none",
+  "select-text": "select:text",
+  "select-all": "select:all",
+};
+
+// ============================
+// HELPER FUNCTIONS
+// ============================
+
+function getSpacing(value, exact) {
+  if (exact) {
+    if (["full", "screen", "auto"].includes(value))
+      return spacingScale[value] || `[${value}]`;
+    return `tw-${value}`;
+  }
+  return spacingScale[value] || `[${value}]`;
+}
+
+// ============================
+// CONVERSION FUNCTIONS
+// ============================
+
+function convertClass(twClass, exact) {
+  // Handle prefixes (hover:, sm:, md:, etc.)
+  const prefixMatch = twClass.match(
+    /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|active:|disabled:|dark:)(.+)$/
+  );
+  let prefix = "",
+    baseClass = twClass;
+  if (prefixMatch) {
+    const rawPrefix = prefixMatch[1].slice(0, -1); // remove colon
+    if (['sm', 'md', 'lg', 'xl', '2xl'].includes(rawPrefix)) {
+      prefix = `tw-${rawPrefix}:`;
+    } else {
+      prefix = prefixMatch[1];
+    }
+    baseClass = prefixMatch[2];
+  }
+
+  // Layout mappings
+  if (layoutMappings[baseClass])
+    return { cat: "layout", val: prefix + layoutMappings[baseClass] };
+
+  // Visual keywords
+  if (visualKeywords[baseClass])
+    return { cat: "visual", val: prefix + visualKeywords[baseClass] };
+
+  // Text color
+  const textColorMatch = baseClass.match(
+    /^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+  );
+  if (textColorMatch)
+    return { cat: "visual", val: prefix + "text:" + textColorMatch[1] };
+
+  // Text alignment
+  if (
+    ["text-left", "text-center", "text-right", "text-justify"].includes(
+      baseClass
+    )
+  )
+    return {
+      cat: "visual",
+      val: prefix + "text:" + baseClass.replace("text-", ""),
+    };
+
+  // Text size
+  const textSizeMatch = baseClass.match(
+    /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
+  );
+  if (textSizeMatch) {
+    const size = exact
+      ? `tw-${textSizeMatch[1]}`
+      : fontSizeScale[textSizeMatch[1]] || textSizeMatch[1];
+    return { cat: "visual", val: prefix + "text-size:" + size };
+  }
+
+  // Background color
+  const bgMatch = baseClass.match(
+    /^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+  );
+  if (bgMatch) return { cat: "visual", val: prefix + "bg:" + bgMatch[1] };
+
+  // Border color
+  const borderColorMatch = baseClass.match(
+    /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+  );
+  if (borderColorMatch)
+    return {
+      cat: "visual",
+      val: prefix + "border:" + borderColorMatch[1],
+    };
+
+  // Padding
+  const paddingMatch = baseClass.match(/^p([trblxy])?-(.+)$/);
+  if (paddingMatch) {
+    const side = paddingMatch[1] ? "-" + paddingMatch[1] : "";
+    return {
+      cat: "space",
+      val: prefix + "p" + side + ":" + getSpacing(paddingMatch[2], exact),
+    };
+  }
+
+  // Margin
+  const marginMatch = baseClass.match(
+    /^-?m([trblxy])?-(\d+\.?\d*|px|auto|full|screen)$/
+  );
+  if (marginMatch) {
+    const isNeg = baseClass.startsWith("-");
+    const side = marginMatch[1] ? "-" + marginMatch[1] : "";
+    let val = getSpacing(marginMatch[2], exact);
+    if (isNeg) val = "[-" + val + "]";
+    return { cat: "space", val: prefix + "m" + side + ":" + val };
+  }
+
+  // Gap
+  const gapMatch = baseClass.match(/^gap-([xy])?-?(.+)$/);
+  if (gapMatch) {
+    const axis = gapMatch[1] ? "-" + gapMatch[1] : "";
+    return {
+      cat: "space",
+      val: prefix + "g" + axis + ":" + getSpacing(gapMatch[2], exact),
+    };
+  }
+
+  // Width/Height with special values
+  const widthMatch = baseClass.match(/^(min-w|max-w|w)-(.+)$/);
+  if (widthMatch) {
+    const prop = widthMatch[1];
+    const rawVal = widthMatch[2];
+    // Special width values
+    const specialWidthVals = { 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]', 'prose': '[65ch]' };
+    const val = specialWidthVals[rawVal] || getSpacing(rawVal, exact);
+    return { cat: "space", val: prefix + prop + ":" + val };
+  }
+  const heightMatch = baseClass.match(/^(min-h|max-h|h)-(.+)$/);
+  if (heightMatch) {
+    const prop = heightMatch[1];
+    const rawVal = heightMatch[2];
+    const specialHeightVals = { 'screen': '[100vh]', 'svh': '[100svh]', 'lvh': '[100lvh]', 'dvh': '[100dvh]', 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]' };
+    const val = specialHeightVals[rawVal] || getSpacing(rawVal, exact);
+    return { cat: "space", val: prefix + prop + ":" + val };
+  }
+
+  // Border radius
+  const roundedMatch = baseClass.match(/^rounded(?:-(.+))?$/);
+  if (roundedMatch) {
+    const size = roundedMatch[1] || "";
+    const scale = exact
+      ? size === ""
+        ? "tw-DEFAULT"
+        : `tw-${size}`
+      : radiusScale[size] || "medium";
+    return { cat: "visual", val: prefix + "rounded:" + scale };
+  }
+
+  // Shadow
+  const shadowMatch = baseClass.match(/^shadow(?:-(.+))?$/);
+  if (shadowMatch) {
+    const size = shadowMatch[1] || "";
+    const scale = exact
+      ? size === ""
+        ? "tw-DEFAULT"
+        : `tw-${size}`
+      : shadowScale[size] || "medium";
+    return { cat: "visual", val: prefix + "shadow:" + scale };
+  }
+
+  // Font weight
+  const fontWeightMatch = baseClass.match(
+    /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/
+  );
+  if (fontWeightMatch)
+    return { cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] };
+
+  // Border width
+  const borderWidthMatch = baseClass.match(
+    /^border(?:-([trblxy]))?(?:-(\d+))?$/
+  );
+  if (
+    borderWidthMatch &&
+    (borderWidthMatch[2] ||
+      (!borderWidthMatch[1] && baseClass === "border"))
+  ) {
+    const side = borderWidthMatch[1]
+      ? "-" + borderWidthMatch[1] + "-w"
+      : "-w";
+    const width = borderWidthMatch[2] || "1";
+    return {
+      cat: "visual",
+      val: prefix + "border" + side + ":[" + width + "px]",
+    };
+  }
+
+  // Order
+  const orderMatch = baseClass.match(/^order-(\d+|first|last|none)$/);
+  if (orderMatch) {
+    return { cat: "layout", val: prefix + "order:" + orderMatch[1] };
+  }
+
+  // Grid columns
+  const gridColsMatch = baseClass.match(/^grid-cols-(\d+|none)$/);
+  if (gridColsMatch) {
+    return { cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] };
+  }
+
+  // Column span
+  const colSpanMatch = baseClass.match(/^col-span-(\d+|full)$/);
+  if (colSpanMatch) {
+    return { cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] };
+  }
+
+  // Grid rows
+  const gridRowsMatch = baseClass.match(/^grid-rows-(\d+|none)$/);
+  if (gridRowsMatch) {
+    return { cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] };
+  }
+
+  // Row span
+  const rowSpanMatch = baseClass.match(/^row-span-(\d+|full)$/);
+  if (rowSpanMatch) {
+    return { cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] };
+  }
+
+  // Opacity
+  const opacityMatch = baseClass.match(/^opacity-(\d+)$/);
+  if (opacityMatch) {
+    return { cat: "visual", val: prefix + "opacity:" + opacityMatch[1] };
+  }
+
+  // Gradient direction (bg-gradient-to-*)
+  const bgGradientMatch = baseClass.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);
+  if (bgGradientMatch) {
+    return { cat: "visual", val: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+  }
+
+  // Gradient from-* (starting color)
+  const fromMatch = baseClass.match(/^from-(.+)$/);
+  if (fromMatch) {
+    return { cat: "visual", val: prefix + "from:" + fromMatch[1] };
+  }
+
+  // Gradient via-* (middle color)
+  const viaMatch = baseClass.match(/^via-(.+)$/);
+  if (viaMatch) {
+    return { cat: "visual", val: prefix + "via:" + viaMatch[1] };
+  }
+
+  // Gradient to-* (ending color) - Note: must come after bg-gradient-to-*
+  const toMatch = baseClass.match(/^to-(.+)$/);
+  if (toMatch) {
+    return { cat: "visual", val: prefix + "to:" + toMatch[1] };
+  }
+
+  return null;
+}
+
+function convertClasses(classString, exact) {
+  const classes = classString
+    .trim()
+    .split(/\s+/)
+    .filter((c) => c);
+  const layout = [],
+    space = [],
+    visual = [],
+    unknown = [];
+
+  for (const cls of classes) {
+    const result = convertClass(cls, exact);
+    if (result) {
+      if (result.cat === "layout") layout.push(result.val);
+      else if (result.cat === "space") space.push(result.val);
+      else if (result.cat === "visual") visual.push(result.val);
+    } else {
+      unknown.push(cls);
+    }
+  }
+
+  return { layout, space, visual, unknown };
+}
+
+function convertHTML(html, exact) {
+  return html.replace(
+    /class=(['"])([^"']+)\1/g,
+    (match, quote, classValue) => {
+      const { layout, space, visual, unknown } = convertClasses(
+        classValue,
+        exact
+      );
+      const attrs = [];
+      if (layout.length) attrs.push(`layout="${layout.join(" ")}"`);
+      if (space.length) attrs.push(`space="${space.join(" ")}"`);
+      if (visual.length) attrs.push(`visual="${visual.join(" ")}"`);
+      if (unknown.length) attrs.push(`class="${unknown.join(" ")}"`);
+      return attrs.join(" ") || 'class=""';
+    }
+  );
+}
+
+// ============================
+// EXPORTS
+// ============================
+
+// Export for browser (IIFE global)
+if (typeof window !== 'undefined') {
+  window.SenangStartTW = {
+    convertClass,
+    convertClasses,
+    convertHTML,
+    // Expose scales for customization
+    scales: {
+      spacing: spacingScale,
+      radius: radiusScale,
+      shadow: shadowScale,
+      fontSize: fontSizeScale,
+    },
+    mappings: {
+      layout: layoutMappings,
+      visual: visualKeywords,
+    },
+  };
+}
+
+// Export for ES modules
+export {
+  convertClass,
+  convertClasses,
+  convertHTML,
+  spacingScale,
+  radiusScale,
+  shadowScale,
+  fontSizeScale,
+  layoutMappings,
+  visualKeywords,
+};

package/src/definitions/layout-positioning.js

@@ -33,7 +33,7 @@ export const position = {
       descriptionMs: 'Elemen diletakkan relatif kepada aliran normal',
       html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
-  <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
 </div>`,
       highlightValue: 'relative'
     },
@@ -43,7 +43,7 @@ export const position = {
       description: 'Element sticks when scrolling past it',
       descriptionMs: 'Elemen melekat apabila skrol melepasi',
       html: `<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+  <span layout="sticky top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
 </div>`,
       highlightValue: 'sticky'
     }
@@ -133,10 +133,10 @@ export const zIndex = {
       description: 'Control stacking order of positioned elements',
       descriptionMs: 'Kawal susunan tindanan elemen yang diletakkan',
       html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <span layout="absolute z:base" style="left: 0; top: 10px;" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
-  <span layout="absolute z:low" style="left: 30px; top: 20px;" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
-  <span layout="absolute z:mid" style="left: 60px; top: 30px;" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
-  <span layout="absolute z:high" style="left: 90px; top: 40px;" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
+  <span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
+  <span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
+  <span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
+  <span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
 </div>`,
       highlightValue: 'z:high'
     }